Как использовать индекс скорости Google для повышения производительности WordPress

В данной статье мы рассмотрим, как рассчитывается индекс скорости (Speed Index). А также как измерить его в браузере Chrome.

Что такое индекс скорости в Lighthouse?

Lighthouse – это инструмент с открытым исходным кодом, который сервис Google PageSpeed Insights использует для анализа скорости загрузки веб-станицы.

Lighthouse оценивает веб-страницу по следующим критериям:

• Безопасность источника.
• Доступность страницы для пользователей.
• Доступность сайта для пользователей с ненадежным интернет-соединением.
• Пользовательская оценка скорости работы сайта.

Индекс скорости – это один из показателей оценки скорости работы сайта. Он отражает работоспособность сайта в реальных условиях.

Как Google измеряет индекс скорости

В официальной документации Lighthouse индексу скорости дается следующее определение:

Индекс скорости(Speed Index) – это метрика производительности загрузки веб-страницы. Она показывает, насколько быстро содержимое веб-страницы отображается визуально.

В апреле 2012 году ресурс WebPagetest.org и Google представили метрику Speed Index. Поисковик подробно описал, как происходит расчет индекса скорости.

Вот как это работает: когда вы проводите проверку веб-страницы с помощью Google PageSpeed Insights, сервис Lighthouse записывает видео загрузки страницы. Значение индекса скорости будет варьироваться в зависимости от области просмотра, которую вы установили для теста.

Lighthouse разбивает видеоролик на кадры: по 10 кадров в секунду. Например, если ваш сайт загружается за 3 секунды, получится 20 кадров, демонстрирующих процесс загрузки.

Упрощенная версия того, как это выглядит.

Для определения того, насколько завершена загрузка страницы, Lighthouse сравнивает каждый кадр с финальным. Затем он наносит завершенность загрузки страницы на ось Y и продолжительность загрузки на Х, чтобы определить среднее значение. Общая оценка представляет собой сумму отдельных интервалов. Область графика, выделенная синим цветом, представляет собой индекс скорости.

Область выше оси представляет собой индекс скорости

Также для определения индекса скорости используется метод Visual Progress от Paint. Он применяется для определения индекса в браузерах, созданных на основе движка WebKit. При этом не используется запись видео загрузки. Показатель рассчитывается на основе данных временной шкалы о событиях отрисовки. Не все браузеры поддерживают данный метод, поэтому он не так широко распространен.

Как измерить индекс скорости в Google Chrome

Для этого нажимаем сочетание клавиш Ctrl+Shift+i . Затем переходим на вкладку «Audits», устанавливаем флажок «Performance» и нажимаем кнопку «Run Audits».

К какому показателю индекса скорости следует стремиться?

Мы измерили индекс скорости веб-страницы. Но какой результат является хорошим?

По словам Пола Айриша (Paul Irish) из команды разработчиков Google Chrome, идеальный индекс скорости должен быть меньше 1000 мс, что эквивалентно 1 секунде. Получается, что необходимо добиться как можно более низкой оценки индекса скорости.

Как улучшить индекс скорости в WordPress?

Показатель индекса скорости WordPress можно улучшить следующим образом:

• Оптимизировать контент.
• Оптимизировать критический путь рендеринга.

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

Если это не приводит к увеличению конверсии – избавляйтесь от этого

Самый эффективный способ улучшить производительность сайта – удалить ненужные ресурсы. Например, неиспользуемые изображения, файлы JavaScript, CSS и т.д.

Чтобы узнать, как более высокая скорость загрузки влияет на доходность сайта, пройдите тест для мобильных платформ PageSpeed. На странице результатов перейдите в раздел «Evaluate the impact of a faster site». Встроенный калькулятор покажет, как более высокая скорость сайта может увеличить годовой доход.

Довольно убедительные цифры, не так ли?

Применяйте определенную высоту блока и изображения-заполнители

Чтобы более быстро предоставлять пользователю важную часть контента, на странице оставьте место для элементов, которые долго загружаются (изображения и видео). Для этого с помощью CSS задайте блокам определенную высоту или предварительно загружайте изображения-заполнители.

Оптимизируйте изображения

Лучший способ уменьшить вес веб-страницы – избавиться от лишних изображений. А после этого оптимизировать оставшийся графический контент следующими методами:

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

Оптимизируйте таблицы стилей, скрипты и шрифты

Файлы CSS и JavaScript, которые подключены в верхней части разметки веб-страницы, замедляют ее загрузку. Поэтому их стоит оптимизировать.

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

Способы оптимизации дополнительных ресурсов веб-страницы:

1. Удаление. Например, сократите количество доступных вариантов шрифтов.
2. Не загружайте один большой файл JavaScript. Используйте разделители кода, чтобы разбить файл и загружать скрипты, которые не важны для рендеринга DOM, в нижней части веб-страницы.
3. Сожмите используемые файлы, чтобы они загружались быстрее.

Оптимизируйте критический путь рендеринга

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

Необходимо проанализировать компоненты в критическом пути рендеринга и поискать способы оптимизации загрузки. Вот что по этому поводу рекомендует Google:

• Проанализируйте элементы критического пути.
• Минимизируйте количество важных ресурсов. Отложите загрузку второстепенных элементов.
• Загружайте все важные ресурсы как можно быстрее, чтобы сократить длину критического пути.

Используйте кеширование

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

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

Ограничения индекса скорости (Speed Index Limitations)

Если на вашем сайте есть динамические элементы – измерения индекса скорости будут неточными. Ниже приведены элементы, которые влияют на показатель скорости:

• Видео с автоматическим воспроизведением.
• Карусели.
• GIF-файлы.

Индекс скорости при использовании вместе с другими метриками Google PageSpeed Insights помогает получить полное представление о том, как оптимизировать сайт.

Как улучшить индекс скорости с помощью WordPress-плагина

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