Как известно, скорость загрузки является фактором ранжирования в поисковой системе Google. Причем поисковая система использует не только данные тестов PageSpeed (или Lighthouse), но и данные реальных пользователей Chrome.
Мы составили чек-лист с эффективными мерами по оптимизации скорости загрузки сайта, которые не только улучшат ранжирование вашего сайта в Google, но и снизят нагрузку на хостинг.
Ленивая загрузка изображений

Ленивая загрузка (lazy loading) - техника откладывания загрузки некритичных ресурсов страницы до момента их появления в видимой области браузера. Применяя ленивую загрузку для изображений и видео на странице вы не только ускоряете загрузку первого экрана сайта, но и экономите ресурсы хостинга.
Для того чтобы Яндекс корректно учитывал изображения загружаемые лениво, необходимо разместить ссылку на источник изображения в атрибуте data-src
(или data-original
) тега img
. При этом, для корректного учета изображения в Google достаточно того что оно загружается сразу после попадания во viewport.
Подробнее про ленивую загрузку и её проверку можно прочитать в нашей статье.
Использование CDN

Content Delivery Network - географически распределённая сетевая инфраструктура (группа серверов), позволяющая оптимизировать доставку и дистрибуцию содержимого конечным пользователям.
Использование CDN позволяет быстрее доставлять статические ресурсы (изображения, стили, скрипты и шрифты) конечному пользователю. Стоит обратить внимание что если ваш сайт оказывает услуги только по России, то и CDN стоит выбирать в первую очередь обеспечивающий быструю доставку контента по России (а не по США и Европе).
Корректные форматы изображений

Каждый формат создавался специально под определенный тип изображений. Ни к чему использовать более затратный на ресурсы формат для изображения на качество которого это не повлияет, иначе это снизит скорость загрузки страницы.
Форматы:
- SVG для иконок;
- JPEG для фотографий и баннеров;
- PNG для изображений с прозрачностью;
- GIF для анимированных изображений.
Можно использовать более современный и экономный формат WebP от Google (вместо JPEG, PNG и GIF), но для его корректного отображения в браузерах нужно дополнительно подключать полифилл - скрипт, который добавляет поддержку WebP в устаревшие браузеры.
Менеджмент стилей

Стили страниц должны храниться в минимально необходимом количестве CSS-файлов, а также должны делиться на те что отвечают за формирование контента первого экрана и те что влияют на контент вне первого экрана (и интерактивных блоков - меню за бургером и т.д.). Избегаем использования стилей в HTML и помним что первый экран на мобильных устройствах и компьютерах разный!
Первый экран:
<link charset="utf-8" media='(min-width: 1200px)'
rel="stylesheet" type="text/css" href="/desktop-before.css
" />
Вне первого экрана:
<link charset="utf-8" media="none" onload="if(media!='(min-width: 1200px)') media='(min-width: 1200px)'"
rel="stylesheet" type="text/css" href="/desktop-after.css
" />
Браузерное кэширование

Мы можем рекомендовать браузеру кэшировать ресурсы, которые повторно используются на других страницах сайта. Это делается с помощью HTTP-заголовков Cache-Control и Expires (если срок кэширования не задан в Cache-Control).
Указываем кэширующий заголовок сроком на 1 год для всех статических ресурсов: CSS, JS, шрифтов, изображений и видео.
Для изменяемых CSS и JS указываем версии (и меняем их в HTML при изменении файлов):
<link href="/bitrix/cache/css/kernel_main.css?14356674393041
" type="text/css" rel="stylesheet">
Если сервер Apache указываем в файле .htaccess следующие строки:
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
Если сервер Nginx указываем в файле конфигураций /etc/nginx/site-enabled/default следующие строки:
location ~* \.(png|jpg|jpeg|gif|js|css|pdf|html|swf)$ {
expires 365d;
add_header Cache-Control "public, no-transform";
}
Минификация кода

Минификация - удаление лишних символов из кода, затормаживающих чтение кода браузером или сервером. Минифицируем: серверные скрипты (PHP и т.п.), HTML, CSS и JS.
Обычный код:
.check-item {
float: left;
font-family: 'Golos';
margin: .5em 0;
position: relative;
}
Минифицированный код (без пробелов, табуляции и новых строк):
.check-item{float:left;font-family:Golos;margin:.5em 0;position:relative}
Менеджмент скриптов

Скрипты (как и стили) должны храниться в минимально необходимом количестве JS-файлов, а также должны делиться на те что отвечают за формирование контента страницы и те что не влияют на контент (до взаимодействия). Избегаем использования скриптов в HTML!
Указываем атрибут async (срабатывает скрипт который раньше загрузился) или defer (скрипты срабатывают последовательно) для всех скриптов.
<script src="1.js" defer
></script>
<script src="2.js" defer
></script>
Last Modified + 304

HTTP заголовок Last-Modified сообщает клиенту время последнего изменения страницы (объекта).
Если клиент (браузер, поисковый робот) получил заголовок Last-Modified, то при следующем обращении к адресу, при условии, что страница (объект) есть в кэше, он добавит вопрос If-Modified-Since (не изменилась ли страница после даты, полученной в Last-Modified). Если страница не изменялась, то клиент получит ответ 304 Not Modified без контента страницы (его он возьмет из своего кэша).
Пример HTTP заголовка:
Last-Modified: Wed, 21 Oct 2015 07:28:00 GMT
Сервис для проверки - last-modified.com
Сжатие GZIP

GZIP-сжатие использует алгоритм DEFLATE, который находит одинаковые строки в текстовом файле и временно их заменяет, тем самым уменьшая общий размер файла.
Основывается на комбинации алгоритма сжатия LZ77 и кодирования Хаффмана.
Проверить настройку GZIP можно в инструменте по ссылке.
Использование cookie-free домена

Cookie-Free домен - такой домен, который не поддерживает обработку cookie-файлов. А значит браузеру не нужно отправлять в запросе к нему кучу ваших cookie-файлов.
Используем такой домен для размещения файлов CSS, JS, шрифтов и изображений.
Продвигал основные сайты таких компаний как ВТБ, Альфа-Банк, Газпром АГНКС, Технопарк и BMW Борисхоф.
Спикер конференций Optimization в Сколково, Merge в Иннополисе, SEO без воды и многих других.