[Перевод] Топ рекомендаций по Core Web Vitals на 2023 год02.02.2023 22:27

65fklbb2f2f-gr0shnqx_11kd_s.png


Привет, друзья!

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

Core Web Vitals — это часть метрик Web Vitals, используемых для оценки веб-страниц и включенных во все инструменты Google. Владельцы сайтов должны учитывать эти метрики. Каждый показатель Core Web Vitals представляет собой отдельный аспект опыта взаимодействия пользователя с сайтом, измеряемый в полевых условиях и отражающий реальные действия по достижению критически важного результата, ориентированного на пользователя.

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

Интересно? Тогда прошу под кат.

Текущий набор метрик Core Web Vitals фокусируется на трех аспектах взаимодействия с пользователем: скорости загрузки страниц сайта, интерактивности и визуальной стабильности, и включает следующие показатели (и их соответствующие пороговые значения):


nla5di_6rntrvqw6sl0vssnjs2w.png
8efl-p0vlruxipglvrpy_yrmufa.png
kjsb3cbvoipfw8fomxecmn8teps.png

Недавно в CWV была добавлена еще одна метрика — Interaction to Next Paint (INP) — Интерактивность до следующей отрисовки: измеряет интерактивность на протяжении всего времени посещения пользователем страницы. Данная метрика пока считается экспериментальной. Показатель INP не должен превышать 200 миллисекунд.


wlhhgmcuz7dulltpfmsl0kvae-i.png

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

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

Например, метрики Time to First Byte (TTFB) — Время до первого байта и First Contentful Paint (FCP) — Первая отрисовка контента являются критически важными аспектами загрузки и полезны для диагностики проблем с LCP (медленное время отклика сервера или ресурсы, блокирующие рендеринг).

Аналогично, такие показатели, как Total Blocking Time (TBT) — Общее время блокировки и Time to Interactive (TTI) — Время до интерактивности, являются крайне важными метриками для выявления и диагностики потенциальных проблем с интерактивностью, которые могут повлиять на FID. Однако они не входят в набор Core Web Vitals, потому что не поддаются измерению в полевых условиях и не отражают результаты, ориентированные на пользователя.

Приведенный ниже список рекомендаций по повышению веб-производительности акцентирует внимание на трех вещах:


  • наибольшее влияние в реальном мире;
  • актуальность и применимость к большинству сайтов;
  • реализуемость большинством разработчиков.


Largest Contentful Paint (LCP)

На сегодняшний день лишь около половины сайтов в Интернете удовлетворяет пороговому значению LCP.


Ресурс LCP должен находиться в HTML

Согласно Web Almanac 2022, подготовленного HTTP Archive, 72% мобильных страниц содержат изображение в качестве элемента LCP. Это означает, что быстрая загрузка этих изображений является критически важной для LCP.

Однако скорость загрузки изображения — это только одна часть задачи. Другой частью является минимальное время до начала загрузки изображения.

39% источников указанных выше изображений являются недостижимыми в HTML. Другими словами, их URL не были обнаружены в стандартных атрибутах HTML (таких как  или ), которые позволяют браузеру быстро обнаружить и начать загрузку изображения.

Если URL изображения недостижим в HTML, значит, страница должна ждать полной загрузки файлов CSS или JavaScript, их разбора (парсинга) и обработки до начала загрузки изображения.

Общая рекомендация: если изображение является элементом LCP, его URL должен находиться в HTML. Этого можно достичь следующим образом:


  • загрузка изображения с помощью элемента с атрибутом src или srcset. Не используйте нестандартные атрибуты вроде data-src, которые требуют JS для рендеринга. 9% проанализированных страниц скрывают свои LCP изображения за атрибутом data-src;
  • используйте server-side rendering (SSR) — рендеринг на стороне сервера вместо client-side rendering (CSR) — рендеринга на стороне клиента, поскольку SSR возвращает страницу целиком, включая изображения. CSR требует JS для рендеринга страницы, включая изображения;
  • если изображение запрашивается из внешнего файла CSS или JS, для его предварительной загрузки можно использовать тег . Обратите внимание: ссылка на изображение во встроенных стилях (inline styles) не обнаруживается сканером предварительной загрузки.

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


Ресурс LCP должен быть приоритетным

Ресурс LCP должен быть не только достижим в HTML, он также должен быть приоритетным по сравнению с другими менее важными ресурсами.

Например, если изображение LCP присутствует в HTML, но в  документа имеется множество тегов