Отрисовка крупного контента lcp как исправить

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

Автоматизированные алгоритмы постоянно следят за тем, чтобы пользователи оставались довольны. Для этих целей придумали поведенческие факторы — метрики, позволяющие измерить качество user experience. Если контент просто заточен под ключи и не имеет ценности, ПФ это покажут. 

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

Что такое показатель Largest Contentful Paint (LCP)? 

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

В плане совершенствования формулы ранжирования Google ушёл далеко вперед от Яндекса. Пока в Яндексе работают над нейросетями, которые генерируют контент, Гугл вводит в действие новые алгоритмы и делает всё, чтобы информационные и коммерческие проекты подстраивались под новую реальность. 

Google анонсировал Core Web Vitals ещё в прошлом году, но отметил, что новый фактор ранжирования начнёт учитываться основным алгоритмом только в 2021 году. Развёртывание запланировали на май и отметили, что у вебмастеров ещё куча времени, чтобы пофиксить проблемы.

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

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

В состав Core Web Vitals («Основных интернет-показателей») входят 3 метрики, каждая из которых отвечает за свои задачи. В совокупности они помогают оценить, насколько быстро сайт загружает контент и как скоро он становится доступен для пользователей. Если значения для метрик из CWV будут слишком маленькими, сайт может вылететь из ТОПа.

Одной из метрик является Largest Contentful Paint (LCP). Параметр измеряет скорость загрузки, а точнее момент, когда загружается основной контент на странице. К примеру, если в хедере стоит рекламный блок и он грузится 5-10 секунд, сайт не пройдет проверку по LCP.

Largest Contentful Paint отражает время, в течение которого на странице загружается самый тяжелый блок. Это может быть картинка, видео, содержание или что-то другое. Всё зависит от структуры шаблона и особенностей проекта. 

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

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

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

Раньше Google фокусировал внимание на First Contentful Paint, но позже решил, что важно не просто отследить скорость загрузки первого контента, а измерить время, за которое подгружается самый тяжелый блок на странице. Эта метрика более понятна для вебмастеров и провести замер в режиме реального времени может каждый пользователь. 

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

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

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

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

Почему метрика так важна?

Google ранее анонсировал, что с мая 2021 года фактор Page Experience станет частью основного алгоритма ранжирования, а Core Web Vitals войдут в его состав. Поэтому если сайт не проходит проверку по LCP и двум другим метрикам, со временем его видимость может упасть.

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

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

Метрика LCP важна потому что она:

1. Учитывает самый большой блок на странице, на который браузер пользователя тратит больше всего ресурсов. 
2. Может влиять на индексацию ресурса. Google любит «выплёвывать» страницы с некачественным контентом, которые плохо раскрывают интент.
3. Тесно связана с конверсией страницы и сайта. Мало кто будет оформлять заказ на проекте, который грузится несколько минут или зависает из-за высокой нагрузки.
4. Позволяет определить качество ресурса. Если самым большим блоком будет реклама на всю высоту экрана браузера, LCP это покажет.
5. Даёт понять юзеру, что контент на странице загружается и не надо закрывать вкладку браузера. 

FID и CLS тоже важны в контексте пользовательского опыта, но можно сказать, что LCP на первом месте. Юзеры не любят долго ждать загрузки контента и могут покинуть страницу пока прогружается самый объемный блок. Поэтому надо постараться по максимуму оптимизировать значение метрики.

Как измерить показатель LCP? 

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

В отчете по скорости загрузки проекта в PageSpeed Insights чётко написано, что «Согласно данным наблюдений за последние 28 дней эта страница не отвечает требованиям к основным интернет-показателям». То есть алгоритмы анализируют значения метрик примерно в течение месяца.

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

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

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

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

Есть несколько инструментов для замера LCP:

1. Chrome User Experience Report. В отчете собраны анонимизированные данные пользователей с замером метрик. Ручные замеры делать не нужно потому что все цифры уже есть в отчёте. Данные из отчёта поступают в консоль для вебмастеров и PageSpeed. 
2. Chrome DevTools. Панель для разработчика в браузере позволяет выполнять замеры на стороне клиента. Инструмент можно использовать для быстрого получения значения метрик.
3. web-vitals JavaScript library. На Гитхабе есть небольшая библиотека, которая позволяет быстро сделать замеры. На странице проекта доступна полная документация по работе с API.
4. Lighthouse. Сервис загружает страницу в режиме эмуляции и не учитывает реальную ситуацию на устройстве пользователя. Поэтому ориентироваться на данные не стоит. 

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

Если по итогам замеров с разных устройств будет видно, что показатели Core Web Vitals очень плохие, надо срочно внедрять правки и подгонять метрики до входа в «зелёную зону». Иначе не стоит рассчитывать на высокие позиции. 

Тем, кто не хочет разбираться в JS, API и других сложных инструментах, идеально подойдет консоль для разработчиков в браузере. Вот пошаговая инструкция по запуску теста Core Web Vitals:

1. Откройте консоль разработчика в браузере.
2. Переключитесь во вкладку Performance.
3. Активируйте галочку Web Vitals.
4. Нажмите иконку со стрелочкой и надписью Start profiling and reload page.
5. Дождитесь окончания замеров и ознакомьтесь с данными. 

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

Для замеров Core Web Vitals есть крутое расширение под Google Chrome, которое написано на основе библиотеки CWV. После запуска измерений данные считываются в режиме реального времени и отображаются в браузере практически мгновенно. 

Установите его, откройте доступ к данным и нажмите на иконку в адресной строке. Ознакомьтесь с данными и заюзайте несколько дополнительных инструментов. Расширение показывает, что на VC.ru всё отлично с «Основными интернет-показателями», а у PageSpeed Insights противоположное мнение. 

Дополнительно можно использовать GTmetrix и WebPage Test. Эти инструменты будут полезны вебмастерам и откроют более быстрый доступ к замерам метрик Core Web Vitals. Чтобы получить комплексные данные, используйте несколько тулзов одновременно. 

Эффективные способы улучшения показателя LCP 

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

Важно понять, что Core Web Vitals учитывают комплексные метрики. Нельзя просто минифицировать CSS и получить 100 баллов в PageSpeed Insights. Аналогичная ситуация и с LCP. 

Чтобы разобраться с улучшением значения метрики, необходимо чётко понимать, что влияет на Largest Contentful Paint. Это поможет сформировать пошаговый план действий и последовательно выполнить все действия.

Отрисовка самого большого контента на странице должна происходить быстрее чем за 2,5 секунды. Всё, что дольше — проваленный тест Core Web Vitals и потенциальный риск для позиций в органической выдаче. 

На LCP влияет несколько факторов:

1. Время ответа сервера. Чем быстрее сайт откликнулся на запрос браузера пользователя, тем лучше. 
2. JavaScript и CSS с блокировкой рендеринга. Некоторые элементы на странице могут блокировать её отображение и пользователю приходится ждать загрузки. В идеальном состоянии блокирующих элементов не должно быть. 
3. Время загрузки ресурса. В 2021 году мало кто будет ждать загрузку контента несколько минут. 
4. Рендеринг на стороне клиента. Рендеринг в браузере с помощью Javascript, данные обрабатываются на устройстве пользователя. 

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

Для повышения скорости загрузки страницы можно использовать GZIP, CDN, а также технологии кэширования. Если речь идёт о сайте на базе WordPress, то вебмастерам доступны десятки плагинов для настройки кэша. 

Дополнительные рекомендации:

1. Оптимизируйте медиаконтент. Картинки лучше по максимуму сжать и конвертировать в формат WebP. 
2. Отложите загрузку второстепенных ресурсов. Асинхронная загрузка JS здорово помогает ускорить сайт.
3. Сократите объем JS. Удалите все неиспользуемые скрипты, минифицируйте оставшиеся и объедините их в один файл. 
4. Используйте предварительный рендеринг. Он помогает защититься от перезагрузки сервера.
5. Устраните элементы, блокирующие рендеринг. Данные о наличии таких блоков есть в отчёте PageSpeed Insights. 
6. Используйте критический CSS. Он помогает встроить главные стили в список ресурсов для приоритетной загрузки, а остальные правила отложить до момента взаимодействия пользователя с элементами. 

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

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

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

Оптимизация изображений

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

Ленивая загрузка (Lazy Load)

Применяйте ленивую загрузку (lazy loading) для изображений и видео, чтобы отложить загрузку контента, находящегося вне видимой области экрана.

Предзагрузка ресурсов

Используйте теги <link rel=»preload»> для предзагрузки важных ресурсов, таких как шрифты, CSS, и JavaScript файлы, которые влияют на отображение контента.

Минификация и сжатие ресурсов

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

Оптимизация JavaScript

Удалите или отложите загрузку блокирующих ресурсов, таких как JavaScript и CSS. Используйте атрибуты async и defer для тегов <script>.

Оптимизация CSS

Разделите CSS на критический (отображающийся на экране) и некритический (для контента вне видимой области). Встроить критический CSS непосредственно в HTML и загружать некритический CSS асинхронно.

Кэширование и использование CDN

Кэшируйте статические ресурсы и используйте сеть доставки контента CDN для быстрой загрузки ресурсов.

Оптимизация серверного времени отклика (TTFB)

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

Применение HTTP/2 или HTTP/3

Используйте современные протоколы передачи данных, такие как HTTP/2 или HTTP/3, для улучшения производительности загрузки ресурсов.

Переход на более быстрый хостинг

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

Удаление ненужных ресурсов и сторонних скриптов

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

Улучшение рендер-блокировки

Используйте оптимизацию рендера для предотвращения рендер-блокировки, вызванной сторонними скриптами или стилями.

Внедрение критического пути отрисовки (Critical Path Rendering)

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

Адаптивный дизайн

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

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