Обновление GTmetrix 2020

Все, что вам нужно знать о новом отчете GTmetrix (на платформе Lighthouse)

Обзор

GTmetrix потерпел самое большое изменение, заменив библиотеки PageSpeed/YSlow на Lighthouse, отраслевой стандарт производительности в Интернете.

Поскольку GTmetrix теперь поддерживается Lighthouse, новый отчет GTmetrix был значительно переработан, чтобы включить данные и показатели Lighthouse.

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

В этой статье дано подробное объяснение всех изменений в новом отчете GTmetrix, а также его сравнение со старыми отчетами PageSpeed/YSlow, которые в дальнейшем называются устаревшими отчетами (Legacy Reports).


Детали выставления оценок и выставления баллов

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

Новые оценки GTmetrix и производительности, структуры

Новая оценка GTmetrix и оценки производительности/структуры

Результатом стала новая оценка GTmetrix (GTmetrix Grade) — взвешенная оценка, полученная на основе новых оценок производительности и структуры (Performance и Structure), которые заменяют старые оценки PageSpeed и YSlow (устаревшие отчеты).


Оценка GTmetrix

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

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

GTmetrix Grade - это совокупное представление о загрузке страниц ваших посетителей

GTmetrix Grade — это совокупное представление о загрузке страниц ваших посетителей, как о том, насколько хорошо она построена, так и о фактической производительности.

Оценка GTmetrix представляет собой средневзвешенное значение двух новых оценок, основанных на процентах, а именно:

  • Оценка производительности (70%)
  • Оценка структуры (30%)

Оценка GTmetrix основана на простой формуле, которая в настоящее время присваивает весовой коэффициент 70/30 для оценок производительности и структуры соответственно.

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


Оценка производительности

Оценка производительности — это, по сути, ваша оценка производительности Lighthouse, полученная с помощью тестов GTmetrix, с браузером GTmetrix, спецификациями оборудования и указанными параметрами анализа (AdBlock, скорость подключения и т. д.).

Оценка производительности

Оценка производительности показывает, насколько хорошо ваша страница работает с точки зрения пользователя.

Эта оценка состоит из 6 ключевых показателей со следующими значениями:

  • Производительность загрузки (55%)
    • Первая насыщенная краска (15%)
    • Индекс скорости (15%)
    • Самая насыщенная краска (25%)
  • Интерактивность (40%)
    • Время до интерактивности (15%)
    • Общее время блокировки (25%)
  • Визуальная стабильность (5%)
    • Совокупный сдвиг макета (5%)

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

Полная информация о вашей оценке производительности приведена на вкладке «Производительность» (Performance) отчета GTmetrix.

Как это соотносится с оценкой производительности, которую я вижу в Google PageSpeed ​​Insights или web.dev?

Хотя официальные инструменты Google также управляются Lighthouse, они используют собственное оборудование и методики тестирования для определения оценки производительности.

Вот несколько ключевых отличий, из-за которых оценки могут отличаться:

  • Географические различия
    Неизвестно, проводит ли Google тесты серверов в зависимости от их географического региона. GTmetrix позволяет вам определить, из какой тестовой области анализировать вашу страницу.
  • Аппаратные различия
    GTmetrix и Google, вероятно, будут иметь разные обозначения ЦП/памяти для тестов, что повлияет на показатели.
  • Сетевые различия
    Различия в сетевых подключениях и отклонения могут способствовать изменениям отдельных показателей.
  • Другая гугл-магия
    У Google могут быть дополнительные соображения при вычислении оценки производительности.

Хотя оценка производительности GTmetrix и оценка производительности, созданная Google, напрямую не сопоставимы, они должны быть похожи.


Оценка структуры

Оценка структуры показывает, насколько хорошо ваша страница построена для оптимальной производительности.

Оценка структуры

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

Как и в случае с оценками PageSpeed и YSlow в устаревшем отчете, ваша оценка структуры отражает то, насколько хорошо ваш сайт построен для оптимальной производительности.

Индивидуальные аудиты GTmetrix

В дополнение к стандартным аудитам Lighthouse также включены специальные аудиты, которые имеют отношение к производительности в Интернете. Эти настраиваемые аудиты GTmetrix включают:

  • Включить Keep-Alive
    • Это сработает только на страницах, использующих HTTP/1.1, без обнаруженной директивы Keep-Alive ON.
    • Если будет обнаружено, что ваша страница использует HTTP/2, эта проверка вас не коснется.
  • Объединить изображения с помощью CSS-спрайтов
    • Если на вашей странице отображается несколько небольших изображений со спрайтом, будет запущен этот аудит.
    • Обратите внимание, что этот аудит имеет разные пороги в зависимости от того, использует ли ваша страница HTTP/1.1 или HTTP/2.
  • Использовать сеть доставки контента (CDN)
    • CDN играют важную роль в обеспечении стабильно быстрой работы веб-сайта во всем мире.
    • GTmetrix будет продолжать отмечать любые статические ресурсы, которые могут обслуживаться в CDN, для лучшей глобальной доставки, хотя и не так наказуемо, как раньше.
  • Избегать CSS @import
    • По возможности рекомендуется избегать использования CSS @import, поскольку любые директивы импорта, обнаруженные браузером (без атрибута defer), будут немедленно загружены, проанализированы и выполнены.
    • Это может заблокировать рендеринг остальной части вашей страницы.

Полная информация о вашем рейтинге структуры приведена на вкладке «Структура» отчета GTmetrix.

Влияют ли результаты моей структуры на мои результаты?

Результаты вашей структуры не влияют напрямую на ваши результаты.

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

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

Высокое общее время блокировки

 

Высокое общее время блокировки, вероятно, связано с большими сдвигами макета и ресурсами, блокирующими рендеринг.

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


Web Vitals

Google установил Web Vitals в качестве основных показателей, на которых вы должны сосредоточиться, чтобы обеспечить быстрое взаимодействие с сайтом.

Web Vitals

Web Vitals — это ключевые показатели, которые больше всего влияют на производительность вашей страницы.

Эти показатели включают:

  • Самая большая содержательная краска (LCP)
    Сколько времени потребовалось для отображения самого большого элемента содержимого.
  • Общее время блокировки (TBT)
    Сколько времени было заблокировано скриптами в процессе загрузки вашей страницы.
  • Накопительный сдвиг макета (CLS)
    Насколько сильно изменился макет вашего пользователя во время загрузки страницы.

Хорошие значения по этим показателям — хороший знак того, что вы доставляете быстрые и (как называет Google) приятные впечатления для посетителей.

Web Vitals — отличный способ сравнить вашу страницу, поскольку они фокусируются на небольшом наборе ключевых показателей, которые наиболее влияют на восприятие производительности; вы найдете Web Vitals в центре внимания, наряду с оценками GTmetrix и оценками производительности/структуры в новом отчете GTmetrix.


Новые вкладки «Сводка», «Производительность» и «Структура»

В этом новом выпуске представлен пересмотренный отчет GTmetrix с новыми вкладками. Мы подробно описываем каждую из вкладок ниже:


Вкладка «Сводка» (Summary)

Новой в GTmetrix Reports является вкладка «Сводка», на которой отображается полный снимок производительности, структуры и загрузки страницы.

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

Новая вкладка сводки GTmetrix

Новая вкладка сводки GTmetrix

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

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

Визуализация скорости

Ваши показатели эффективности сочетаются с периодическим отслеживанием загрузки вашей страницы в новой визуализации скорости.

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

Основные проблемы GTmetrix

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

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

В разделе «Основные проблемы» (Top issues) вы найдете новую диаграмму «Сведения о странице» (Page Details), которая показывает, из каких типов запросов состоит ваша страница, включая количество запросов и их размер в байтах.

Сведения о странице

График «Сведения о странице» показывает, как составлена ваша страница с точки зрения размера и типов запросов.

Это полезно для быстрого определения того, перегружена ли ваша веб-страница JavaScript, CSS, изображениями и т. д. При наведении курсора на сегмент отображается дополнительная информация об этом типе запроса в целом.

Дополнительные сведения о странице

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

Наконец, вы найдете раздел «Больше от GTmetrix» (More from GTmetrix), где дано советы и рекомендации по оптимизации на основе анализа вашей страницы.

Статьи и советы от GTmetrix

Получайте статьи и советы от GTmetrix на основе анализа вашей страницы.

В зависимости от того, что обнаружено во время тестирования вашей страницы, предложено советы и рекомендации по вашей платформе (например, WordPress, Shopify и т. д.), оптимизации изображений, производительности сервера, использованию CDN и т. д.


Вкладка «Производительность» (Performance)

Вкладку «Время» удалили и заменили ее новой вкладкой «Производительность», на которой подробно показаны ваши показатели производительности.

GTmetrix Performance

Новая вкладка GTmetrix Performance.

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

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

Скрыть подробные сведения GTmetrix

Вы можете скрыть подробные сведения о показателях для просмотра показателей эффективности только с данными.

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

Цветовая кодировка и контекст

В зависимости от того, как работает показатель, вы увидите следующие цвета и сообщения:

Цветовая кодировка

Каждая метрика сопровождается описанием с цветовой кодировкой, чтобы помочь вам понять ее влияние.

Под показателями производительности вы увидите время вашего браузера (Browser Timings), такое же, как вы помните из устаревших отчетов GTmetrix.

Тайминги браузера

Время браузера включено во вкладку «Производительность».

Время работы браузера не оказывает прямого влияния на вашу оценку производительности; однако они могут предоставить дополнительную информацию об эффективности вашей страницы и заслуживают внимания.


Вкладка «Структура» (Structure)

Вкладка «Структура» — это духовный преемник вкладок PageSpeed и YSlow, содержащий все ваши аудиты Lighthouse на основе структуры и лучшие практики для оптимальной работы в Интернете.

Новая вкладка структуры GTmetrix

Новая вкладка структуры GTmetrix.

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

Новым в GTmetrix является «Воздействие (Impacts) для аудита» — собственная оценка, состоящая из потенциальной экономии, влияния на показатели и других факторов.

Влияние, по сути, показывает, насколько конкретный аудит повлиял на ваш показатель эффективности.

Влияния рассчитываются на основе результатов анализа, затем помещаются в один из следующих пороговых значений:

Аудит структуры

Влияние показывает, насколько аудит структуры повлиял на ваши показатели эффективности.

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

Ресурсы, которые блокируют рендеринг

При нажатии на аудит будут отображены ресурсы, которые блокируют рендеринг.


Другие вкладки

Остальные вкладки отчетов GTmetrix обычно остаются неизменными с небольшими изменениями:

  • Вкладка Waterfall
    • График GTmetrix Waterfall Chart не изменился в этом выпуске и является отличным дополнением к данным Lighthouse.
  • Вкладка Видео
    • Диафильм, ранее находившийся на вкладке «Видео», был удален вместо «Визуализации скорости» на странице «Сводка».
    • Хотя видеоплеер не видит изменений, обратите внимание, что в легенде видеоплеера еще не реализованы новые этапы Lighthouse (скоро).
  • Вкладка История
    • Изменения на вкладке «История» включают добавление новых графиков для показателей оценки производительности и замену графиков PageSpeed ​​и YSlow на график GTmetrix Grade/Performance и Structure Scores.

Обратите внимание, что вы по-прежнему можете просматривать историю производительности PageSpeed/YSlow, если просматриваете ранее созданный отчет GTmetrix.


Как новый отчет GTmetrix сравнивается с прежним отчетом?

По большей части это не так.

Метрики на основе Lighthouse, используемые для создания нового отчета, принципиально отличаются от предыдущих рекомендаций PageSpeed ​​и YSlow. Хотя оба отчета имеют несколько одинаковых таймингов, их не следует сравнивать.

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

Новый отчет GTmetrix представляет собой совершенно новый эталон для владельцев сайтов для оценки веб-производительности.

В устаревшем отчете представлены рекомендации, основанные на том, насколько хорошо вы придерживаетесь передовых практик PageSpeed/YSlow, т. е. сосредоточены только на структуре или на том, насколько хорошо ваша страница построена по скорости.

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

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


Итог

Это наиболее полное обновление GTmetrix на сегодняшний день, который хорошо соответствует вашим потребностям в производительности в Интернете.

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

Поделиться на своей странице социальной сети: