Оптимизация скорости загрузки сайта по Google PageSpeed Insights

Краткое содержание статьи:

PageSpeed Insights — инструмент от Google, анализирующий производительность страницы на мобильных и десктопных устройствах с предоставлением рекомендаций по их улучшению. Зачем его использовать? В лидирующих поисковых системах скорость сайта является важным критерием ранжирования. От того, насколько быстро произошла загрузка страницы, зависят не только трафик и позиции сайта, но и конверсия, глубина просмотров, лояльность пользователей и прочие важные параметры интернет-маркетинга.

Кратко об изменениях в работе инструмента

Раньше при оценке сайта Google основывался на своих метриках и правилах. Из недостатков: инструмент мог показывать оптимизированные страницы с быстрой загрузкой, но по факту страница могла грузиться долго, и при этом оценка отображаться высокой. Была и обратная ситуация: страницы загружались быстро, а оценка была низкой. 12 ноября 2018 года инструмент был обновлен. Формулы подсчета показателей полностью сменились, а также добавились новые.

С обновлением инструмент стал уделять больше внимания скорости страницы, где основной метрикой стала именно она. Благодаря этой оценке, инструмент может выделить самый быстрый и самый медленный сайт, и в зависимости от их показателей начислить соответствующие баллы вашему ресурсу. Начисление баллов осталось прежним – по шкале от 0 до 100, но их подсчет в корне изменился. Теперь оценка происходит с помощью Lighthouse. Lighthouse – это автоматизированный open-source инструмент с открытым исходным кодом для аудита сайтов. Этот же инструмент доступен в Google Chrome в качестве расширения.

Как пользоваться и что показывает PageSpeed Insights

На странице инструмента необходимо ввести интересующую вас страницу в поле и нажать кнопку «Анализировать». Проверка происходит достаточно быстро. Домены в зоне .рф проверяются несколько дольше. Проверка осуществляется как для мобильной, так и для десктопной версии. Их значения могут отличаться друг от друга.

Первое, что вы увидите — это оценка эффективности страницы. Она определяется с помощью Lighthouse, о котором мы писали выше. Эффективность загрузки страницы измеряется по шкале:

• 90 или выше – быстрая;
• от 50 до 89 – средняя;
• ниже 49 – медленная.

Данные наблюдений и Origin Summary

Далее располагаются данные наблюдений и Origin Summary, которые отображаются в том случае, если хватает данных для статистики. В целом они показывают сводную информацию о скорости проверяемой страницы в сравнении с другими страницами, по которым были собраны данные за последние 30 дней. Origin Summary отличается от «Данных наблюдений» тем, что оценивает скорость всех страниц вашего сайта.

На скриншоте мы можем видеть значения FCP и FID в процентах и секундах.

• Первая отрисовка контента (FCP) – это время, спустя которое на экране отображается первый контент. Чтобы улучшить значение, необходимо работать над количеством внешних ресурсов CSS, JS; HTTP-кэшированием; размером текстов; загрузкой CSS, JS. FCP должен быть не выше 2500 мс.
• Первая задержка ввода (FID) – это время, в котором происходит первое взаимодействие пользователя с вашим сайтом и отклик браузера на это взаимодействие. По сути, это время, в котором пользователю приходится ждать, пока браузер отреагирует на его взаимодействие (например, клик), и, если оно оказывается долгим, пользователя уходит с ресурса. FID не должен превышать 250 мс.

Имитация загрузки страницы

Имитация загрузки страницы оценивается по 6 показателям:

• Время загрузки первого контента (FCP).
• Индекс скорости загрузки – показывает, насколько быстро контент страницы отображается пользователю.
• Время загрузки для взаимодействия (TTI) – время, в течение которого страница становится готова к взаимодействию с пользователем.
• Время загрузки достаточной части контента (FMP) – время, по истечении которого становится виден основной контент страницы.
• Время окончания работы ЦП (или первый простой процессора) – измеряет за какое время страница становится минимально готова к взаимодействию, причем поток страницы становится достаточно свободен для обработки ручного ввода.
• Максимальная потенциальная задержка (FID).

«Оптимизация», «Диагностика» и «Успешные аудиты»

В разделе «Оптимизация» указывается то, что поможет ускорить загрузку проверяемой страницы. Раздел «Диагностика» – это дополнительная информация о соответствии страницы рекомендациям по производительности. В целом он также содержит информацию по оптимизации тех или иных показателей, поэтому уделить внимание необходимо обоим разделам.

Достоинствами «Оптимизации» и «Диагностики» является то, что они определяют конкретные места вашего сайта, которые необходимо доработать, например CSS, изображения, шрифты и пр.

Раздел «Успешные аудиты» показывает параметры, которым соответствует ваша страница. Здесь остаётся только облегченно вздохнуть и порадоваться, что это дорабатывать не нужно.

Как избавиться от ошибок в PageSpeed Insights

Устраните ресурсы, блокирующие отображение

Здесь указываются все ссылки на ресурсы JS, CSS, HTML которые препятствуют загрузке контента страницы. Инструмент показывает какой размер у файла сейчас и размер, который будет после внедрения оптимизации.

Решить проблему можно следующими способами:

• Ограничить объем ресурсов, которые отображаются в верхней части страницы, либо перенести их в футер сайта. Перенос подходит не для всех ресурсов, так как многие из них должны располагаться в пределах тега head.
• Для JS рекомендуется указывать асинхронную загрузку. Либо другой вариант: синхронно загружать в head только те JS-ресурсы, которые могут требоваться для других скриптов, а остальные перенести в конец тега body.
• Если добавить в ссылку подключения стилей значение preload атрибута rel и событие onload, то получится асинхронная загрузка стилей, пример:

  

  Это даёт возможность обработать CSS, не блокируя рендеринг. Как только ресурс загрузится благодаря onload, скрипт заменит значение preload атрибута rel на stylesheet и применит стили на странице.

• Если есть стили, которые нужны только для подгружаемого контента, то их лучше загружать динамически с помощью скриптов стоящих в конце тега body.
• Разбейте внешний CSS на несколько файлов по медиа типам и медиа запросам, тем самым избегая загрузки больших CSS-документов. Например, пометкой media="print" в теге link сообщите браузеру, что этот файл применялся только, если страница уходит в печать. Пример:



• На первом экране должен загружаться только важный контент, поэтому нужно уменьшить размеры JS, CSS, HTML: перенести скрипты и стили в единые файлы; удалить ненужные скрипты и стили, загружать изображения через CSS, удалить лишние теги, комментарии и пр.

С самописными сайтами будет более-менее понятно, что и куда переносить, но на сайтах с готовыми CMS это будет сделать сложнее. В этом случает помогут следующие плагины:

• Для WordPress плагины Autoptimize, Speed Booster Pack, W3 Total Cache, JCH Optimize.
• Для Joomla плагины JCH Optimize.
• Для Drupal плагины JCH Optimize.
• В Bitrix это реализуется в админке в разделах: Настройки > Настройки продукта > Настройки модулей > Главный модуль «Оптимизация CSS».
• Opencart плагины Simple Minify, SourceCode Compressor, MCJ.

Также можно воспользоваться онлайн-инструментами для сжатия (минификаторами) JS и CSS: websiteplanet.com «JS & CSS Minifier», csscompressor.com.

Используйте современные форматы изображений

В этом разделе инструмент рекомендует использовать форматы изображений JPEG 2000, JPEG XR и WebP, которые превосходят JPEG и PNG в характеристиках сжатия и сохранения качества.

Но есть недостаток у данных форматов – это проблемы с поддержкой версий в популярных браузерах. В России популярными браузерами являются Google Chrome, Яндекс.Браузер, Safari, Opera и Firefox. Например: WebP не поддерживается Safari, JPEG 2000 не поддерживается Google Chrome, Firefox и Opera, а JPEG XR вообще никаким из перечисленных браузеров.

WebP

JPEG 2000

JPEG XR

Исходя из приведенных таблиц наиболее лучшим оказывается формат WebP (но всё еще не универсальным), который можно получить следующим образом:

• Онлайн-конвертеры: convertio.co, image.online-convert.com, ru.inettools.net и пр.
• Плагин AdobeWebM для Adobe Photoshop CC.
• Плагины для CMS:
  1. для Wordpress плагин WebP Express.
  2. для Bitirx для поддержки WebP проще доработать код. Также в Bitrix Marketplace к приобретению доступны решения «Ускорение загрузки сайта - оптимизация css, js и картинок» и Ammina Optimizer.
  3. Для Joomla ранее был доступен плагин WebP Joomla Yireo, но был удалён, может быть вам удастся его найти на просторах интернета.
  4. Для Opencart есть платное дополнение «Image COMPRESSOR & Watermark & WebP & Lazy Load etc. by Sitecreator».
  5. Для Drupal модули «WebP By Bart Vanhoutte», «ImageAPI Optimize WebP».

Настройте эффективную кодировку изображений

Без внедрения современных форматов изображений, описанных выше, привычные нам всем изображения также желательно оптимизировать, следуя принципу «хорошее качество при небольшом весе».

Перед сжатием, убедитесь, что вы выбрали подходящий тип файлов. Существует несколько типов файлов изображений:

• PNG — изображения более высокого качества, но имеющие больший размер файла. Был создан как формат изображения без потерь качества.
• JPEG — использует оптимизацию с потерями и без потерь. Есть возможность регулировки уровня качества и размера файла в балансе.
• GIF — использует только 256 цветов. Используется только сжатие без потерь. Считается, что GIF – лучший вариант для анимированных изображений, но у Google на этот счет другое мнение, см. раздел «Используйте видеоформаты для анимированного контента».

Оптимизация изображений может происходить следующим образом:

• Вручную с помощью Adobe Photoshop и с использованием экшенов.
• Пакетное преобразование с помощью FastStone Image Viewer.
• Онлайн-сервисов: tinypng.com, kraken.io, compressor.io, imagecompressor.com.
• С помощью доработки кода, например в Bitrix.
• С помощью плагинов:
  1. для Wordpress плагины Robin image optimizer; EWWW Image optimizer, WP smush.
  2. Для Bitrix решения Image Optimizer, «Оптимизация картинок – автоматически и без сторонних сервисов».
  3. Для Joomla плагины JCH Oprimize, Imgen, Image Recycle.
  4. Для Drupal плагины JCH Optimize, ImageMagick, Image Optimize (or ImageAPI Optimize).
  5. Opencart модуль Image Optimizer, дополнение «Сжатие изображений для OpenCart 2.x».

Удалите неиспользуемый код CSS

Чем больше на сайте неиспользуемого кода CSS, тем больше времени необходимо браузеру для их подгрузки. В целом этот пункт связан с разделом «Устраните ресурсы, блокирующие отображение» о котором говорилось выше.

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

Сократите время ответа сервера (время до получения первого байта)

Если страницы сайта медленно грузятся, стоит обратить внимание на отклик времени сервера. Google Page Speed недоволен этим показателем, если он более 600 мс, в идеале это должно быть 200 мс и меньше. Для дополнительной оценки можно использовать онлайн-инструмент Pingdom.

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

• Тяжелые плагины или их большое количество могут влиять на загрузку сервера – отключите те, которые не используются.
• Перейдите на новую версию PHP – PHP 7 (предварительно проверьте, что ваш хостинг его поддерживает).
• Оптимизируйте таблицы базы данных MySQL.
• Если используете старую версию CMS, лучше обновите её до последней версии.
• Включите кеширование сайта браузером.
• Оптимизируйте код, например, с помощью инструмента gtmetrix.com.
• Установите веб-сервер nginx и настройте его работу с Apache таким образом, чтобы страницы отдавали браузеру пользователя Apache, а статический контент – nginx. Либо полностью замените Apache на nginx.
• Используйте GZIP-сжатие, которое позволяет на стороне сервера архивировать файлы, а распаковывать уже в вашем браузере.
• Выполните рекомендации из разделов Google PageSpeed Insights, описанных выше.

Дополнительные варианты плагинов для популярных CMS, которые помогут в сокращении ответа сервера:

1. Для Wordpress плагины WP Super Cache, PHP Speedy WP, Optimize DB.
2. Для Bitrix предлагаем варианты, в которых можно ознакомиться, как ускорить сайт.
3. Для Joomla уже упоминаемый плагин JCH Optimize, а также включение кеширования в админ-панели.
4. Для Drupal модули «Authenticated User Page Caching (Authcache)», «CSS GZIP», «JavaScript Aggregator», «eAccelerator».
5. Для Opencart модули Smart Optimizer, Turbo OpenCart.

Уменьшите размер кода JavaScript

Все, что поможет справиться с этой проблемой, ищите выше, в разделе «Устраните ресурсы, блокирующие отображение».

Настройте показ всего текста во время загрузки веб-шрифтов

Данный раздел сообщает о том, что пользователи сайта не увидят ваш контент до тех пор, пока шрифты не будут подгружены. Добавьте в тег link параметр display=swap, таким образом браузер будет отображать дополнительный шрифт, пока основной шрифт не будет загружен полностью.

Пример:

Далее в стилях к основному шрифту необходимо подключить дополнительный шрифт в font-family. Например:

Если же вы отдаёте предпочтение локальным шрифтам, то в @font-face добавьте свойство «font-display: swap;»:

Минимизируйте работу в основном потоке

В этом разделе подразумевается оптимизация кода JS: удалите неиспользуемый JS, первым загружайте только необходимый, сожмите данные JS. Более подробно смотрите в разделе «Устраните ресурсы, блокирующие отображение».

Сократите размер структуры DOM

DOM (от англ. Document Object Model – «объектная модель документа») может нанести ущерб производительности страницы, если оно имеет большое дерево. Дерево DOM состоит из объектов, которые называются узлами, например это элементы HTML, текстовое содержимое, закомментированный код и пр. Оптимальное количество узлов в DOM 1500, глубина – 32 узла, количество дочерних и родительских элементов – менее 60.

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

Задайте правила эффективного использования кеша для статических объектов

При повторных посещениях HTTP-кэширование поможет ускорить загрузку страниц. Это означает, что при следующем посещении браузер будет использовать то, что уже получил ранее. Для оптимизации необходимо настроить сервер, чтобы происходило кеширование статических файлов, например на 1 год. Опять же, можно использовать плагины, о которых мы говорили выше в разделе «Сократите время ответа сервера».

Сократите время выполнения кода JavaScript

Здесь снова говорится об улучшении кода JS – необходимо уменьшить размер фрагментов кода JS: использовать только тот, который нужен для правильной работы сайта; сократить, сжать данные кода и кешировать. Более подробно о том, что может помочь смотрите в разделе «Устраните ресурсы, блокирующие отображение».

Сократите глубину вложенности критических запросов

В этом разделе говорится о цепочке критических запросов, которые позволяют браузеру загружать страницу как можно быстрее, с определением приоритетов загружаемых ресурсов и порядком их загрузки. Например, браузер обрабатывает HTML, к нему подключены CSS ресурсы, он начинает обрабатывать их, а далее обнаруживается, что к HTML подключены и шрифты, для обработки которых ему снова нужно отправить запросы. Решить проблему можно добавлением в тег link значение rel=preload. Более подробно смотрите выше, в разделе «Устраните ресурсы, блокирующие отображение».

Настройте подходящий размер изображений

Помимо рекомендации сжатия всех изображения без потери качества, есть еще несколько вариантов исправления данной ошибки в PageSpeed Insights:

• Внедрение адаптивных изображений, у которых есть несколько версий размеров.
• Использование SVG – векторный формат изображений.
• Адаптивные изображения на основе клиентских подсказок, которые сообщают браузерам информацию о ширине области просмотра, ширине изображения и пр.

Отложите загрузку скрытых изображений

При заходе на сайт, посетителю отображается первый экран. Если на странице большое количество изображений, все они будут грузиться, независимо от того, видит их пользователь или нет. Чтобы пользователь не закрыл страницу, необходимо сделать, чтобы загрузка происходила максимально быстро, для этого рекомендуется использовать lazy loading или «ленивая загрузка» при которой изображения будут подгружаться асинхронно. Lazy loading можно реализовать несколькими способами:

• Использование Intersection Observer API.
• Скрипты Lazy loading (David Walsh), BLazy, Lazy Load XT jQuery, Yall, Lazysizes.
• Для Wordpress плагины Lazy Load, a3 Lazy Load, Rocket Lazy Load.
• Для Bitrix решение «Ленивая загрузка изображений».
• Для Joomla плагин LLFJ Lazy Load.
• Для MODX плагины Lazy load, Lazy image.
• Для Opencart плагин Lazy Load Images.

Уменьшите размер кода CSS

Сокращение CSS может улучшить загрузку страниц вашего сайта. Для сжатия CSS вы можете использовать различные сервисы, например: cssresizer.com, csscompressor.com, css-minifier.com, а также плагины.

Подходящие для этого решения мы перечислили в разделе «Устраните ресурсы, блокирующие отображение» выше.

Включите сжатие текста

Для текстового содержимого рекомендуем использовать алгоритмы сжатия GZIP, Deflate или Brotli на вашем сервере. GZIP является наиболее распространенным, так как поддерживается большинством браузеров. На некоторых хостингах по умолчанию включено сжатие. Также можно воспользоваться плагинами по сжатию текста, которые мы перечислили в ранее упоминаемых разделах.

Используйте предварительное подключение к необходимым доменам

Для быстрого соединения с внешними ресурсами, указанными в коде вашего сайта (напр. Google Fonts) рекомендуется добавлять подсказки preconnect или dns-prefetch, чтобы сообщить браузеру, что загрузка должна быть установлена как можно быстрее. Примеры:

Избегайте большого количества переадресаций

При цепочках редиректов возникает замедление скорости загрузки страницы, так как браузеру приходится несколько раз запрашивать ресурс. В данном разделе инструмент укажет ресурсы, которые перенаправляются, также их можно найти с помощью программы Netpeak Spider, redirectdetective.com, redirect-checker.org и пр. онлайн-сервисами. Чтобы найти, где задана цепочка редиректов проверьте: .htaccess, nginx.config, PHP, HTML и JavaScript.

Настройте предварительную загрузку ключевых запросов

Предварительная загрузка позволяет быстрее отобразить страницу. Реализовать её можно путём добавления в тег link значение rel="preload". Более подробно было рассмотрено выше, в разделе «Устраните ресурсы, блокирующие отображение».

Используйте видеоформаты для анимированного контента

Для повышения производительности вашего сайта не рекомендуется использовать большие GIF-файлы с анимацией, лучше – использовать форматы MPEG4, WebM. Для конвертации можно воспользоваться сервисами: convertio.co, ezgif.com, onlineconvertfree.com и пр.

Предотвратите чрезмерную нагрузку на сеть

Чрезмерная нагрузка на сеть происходит из-за неоптимизированных ресурсов вашего сайта. Это могут быть: изображения, стили, скрипты, текст и пр. Чтобы исправить эту ошибку, рекомендуем ознакомиться с вышеописанными разделами. В целом здесь поможет сжатие и сокращение текста, HTML, JS, CSS, смена формата изображений на WebP и включение кеширования.

Итоги. Многие рекомендации инструмента по оценке скорости загрузки сайта Google PageSpeed Insights перекликаются между собой. Исправив наиболее серьезные ошибки, которые включают в себя не один вид доработок, вы исправите и ряд других, которые в последствии будут отображаться в успешных аудитах инструмента. Важно помнить, что достижение 100 балов не должно наносить ущерб ни функционалу, ни дизайну сайта. Стремление к высокому баллу может быть не оправданным. И помните, что PageSpeed Insights содержит лишь рекомендации по улучшению вашего сайта, однако и без внедрения некоторых из них, ваш сайт может отлично функционировать и приносить доход.

Автор: Мария Саловарова