4 экспертные стратегии по исправлению крупнейшей контентной отрисовки (LCP). Резюме вебинара

Спустя три года после внедрения Core Web Vitals ошеломляющие 33% веб-сайтов по всему миру все еще с трудом справляются с общеизвестно сложным показателем – крупнейшей содержательной отрисовкой (LCP).

Чтобы решить эту проблему, мы объединились с Google и запустили серию вебинаров из четырех частей «Основные веб-показатели для вашего бизнеса». Третий выпуск, посвящённый освоению LCP-оптимизации, теперь доступен для повтора на YouTube:

На этой сессии ведущие умы Google Барри Поллард и Адам Сильверстайн вместе с техническим директором NitroPack Ивайло Христовым обсуждают:

• Последние события и изменения вокруг LCP
• Что делает LCP самым трудным для оптимизации показателем Core Web Vitals
• Живые техники для улучшения плохих показателей LCP

Прочтите основные моменты вебинара и практический контрольный список для исправления вашего LCP с «Не удалось» на «Пройдено».

Что такое наибольшая содержательная краска (LCP)?

Largest Contentful Paint (LCP) — это метрика Core Web Vitals, которая измеряет время рендеринга самого большого элемента в области просмотра относительно момента начала загрузки страницы. Это особенно важно для пользовательского опыта, поскольку помогает понять воспринимаемую производительность загрузки с точки зрения пользователя.

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

• Менее 2,5 с — это хорошо
• 2,5–4,0 с означает, что требуется улучшение.
• Более 4,0 с считается плохим.

Что считается элементом LCP?

Различные элементы можно считать самым большим элементом контента в зависимости от структуры и содержания веб-страницы.

Любое из следующего может быть классифицировано как кандидат на самый крупный элемент контента:

• Изображения: сюда входят изображения, загруженные с помощью тега img , а также изображения, используемые в качестве фона через CSS и отображаемые в области просмотра.
• Элементы изображения внутри элемента svg : если SVG содержит элементы изображения (например, через тег изображения ), о них можно сообщить как LCP.
• Видео. Постер видео (изображение, которое отображается перед воспроизведением видео) может быть LCP. Сам видеокадр также может быть LCP, если нет изображения постера и видео воспроизводится автоматически без вмешательства пользователя.
• Анимированные изображения: например, первый кадр анимированных GIF-файлов.
• Текстовые элементы уровня блока: это относится к текстовым элементам, таким как заголовки (h1, h2 и т. д.), абзацы (p), списки (ul, ol и т. д.) и другие. Блок текста, занимающий наибольшее количество места в области просмотра, может быть кандидатом на LCP.
• Элементы с фоновым изображением, загруженным через CSS. Если элемент, например элемент div или раздел , имеет фоновое изображение, установленное с использованием свойства фонового изображения в CSS, и это изображение представляет собой самый большой видимый контент, это может быть LCP.

Как найти элемент LCP на веб-странице

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

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



К счастью, с помощью таких инструментов, как Chrome DevTools и WebPageTest, вы можете легко определить конкретный элемент LCP для конкретного сценария загрузки страницы.

1. С помощью Chrome DevTools

• Щелкните правой кнопкой мыши в любом месте страницы и выберите «Проверить».
• Перейдите на вкладку «Производительность» и просто перезагрузите страницу.
• После загрузки страницы вы увидите хронологию событий.
• Найдите маркер «LCP» в разделе «Время» и прокрутите вниз, чтобы увидеть более подробную информацию на вкладке «Сводка».
• Наведите указатель мыши на ссылку «Связанный узел», чтобы выделить элемент LCP на странице.

2. С помощью WebPageTest

• На сайте www.webpagetest.org введите URL-адрес веб-страницы и запустите тест.
• После завершения теста перейдите на вкладку «Показатели производительности страницы» и нажмите «Самая большая отрисовка контента».
• Вы найдете подробную информацию о LCP, включая снимок экрана, на котором выделен элемент LCP.

Что нового в Largest Contentful Paint (LCP): обновления и разработки

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

Изменения LCP в браузере Chrome

Chrome уже претерпел несколько изменений, сосредоточившись на исключении и включении элементов в зависимости от того, насколько они «содержательны»:

• Chrome 86 – изображения с непрозрачностью 0 были исключены.
• Chrome 88 – полноэкранные изображения (обычно фоновые) были исключены.
• Chrome 112 — были исключены изображения с низкой энтропией (то есть очень простые изображения, например большой синий квадрат).
• Chrome 116 – включены видео (первый кадр)
• Chrome 116 – GIF-файлы изменены на использование первого кадра
• Chrome 116 — эксперименты с загрузкой изображений (теперь браузер заранее «просматривает» некоторые изображения и определяет, какие из них могут быть кандидатами на элемент LCP)

Изменения LCP в WordPress

После создания команды WordPress Core Performance в 2021 году WordPress вложил значительные средства в повышение производительности платформы.

Версии WordPress 6.2 и 6.3 продемонстрировали значительные улучшения: мы видим увеличение времени загрузки на 27% для блочных тем и на 18% — для классических тем. Общий показатель прохождения CWV для веб-сайтов WordPress на мобильных устройствах достиг 34,71% по сравнению с 30,47% в апреле.

Изменения, внесенные командой WP Core Performance, которые улучшают самую большую контентную отрисовку, включают:

• Введение встроенной поддержки формата изображений WebP, начиная с версии 5.8.
• Автоматическое преобразование загруженных изображений
• Сокращение запросов к базе данных для обычных загрузок страниц.
• Точная настройка высокочастотных кодовых путей
• Улучшения уровня кэширования
• Улучшения в автоматической отложенной загрузке HTML.
• Введение автоматического fetchpriority="high" в элемент LCP.
• Внедрение «стратегии» API сценариев, в которой разработчики указывают стратегию асинхронности или отсрочки для сценариев заголовков.

Почему вам не удается выполнить Largest Contentful Paint? (Распространенные ошибки)

Есть причина, по которой LCP по-прежнему остается самой сложной метрикой CWV для передачи. И это не обязательно ваша стратегия оптимизации.

Ошибка №1: вы не полностью контролируете свой показатель LCP.

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

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

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

— Барри Поллард, @команда Google Chrome

Ошибка №2: дизайн вашего сайта не соответствует вашей демографии.

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

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

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

• Внесите более актуальные изменения в UX-дизайн.
• Лучше имитировать условия пользователя в средах тестирования.
• Оптимизируйте на основе последних данных и избегайте регрессий

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

— Ивайло Христов, @NitroPack

Ошибка №3: ​​вы не используете инструменты обработки данных RUM для выявления узких мест LCP.

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

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

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

Помимо использования собственной телеметрии и сбора данных, вы можете рассмотреть и другие инструменты (как платные, так и бесплатные):

• Браузер New Relic :предоставляет информацию о взаимодействии конечных пользователей и отслеживает ошибки JavaScript. Он предлагает подробные графики производительности и помогает выявить узкие места.
• Dynatrace:предлагает сквозной мониторинг, от внешнего интерфейса до внутреннего. Он автоматически обнаруживает проблемы с производительностью во всем стеке.
• AppDynamics:собирает полные данные о производительности в режиме реального времени, позволяя предприятиям визуализировать сложные среды приложений.
• Pingdom:Хотя он известен своим мониторингом времени безотказной работы, он также предлагает возможности RUM для получения информации о пользовательском опыте из разных мест по всему миру.
• Boomerang:инструмент RUM с открытым исходным кодом, который измеряет время загрузки страницы у реальных пользователей. Он может собирать показатели для жестких и программных загрузок страниц и даже одностраничных приложений.
• Perfume.js:небольшая библиотека веб-производительности, которая помогает разработчикам измерять производительность своих веб-страниц в режиме реального времени.

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

Ошибка №4: вы не отслеживаете производительность сторонних решений.

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

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

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

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

— Ивайло Христов, @NitroPack

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

Как исправить самую большую содержательную отрисовку (этапы и экспертные методы)

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

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

1. Время до первого байта (TTFB)
2. Задержка загрузки ресурса
3. Время загрузки ресурса
4. Задержка рендеринга элемента

№1: Уменьшите время до первого байта (TTFB)

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

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

• Выбор хорошего хостинг-провайдера
• Как избежать перенаправлений
• Кэширование вашего сайта
• Использование сети доставки контента (CDN)

№2: Устраните задержку загрузки ресурсов

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

Чтобы добиться этого, вам следует использовать методы определения приоритетов, которые сообщают браузеру, когда именно вы хотите получить элемент LCP:

• ссылка rel="preload" на изображения и шрифты (в зависимости от вашего случая)
• Удалите элемент LCP из любой отложенной загрузки, которую вы включили для веб-страницы.

№3: Устраните задержку загрузки ресурсов

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

• Сжимайте и настраивайте изображения
• Используйте современные форматы изображений, такие как WebP.
• Уменьшите размер файла ваших шрифтов
• Как правило, старайтесь избегать видео в области LCP (т. е. над краем экрана).

#4: Устранить задержку рендеринга элементов

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

Чтобы гарантировать, что никакие другие элементы не блокируют и не задерживают его отрисовку, вы можете:

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

Крупнейшая оптимизация отрисовки контента: пример «до» и «после»

Используя демонстрационный веб-сайт и лабораторную среду, мы начали с показателя LCP, равного 13 с, а после применения всех оптимизаций, которые мы обсуждали выше, нам удалось снизить его до 1,9 с.

Для справки, оценка LCP менее 2,5 с считается «хорошей» и будет отображаться как «пройдено» в вашей оценке Core Web Vitals.

До оптимизации LCP:значение LCP за 13 с.

После оптимизации LCP:значение LCP 1,9 с.

Самый большой содержательный FAQ по краскам от Google и NitroPack

Если у вас есть несколько изображений одинакового размера, то какой LCP?

Largest Contentful Paint считает целый элемент основным кандидатом. Если изображения находятся в одном контейнере, то все изображения будут считаться самым большим содержимым. Если нет, то изображение, которое появляется первым (выше на странице), обычно считается LCP.

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

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

Действительно ли нужен CDN, если ваш сайт локальный, а не глобальный?

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

Влияет ли посещение сайта по рекламе на время LCP?

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

Что делать, если я получаю много трафика из более медленных стран?

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

Влияет ли использование больших шрифтов на LCP?

Чем больше файлы веб-шрифтов, тем больше запросов делает ваш сайт, когда пользователи пытаются его загрузить. Чтобы ускорить процесс и сократить время LCP, используйте методы загрузки шрифтов, такие как подмножество шрифтов, предварительная загрузка стилей над сгибом и использование свойства font-display.

Каковы наилучшие способы оптимизации для LCP с полноразмерными фоновыми изображениями на мобильных устройствах?

Обычно полноразмерное фоновое изображение не считается кандидатом на LCP (начиная с обновления Chrome 88). Предполагая, что вы уже определили, что фоновое изображение действительно является вашим элементом LCP на мобильном устройстве, вы можете:

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