Возвращаем показатели google page speed в зеленую зону

Возвращаем показатели google page speed в зеленую зону - методы компании АниАрт

Главная

›

Блог

›

e-commerce

методы компании АниАрт

С 2017 года google изменил политику оценки скорости загрузки страниц. Раньше, баллы начислялись за выполнение рекомендаций, которые показывал инструмент после проведения аудита. Сжал изображения / css / js, избавился от ресурсов, блокирующих рендер страницы - молодец, пункты выполнены, баллы набраны.

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

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

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

Богдан Панасенко

Front-end разработчик

Мероприятия по повышению скорости

1. СSS и JS

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

Хороший прирост производительности дало подключение js через тег <script> с атрибутами async и defer, когда загрузка скриптов происходит вместе с загрузкой страницы, а разбор и выполнение - после.

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

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

Второй момент - большая часть скриптов подключается методами фреймворка, например для Битрикс мы имеем конструкцию в виде:

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

При подключении скриптов через тег <script> мы этих плюшек лишаемся.
Решение - использовать CompressionWebpackPlugin. Он создаст сжатую gzipped копию js билда рядом с основным.

Результат - более чем в 3 раза сжатые файлы:

Хорошей идеей будет подключение js и css, используемых только на конкретных страницах, если это возможно, а css и js должны быть минимизированы

По возможности, делаем отложенную загрузку внешних скриптов

Асинхронное подключение скриптов добавило около 15 баллов в pagespeed., а минимизация css и js - еще 12

2. Подключение только нужных модулей.

Библиотеки компонентов позволяют импортировать отдельные компоненты.

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

3. Шрифты

Гугл требует, чтобы текст был виден как можно раньше при загрузке страницы, поэтому при использовании нестандартных шрифтов, нужно загружать их отложено, показывая сначала стандартный. Шрифты подключаем через @font-face, , а за асинхронную подгрузку отвечает свойство font-display. У font-display есть разные значения, но лучшие показатели по скорости получаем с использованием font-display: fallback; . Подключение шрифтов таким образом может дать 15 - 20 баллов.

4. Изображения

Логично, что чем меньше весит картинка, тем быстрее она загружается. Гугл пропагандирует свой формат изображений .webp, поэтому для изображений на сайте нужно сделать их webp копии, а подключать в шаблонах через тег <picture> , указав внутри 2 источника - обычную картинку и картинку.webp. Новый формат работает в большинстве современных браузеров, но не в сафари.

Также, можно сделать отложенную загрузку изображений, с помощью плагинов jQuery Lazy или IntersectionObserver.

5. Отложенная загрузка gtm

Вынес в отдельный пункт, так как вместе с gtm может подтягиваться еще тонна внешних маркетинговых скриптов - все они могут давать сильную просадку по скорости. Так что подключение gtm можно выполнить через setTimeout, секунды на 3, с атрибутами async и defer. Предварительно обсудив такой вариант подключения с сеошниками.

Итого, на примере intertop.ua