Самая большая контентная отрисовка (LCP) — это метрика пользовательского опыта Google, интегрированная в системы рейтингования в 2021 году.

LCP — один из трех показателей Core Web Vitals (CWV), которые отслеживают технические показатели производительности, влияющие на пользовательский опыт.

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

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

Что такое «Наибольшая содержательная краска»?

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

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

Типичными измеряемыми элементами являются изображения, изображения видеопостеров, фоновые изображения и текстовые элементы на уровне блока, такие как теги абзацев.

LCP состоит из следующих подпоказателей:

Оптимизация для LCP означает оптимизацию для каждого из этих показателей, поэтому загрузка и отображение ресурсов LCP занимает менее 2,5 секунд.

Для справки приводим пороговую шкалу:

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

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

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

Оптимизация TTFB может значительно сократить общее время загрузки и улучшить LCP.

Время ответа сервера во многом зависит от:

• Запросы к базе данных.
• Промахи кэша CDN.
• Неэффективный рендеринг на стороне сервера.
• Хостинг.

Давайте рассмотрим каждый из них:

1. Запросы к базе данных

Если время ответа велико, постарайтесь определить источник.

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

Если у вас есть сайт на WordPress, вы можете использовать Монитор запросов плагин для просмотра времени выполнения SQL-запросов.

Другие замечательные инструменты: Черный огонь или Newrelicкоторые не зависят от используемой вами CMS или стека, но требуют установки на ваш хостинг/сервер.

2. Промахи кэша CDN

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

Обычно ваш провайдер CDN предоставляет отчет о количестве промахов кэша.

Если вы наблюдаете высокий процент (>10%) промахов кэша, вам может потребоваться обратиться к вашему провайдеру CDN или в службу поддержки хостинга, если вы управляете хостингом с интегрированным кэшем, чтобы решить эту проблему.

Одной из причин, по которой могут возникать пропуски кэша, является атака поискового спама.

Например, дюжина спам-доменов ссылается на ваши внутренние страницы поиска со случайными спам-запросами, такими как [/?q=甘肃代]которые не кэшируются, поскольку поисковый термин каждый раз разный. Проблема в том, что Googlebot агрессивно сканирует их, что может привести к высокому времени отклика сервера и промахам кэша.

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

Однако не бойтесь. Джон Мюллер сказал со временем это будет устранено.

Вот реальный пример из поисковой консоли, демонстрирующий высокое время отклика сервера (TTFB), вызванное промахами кэша:

3. Неэффективный рендеринг на стороне сервера

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

Например, вы видели цифры прочтений и шеров в статьях SEJ. Мы извлекаем эти цифры из разных API, но вместо того, чтобы извлекать их при запросе на сервер, мы предварительно извлекаем их и сохраняем в нашей базе данных для более быстрого отображения.

Представьте, что мы подключаемся к API общего доступа и GA4 при запросе на сервер. Каждый запрос выполняется примерно 300-500 мс, и мы добавим задержку примерно в ~1000 мс из-за неэффективного рендеринга на стороне сервера. Поэтому убедитесь, что ваш бэкэнд оптимизирован.

4. Хостинг

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

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

Поэтому инвестиции в правильный хостинг окупятся.

Читайте более подробное руководство:

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

Задержка загрузки ресурсов

Задержка загрузки ресурса — это время, необходимое браузеру для обнаружения и начала загрузки ресурса LCP.

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

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

Оптимизируя скорость определения и загрузки этих ресурсов, вы можете улучшить время, необходимое для отображения критического контента. Один из способов сделать это — предварительно загрузить как файлы CSS, так и изображения LCP, установив fetchpriority=»high» для изображения, чтобы оно начало загрузку файла CSS.

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

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

Другим важным фактором, способствующим задержке загрузки, являются перенаправления.

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

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

Продолжительность загрузки ресурса

Длительность загрузки ресурса относится к фактическому времени, затраченному на загрузку ресурса LCP.

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

Длительность загрузки ресурсов можно сократить, реализовав:

• Формат WebP.
• Правильно подобранные размеры изображений (сделайте так, чтобы внутренний размер изображения соответствовал видимому размеру).
• Приоритизация нагрузки.
• CDN-канал.

Задержка рендеринга элемента

Задержка отрисовки элемента — это время, необходимое браузеру для обработки и отрисовки элемента LCP.

На этот показатель влияет сложность вашего HTML, CSS и JavaScript.

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

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

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

Остерегайтесь этих «подводных камней» при подсчете очков

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

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

Как измерить оценку LCP

Существует два вида инструментов оценки. Первый называется Полевые инструментыа второй называется Лабораторные инструменты.

Полевые инструменты — это фактические измерения участка.

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

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

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

Оптимизация LCP — гораздо более глубокая тема

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

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

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

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

Дополнительные ресурсы:

---

Кредит главного изображения: BestForBest/Shutterstock