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

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

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

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

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

Все файлы 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. Размер изображений

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

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

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

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

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

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

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

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

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

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

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

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