Как оптимизировать сайт и повысить скорость загрузки в несколько раз?

Главная . Блог . Как оптимизировать сайт

19.10.2017 . Web-разработка

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

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

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

Приемлемый размер картинки на страницу примерно 400-800кб, если у вас чуть больше – не страшно, если больше 1 мегабайта, советую поработать с ней, сжать, уменьшить, или сменить формат.

Важно не просто «сжать» картинки, важно перевести каждый файл в более подходящий для неё формат. Например если сравнивать JPEG с PNG разница колоссальна, картинки с одинаковым разрешением, и качеством имеют разницу в весе практически в 4 раза!

Конечно, вы жертвуете качеством изображений, но важно ли это качество если ваши посетители не могут просто загрузить ваш сайт?

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

Второе на что больше всего влияет скорость загрузки сайта – количество подключаемых файлов (CSS, JS и т.д.) и самое распространенное их расположение. Почему? – спросите вы, а я отвечу. Каждый файл создает подключение к хосту, каждый раз когда пользователь заходит к вам на сайт, его браузер сначала делает подключение к хосту, получает первичные данные потом начинает грузится сам исходный код html страницы.

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

И так каждый раз, когда заходит на ваш сайт, и его кэш «устаревает». Еще к этому, большинство стилей и скриптов в последнее время весят очень не мало, иногда по >400кб. А это трафик, и он очень важен.
Чтобы как-то привести все это в порядок, стоит соблюсти несколько простых правил:
Стили в шапке – скрипты в подвале
Подключайте только «минимизированные» файлы
Шрифты загрузите на хостинг, и подключите в вашем основном CSS.
Объединяйте файлы между собой, сокращайте их количество.
Метрику и аналитику — вместе со скриптами, размещайте только в подвале!
Включите сжатие и кэширование на стороне сервера.
Первое что необходимо сделать, это разделить скрипты и стили, и почистить вашего сайта. Скрипты требуют не мало ресурсов для их обработки, поэтому пусть они грузятся в последнюю очередь. Если вы не понимаете как порядок файлов может влиять на загрузку сайта, советую ознакомится с этой страницей в википедии.

Google рекомендует держать даже стили в подвале сайта, а в шапке оставить лишь тег с основными стилями необходимыми для отображения первого экрана вашего сайта. Это не плохо и не правильно, у этого метода много нюансов. Предлагаю вам самим протестировать это. Сразу могу сказать — я не пользуюсь этим способом и вам не советую.

Второе и третье – это «минимизированные» и объединенные файлы. В этом нет ничего страшного, просто обрабатывайте ваши стили и скрипты через специальные сервисы, они очистят код от лишних пробелов, комментариев и тем самым уменьшат размер подключаемого файла.
Из-за этого файлы выглядят как каша из символов или вовсе написаны в одну строчку.

Объединение файлов необходимо чтобы сократить количество подключений клиента к хосту. Рекомендую изучить «комбинирование» файлов и настроить это у себя на сайте.

Подробно описывать принципы работы сжатия я не буду, но в вкратце расскажу что размер страницы после данного процесса уменьшается примерно на 40%. Если у вас оно не включено (это можно проверить специальными онлайн сервисами), их желательно-бы включить и настроить.

Давайте рассмотрим активацию сжатия на сервере apache с помощью добавления специальных строк кода в .htaccess, вашего сайта.

Этот небольшой кусок кода активирует модуль deflate, тут сразу указаны все популярные типы файлов, которые необходимо сжать, поэтому смело можете вставлять их к себе на сайт. И все будет работать без проблем.

AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript

Это активация gzip модуля, позволяющий сжимать отдельные форматы файлов, которые вы в нем укажите. В данном примере я сразу вписал сжатие всех популярных типов файла.

mod_gzip_on Yes mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_include mime ^application/x-font-.*
mod_gzip_item_include mime ^application/font-.*
mod_gzip_item_include mime ^application/vnd.ms-fontobject.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

Сразу отвечу на вопрос «можно ли их использовать вместе?» – можно, ничего страшного не случится. Лично я рекомендую использовать всего-лишь mod_deflate, т.к. он новее и лучше сжимает, mod_gzip достаточно устаревший модуль, думаю от него вообще стоит скоро отказаться.

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

Кеширование построено на очень простом принципе, человек первый раз заходит на сайт, прогружает к себе в локальную память подключаемые файлы, или даже всю страницу, и дальше если он будет «ходить» по сайту, и там будут встречаться все те-же файлы, его браузер просто не будет их закачивать заново, т.к. они уже есть у него в памяти. Важно то, что эти файлы могут хранится там днями, или даже месяцами.

Есть много способов активации кэширования сайта, но самый верный это включить его на стороне сервера.

Давайте это сделаем на сервере apache путем добавления специальных строчек кода в файл .htaccess. Достаточно добавить эти строчки кода в конец вашего файла, и проверить работоспособность.

Header set Cache-Control "public"
Header set Expires "Fri, 21 Dec 2020 20:00:00 GMT"

Здесь мы активируем кэширование картинок, стилей и картинок(вы можете сами дополнить ряд типов файлов, которые необходимо кешировать), и указываем браузеру хранить данные файлы в памяти до 2020 года.

Прошу заметить, если у вас сайт это какой-нибудь блог, то лучше не включать кеширование страниц, т.к. если у вас выйдет новая статья, из-за старой сохраненной страницы в памяти пользователя, он просто не сможет её увидеть. Если у вас сайт со статичной информацией, которая обновляется достаточно редко, можете включить кеширование «всего и вся», и наслаждаться скоростью сайта)

Даже после всех описанных мною способов оптимизации ваш сайт все-равно долго грузится и не торопится отобразить контент?

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

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

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

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

Нужен сайт
на OctoberCMS?

Ознакомьтесь с условиями разработки