Google PageSpeed Insights: как провести аудит скорости сайта

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

Что такое Google PageSpeed Insights

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

С точки зрения пользователя необходимо, чтобы сайт работал быстро: это экономит время и приносит положительный опыт. Инструмент Google Insights помогает не только оценить скорость загрузки сайта, но и найти способы улучшить эту метрику.

Как работает

Чтобы получить информацию, которая необходима для оптимизации работы сайта, откройте PageSpeed Insights и введите URL. После этого алгоритм запустится, проанализирует информацию и выдаст ряд показателей:

• время демонстрации первой части страницы;
• задержки при загрузке;
• окончание работы центрального процессора (ЦП);
• скорость загрузки;
• период загрузки до начала взаимодействия.

Максимальный балл, который можно набрать по одному показателю, — 100. Хорошим считается результат от 80 баллов.

PageSpeed Insights помогает рассчитать время, необходимое сайту для полной подготовки к взаимодействию с пользователем. Однако следует понимать, что этот инструмент — не в полной мере про скорость:

• Он не измеряет скорость загрузки страниц.
• Его показатели не влияют на ранжирование.
• Разница в показателях между двумя сайтами не говорит об их качестве относительно друг друга.

Есть много примеров, когда топ выдачи занимают сайты с вопиюще низким показателем скорости загрузки страниц, а сайты на одном HTML без каких-либо удобств и функций получают в PageSpeed Insights почти 100 баллов.

Проверим на запросе «авиабилеты».

Два топовых сайта имеют удручающие, с точки зрения сервиса, показатели.

А сайт Артемия Лебедева, который посвящен Московскому метрополитену и написан на HTML, по мнению PageSpeed Insights, идеален.

Подробнее о скорости загрузки сайта читайте в нашей статье.

Обновление алгоритмов Google PageSpeed Insights

Летом 2020 года Google запустил новый алгоритм Speed Update, по которому поисковая система учитывает скорость загрузки сайта при ранжировании. Изменения продолжились в ноябре — сервис начал работать на базе Lighthouse. Это инструмент для аудита с открытым исходным кодом, помогает разработчикам улучшать производительность веб-страниц. Раньше сервис оценивал сайты в соответствии с определенными условиями и выполнением поставленных задач. Теперь высокий балл присуждается только за скорость загрузки.

Также появилась функция раскадровки — на слайдах видно, в каком порядке загружается контент на сайте. Гугл Пейдж Спид анализирует изображения на страницах и рекомендует форматы более легких по весу файлов.

Маркетинг

Читайте также:

Как точно узнать и посмотреть, кто отписался в Инстаграме*

Как точно узнать и посмотреть, кто отписался в Инстаграме*

Как ускорить загрузку сайта на любых устройствах

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

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

Пейдж Спид Инсайтс дает рекомендации по оптимизации изображений. Чтобы картинки не тормозили работу сайта, можно предпринять следующие меры:

• Предварительная оптимизация

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

Используйте графический редактор: в идеале Photoshop, на крайний случай Paint. У первого есть параметры сохранения картинок в формате WebP, что улучшает качество оптимизации. 

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

• Выбор формата

Для сайта calltouch.ru Google советует сменить формат ряда изображений. Он говорит, что JPEG 2000, JPEG XR и WebP более оптимизированы для веба, нежели используемые нами PNG.

Сложно сказать, правы ли здесь авторы, так как PNG входит в перечень наиболее оптимизированных для веба форматов. В отличие от JPEG, он позволяет загружать изображения неправильной формы без необходимости дорисовывать их до прямоугольника. Загружая PNG, вы оставляете только ту графику, которую хотели, а остальное пространство между вашим изображением и прямоугольным контейнером остается прозрачным.

Для размещения фотографий используйте JPEG. Иллюстрации и техническую графику сохраняйте в PNG. Векторным изображениям идеально подходит SVG.

• Сжатие изображений

Чтобы уменьшить картинки по весу, воспользуйтесь бесплатными или частично платными сервисами:

• https://tinypng.com/;
• https://jpegmini.com/;
• https://compressor.io/.

Эти сервисы дают сжатие от 30% до 80% без визуальных дефектов.

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

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

Для пакетного сжатия Google предлагает загружать сжатые в ходе диагностики картинки в архиве. Вы можете распаковать их прямо в директорию соответствующей страницы и обновить старые изображения. Пакетное сжатие лучше проводить в PunyPNG.

Оптимизация JavaScript и CSS

Google PageSpeed Insights, как правило, рекомендует сокращать JavaScript и CSS. Обычно это совет перенести скрипты и стили в футер. Но не спешите следовать этим рекомендациям.

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

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

Впрочем, есть несколько способов облегчить код и ускорить загрузку страниц.

• Сокращение CSS

Чтобы не прибегать к ручной правке, воспользуйтесь онлайн-инструментами сжатия файлов стилей, например CSScompressor. В нем есть 3 степени сжатия: Light, Normal, Super Compact, и 3 варианта сокращения комментариев: не удалять, удалить все, удалить комментарии определенной длины. Доступен Advanced Mode для профессиональных настроек.

Последний вариант сжатия — Super Compact — превращает код в строку. Используйте его только в том случае, если уверены, что файл стилей содержит окончательные данные.

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

• Сокращение JavaScript

Для этой задачи подойдет инструмент Online YUI Compressor. Его можно использовать и для облегчения CSS.

Просто вставьте код в окно и запустите сжатие. После процедуры замените код в файлах на сайте и проверьте его производительность.

• Загрузка контента из Google CDN

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

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

Gzip-сжатие

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

Gzip-сжатие бывает динамическим и статическим.

• Динамическое сжатие

В данном случае файлы архивируются прямо на сервере, отправляются пользователю и разархивируются в браузере. Такой подход эффективен, но создает нагрузку на сервер, что может быть неприемлемо для некоторых владельцев сайтов. Метод реализуется с помощью редактирования файла .htaccess в корневом каталоге ресурса, расположенного на сервере Apache.

• Статическое сжатие

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

Использование кеша

Для внедрения кеширования необходимо, чтобы сервер работал под Apache. В противном случае придется связываться с администрацией хостинга.

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

Для реализации функционала кеширования вам опять предстоит работать с .htaccess. Найдите этот файл в корне и откройте для редактирования. Если он не отображается, используйте функции отображения скрытого содержимого в настройках FTP-клиента. Внесите в .htaccess директивы для кеширования статических элементов в браузере пользователя.

Заголовки Last-Modified и ETag обеспечивают обновление кешированных файлов. При загрузке сайта браузер отправляет GET-запрос и получает ответ 304 — он означает отсутствие изменений и разрешение на использование контента с устройства. На компьютере пользователя чаще всего хранятся файлы изображений, стилей и скриптов.

Сокращение времени ответа сервера

Чтобы сократить время ответа, можно установить на сайт плагин для кеширования и сжатия стилей и скриптов. Важно, чтобы у него было разграничение между мобильной и десктопной версиями сайта, иначе у пользователей возникнет проблема с отображением страниц. Оптимальный вариант — плагин Hyper Cache, у которого есть разделение между мобильным и обычным кешем.

Какие параметры важны при измерении скорости сайта 

Есть несколько основных параметров, по которым оценивают скорость загрузки сайта. Рассказываем об основных из них.

Largest Contentful Paint (LCP)

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

Время ответа сервера

Время ответа сервера — это промежуток от запроса в браузере до загрузки первого байта страницы сайта. Google PageSpeed Insights не дает отчет по этому показателю, поэтому используйте дополнительные сервисы, например Loading Express. Чтобы получить результат, введите адрес сайта в поисковую строку и выберите регион, в котором находится пользователь.

Время загрузки первого контента

Это время с момента открытия страницы до загрузки первого элемента — текстового блока или картинки. Оптимальный показатель — 2–3 секунды, идеальный — 0,5 секунды. Если пользователь увидит белый экран, он может подумать, что сайт не работает, или просто не захочет ждать и закроет страницу.

Индекс скорости загрузки

Метрика показывает скорость загрузки содержимого сайта до момента, когда на странице прекращаются визуальные изменения. Это время от начала загрузки видимых элементов страницы до полного отображения сайта с правильным расположением содержимого. Speed Index — один из ключевых показателей, на основе которого PageSpeed Insights выставляет оценку скорости загрузки сайта.

Время загрузки для взаимодействия

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

Время загрузки достаточной части контента

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

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

Время окончания работы ЦП

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

Приблизительное время задержки при вводе

Этот показатель демонстрирует среднее время отклика страницы на действия посетителей в первые 5 секунд загрузки. Если страница реагирует на запрос дольше 50 миллисекунд, пользователь думает, что сайт «тормозит». Это наименее значимая характеристика при оценке скорости страниц сайта.

Маркетинг

Читайте также:

Можно ли посмотреть статистику чужого канала на YouTube и как это сделать

Можно ли посмотреть статистику чужого канала на YouTube и как это сделать

Заключение

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