Как анализировать результаты Google PageSpeed Insights
Опубликовано: 2020-12-02
Поскольку Google собирается повысить рейтинг быстрых веб-сайтов, вы, вероятно, хотите узнать больше об инсайтах Google PageSpeed?
…И я не удивлен, потому что это сбивает с толку!
Эта статья поможет.
Почему важна скорость страницы сайта?
Google хочет предоставить пользователям наилучший пользовательский опыт.
Если ваш веб-сайт работает медленно, это расстроит пользователей и создаст плохой пользовательский опыт. Это просто. Производительность влияет на опыт.
Недавно Google объявил, что в 2021 году основные веб-показатели будут использоваться как часть их алгоритма ранжирования. Эти основные веб-жизненные показатели являются показателями скорости и того, насколько быстро люди могут взаимодействовать с вашей страницей.
В основном для этой таблицы ниже вы не можете быть «красным»
Что такое Google PageSpeed Insights?
Это бесплатный инструмент, предоставляемый Google, который позволяет вам ввести URL-адрес веб-страницы и быстро запустить тест для проверки различных показателей, связанных с производительностью.
Затем инструмент дает вашей странице оценку от 0 до 100 баллов. Оценка на самом деле не о скорости. Вы можете улучшить оценку, если воспользуетесь типичными рекомендациями Google по повышению скорости.
Он также показывает вам точные параметры, которые замедляют работу вашей страницы, а также предложения о том, как ее улучшить.
Здесь все становится техническим, а результаты немного трудными для понимания.
Как вы интерпретируете результаты?
Первое, что вы видите после запуска теста, — это оценка производительности (на компьютере и на мобильных устройствах) анализируемой страницы.
Это будет число от 0 до 100.
- от 0 до 49 — это плохо, вы не хотите, чтобы ваш счет был 49 или ниже
- От 50 до 89 — это нормально, но есть место для улучшения
- От 90 до 100 — если вы находитесь в этой шкале, вы в хороших книгах.
При прокрутке вниз вы увидите, что вызывает высокий или низкий балл:
Примечание. См. цветные индикаторы перед каждым разделом:
- Зеленый означает быстрый
- Оранжевый означает умеренный
- Красный означает медленный
Вот что означает каждый из этих разделов:
Первая ContentFul Paint
Это время, которое требуется от перехода на страницу из браузера до момента, когда контент начинает отображаться.
По сути, это индикатор того, что страница начинает загружаться.
Например, это может быть просто изменение цвета фона страницы, отображаемого изображения или фрагмента текста.
Это важно, потому что, когда пользователь видит какое-то действие, он, скорее всего, будет ждать, пока страница полностью не загрузится.
Руководство:
Время интерактива
Этот параметр показывает, насколько быстро страница становится интерактивной.
Это означает, что страница показывает достаточное количество элементов на экране, чтобы пользователи могли взаимодействовать с ней, например, щелкнуть кнопку меню.
Иногда веб-сайты могут сосредоточиться на видимости, т. е. на отображении всего, прежде чем вы сможете взаимодействовать с контентом, что может разочаровать пользователя.
Руководство:
Общее время блокировки
Существует разрыв между временем, когда посетитель вашего веб-сайта видит контент на экране, и временем, когда он может взаимодействовать с ним.
Это общее время блокировки!
Полезно знать, что люди не могут делать такие вещи, как щелчок мышью, касание экрана или нажатие ключевых слов до того, как веб-сайт станет интерактивным.
Длинные задачи — это задачи, которые блокируют вас более чем на 50 мс.
Все, что превышает 50 мс, считается временем блокировки.
Если нет длинных задач, вы увидите 0 времени блокировки, что вы видите в статистике выше.
Совокупный сдвиг макета
Сдвиг макета — это когда визуальный элемент отображается на экране, но затем перемещается.
Так, например, вы читаете новости, и происходит смещение макета, поэтому место, где находится новостная статья, изменилось.
Это неожиданное поведение с точки зрения пользователя.
Чем выше оценка, тем хуже.
Индекс скорости
Это сложно понять, но ценно.
Итак, представьте себе 2 веб-сайта, которые загружаются за 1,5 секунды.
Если бы вы просматривали 2 веб-сайта, показанных на изображении выше, какой из них загружался бы быстрее?
Оба полностью загружаются за 1,5 секунды, но поскольку первый сайт начал показывать некоторые элементы раньше, он показался пользователю быстрее.
Если вы просто измеряете время загрузки, они одинаковы.
Индекс скорости — это расчетный показатель, основанный на том, насколько «быстро» полностью загружается веб-сайт.
Видеозапись загрузки используется, чтобы визуально показать, когда биты загружены.
Через различные промежутки времени количество контента, видимого на экране (в верхней части экрана), сравнивается с контентом, отображаемым на полностью загруженном веб-сайте, чтобы определить процент контента, отображаемого за это конкретное время.
Этот процесс повторяется несколько раз.
Время зависит только от того, что пользователь может видеть на экране (окне просмотра). Неважно, что находится ниже сгиба.
Так что… хорошо попробовать с разными окнами просмотра.
Если у вас есть 2 веб-сайта, и один из них показывает визуальные элементы раньше другого, это приведет к более низкому показателю индекса скорости.
Чем ниже, тем лучше.
Самая большая содержательная краска
Это время, необходимое для полного отображения самого большого элемента страницы.
По мере загрузки страницы первый элемент становится самым большим элементом, но он заменяется по мере добавления более крупных элементов.
Последний элемент страницы может быть самым большим элементом страницы (например, большим изображением), а может и не быть.
Примечание: мы не говорим о том, сколько места он занимает на экране.
Вот 2 примера.
Время с момента начала отображения веб-сайта до момента отображения последнего изображения на странице будет считаться самой большой содержательной краской. Это потому, что изображение занимает больше всего места на странице!
Но…
В приведенном ниже случае изображение «Instagram» было самым большим отображаемым изображением, поэтому самая большая содержательная краска — это когда был загружен предпоследний экран.
Последний экран со скидкой. Все, что было добавлено на этот экран, — это «кнопка Google Play», изображение которой было меньше, чем «Instagram».
Согласно Google, если вы хотите обеспечить хороший пользовательский опыт, LCP должен происходить в течение 2,5 секунд после первой загрузки страницы.
Руководство:
Возможности
В разделе «Возможности» представлены предложения, которые могут помочь сократить время загрузки страницы.
Каждое предложение также показывает предполагаемое сокращение времени загрузки страницы, если вы примените рекомендацию.
Диагностика
Диагностика выделяет передовые методы веб-разработки, которые вам следует рассмотреть для реализации.
Однако, даже если вы внесете эти улучшения, они не окажут прямого влияния на показатель производительности вашей страницы.
Резюме
Улучшение скорости вашего веб-сайта — это предоставление посетителям лучшего опыта. Наличие сайта, который быстро загружается, делает пользователей и поисковые системы более счастливыми, но также влияет на вашу способность превращать посетителей в клиентов.
Такой инструмент, как Google PageSpeed Insights, невероятно полезен, потому что он показывает, с чего начать и на каких проблемах следует сосредоточиться, чтобы повысить производительность вашего сайта.
Надеемся, что эта статья помогла вам понять, как работает этот инструмент и что на самом деле означают результаты теста, чтобы вы могли начать оптимизировать свои веб-страницы, чтобы создать удивительный опыт для ваших посетителей.