Как увеличить скорость загрузки сайта

· Блог и Другое · 3 мин чтения

Если у вас есть свой сайт или вы планируете его создать, то скорее всего вам пришлось или еще придется задумать о скорости его загрузки. В этом записи пойдет речь именно об этом.

В наше время, скорость загрузки сайта — является очень важным компонентом успешности. Тем более если ваш бизнес или деятельность связана с общением с клиентами/читателями через сайт.Чем быстрее грузится ваш сайт — тем приятнее будет находиться на нем.

Люди не любят ждать, они хотят все и сразу и тут нельзя с ними спорить — в интернете немного другие «законы». Если вы не дадите то чего они хотят, они к вам больше никогда не зайдут.

Если вы задаетесь вопросом: «Как увеличить скорость загрузки сайта», то вы попали по адресу. В этой записи я все подробно расскажу по этому топику. Ниже я расписал топ 5 решений для увеличения загрузки сайта.

1. Минимизировать JS/CSS файлы

GRUNT - task automation

Все файлы JS и CSS лучше всего минимизировать, то есть убрать лишние пробелы/отступы. Если вы будите делать это все вручную, то у вас уйдет очень много времени. К счастью, есть GRUNT, который вам сможет посодействовать в этом. Он представляет из себя скрипт, который позволяет автоматизировать выполнение некоторых задач (например минимизировать JS или CSS файлы). Для того, чтобы работать с GRUNT, вам нужно установить NodeJS. После его установки, следуйте основной документации GRUNT (подробно о установке можно почитать здесь) — там все очень просто.

Изначально GRUNT был написан только для JS файлов, после чего было дописано огромное количество дополнений, что собственно  и позволяет теперь работать с CSS/SASS/LESS и тд. файлами.

2. JS в конец сайта

Все JS файлы/библиотеки должны быть подключены в самом низу страницы, то есть перед закрывающимся тегом </body>. Почему именно так? Потому что каждый из JS файлов берет некоторое время для загрузки страницы и если вы поместите их в <head>, как например CSS, то все они будут подгружаться перед тем как загрузится страницы, а нам этого не нужно, мы же гонимся за скоростью.

3. CSS в голову документа

Лучше всего поместить все CSS файлы в голову документа, то есть между <head></head> тегами. Это даст возможность вашему сайту загрузить все стили и после чего уже отобразить саму структуру. Так как известно, сайты начинают грузиться с верху вниз, поэтому все что будет находиться вверху будет подгружено самым первым.

4. Размер изображений

Как увеличить скорость загрузки сайта с tinypng

Скорость загрузки страницы сайта так же зависит от изображений, который на нем находятся. Если на сайте присутсграфики, которая сама по себе по 2-3 МБ, то сайт будет очень медленно подгружаться. Чтобы этого избежать можно воспользоваться сервисом по сжатию картинок — tinyPNG, который поможет вам уменьшить размер картинки, при этом ее качество не измениться — в это и есть огромный плюс этого сервиса.

Если вы подумываете о том, что вам надоест постоянно загружать фотографии вручную, то у них есть API для разработчиков, которое позволяет уменьшать размер фотографий в автоматическом режиме.

PS. Если вы боитесь, что прозрачность PNG потеряется при изменении размера картинки, то вы ошибаетесь — все останется как есть.

5. Уменьшить HTTP запросы

Как уменьшить HTTP запросы

Что это? На простом языке — это все скрипты, фотографии, стили и тд который подгружаются к сайту как только пользователь на него зашел.

Как уменьшить количество запросов?

Есть несколько вариантов.

  1. Создать CSS спрайты из изображений, который используются на сайте. Например иконки, мини картинки и тд. Пример спрайта можно увидеть по этой ссылке. А используются эти спрайты как обычные картинки, единственное что меняется это координаты для получения нужный части картинки для получения более маленькой.
  2. Совместить файлы воедино. Например у вас три CSS файла и два JS. Чтобы ускорить работу сайта, вы можете просто совместить три CSS файла в один и теперь уже будет только один запрос и тоже самое сделать с JS.

Источники которые пригодятся

Google PageSpeed

Во время того как вы будите выполнять выше описанные советы, вам нужно будет тестировать сайт на скорость загрузки. Я больше всего использую Google PageSpeed, но так же есть и другие, вот некоторые из сервисов:

Интересные факты

  • Около 85% пользователей мобильных устройств думают, что сайт должен грузиться так же быстро как и на компьютере. Это дает мысль о том, что нельзя забывать о мобильной версии вашего сайта.
  • Чем быстрее ваш сайт будет грузиться — тем больше шансов увеличить конверсию сайта.

Послесловие

На этом все. Если у вас остались какие-либо вопросы, то пишите их ниже под этой записью — я буду рад вам помочь.

Комментарии