6 рекомендаций по улучшению производительности вашего веб-сайта с помощью инструмента Page Speed Insights. Обеспечьте быстрое и стабильное взаимодействие с пользователями и повысьте устойчивость вашего сайта.
Высокая скорость работы сайта важна не только для обеспечения отличного пользовательского опыта, но и как фактор ранжирования в поисковых системах.
Вы наверняка слышали об инструменте Google PageSpeed Insights.
Но знаете ли вы, как извлечь максимум пользы из PageSpeed Insights? Рассмотрим 6 ключевых советов, которые помогут вам оптимизировать производительность вашего сайта.
Что такое PageSpeed Insights (PSI)?
Скорость работы сайта уже давно влияет на его позиции в Google. Соответственно, Google впервые запустила свой бесплатный инструмент PageSpeed Insights еще в 2010 году.
PSI создан для того, чтобы помочь владельцам веб-сайтов проверить скорость работы их ресурса, а также получить рекомендации по его улучшению.
Почему скорость загрузки страницы важна для SEO?
В 2021 году Google представил новый набор показателей эффективности веб-сайта, который называется Core Web Vitals. Эти три показателя включают:
- Largest Contentful Paint (LCP): как быстро загружается ваш сайт?
- Cumulative Layout Shift (CLS): перемещаются ли элементы страницы неожиданно для пользователя?
- First Input Delay (FID): как быстро страница реагирует на действия пользователя?
Хорошее взаимодействие со страницей важно для высоких позиций в поисковой выдаче. Для каждого показателя существует пороговое значение оценки "Хорошо", которого необходимо достичь.
Как протестировать ваш сайт с помощью PageSpeed Insights
Провести тест производительности с помощью PageSpeed Insights очень просто:
- Откройте PageSpeed Insights
- Введите URL вашего сайта
- Нажмите "Анализировать"
Результаты тестирования появятся через несколько секунд. Данных много, но мы объясним, что они означают дальше.
1. Разберитесь, откуда берутся данные PageSpeed Insights
Каждый результат тестирования в PageSpeed Insights состоит из двух основных разделов: "Данные о работе в реальных условиях" и "Данные лабораторного анализа". В каждом разделе представлена информация о скорости загрузки страниц разного типа.
Что такое "данные о работе в реальных условиях" в PageSpeed Insights?
Эти данные собираются от пользователей Chrome на компьютерах и мобильных устройствах с Android. Чтобы эти данные учитывались в отчете Chrome User Experience Report (CrUX), пользователям необходимо:
- Войти в свой аккаунт Google
- Включить синхронизацию истории браузера
- Разрешить отправку статистики использования
Хотите узнать, учитывается ли ваш опыт использования в этих реальных пользовательских данных? Откройте адрес chrome://ukm в вашем браузере Chrome и проверьте, включен ли сбор метрик.
Данные о работе в реальных условиях показывают, насколько быстро работает ваш сайт для реальных посетителей и как это влияет на ваше SEO.
Однако у этого отчета есть некоторые ограничения:
- Данные всегда агрегируются за 28-дневный период, поэтому вы не сразу увидите, если ваш сайт стал работать хуже
- Вы можете видеть, насколько быстр ваш сайт, но CrUX не предоставляет никаких диагностических данных для его ускорения
- Не для каждой страницы вашего сайта будут доступны основные данные, так как для публикации данных Google требуется достичь минимального количества зарегистрированных посещений
Вы можете использовать инструменты мониторинга реальных пользователей (RUM), чтобы обойти эти ограничения. Данные RUM имеют ряд преимуществ, таких как мгновенное обновление и подробная диагностика.
Какие диагностические данные содержатся в PageSpeed Insights?
В то время как данные о работе в реальных условиях показывают, насколько хорошо работает ваш сайт, диагностические данные дают представление о том, как его оптимизировать.
PageSpeed Insights использует инструмент Google с открытым исходным кодом Lighthouse для тестирования вашего сайта и предоставления подробного анализа. Тест Lighthouse выполняется в контролируемой лабораторной среде, что позволяет получить воспроизводимые результаты.
Лабораторный тест также выполняется по запросу и на него не распространяется 28-дневная задержка, которая применяется к данным CrUX.
В верхней части отчета Lighthouse Google показывает общий показатель производительности от 0 до 100. Этот показатель напрямую не влияет на позиции в поиске – Google использует для этого данные CrUX. Однако хорошая оценка Lighthouse обычно означает, что ваш сайт также быстро загружается для реальных пользователей.
Оценка Lighthouse определяется на основе 5 показателей производительности:
- First Contentful Paint (FCP): как быстро начинает загружаться страница?
- Largest Contentful Paint (LCP): когда отображается основное содержимое страницы?
- Total Blocking Time (TBT): блокируются ли взаимодействия с пользователем обработкой CPU?
- Cumulative Layout Shift (CLS): перемещается ли контент после его появления?
- Speed Index: насколько быстро отображается содержимое страницы в целом?
Ниже общей оценки Lighthouse вы найдете диагностическую информацию, которая предлагает конкретные изменения для оптимизации вашего веб-сайта.
Каждая строка проверяет один конкретный аспект производительности. Например, если вы уменьшите размер JavaScript-файлов, то для отображения содержимого страницы на вашем веб-сайте потребуется меньше времени.
2. Используйте калькулятор оценки, чтобы понять, что снижает ваш результат
Если вы хотите повысить свой показатель производительности в PageSpeed Insights, с чего начать?
В каждом отчете Lighthouse есть ссылка "Посмотреть калькулятор", которая ведет вас к калькулятору оценки производительности. Этот инструмент показывает, какой вклад в общую оценку вносят пять показателей, измеренных Google.
Например, здесь мы видим, что страница, которую мы тестировали, имеет хороший показатель Cumulative Layout Shift, в то время как Largest Contentful Paint получил низкую оценку.
Мы также видим, что каждому показателю присвоен определенный вес. Например, 30% показателя производительности определяется значением Total Blocking Time.
3. Изучите данные о фазах для метрики Largest Contentful Paint (LCP)
Одним из наиболее информативных аудитов часто является "Largest Contentful Paint".
Этот аудит показывает вам самый большой элемент контента на странице. Метрика LCP измеряет, сколько времени требуется после открытия страницы, чтобы этот элемент стал видимым. Самым крупным элементом контента может быть любой тип содержимого страницы, например, заголовок или изображение.
Это очень полезно, но Lighthouse на самом деле предоставляет дополнительную информацию, разбивая LCP на фазы (также называемые подфазами):
- Time to First Byte (TTFB): как быстро сервер веб-сайта предоставляет HTML-документ?
- Resource Load Delay: как скоро после загрузки документа начинается загрузка элемента LCP?
- Resource Load Time: сколько времени требуется для загрузки элемента LCP?
- Element Render Delay: как скоро после загрузки ресурса LCP элемент LCP становится видимым?
Эта информация подскажет вам, на чем нужно сосредоточиться при оптимизации.
Например, на скриншоте ниже мы можем видеть, что изображение LCP загружалось быстро, но затем браузер не отображал его сразу. Это могло быть связано с тем, что другие ресурсы на странице блокировали отрисовку страницы.
Недавно Google провел анализ, чтобы выяснить, какие подфазы LCP вносят наибольший вклад в общее значение показателя. Они обнаружили, что время отклика сервера и задержка загрузки изображений являются важнейшими факторами при оптимизации LCP для большинства веб-сайтов.
Хотя многие рекомендации по повышению производительности веб-сайта были сосредоточены на оптимизации изображений, было обнаружено, что время загрузки изображений является второстепенным фактором на большинстве медленных веб-сайтов.
Тем не менее, вам следует проверить данные для своего веб-сайта, чтобы понять, какие оптимизации могут оказать наибольшее влияние.
4. Разница в показателях производительности между тестами: что это значит?
Мы уже видели, что данные о реальных пользователях собираются в течение 28-дневного периода. Соответственно, их значение стабильно и меняется очень постепенно.
Но этого нельзя сказать о показателях производительности и других метриках, измеряемых в лаборатории. Повторное тестирование одной и той же страницы редко приводит к точно таким же результатам и часто демонстрирует большие различия. А если вы запустите Lighthouse с помощью других инструментов, таких как Chrome DevTools, вы, вероятно, увидите еще большие различия.
Существует несколько причин для этого, например:
- Различия во времени отклика сервера
- Изменения в контенте, например, из-за A/B-тестов или рекламы
- Различия между тестируемыми устройствами и местами проведения тестирования
- Неточности при сборе данных
Google написал подробную статью о различиях в оценках Lighthouse. Вы можете запустить тесты несколько раз и посмотреть на среднее значение, чтобы получить более точную оценку.
Точность данных: наблюдаемые данные по сравнению с моделируемыми
Одной из распространенных причин расхождений между инструментами тестирования скорости загрузки страниц является способ сбора данных. При лабораторном тестировании сеть настраивается на фиксированную скорость, обычно для имитации более медленного мобильного соединения. Способ, которым достигается эта настройка, может повлиять на ваши показатели.
В PageSpeed Insights используется подход, называемый симуляцией. Измерения собираются при быстром сетевом соединении. После этого применяется имитация медленного 4G-соединения, чтобы оценить, как страница могла бы загрузиться на мобильном устройстве.
Вы можете установить флажок "Использовать оригинальные значения", чтобы просмотреть исходные наблюдаемые показатели при запуске теста в PageSpeed Insights.
Смоделированные данные могут быть менее точными, поскольку моделирование Lighthouse не учитывает все возможные сценарии, которые могут возникнуть при открытии веб-сайта.
Например, в этом тесте мы видим, что показатель Largest Contentful Paint на одну секунду хуже значений, наблюдаемых при открытии страницы в Chrome.
Однако исходные значения для First Contentful Paint и Largest Contentful Paint были идентичны. Это говорит о том, что смоделированные показатели потенциально могут не соответствовать тому, что испытывают реальные пользователи.
Вы можете проверить раздел настроек отчета Lighthouse, чтобы узнать, были ли показатели измерены напрямую или применялось моделирование.
Если вы хотите получить достоверные данные о скорости загрузки страниц, инструменты мониторинга реальных пользователей (RUM) созданы для получения наиболее точной информации. Сбор реальных измерений занимает немного больше времени, чем запуск моделирования, но это также поможет вам принимать оптимальные решения при оптимизации скорости вашего веб-сайта.
5. Используйте API PSI для автоматизации тестирования производительности
На вашем сайте много страниц, которые вы хотите протестировать? Вы можете использовать API PageSpeed Insights для автоматического массового запуска тестов сайта.
API предоставляет более подробные показатели производительности и детали по каждому аудиту Lighthouse. Например, вы можете использовать API для просмотра наиболее распространенных рекомендаций по производительности вашего веб-сайта.
6. Знайте, когда следует обратиться к другому инструменту
PageSpeed Insights - отличный инструмент для быстрой оценки производительности определенного URL-адреса вашего веб-сайта. Однако, как мы видели выше, эти данные имеют некоторые ограничения.
Если вы просто хотите получить общий обзор основных веб-показателей вашего сайта, самый быстрый способ найти эти данные - использовать отчет Core Web Vitals в Google Search Console.
Search Console точно покажет вам, сколько страниц на вашем сайте работают медленно или нуждаются в улучшении.
Необходимо глубоко изучить производительность процессора, например, чтобы оптимизировать новое взаимодействие в соответствии с метрикой First Input Delay?
На вкладке "Performance" в Chrome DevTools представлен подробный анализ всех видов обработки ЦП, происходящих на вашем веб-сайте.
Наконец, если вы хотите оптимизировать загрузку различных ресурсов на вашем сайте, вкладка "Network" в Chrome DevTools предоставит вам необходимую информацию.
Этот инструмент может предоставить подробный отчет о том, какие ресурсы загружаются вашим веб-сайтом, когда они загружаются и как они влияют на рендеринг.
Как всегда быть в курсе скорости вашего сайта
Анализ скорости загрузки страниц и другие тесты производительности - отличная отправная точка для оптимизации вашего веб-сайта. Однако без постоянного мониторинга вы рискуете повторно создавать проблемы, сами того не замечая.
DebugBear - это платформа мониторинга основных веб-показателей, которая позволяет вам постоянно тестировать как ваш собственный веб-сайт, так и сайты ваших конкурентов.
Помимо запланированного лабораторного тестирования, DebugBear также отслеживает данные Google CrUX и собирает реальную пользовательскую аналитику непосредственно на вашем сайте.
Реальные данные пользователей предоставляют широкий спектр информации, которая не только поможет вам отслеживать производительность, но и активно улучшать ее:
- Узнайте, какая подфаза LCP вызывает наибольшую задержку у ваших посетителей
- Найдите конкретные взаимодействия и скрипты, которые приводят к плохому показателю First Input Delay
- Определите конкретные страны или устройства, где производительность хуже, чем обычно
Обеспечьте отличный пользовательский опыт
PageSpeed Insights - полезный инструмент для любого владельца веб-сайта, который не только сообщает вам, насколько быстр ваш веб-сайт в реальном мире, но и дает конкретные рекомендации по его оптимизации.
Однако, если вы хотите выйти за рамки данных, предоставляемых PSI, и постоянно тестировать свой веб-сайт, вы можете попробовать бесплатную пробную версию DebugBear.
Эта статья была спонсирована DebugBear, и представленные здесь мнения отражают точку зрения спонсора.
Готовы приступить к оптимизации вашего веб-сайта? Зарегистрируйтесь на бесплатную пробную версию DebugBear и получите данные, необходимые для обеспечения отличного взаимодействия с пользователями.
