С 2017 года Google изменил политику оценки скорости загрузки страниц. Раньше баллы начисляли за выполнение рекомендаций, которые инструмент показывал после аудита: сжал изображения, CSS и JS, избавился от ресурсов, блокирующих рендеринг, — молодец, пункты выполнены, баллы набраны. Теперь инструмент измеряет фактическую скорость загрузки, момент первого появления контента и то, как быстро пользователь может начать взаимодействовать со страницей. По новым критериям большинство сайтов просело по показателям, поэтому мы провели ряд мероприятий, чтобы вернуть оценки сайтов заказчиков в «зелёную» зону.
Что изменилось в оценке Google
Разница между старой и новой логикой подсчёта принципиальная: раньше измеряли старательность, теперь — результат, который видит живой человек с живым устройством и живым каналом связи.
Как было до 2017 года
Баллы начисляли за выполнение рекомендаций, которые инструмент показывал после аудита. Сжал изображения, CSS и JS, избавился от ресурсов, блокирующих рендеринг страницы, — пункт закрыт, баллы зачтены. При таком подходе набрать «зелёную зону» было несложно.
Как стало сейчас
Инструмент измеряет актуальную скорость загрузки страницы, первое появление контента и то, как быстро пользователь может начать взаимодействовать со страницей. Формальное выполнение пунктов из отчёта само по себе уже ничего не гарантирует.
CSS и JS: главные ресурсы, блокирующие отображение
Наибольшую просадку по скорости дают скрипты, изображения и CSS — именно они являются ресурсами, блокирующими отображение страницы.
Хороший прирост производительности дало подключение JS через тег <script> с атрибутами async и defer, когда загрузка скриптов происходит вместе с загрузкой страницы, а разбор и выполнение — после.
Но здесь стоит понимать, с каким именно скриптом мы имеем дело. Прежде чем вешать атрибуты, проверяем три вещи:
- самодостаточен ли этот скрипт;
- есть ли у него зависимости от других скриптов;
- полагается ли он на полностью разобранный DOM.
Второй момент — подключение средствами фреймворка
Большинство скриптов подключается методами самого фреймворка: в корпоративных CMS для этого предусмотрена собственная конструкция. При таком подключении мы получаем все «плюшки» — автоматическое объединение скриптов, сжатие и подключение gzip-версии скрипта, если соответствующие опции включены в админпанели, а сервер настроен с возможностью отдавать .gz файлы.
Подключая скрипты через тег <script>, мы этих преимуществ лишаемся. Решение — CompressionWebpackPlugin: он создаст сжатую gzipped-копию JS-сборки рядом с основной. Результат — файлы, сжатые более чем втрое.
Что ещё стоит сделать с CSS и JS
- подключать JS и CSS, которые используются только на конкретных страницах, если такая возможность есть;
- минимизировать CSS и JS — это обязательное условие, а не пожелание;
- по возможности делать отложенную загрузку внешних скриптов.
В сумме асинхронное подключение скриптов добавило около 15 баллов в PageSpeed, а минимизация CSS и JS — ещё 12.
Подключение только нужных модулей
Библиотеки компонентов позволяют импортировать отдельные компоненты. Вместо всей библиотеки, из которой мы используем лишь несколько форм и кнопок, подключаем только те компоненты, которые нам нужны.
Это может сэкономить до 300 КБ в финальной сборке — вес, который пользователь иначе качал бы впустую.
Шрифты
Google требует, чтобы текст был виден как можно раньше во время загрузки страницы. Поэтому, когда на проекте используются нестандартные шрифты, их нужно загружать отложенно, показывая сначала стандартный.
- Подключение. Шрифты подключаем через @font-face.
- Асинхронная подгрузка. За неё отвечает свойство font-display.
- Выбор значения. У font-display есть разные значения, но лучшие показатели по скорости получаем с font-display: fallback.
Подключение шрифтов таким способом может дать 15–20 баллов.
Изображения
Логично, что чем меньше весит картинка, тем быстрее она загружается. Google продвигает собственный формат изображений .webp, поэтому для изображений на сайте нужно сделать их webp-копии, а подключать в шаблонах через тег <picture>, указав внутри два источника — обычную картинку и картинку .webp. Новый формат работает в большинстве современных браузеров, но не в Safari — именно поэтому второй источник обязателен.
Также можно сделать отложенную загрузку изображений — с помощью плагина jQuery Lazy или через IntersectionObserver.
Отложенная загрузка GTM
Этот пункт мы вынесли отдельно, потому что вместе с GTM может подтягиваться ещё тонна внешних маркетинговых скриптов — и все они способны дать сильную просадку по скорости.
Поэтому подключение GTM можно выполнить через setTimeout, секунды на три, с атрибутами async и defer.
Сколько баллов дал каждый шаг
Итог на примере intertop.ua
Вот как все перечисленные меры выглядят вместе на реальном проекте.
Чек-лист и что дальше
| Мера | Что делаем | Что это даёт |
|---|---|---|
| CSS и JS | async и defer, минимизация, постраничное подключение, gzipped-копия сборки | около 15 баллов за асинхронность и ещё 12 за минимизацию |
| Модули | импортируем отдельные компоненты вместо целой библиотеки | до 300 КБ экономии в финальной сборке |
| Шрифты | @font-face плюс font-display: fallback | 15–20 баллов |
| Изображения | webp-копии через <picture> и отложенная загрузка | меньший вес страницы и более быстрый показ контента |
| GTM | подключение через setTimeout с async и defer | снимает просадку от внешних маркетинговых скриптов |
Главный вывод из этой истории простой: догонять показатели постфактум всегда дороже, чем заложить их в проект сразу.
Теперь мы проводим оптимизацию под PageSpeed ещё на этапе создания сайтов, чтобы сразу достигать лучших показателей.Богдан Панасенко / Front-end разработчик
