RU
EN
Инструмент Google PageSpeed Insights позволяет измерить скорость загрузки и производительность веб-страниц. Эти показатели имеют прямое влияние на ранжирование сайта в поисковых системах, а также на количество просмотров и конверсию. Если страница загружается медленно, пользователи быстро теряют терпение и покидают сайт, не дожидаясь полной загрузки контента. В данной статье мы расскажем, как правильно использовать Google PageSpeed Insights для анализа и улучшения скорости загрузки сайта на различных устройствах, включая десктопы и мобильные устройства.
Что такое Google PageSpeed Insights
Google PageSpeed Insights представляет собой инструмент для оценки эффективности оптимизации веб-сайтов. Основной показатель, на который он фокусируется, — это скорость загрузки страниц. Этот показатель является одним из важных факторов, влияющих на ранжирование веб-сайтов.
С точки зрения пользователя, важно, чтобы сайты загружались быстро, чтобы экономить время и предоставлять удобный пользовательский опыт. Инструмент Google PageSpeed Insights помогает не только оценить скорость загрузки сайта, но и обнаружить способы ее улучшения.
Принцип работы
Для получения информации, необходимой для оптимизации работы сайта, необходимо ввести URL-адрес в PageSpeed Insights. После этого алгоритм проанализирует информацию и выдаст ряд показателей:
- время отображения первой части страницы;
- задержки при загрузке;
- использование центрального процессора (ЦП);
- скорость загрузки;
- период загрузки до начала взаимодействия.
Максимальный балл, который можно получить по каждому из показателей — 100. Хорошим результатом считается показатель выше 80 баллов.
PageSpeed Insights помогает рассчитать время, необходимое сайту для полной подготовки к взаимодействию с пользователем. Однако следует помнить, что этот инструмент не полностью охватывает скорость загрузки страниц:
- Он не измеряет скорость загрузки страниц.
- Его показатели не являются фактором ранжирования.
- Разница в показателях между двумя сайтами не говорит о качестве одного сайта относительно другого.
Есть много примеров, когда сайты с низкими показателями скорости загрузки занимают топ-места в поисковой выдаче, а сайты, которые предоставляют функциональность и удобство, получают высокие баллы в PageSpeed Insights.
Алгоритмы Google PageSpeed Insights
В летом 2020 года Google запустила новый алгоритм Speed Update, который учитывает скорость загрузки сайта при его ранжировании. Новые изменения в алгоритме были внедрены в ноябре того же года, когда сервис начал работать на базе инструмента Lighthouse. Lighthouse является открытым инструментом для аудита и помогает разработчикам улучшить производительность веб-страниц. Ранее этот сервис оценивал сайты на основании определенных условий и выполнения поставленных задач, но сейчас высокий балл присваивается только за скорость загрузки.
Также появилась функция раскадровки, которая позволяет увидеть порядок загрузки контента на сайте на слайдах. Google PageSpeed Insights теперь анализирует изображения на страницах и рекомендует использовать более легкие форматы файлов.
Как ускорить загрузку сайта
Google PageSpeed Insights помогает оптимизировать загрузку страниц: инструмент показывает, какие недостатки тормозят работу сайта и как их можно исправить.
Оптимизация изображений
Google PageSpeed Insights предоставляет рекомендации по оптимизации изображений для ускорения работы сайта. Ниже представлены некоторые меры, которые можно принять, чтобы изображения не замедляли загрузку сайта:
Предварительная оптимизация
При загрузке изображений на сайт необходимо убедиться, что их размер максимально оптимизирован. Важно не только уменьшить вес файлов в килобайтах, но и пиксельные размеры.
Для оптимизации изображений рекомендуется использовать графический редактор, такой как Photoshop, а в крайнем случае Paint. Photoshop позволяет сохранять изображения в формате WebP, что улучшает качество оптимизации.
Если вы не можете использовать графический редактор, обратитесь к функционалу вашей CMS: некоторые системы управления контентом имеют встроенный инструмент для обрезки изображений. Важно убедиться, что на изображении не осталось полей или других элементов, которые могут замедлить загрузку. При создании коллажей следует избегать большого количества свободного пространства между отдельными картинками.
Формат изображений
Для сайта traff.ink рекомендуется использовать более оптимизированные для веба форматы изображений, такие как WebP и AVIF, по словам Google. Однако, не ясно, насколько правильны эти советы, учитывая, что PNG входит в список форматов, оптимизированных для веба. Отличительной особенностью PNG является возможность загрузки изображений неправильной формы без дополнительной обработки, в то время как JPEG не подходит для этой задачи. При использовании PNG оставляется только необходимая графика, а пространство между изображением и контейнером остается прозрачным.
Чтобы оптимизировать фотографии, следует использовать формат JPEG, для иллюстраций и технической графики — PNG, а для векторных изображений — SVG.
Сжатие
Существует множество бесплатных или частично платных сервисов, которые позволяют уменьшить вес изображений без потери качества. При использовании таких сервисов можно достичь сжатия от 30% до 80% без визуальных искажений.
Правильный размер атрибутов
Если вы загружаете большие изображения и изменяете их размеры с помощью атрибутов width и height, то может показаться, что вы ускорили время загрузки страницы. Однако, это на самом деле занимает время у пользователя, который все еще должен загрузить файл целиком, прежде чем увидеть его в уменьшенном размере.
Для пакетного сжатия изображений существуют бесплатные и платные сервисы. Например, Google предлагает загружать сжатые изображения в архиве во время диагностики. Вы можете распаковать их непосредственно в директорию соответствующей страницы и обновить старые изображения. Также для пакетного сжатия вы можете использовать PunyPNG.
Оптимизация JavaScript и CSS
Часто при использовании инструмента Google PageSpeed Insights появляются рекомендации по сокращению объема JavaScript и CSS кода, включая совет перенести скрипты и стили в футер. Однако, следует помнить, что эти советы не всегда являются правильными и следовать им нужно с осторожностью.
Перенос JavaScript вниз страницы или использование асинхронной загрузки скриптов может ускорить загрузку страницы. Но такие методы редко используются, так как могут привести к нарушению работы сайта, особенно в случае использования готовых шаблонов для CMS, где страницы редактируются через интерфейс.
То же самое относится и к CSS. Если стили находятся внизу страницы, то пользователь может увидеть каркас страницы без стилей, что может быть воспринято как ошибка и вызвать негативное впечатление у посетителя.
Однако существует несколько способов уменьшить размер кода и ускорить загрузку страницы, не приводя при этом к нарушениям в работе сайта.
Для упрощения процесса сжатия файлов стилей можно воспользоваться онлайн-инструментами, такими как CSScompressor. Этот инструмент предлагает три уровня сжатия: Light, Normal и Super Compact, а также три варианта удаления комментариев: не удалять, удалить все или удалить комментарии определенной длины. Для профессиональных настроек доступен режим Advanced Mode.
Вариант Super Compact превращает код в одну строку, поэтому его следует использовать только в случае, если вы уверены в окончательных данных в файле стилей.
Если вы единственный разработчик и хорошо знакомы с кодом, то комментарии можно полностью удалить, что существенно уменьшит размер файла. Однако, если файл стилей разрабатывается несколькими людьми, комментарии помогут снизить вероятность ошибок и упростить совместную работу.
Сокращение JavaScript
Вы можете воспользоваться онлайн-инструментом Online YUI Compressor для сокращения размера файлов JavaScript. Этот инструмент также может использоваться для уменьшения объема CSS.
Просто скопируйте код в окно инструмента и запустите процесс сжатия. После этого замените код в соответствующих файлах на своем сайте и проверьте производительность.
Загрузка контента из Google CDN
Расстояние между серверами имеет большое значение для производительности веб-ресурсов, хотя интернет кажется единым пространством без границ. Для оптимизации загрузки страниц и сокращения времени ожидания пользователей используется CDN — сеть доставки контента, которая ускоряет передачу скриптов, стилей и изображений на сайте. Если посетитель находится на большом расстоянии от сервера, на котором размещен сайт, время загрузки может значительно увеличиться. Использование CDN позволяет снизить этот эффект, так как контент загружается с сервера, расположенного ближе к пользователю.
Gzip-сжатие
Gzip — это вид сжатия, который работает аналогично стандартному сжатию файлов на компьютере, но применяется в веб-разработке. Когда файлы, необходимые для отображения страницы, загружаются с сервера, они сжимаются в Gzip формат. Существует множество алгоритмов сжатия, но Gzip является наиболее популярным и поддерживается всеми современными браузерами. Gzip-сжатие может быть как динамическим, так и статическим.
Статическое сжатие
Статическое сжатие применяется для работы с статическими скриптами и CSS, и не требует использования ресурсов сервера. Этот метод осуществляется путем ручного сжатия файлов с помощью алгоритма gzip и загрузки сжатых копий на сервер. При загрузке сайта пользователь сразу получает доступ к сжатым файлам без нагрузки на мощности сервера.
Динамическое сжатие
В этом случае файлы архивируются на сервере, отправляются пользователю и разархивируются в браузере. Этот метод может быть эффективным, но создает дополнительную нагрузку на сервер, что может быть неприемлемо для некоторых владельцев сайтов. Этот подход может быть реализован с помощью редактирования файла .htaccess, находящегося в корневом каталоге веб-ресурса, который запущен на сервере Apache.
Кеширование
Для включения кеширования необходимо использовать сервер Apache. В случае, если сервер работает на другой платформе, необходимо связаться с администрацией хостинга для настройки.
Кеширование позволяет ускорить загрузку страниц сайта, так как файлы, необходимые для его работы, не загружаются с сервера, а хранятся на компьютере пользователя.
Чтобы настроить кеширование, необходимо отредактировать файл .htaccess. Если он не отображается, используйте функцию отображения скрытых файлов в настройках FTP-клиента. Внесите директивы для кеширования статических элементов, которые будут сохраняться в кэше браузера пользователя.
Для обновления кешированных файлов используются заголовки Last-Modified и ETag. Когда браузер отправляет GET-запрос на сайт, он получает ответ 304, если файлы не изменились и может использовать кэшированные файлы, которые находятся на компьютере пользователя. Обычно файлы изображений, стилей и скриптов хранятся на компьютере пользователя.
Сокращение времени ответа сервера
Для уменьшения времени ответа сайта можно установить плагин для кеширования и сжатия стилей и скриптов. Важно выбрать плагин с возможностью разграничения между мобильной и десктопной версиями сайта, чтобы избежать проблем с отображением страниц у пользователей. Плагин Hyper Cache является оптимальным вариантом, так как он поддерживает разделение между мобильным и обычным кешем.
Параметры измерения скорости сайта
Существует ряд ключевых параметров, которые используются для оценки скорости загрузки сайта. Рассмотрим основные из них.
Largest Contentful Paint (LCP)
Этот параметр отражает время отображения на странице самого большого элемента. Алгоритм метрики отслеживает изображения, видео с poster-изображением, текст в блочных элементах. Размер элемента определяется по формуле: ширина, умноженная на высоту. Если какой-то элемент частично скрыт за видимой областью страницы, то он не учитывается при расчетах.
Время ответа сервера
Время ответа сервера определяется как период времени от запроса в браузере до загрузки первого байта страницы сайта. При использовании Google PageSpeed Insights данный параметр не отображается, поэтому можно воспользоваться дополнительными сервисами, такими как Loading Express. Чтобы получить результат, необходимо ввести адрес сайта в поисковую строку и выбрать регион, в котором находится пользователь.
Индекс скорости загрузки
Данная метрика показывает скорость загрузки контента сайта до того момента, когда прекращаются визуальные изменения. Speed Index вычисляется от начала загрузки видимых элементов страницы до момента полного отображения сайта с корректным расположением контента. Этот показатель является одним из основных критериев оценки скорости загрузки сайта в Google PageSpeed Insights.
Время загрузки первого контента
Это интервал времени, прошедший с момента открытия страницы до загрузки первого элемента, такого как текстовый блок или изображение. Оптимальное время для этого показателя составляет 2-3 секунды, а идеальным является время в 0,5 секунды. Если пользователь увидит белый экран вместо контента, то он может подумать, что сайт не работает, или просто не захочет ждать и закроет страницу.
Время загрузки достаточной части контента
Данная метрика основана на времени, необходимом для загрузки основной части содержимого на странице. Она показывает скорость загрузки, которая необходима для взаимодействия с пользователем. В некоторых случаях время загрузки достаточной части контента может совпадать с временем загрузки первого контента или даже превышать его. Если время загрузки достаточной части контента больше, то пользователь может увидеть только фон или рамку изображения, а если меньше — то часть текста.
Время загрузки для взаимодействия
Данный параметр является ключевым при оценке скорости загрузки сайта в Google PageSpeed Insights. Он показывает время, необходимое для полной загрузки страницы, после которого посетитель может взаимодействовать с элементами сайта. Если значение этой метрики превышает 20 секунд, это может свидетельствовать о проблемах с кликабельностью и скроллингом страницы. От этой метрики зависит удобство использования сайта для посетителей.
Время окончания работы ЦП
Эта метрика отслеживает время, за которое процессор завершает работу по загрузке сайта при переходе пользователя. Она отображает, сколько времени процессору нужно для реагирования на действия посетителя. В соответствии со стандартом, время ответа не должно превышать 50 миллисекунд.
Приблизительное время задержки при вводе
Это метрика, которая отображает среднее время отклика страницы на действия пользователя в первые 5 секунд после загрузки. Если время отклика превышает 50 миллисекунд, пользователь может считать, что сайт «тормозит». Эта характеристика является наименее важной при оценке скорости загрузки страниц сайта.
Заключение
Оценка скорости загрузки страницы является важным показателем, влияющим на ранжирование сайта в поисковых системах и реакцию пользователей при переходе на страницу. Для оценки скорости загрузки существуют специализированные сервисы, такие как Google PageSpeed Insights. Этот инструмент помогает определить, насколько быстро работает сайт, выявить проблемы, затрудняющие загрузку страниц, и предложить способы их устранения.
