mrssea

Главные рекомендации Core Web Vitals на 2023 год

Главные рекомендации Core Web Vitals на 2023 год

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

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

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

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

Команда Chrome последний год работала над вопросом: какие самые важные рекомендации можно дать разработчикам, чтобы помочь им повысить производительность для своих пользователей?

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

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

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

В этом посте изложены основные рекомендации по повышению производительности для каждой из метрик Core Web Vitals.

Largest Contentful Paint (LCP)

Largest Contentful Paint — время рендеринга самого большого элемента, видимого в области просмотра пользователем — изображения, текстового блока, видео или другого контента. Учитываются те размеры элементов, которые видны пользователю. Если элемент частично скрыт за областью просмотра, эти невидимые части не берутся в расчет.

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

Убедитесь, что ресурс LCP можно обнаружить из HTML-документа.

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

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

Фактически, из страниц, где элементом LCP было изображение, 39% этих изображений имели исходные URL-адреса, которые нельзя было обнаружить из HTML-документа. Другими словами, эти URL-адреса не были найдены в стандартных атрибутах HTML (таких как <link rel="preload" href="..."> или <link rel="preload" href="...">), что позволило бы браузеру быстро обнаруживайте их и сразу же начинайте загружать.

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

Как правило, если ваш элемент LCP является изображением, URL-адрес изображения всегда должен быть доступен для обнаружения из источника HTML. Вот несколько советов, как сделать это возможным:

Чтобы понять, есть ли проблемы с обнаружением ваших изображений LCP, можно воспользоваться Lighthouse v10.0.

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

Убедитесь, что ресурс LCP имеет приоритет

Убедитесь, что ресурс LCP может быть обнаружен из исходного HTML-кода, — это первый важный шаг в обеспечении того, чтобы ресурс LCP мог начать загружаться раньше, но еще один важный шаг — убедиться, что загрузка этого ресурса имеет приоритет и не ставится в очередь за кучей других, менее важных ресурсов.

Например, LCP-изображение присутствует в исходном коде HTML с использованием стандартного тега <img>. Но страница включает дюжину тегов script в head перед этим тегом img. И потребуется некоторое время для того, как изображение начнет загружаться.

Самый простой способ решить эту проблему — предоставить браузеру подсказку о том, какие ресурсы имеют наивысший приоритет, установив новый атрибут fetchpriority="high" в теге <img> или <link>, который загружает изображение LCP. Это указывает браузеру загружать его раньше, а не ждать завершения этих сценариев.

Согласно Web Almanac, только 0,03% подходящих страниц используют этот новый API, а это означает, что у большинства сайтов в Интернете есть много возможностей улучшить LCP с минимальными усилиями. Хотя атрибут fetchpriority в настоящее время поддерживается только в браузерах на основе Chromium, этот API представляет собой прогрессивное усовершенствование, которое другие браузеры просто игнорируют, поэтому настоятельно рекомендуется разработчикам использовать его сейчас.

Для браузеров, отличных от Chromium, единственный способ обеспечить приоритет ресурса LCP над другими ресурсами — указать его ранее в документе. Снова используя пример сайта с большим количеством тегов script в head документа: чтобы ваш ресурс LCP имел приоритет перед этими ресурсами скрипта, можно добавить <link rel="preload"> перед любым из этих сценариев, или можно переместить эти сценарии ниже <img> перед закрывающим тегом body. Но это менее удобно, чем использование fetchpriority.

Другим важным аспектом приоритизации ресурса LCP является обеспечение того, чтобы не приводить к снижению его приоритета. Например, добавление атрибута loading="lazy". Сегодня 10% страниц фактически устанавливают loading="lazy" на своем изображении LCP. Не применяйте без разбора отложенную загрузку ко всем изображениям.

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

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

Используйте CDN для оптимизации документов и ресурсов TTFB

Последняя рекомендация — обеспечить максимально быстрое получение первоначального ответа на документ (document response).

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

Это время известно как время до первого байта, TTFB, и лучший способ уменьшить TTFB — это:

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

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

Согласно Web Almanac, только 29% запросов HTML-документов обслуживались через CDN, а это означает, что у сайтов есть значительные возможности для дополнительной экономии.

Вот несколько советов по настройке CDN:

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

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

CLS— это метрика Web Vitals, которая измеряет нестабильность контента, складывая смещение всех элементов, которое происходит независимо от действий пользователя. То есть если на странице происходит сдвиг после пользовательского ввода, например, пользователь открыл список-аккордеон после загрузки страницы, то такое смещение не будет влиять на CLS.

Следующий набор рекомендаций относится к совокупному смещению макета (CLS), которое является мерой визуальной стабильности на веб-страницах. Хотя CLS значительно улучшилась в Интернете с 2020 года, около четверти веб-сайтов по-прежнему не соответствуют рекомендуемому порогу, поэтому у многих сайтов остается большая возможность улучшить их взаимодействие с пользователем.

Установите явные размеры для любого содержимого, загружаемого со страницы.

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

Самый простой способ исправить смещения макета, вызванные неразмерными изображениями, — это явно установить атрибуты width и height (или эквивалентные свойства CSS). Без явного размера браузеры изначально устанавливают высоту по умолчанию 0 пикселей и могут вызвать заметное смещение макета, когда изображение наконец загрузится и размеры будут обнаружены.

Также важно помнить, что изображения — не единственные факторы, влияющие на CLS. Сдвиг макета может быть вызван другим содержимым, которое обычно загружается после первоначального отображения страницы, включая стороннюю рекламу или встроенные видео. Свойство aspect-ratio может помочь в борьбе с этим. Это относительно новая функция CSS, которая позволяет разработчикам явно указывать соотношение сторон для изображений, а также для элементов, не являющихся изображениями. Это позволит вам установить динамическую ширину (например, в зависимости от размера экрана), и браузер автоматически рассчитает соответствующую высоту, почти так же, как это делается для изображений с размерами.

Иногда невозможно узнать точный размер динамического содержимого. Установка разумной минимальной высоты min-height почти всегда лучше, чем позволить браузеру использовать высоту по умолчанию 0px для пустого элемента.

Убедитесь, что страницы подходят для bfcache

Браузеры используют механизм навигации, называемый обратным/прямым кешем (back/forward cache) — или для краткости bfcache — для мгновенной загрузки страницы из более ранней или поздней истории браузера непосредственно из моментального снимка памяти.

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

Владельцы сайтов должны убедиться, что их страницы имеют право на использование bfcache, и устранить все причины, по которым это не так. У Chrome уже есть тестер bfcache в DevTools.

Избегайте анимаций/переходов, использующих свойства CSS, не вызывающие reflow и repaint.

Еще один распространенный источник смещения макета — анимация элементов. Например, баннеры с уведомлениями, которые выдвигаются сверху или снизу, часто способствуют CLS. Это особенно проблематично, когда эти баннеры вытесняют другой контент, но даже если это не так, их анимация все равно может повлиять на CLS.

Каждый раз, когда вы выполняете переход или анимируете какое-либо свойство CSS, вызывающее repaint, это приводит к сдвигу макета, и если эти сдвиги макета не происходят в течение 500 миллисекунд после взаимодействия с пользователем, они влияют на CLS.

Например, абсолютно позиционированные элементы, которые анимируются вверху или слева, вызовут сдвиг макета, даже если они не перемещают другое содержимое. Однако, если вместо анимации сверху или слева вы анимируете transform:translateX() или transform:translateY(), это не заставит браузер обновить макет страницы и, следовательно, не произведет никаких сдвигов макета.

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

Никогда не анимируйте и не перемещайте какое-либо свойство CSS, требующее от браузера обновления разметки страницы, за исключением случаев, когда вы делаете это в ответ на касание пользователя или нажатие клавиши (но не при наведении курсора). И по возможности предпочитайте переходы и анимацию с использованием свойства преобразования CSS.

First Input Delay (FID)

First Input Delay (FID) — Задержка первого ввода, одна из метрик производительности веб-страниц, которая описывает время, которое прошло с момента, когда пользователь впервые начал взаимодействовать с веб-страницей.

В то время как большинство сайтов в Интернете в настоящее время очень хорошо оцениваются по FID, рассмотрим возможность улучшить общую реакцию на взаимодействие с пользователем.

Новая метрика Interaction to Next Paint (INP) является возможным преемником FID, и все приведенные ниже рекомендации в равной степени применимы как к FID, так и к INP. Но стоит учесть, что сайты хуже работают с INP, чем с FID, особенно на мобильных устройствах.

Избегайте или прерывайте длительные задачи

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

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

Другой вариант — рассмотреть возможность использования таких API, как isInputPending и Scheduler API. isInputPending — это функция, которая возвращает логическое значение, указывающее, ожидает ли пользовательский ввод. Если он возвращает true, вы можете уступить основному потоку, чтобы он мог обработать ожидающий пользовательский ввод.

Scheduler API — это более продвинутый подход, который позволяет планировать работу на основе системы приоритетов, учитывающей, является ли выполняемая работа видимой для пользователя или фоновой.

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

Избегайте ненужного JavaScript

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

Несколько вариантов уменьшения JavaScript:

Избегайте больших обновлений рендеринга

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

Есть некоторые вещи, которые вы можете сделать, чтобы ваши обновления рендеринга были разумными и не растягивались на длинные задачи:

Заключение

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

Если вы хотите выйти за рамки рекомендаций, перечисленных здесь, ознакомьтесь с этими руководствами по оптимизации для получения дополнительной информации:

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

Вольный перевод статьи https://web.dev/top-cwv-2023/

Последняя редакция 29 января, 2023 в 05:01