У вас появились проблемы с LCP? Мы расскажем, что делать

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

Данная статья посвящена важному показателю LCP (Largest Contentful Paint). В анализе основных интернет-показателей он демонстрирует параметры отрисовки самого большого контента. Далее мы подробно разберем, что он из себя представляет, как рассчитывается и как его можно улучшить. Начнем!

Что такое LCP?

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

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

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

Какие элементы могут служить самым крупным контентом? 

• Массивный текстовый контент: элементы <main>, <section>, теги h1, div и формы HTML
• Графика, картинки и любые изображения – <img>
• Видеоконтент – атрибут poster в теге <video>. Обращаем внимание, что сам тег <video> не берется в учет
• Фоновые картинки, загружаемые через CSS стили 
• Элементы <image> внутри тега <svg>. Опять же, тег <svg> не берется в учет

Примечание: свойства CSS для полей, отступов или границ не берутся в учет во всех элементах.

Наглядный пример 

Увидеть и понять, как происходит процесс отрисовки содержимого можно на примере скриншота рендеринга той или иной страницы сайта:

Как оценивается показатель LCP?

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

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

Как отслеживать показатель LCP?

Сегодня существует огромный арсенал инструментов для веб-мастеров, которые способны замерять данный показатель. К вашим услугам Lighthouse, PageSpeed ​​Insights, Chrome DevTools, Google Search Console и т.д. Но проще и быстрее всего анализировать и отслеживать его через Google Search Console.

Просто зайдите в административную панель, перейдите в Основные ИП и выберите нужную группу – для мобильной версии или для ПК. Открывайте отчет и анализируйте сложившуюся ситуацию. Для получения более подробной информации достаточно нажать на блок с данными о проблеме, и вы получите более детальный отчет. Функционал сервиса позволяет выполнить еще целый ряд полезных манипуляций – увидеть группу похожих URL с помощью опции «Примеры», скачать отчет в удобном формате и даже проверить отдельные ссылки с помощью сервиса Пэйдж Спид.

Измеряем LCP с помощью JavaScript

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

1. Открыть DevTools любым удобным способом – комбинацией клавиш Ctrl+Shift+J или Command+Option+J в зависимости от операционной системы вашего компьютера.
2. Ввести в открывшейся консоли код JavaScript код:

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

Как улучшить LCP

Оптимизировать значение данного параметра можно несколькими способами:

1. Оптимизировать сервер, чтобы браузер быстрее получал контент, тогда меньше времени будет затрачиваться на отображение элементов. А максимально быстрый ответ ускорит загрузку содержимого и улучшит LCP 
2. Старайтесь настраивать доставку изображений и видео с помощью CDN 
3. Применяйте кэширование к части или всему содержимому. 
4. Обновляйте кэш только когда изменяете контент 
5. Используйте rel="preconnect" (и/или rel="dns-prefetch") для запросов к сторонним ресурсам. Он сообщает браузеру, что страница стремится быстрее установить соединение 
6. Используйте отложенную загрузку для некритических файлов JavaScript и CSS. Это позволит существенно улучшить реальную картину. Для некритических файлов эффективным решением станет асинхронное подключение посредством атрибутов ‘defer‘ или ‘async‘ Минимизируйте объем CSS файлов. Существенно сократить объем можно, если удалить лишние символы – отступы, комментарии, абзацы. Подобные элементы браузеру совершенно не нужны, наоборот, они только продлевают время загрузки содержимого 
7. Прорабатывайте изображения, оптимизируйте и облегчайте их. Картинки можно сжать через специальные сервисы или использовать более современный формат изображений JPEG 2000, JPEG XR или WebP. Рекомендуем внедрять адаптивные картинки.

В заключении

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