Core Web Vitals: с чего начать?
Согласно web.dev, улучшение качества взаимодействия с пользователем — ключ к долгосрочному успеху любого сайта. Понимая, насколько важен для развития интернета качественный пользовательский опыт, компания Google в 2020 году представила инициативу Web Vitals. Это единое руководство по метрикам качества, которые необходимы для обеспечения удобного взаимодействия с пользователем. Хотя за прошедшие годы Google создала ряд инструментов для измерения эффективности взаимодействия и составления отчетов (Lighthouse, PageSpeed Insights и Measure), Web Vitals должна упростить измерение производительности и помогает разработчикам сайтов сосредоточиться на самых важных показателях — Core Web Vitals.
Core Web Vitals
CWV — это подмножество метрик инициативы Web Vitals, позволяющих численно оценить впечатления пользователя от вашего сайта. Полученные с их помощью оценки пользовательского опыта применимы ко всем веб-страницам (независимо от их специализации), поэтому владельцам сайтов необходимо измерять CWV. Google планирует поддержать CWV во всех своих инструментах для разработчиков.
Метрики CWV будут развиваться с течением времени (лог изменений), на текущий момент их три:
- Largest Contentful Paint (LCP): воспринимаемая скорость загрузки. Значение метрики — это время, которое прошло с момента начала загрузки страницы до момента, когда основное содержимое, вероятно, загружено. Окончание загрузки определяется по моменту отрисовки самого большого элемента (изображение или текстовый блок, видимый в области просмотра). Значение метрики должно быть как можно меньше (75-й перцентиль равен 2,5 секунды).
- First Input Delay (FID): интерактивность страницы (численная оценка опыта, который испытывают пользователи, пытаясь взаимодействовать с неотвечающими страницами). Значение метрики является временем, которое прошло с момента, когда пользователь впервые начал взаимодействовать со страницей (нажал на ссылку, кнопку и т.п.), и до момента, когда браузер может ответить на это действие. Значение метрики должно быть как можно меньше (75-й перцентиль равен 100 миллисекундам, но уже сейчас Google «по-прежнему настоятельно рекомендует использовать 95—99 процентили»).
- Cumulative Layout Shift (CLS): визуальная стабильность. Значение метрики — это показатель наибольшего неожиданного сдвига макета (layout shift), который происходит в течение определенного времени. До 1 июня 2021 года метрика охватывала весь жизненный цикл страницы, однако сейчас она означает быструю последовательность сдвигов (shifts) с интервалом менее 1 секунды между сдвигами и не более 5 секунд для всей последовательности. Неожиданными сдвигами являются те, которые происходят без анимации или позднее 500 миллисекунд после пользовательского ввода. То есть на CLS влияют все неожиданные сдвиги содержимого при взаимодействии с сайтом (например, вызванные загрузкой баннеров или других асинхронных блоков). Значение метрики должно быть как можно меньше (75-й перцентиль равен 0,1).
Значение CWV для продукта
Для менеджеров продукта мотивацией к улучшению показателей Web Vitals может быть положительное влияние высоких оценок сайта на повышение качества пользовательского опыта, которое, в конечном итоге, влияет на длительность сессии и конверсию пользователей. Множество примеров влияния улучшения CWV-показателей на ключевые показатели бизнеса (Key Performance Indicators, KPI) можно найти на сайте WPO stats.
Другой мотивацией может стать влияние метрик на SEO: с мая 2021 года Google учитывает значения метрик при ранжировании сайтов в поисковой выдаче. А начиная с 85 версии Chrome для Android при переходе по ссылкам добавляет специальную метку для страниц, которые обладают высокими оценками по CWV.
Опыт главной страницы Mail.ru
Прежде чем рассказывать о нашем опыте улучшения CWV давайте кратко познакомимся с техническими особенностями главной страницы. Долгое время проект разрабатывался на основе собственного XML-like шаблонизатора Fest, однако в 2019 году мы от него отказались в пользу Svelte 3. Подробнее о преимуществах и недостатках Fest, а также о мотивации к изменению стека технологий в пользу Svelte можно узнать из доклада нашей команды на Svelte Russia Meetup #1. Отметим, что хотя Svelte и реализует реактивность, но не использует Virtual DOM, поэтому менее требователен к ресурсам. Подход, используемый в Svelte, позволяет избежать добавления неиспользуемых функций в результирующий код (бандл), потому что код, реализующий эти функции, просто не генерируется компилятором, если функции не используются. То есть на этапе компиляции этот код вырезается, что приводит к уменьшению результирующего бандла. Всё это само по себе положительно влияет на оценки по метрике FID CWV. Но несмотря на это, наш опыт исправления CWV может быть интересен тем, кто использует популярные фреймворки «большой тройки», или даже практически любой технологический стек.
Мы и до появления CWV контролировали значения некоторых других метрик Web Vitals, таких как First Contentful Paint (FCP), Total Blocking Time (TBT), Time to Interactive (TTI), с помощью дашборда для мониторинга производительности. Напомним:
- FCP — время с момента начала загрузки страницы до момента отображения какой-либо части содержимого. Отвечает за воспринимаемую пользователями скорость загрузки приложения. Помогает в диагностике проблем с LCP CWV (мониторинг ресурсов, блокирующих рендеринг).
- TBT — общее количество времени, в течение которого страница не отвечает на действия пользователя, такие как клики мыши, касания экрана или нажатия клавиатуры. Помогает выявлять и диагностировать потенциальные проблемы с интерактивностью, которые могут повлиять на FID CWV.
- TTI — сколько времени требуется странице, чтобы стать полностью интерактивной. Аналогично TBT помогает в обнаружении проблем с FID CWV.
Поэтому начать улучшать метрики CWV мы решили с внедрения системы мониторинга для CWV. Однако чтобы иметь возможность оценить результаты, необходимо понять, что именно влияет на различные метрики, то есть изучить рекомендации Google.
Рекомендации Google по улучшению CWV
Для улучшения метрик CWV компания Google предлагает ряд готовых советов. Однако поскольку в нашей команде разработчики всегда заинтересованы в повышении скорости работы страницы, то некоторая работа по улучшению метрик уже проводилась. Нужно было понять, что именно из советов уже реализовано, а также какие рекомендации следует применить.
Выделим основные советы Google по улучшению метрик CWV. Рядом с каждым советом мы добавили обозначения для десктопной версии главной страницы:
