Показатели веб-производительности |

Это отрывок из главы 2 Полное руководство по измерению веб-производительности.

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

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

Время загрузки страницы

Вначале был PageLoad. Производительность веб-сайта измерялась с помощью одного измерения времени до запуска события PageLoad.

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

Хуже того, PageLoad было легко манипулировать. Разработчики могут сократить время загрузки страниц, отложив работу с JavaScript. Отложенная загрузка, асинхронные загрузчики скриптов, рендеринг на стороне клиента и динамическое содержимое — все это шаблоны, которые часто улучшали время загрузки страниц, но замедляли работу с точки зрения конечного пользователя.

Что мы делаем вместо этого?

Существует множество причин, по которым веб-сайт может ощущаться медленным: медленное начало, медленное завершение, прыжки, медленный отклик и многое другое. Мы больше не можем использовать одну метрику для понимания производительности.

Основные веб-жизненные показатели

В 2019 году Google представил набор показателей, предназначенных для измерения фактической производительности веб-сайта, как его увидят пользователи. Эти показатели вместе называются Core Web Vitals.

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

Обратите внимание, что Только Браузеры на базе Chrome пока поддерживают эти показатели. Показатели Core Web Vital измеряют производительность для настольных компьютеров Chrome и мобильных пользователей Android, но не для устройств iOS, пользователей Safari или Firefox.

Первая содержательная краска (FCP)

«First Contentful Paint» измеряет, сколько времени требуется, чтобы показать пользователю, что запрос получен и что страница загрузится. Например, когда вы нажимаете на новость, FCP измеряет время от щелчка до отображения заголовка новостей NPR.

FCP поощряет веб-сайты быстро реагировать на запросы. Узнать больше о Первая Contentful Paint и как ее измерить.

Google рекомендует, чтобы ваш FCP был меньше 1,0 секунды. Оценки больше, чем 3,0 секунды особенно бедны и, вероятно, имеют проблемы.

Самая большая содержательная краска (LCP)

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

Было бы точнее, если бы вы измерили время до самое важное содержимое было видно, но это сложно сделать программно. LCP — это косвенное измерение для самый важный контент.

Например, переход на домашнюю страницу NPR News имеет несколько разных рендеров, но это самый большой по площади в пикселях:

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

LCP рекомендует веб-сайтам закончить быстро подчеркнув их основной контент и убедившись, что он загружается быстро. Узнать больше о Самая большая Contentful Paint и как ее измерить.

Google рекомендует, чтобы ваш LCP был меньше 2,5 секунды. Оценки больше, чем 4,0 секунды особенно бедны и, вероятно, имеют проблемы.

Совокупный сдвиг макета (CLS)

«Совокупное смещение макета» немного сложнее понять, потому что оно не измеряет время. CLS измеряет, насколько содержимое страницы перемещается по мере загрузки и отображения другого содержимого. Как это:

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

CLS не рекомендует веб-сайтам перемещать контент после того, как пользователь его увидит, и сводит к минимуму количество контента с поздним рендерингом. Узнать больше о Совокупный сдвиг макета и как его измерить.

Ваш балл CLS должен быть меньше 0,1 и не хуже 0,25.

Задержка первого ввода (FID)

«Задержка первого ввода» измеряет, действительно ли страница готова, когда пользователь думает, что она готова. Если браузер занят загрузкой, синтаксическим анализом и запуском JavaScript, когда пользователь щелкает страницу, будет задержка, пока браузер не сможет обработать событие и инициировать событие клика. FID измеряет эту задержку.

FID не рекомендует веб-сайтам загружать слишком много JavaScript до того, как пользователь начнет взаимодействовать со страницей. Узнать больше о Задержка первого входа и как ее измерить.

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

Другие общие показатели производительности

Помимо Core Web Vitals, есть несколько других показателей, которые обычно используются популярными инструментами повышения производительности.

Время до первого байта (TTFB)

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

TTFB является подмножеством Первая содержательная краска метрика, которая также измеряет размер документа, время синтаксического анализа и рендеринга.

Время до интерактивности (TTI)

Time to Interactive – это измерение Chrome Lighthouse, которое измеряет время, необходимое для загрузки страницы. от корки до корки интерактивный, в том числе нарисованный, JavaScript завершен, и браузер выполнил свои фоновые задачи.

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

Google рекомендует считать TTI менее 3,8 секунд быстрым. Сайты медленнее 7,3 секунды имеют серьезные проблемы с производительностью. Обратите внимание, что это более широкий диапазон, чем LCP.

Общее время блокировки (TBT)

Общее время блокировки — это время, в течение которого пользовательский ввод задерживается из-за фоновых задач браузера, таких как обработка JavaScript или синтаксический анализ CSS. Он измеряет, насколько загружен браузер, чтобы загрузить вашу веб-страницу.

Индекс скорости

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

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