Всё чаще и чаще к нам обращаются по вопросам оптимизации скорости загрузки сайта, но число тех, кто не понимает, что же такого важного в быстрой загрузке, так же возрастает. А может быть вам просто хочется внедрить оптимизацию самостоятельно? Для всех-всех-всех мы и подготовили этот материал. Поехали!
Что происходит при загрузке страницы?
Для понимания вопроса оптимизации скорости сайта, важно понимать, как вообще происходит взаимодействие на уровне «Пользователь-Сайт-Сервер», чтобы чётко разграничивать те области, которые стоит улучшать.
На базовом уровне, схему можно обрисовать так:
- Пользователь вводит адрес сайта/переходит по URL-адресу в браузере
- Браузер пытается узнать, есть ли такой сайт, осуществляя DNS-запрос
- Если ответ положителен, то устанавливается соединение с удаленным сервером, где находится сайт, через http(s)-протокол
- После ответа сервера, начинается парсинг HTML-код страницы и подгрузка внешних ресурсов (обычно, это css-стили и javascript)
- В итоге, происходит рендеринг всего того, что было загружено в единую страницу
- В последнюю очередь происходит исполнение js-скриптов, после чего страницы считается загруженной
То, что происходит с первого по третий шаг, можно оптимизировать, произведя коррективы в настройках сервера, а с четвертого по шестой шаги — в технической составляющей самого сайта.
Мой сайт тормозит, а где — не знаю
Да, теперь мы знаем, как происходит соединение и загрузка контента сайта браузером. Но без определения «области торможения» невозможно двигаться дальше.
Существует множество сервисов и способов определения скорости загрузки, но мы рассмотрим самые популярные — это наше решение WD SpeedCheck, Google PageSpeed Insights и Lighthouse. Кратко рассмотрим, как пользоваться каждым конкретным инструментом.
WD SpeedCheck
Мы в Webdivision разработали новое решение на основе технологий Pagespeed, позволяющее быстро получить усредненную оценку скорости сайта, а так же указать владельцу на те области сайта, которые нуждаются в доработке. Данные не сильно детализированы, т.к. инструмент направлен, в первую очередь, на обычных пользователей, не являющихся IT-специалистами.
Введите домен вашего сайта (с http/https протоколом ниже и проверьте результаты.
PageSpeed Insights
Суть его работы проста — вы просто вводите адрес сайта и сервис анализирует все его параметры, влияющие на скорость загрузки, оценку которых он и показывает в итоге.
В списке критериев оценки можно увидеть как серверную часть (время до первого байта, время до формирования видимого контента), так и клиентскую часть (скорость загрузки ресурсов и т.п.).
Lighthouse
Знающие пользователи заметят, что Lighthouse и PageSpeed — это, по факту, одно и тоже. И будут правы! Но есть важное различие. PageSpeed — это сервис, все замеры он проводит в некоторых «стерильных» условиях, выдавая усредненный результат. А Lighthouse запускается прямо из браузера, соответственно на результат будет влиять скорость и стабильность вашего интернет-соединения. Для запуска, просто зайдите в консоль разработчика (f12), перейдите во вкладку «Аудиты» и запустите инструмент кнопкой «Сгенерировать отчёт». Результат представлен в аналогичном PageSpeed формате.
А теперь поговорим о шагах оптимизации. Для лучшей структуризации информации, было решено разделить её на 3 блока. Начнём с генерации контента.
Генерация контента
Ускорение сервера
Оставим сложные настройки, специфичные для каждого серверного сетапа — как быстро и эффективно улучшить работу сервера? Зачастую, быстрым и правильным решением будет уход от shared-хостинга к VPS-серверу. Разница заключается в том, что shared-хостинг всегда дешевле и подразумевает размещение около 100+ сайтов на одной виртуальной машине — сами понимаете, что мощностей на быструю работу каждого сайта у такого решения просто нет.
VPS-сервер — это выделенный виртуальный сервер только под ваш сайт. По сути, у вас будет полноценная виртуальная машина, которую при необходимости можно настроить как душе угодно. Но нам важна скорость и в этом плане она будет в разы быстрее.
NGINX, MemCache и т.п.
Для интернет-магазинов и крупных сайтов с посещаемостью, превышающей 400-500 посетителей в сутки, не лишним будет рассмотреть интеграцию современных технологичных решений, которые заметно оптимизируют скорость отдачи контента сервером. Настройка подобных решений индивидуальна, а актуальность использования определяется в каждом конкретном случае.
Оптимизация программного кода
При анализе ситуации со скоростью загрузки, многие специалисты не учитывают фактор некачественного кода. Например, для создания лендинга был выбран «тяжелый» 1С Битрикс. Или при написании кода вывода товаров в категории используются сложные конструкции, имеющие много ненужных запросов к базе данных и вызывающие избыточные массивы данных. Звучит сложно, но плохо написанный код часто является основной причиной долгой отдачи сервером контента.
Для идентификации проблемы однозначно стоит обращаться к квалифицированным специалистам, т.к. анализ должен осуществлять специалист, как минимум отлично разбирающийся в PHP и SQL.
Загрузка содержимого
CDN и DNS-prefetch
Популярный и эффективный метод отдачи ресурсов пользователю — их размещение на CDN (content delivery network). Суть здесь проста: сеть представляет из себя набор серверов, расположенных в разных странах и городах, и когда происходит заход пользователем на ваш сайт, сервер, опираясь на местоположение пользователя, выберет ближайший к нему сервер и «отдаст» через него ресурсы, тем самым серьёзно сокращая время ожидания до начала загрузки.
DNS-prefetch — одна из технологий, наряду с существующими preload и prebrowsing, оптимизирующих подгрузку внешних ресурсов. Но не путайте её с CDN — DNS-prefetch позволяет значительно сократить время до загрузки первого байта (TTFB) всех внешних ресурсных элементов. Проще говоря, во время загрузки страницы, парсер браузера видит внешнюю ссылку, например, на Яндекс.Метрику, и пытается её загрузить — происходит DNS-запрос, проходит время до ответа и только после успешного ответа начинается загрузка js-скрипта счётчика. Prefetch сразу «скажет» браузеру, в самом начале загрузки, что понадобится такой-то внешний скрипт, DNS-запрос на который браузер осуществит в фоновом режиме, в момент клика по ссылке.
Внедрить DNS-prefetch просто как на серверной части, так и прямо в коде страниц. Мы покажем второй вариант. Сначала включим технологию, разместив код внутри тега
:А затем укажем, на какой ресурс нужно обратить внимание браузеру, сразу за кодом выше:
Кэширование содержимого на стороне браузера
Какой смысл браузеру каждый раз загружать одно и тоже, верно? Проще «сказать» ему, что определенный контент можно просто сохранить у себя, чтобы не загружать его при последующих загрузках. Делается это в файле .htaccess:
<ifModule mod_headers.c>
#кэшировать html и htm файлы на один день
<FilesMatch "\.(html|htm)$">
Header set Cache-Control "max-age=43200"
</FilesMatch>
#кэшировать css, javascript и текстовые файлы на одну неделю
<FilesMatch "\.(js|css|txt)$">
Header set Cache-Control "max-age=99999604800"
</FilesMatch>
#кэшировать флэш и изображения на месяц
<FilesMatch "\.(flv|swf|ico|gif|jpg|jpeg|png)$">
Header set Cache-Control "max-age=999992592000"
</FilesMatch>
#отключить кэширование
<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
Header unset Cache-Control
</FilesMatch>
</IfModule>
<ifModule mod_expires.c>
# Add correct content-type for fonts
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg
ExpiresActive On
#по умолчанию кеш в 1 год
ExpiresDefault "access plus 1 year"
#кэшировать флэш и изображения на месяц
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType application/x-shockwave-flash "access plus 1 year"
#кэшировать css, javascript и текстовые файлы на одну неделю
ExpiresByType text/css "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType application/x-javascript "access plus 1 year"
#кэшировать html и htm файлы на один день
ExpiresByType text/html "access plus 43200 seconds"
#кэшировать xml файлы на десять минут
ExpiresByType application/xhtml+xml "access plus 600 seconds"
#кэшировать шрифты
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
</ifModule>
Gzip сжатие
При помощи подобной оптимизации, все файлы, отдаваемые сайтом, автоматически помещаются в архив и сжимаются, отдаваясь в таком виде браузеру. В свою очередь, браузер просто распаковывает архив и генерирует контент.
Для включения подобного функционала, разместите код в файле .htaccess, в самом низу:
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include mime ^text\.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image\.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>
Оптимизация и минификация скриптов и стилей
Качество кода — важный параметр, ведь одну и ту же задачу можно решить кратко и эффективно, а можно сложно и длинно. Если вы не уверенны в качестве кода, то обратитесь к профессионалам, которые смогут оценить и, при необходимости, сократить код.
Стоит так же объединять стилевые и скриптовые файлы, т.к. это сокращает число запросов при загрузке страницы.
Есть ещё один подход к уменьшению размера файлов, но как уменьшить размер ресурса, не сокращая код? Правильно — убрав пробелы и переносы строки, которые, по-сути, являются символами и раздумают размер файла. Существует множество сервисов по минификации файлов. Мы рекомендуем Minifier.
Упорядоченность загрузки ресурсов
Код всех файлов js может быть идеальным, но если их подключать классическим способом в теге
, то тот же PageSpeed сразу напишет о блокировке отображения из-за js-файлов. Как же быть?Есть несколько подходов. Первый — использовать теги defer или async при подключении скриптов. Стандартная загрузка подразумевает остановку рендеринга браузером страницы при обнаружении скрипта, его загрузкой (которая требует времени), обработкой его кода и затем — продолжением загрузки страницы. Async позволяет сказать браузеру, что скрипт можно загрузить либо «параллельно» рендерингу страницы, не прерываясь на загрузку, а defer указывает, что скрипт надо загрузить в самом конце, после рендеринга всей страницы.
Какой тег выбрать, зависит от конкретной ситуации. В базовом же варианте, рекомендуем использовать тег defer. Просто укажите его при подключении скрипта:
Рендеринг страницы в браузере
Уменьшение размера изображений
Зачастую, изображения занимают до 80% объема загружаемого контента страницы, поэтому оптимизация их размера значительно ускорит загрузку страниц сайта. Существует множество решений, начиная от массовой оптимизации всех изображений программах JPEGMini, PNG Gauntlet или File Optimizer, заканчивая оптимизаторами изображений на стороне сервера или через CDN-сервисы. Какой вариант выбрать — решать вам, но в базовом виде мы предлагаем использовать File Optimizer — мощный инструмент, который оптимизирует изображения не одним, а сразу всеми доступными технологиями, предоставляя лучший результат.
Lazy-load
Картинки сжали, но их доставка до браузера ещё приведена в современный вид. Применение технологии lazyload способствует мощнейшей оптимизации загрузки страницы. Есть как готовые плагины для разных CMS, так и ручное внедрение ленивой загрузки. Для ручного внедрения, лучше всех, на данный момент, показывает себя Lazysizes. Инструкция по внедрению так же доступна по ссылке.
Сокращение HTML-кода + оптимизация
По аналогии с минификацией и оптимизацией скриптов и стилей, такой же подход стоит внедрить и в отношении исходного кода страниц сайта. Убирайте ненужный и избыточный код, проверяйте его валидность через инструмент W3C, минифицируйте — и тогда скорость сайта увеличится.
«Умное» использование шрифтов
Многие даже не задумываются, но загрузка и интерпретация шрифта занимает большой промежуток времени. Верным подходом здесь будет не использовать по 2-3 разных шрифта просто ради стиля, а искать здоровый компромис. В идеале — использовать один шрифт и манипулировать его «жирностью» для стилизации разных элементов сайта.
Вместо послесловия
Ускорение загрузки сайта — зачастую долгий процесс, который отнимает много времени и сил. Если вы не уверенны в своих знаниях, не стоит лезть в оптимизацию самостоятельно — выберите компанию, которая знает, как ускорить загрузку сайта.
