Недавно мы писали о нововведении в инструменте для вебмастеров Google Search Console – Основных интернет-показателях. Поскольку поисковая система Google сегодня активно использует данные из отчета Основные интернет-показатели (Core Web Vitals) в качестве важного сигнала для оценки страниц сайта при ранжировании, неразумным будет не обращать на них внимания. Для успешного продвижения своего сайта важно не только отслеживать данные показатели, но и оперативно решать проблемы (при их наличии).
Сегодня мы поговорим о показателе LCP (Largest Contentful Paint – Отрисовка самого крупного контента) в отчете Основных интернет-показателей инструмента Google Search Console. Детально и подробно рассмотрим данный показатель: что это такое, как измеряется и как посчитать LCP, пример LCP, как улучшить свою оценку LCP, а также практические пути решения проблемы отрисовки самого крупного контента (ОСКК).
Обратить внимание на данный показатель нас заставила текущая ситуация с сайтом: сводный LCP более 2,7с, большое количество неэффективных URL, а также URL, которым нужно увеличить скорость. Ниже показан скриншот отчета Основных интернет-показателей в Search Console.
Этим показателем измеряется воспринимаемая пользователем скорость загрузки сайта. Если основной контент страницы загрузился быстро – это будет сигналом пользователю, что данная страница полезна и эффективна. Оценка отрисовки самого большого элемента на странице с большой точностью сигнализирует о скорости загрузки основного контента страницы, а значит и об общей скорости загрузки сайта. Показатель LCP показывает, насколько быстро ваши клиенты видят интересующее их содержание вашего сайта.
Метрика Largest Contentful Paint (LCP) фиксирует время рендеринга самого большого изображения, видео или текстового блока, который является видимым в области просмотра. Все, что выходит за пределы экрана, не учитывается при оценке.
К самому большому контенту относятся следующие типы элементов:
<main>
и <section>
, а также теги h1
, div
и HTML формы.<img>
poster
в теге <video>
. Сам тег <video>
пока не учитывается.url()
<image>
внутри тега <svg>
. Сам тег <svg>
пока не учитывается.margin
), отступов (padding
) или границ (border
) не учитываются.
Вот как выглядит процесс отрисовки самого крупного контента на примере скриншотов рендеринга нашего сайта:
К хорошим показателям относятся значения LCP ниже 2,5с
, от 2,5с до 4с
– можно улучить, свыше 4 секунд
– плохо. Чтобы пользователям было удобно работать с вашим сайтом, вы должны стремиться к показателю LCP ниже или равным 2,5 секунд.
Для оценки LCP рассматривается только контент в верхней части страницы, когда браузер выполняет рендеринг и элементы DOM визуализируются.
Все популярные инструменты Google для веб-разработчиков способны измерять LCP: Lighthouse, PageSpeed Insights, Chrome DevTools, Google Search Console и другие. Одним из самих простых способов диагностировать проблемы с LCP является Google Search Console.
Войдите в Google Search Console и откройте раздел Основные интернет-показатели. Здесь данные разделены на две группы: Мобильные и ПК. Для нужной группы нажмите ссылку Открыть отчет.
Вот какой результат был у нас для ПК до начала процесса оптимизации сайта.
У нас наблюдается следующее:
Теперь кликните по блоку со сведением о проблеме, и вы увидите еще более детальные данные по проблеме. Так это выглядит у нас:
При клике по ссылке(ах) в блоке Примеры, вы увидите сводный LCP для группы похожих URL, сможете почитать больше о проблеме, экспортировать отчет в таблицу Exsel или в формате CSV, а также сможете запустить сервис PageSpeed Insights для определенных ссылок своего сайта.
LCP можно измерить, например, с помощью инструмента PageSpeed Insights.
Также вы можете измерить значение LCP самостоятельно с помощью небольшого JavaScript кода в браузере Chrome. Откройте в браузере инструмент Chrome DevTools (инструменты разработчика). Для этого нажмите сочетание клавиш Ctrl+Shift+J
(для Windows и Linux), или Command+Option+J
(для Mac).
Откроется консоль.
Введите следующий JavaScript код, который прослушивает записи отрисовки самого крупного контента и записывает в лог консоли:
new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { console.log('LCP элемент:', entry.startTime, entry); } }).observe({type: 'largest-contentful-paint', buffered: true});
Данный код регистрирует элемент с самым большим содержимым (элемент LCP). Детальная информация об этом элементе будет доступна в консоли браузера.
Рассмотрим основные рекомендации, которые позволят большинству сайтов улучшить значение для параметра Отрисовка самого крупного контента:
rel="preconnect"
(и/или rel="dns-prefetch"
) для запросов к сторонним ресурсам, если они необходимы для отображения важного содержимого на странице. Этот атрибут указывает браузеру, что ваша страница намеревается установить данное соединение как можно быстрее. Детальнее про эти атрибуты читайте по ссылке.<link rel="stylesheet">
) или синхронные теги JavaScript (<script src="script.js">
). Почитайте пример реализации отложенной загрузки для CSS. Для некритического JavaScript используйте асинхронное подключение, с помощью атрибутов ‘defer
‘ или ‘async
‘.
Вот и все на сегодня! В данном уроке мы подробно рассмотрели показатель LCP (Largest Contentful Paint – Отрисовка самого крупного контента) в отчете Основных интернет-показателей инструмента Google Search Console. Рассмотрели, что такое LCP, как измеряется и как его посчитать, варианты улучшения оценки LCP для своего сайта, а также узнали, какие есть практические пути решения проблемы с большим значением для показателя Отрисовка самого крупного контента (ОСКК).
P.S. Мы реализовали все основные рекомендации по улучшению показателя LCP на своем сайте. Спустя некоторое время мы посмотрим на результаты данных улучшений, и обязательно поделимся с вами эффектом от них.
Сегодняшний обзор посвящен людям, для которых важен вопрос конфиденциальности в Интернете и кто ценит свои…
Впервые о бренде Pro Plan услышали в 1986 году, когда он стал частью американской компании…
Страх наказания хуже самого наказания (В наказании есть нечто определенное, оно все же лучше, чем…
Если вы планируете разместить веб-сайт в Интернете, очень важно найти для него быстрый и надежный…
Учеба за границей уже давно ассоциируется с качественным образованием, новыми возможностями и множеством перспектив. Но…
Выбор мастера для ремонта и перетяжки мебели — задача, которая требует вдумчивого подхода. Ведь от…
View Comments
Благодарю за статью