Как улучшить LCP: что такое Largest Contentful Paint и почему он важен, улучшаем LCP на реальном примере

В 2021 году компания Google запустила набор показателей Core Web Vitals (LCP, FID и CLS), в основе которых – данные о сеансах реальных посетителей. Инструмент направлен на измерение эффективности работы страниц сайтов, а результат компания рассматривает как часть ранжирования в поиске. Рассказываем, что такое LCP Core Web Vitals и как улучшить LCP на реальном примере.

Что такое LCP и Core Web Vitals

Метрику LCP стоит исследовать в паре с другими показателями, входящими в Core Web Vitals:

• LCP (Largest Contentful Paint). Указывает на время, в течение которого осуществляет отрисовка крупного контента (самый большой видимый элемент в зоне просмотра). Расчет стартует сразу после того, как пользователь запрашивает URL-адрес страницы. В качестве крупного контента может браться не только видеоролик или картинка, но и большой блок с текстом;
• CLS (Cumulative Layout Shift). Измеряет, насколько контент смещается на экране после отображения. Если смещения нет – показатель равен нулю, что хорошо, ведь чем выше значение, тем менее удобно пользователю взаимодействовать со страницей. Если простыми словами – речь идет про визуальную стабильность;
• FID (First Input Delay). Учитывает время между первым взаимодействием посетителя со страницей (нажатие на ссылку, кнопку, другие), а также ответом браузера (момента, когда он фактически может начать обработку).

Что входит в Core Web Vitals

Существуют и другие параметры, но перечисленные – основные. Например, INP (интерактивность до следующей отрисовки) измеряет интерактивность в течение всего времени посещения страницы. TTFB (время до первого байта) учитывает время между запросом и моментом получения первого байта ответа. Google проводит оценку не только основной, но и мобильной версии сайта, формируя два отчета с разными параметрами.

Требования к TTFB

Largest Contentful Paint – именно про время отрисовки самого большого элемента, видимого в области просмотра. Если элемент частично скрыт за областью просмотра пользователя – он не учитывается. По статистике, чуть более 60% мобильных версий соответствуют требованиям LCP, с десктопными ситуация чуть лучше – свыше 70% в 2024 году. Хорошим показателем считается время прорисовки контента до 2,5 секунд, средним – от 2,5 до 4 секунд (здесь уже нужно заботиться об ускорении), все что больше – плохо. Расчет выполняется по сводному показателю для 75% посещений за последние 28 дней.

Где проверить LCP

Для владельцев сайтов в Google Search Console предусмотрен отчет по Core Web Vitals (в разделе с основными интернет-показателями). Если требуется проведение сравнительного анализа или же независимое тестирование – можно использовать инструмент PageSpeed Insights, который тоже предоставляет Google. Принцип работы сервиса простой:

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

Дополнительно – проблемы с производительностью (общая оценка), карта эффективности и аудиты по каждому параметру + советы по устранению проблем. Например, если мы откроем аудит для LCP, то увидим самый большой элемент контента, отрисованный в области просмотра, и перечень основных ошибок с рекомендациями о том, что следует исправить.

Где проверить LCP: сервис PageSpeed Insights

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

Почему важен LCP

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

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

Косвенно LCP связан с пользовательскими факторами: 53% посетителей покидают сайт, если загрузка страницы на мобильном устройстве занимает более 3 секунд (исследование Double Click), а увеличение скорости загрузки с 1 до 7 секунд на 113% повышает вероятность отказов (Think with Google).

Как улучшить LCP: рекомендации от Google

Ухудшение показателя LCP может быть вызвано как размером, так и сложностью визуального контента, размещенного на странице. Большие изображения, встроенные видеоролики и другие компоненты существенно снижают скорость загрузки сайта и отдельных страниц. Второй фактор – медленный ответ сервера, также на показатель влияют сторонний JavaScript, CSS, неправильное использование шрифтов, иные факторы. Рассмотрим, как это исправить.

Медленный ответ сервера

Чем выше скорость получения контента с сервера, тем быстрее происходит загрузка страницы, что стимулирует укрепление LCP. В рамках устранения проблемы внимание уделяется TTFB – времени до первого байта, для чего применяются следующие инструменты:

• изучение и внедрение рекомендаций, касающихся производительности сервера;
• CDN (Content Delivery Network). Речь идет о сетевой географически распределенной инфраструктуре, благодаря которой контент быстро передается клиентам из разных стран. Серверы, входящие в структуру, располагают так, чтобы время ответа для посетителей сайтов было минимальным. Внедрение CDN положительно влияет на TTFB и LCP;
• применение сервис-воркеров. Они способны осуществлять управление кешем: перехватывать запросы к серверу и кешировать, что необходимо для повышения производительности приложений/сайтов. Требуют тестирования с измерением показателей до и после.

Дополнительно – кеширование страниц, что предупредит повторную загрузку контента при следующих посещениях.

Что такое CDN (Content Delivery Network)

Сторонний JavaScript

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

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

Шрифты

Шрифты являются основой привлекательного дизайна и удобочитаемости, однако в это же время они снижают показатели LCP и CLS. Являясь тяжелыми файлами, они замедляют загрузку. Например, фрагмент текста входит в самый крупный блок контента, отрисовывающийся в первую очередь, в нем используется сторонний шрифт: тратится время на загрузку и извлечение, что стимулирует рост LCP. С CLS еще сложнее: браузер до загрузки стороннего шрифта отображает системный, после чего новый шрифт может занимать больше места на экране – макет смещается, визуальная стабильность – нарушается. «Вылечить» проблему помогает отказ от внешних шрифтов в пользу системных. 

Оптимизация картинок

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

• сжатие картинок. Тяжелые изображения замедляют скорость загрузки, их нужно найти и уменьшить минимум на 50%, что зависит от веса исходника;
• форматы изображений. Поисковая система Google в качестве современного легкого формата предлагает WebP, альтернатива – PNG;
• размеры изображений – в код. Если размеры картинок в коде не прописаны, то ухудшается показатель CLS: браузеру требуется время для определения веса. Последний в коде указывается под тегом <img>. Если после внесения данных визуальная стабильность не улучшилась и продолжает сдвигаться, то размеры устанавливаются для контента с блоком, куда интегрируется нужная картинка;
• адаптивность. Можно настроить адаптивные изображения, которые будут выбираться под экран пользователя.

Дополнительно стоит реализовать ленивую (отложенную) загрузку некритичных изображений, после чего они перестают конкурировать с критически важными компонентами.

Как мы улучшали LCP

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

Кейс: сравнение LCP одинаковых лендингов на Tilda и Craftum

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

Какие результаты получили

Измерение проводим в сервисе PageSpeed Insights от Google. 

Начнем с лендинга на Тильде, по итогам проверки имеем следующие показатели:

Для десктопной версии:

• общая производительность – 41%;
• рекомендации – 96%;
• поисковая оптимизация – 69%.

Общий отчет для десктопа: Tilda

Показатель LCP составляет 3,7 секунды.

LCP десктоп: Tilda

В мобильной версии:

• производительность – 32%, 
• рекомендации – 96%.

Отчет для мобильной версии: Tilda

LCP – 25,0 секунд.

Проводим аналогичные замеры для проекта на Крафтум: 

Начнем с версии для десктопов:

• общая производительность – 95%;
• рекомендации – 100%;
• поисковая оптимизация – 92%.

Отчет для десктопной версии сайта на конструкторе Craftum

По Core Web Vitals имеем позитивные измерения: LCP – 0,9 секунд.

Итоговый показатель LCP

Для мобильной версии: 

общая производительность составляет 100%, рекомендации – 100%.

Результаты для мобильной версии: Craftum

Параметр LCP в мобильной версии – 1,2 секунды.

LCP для мобильных устройств: Craftum

Видно, что показатели на Craftum получились намного лучше, чем на Tilda.

Как достичь таких показателей, которые мы получили на Craftum

1. Включите «адаптацию» для всех изображений.
2. Откажитесь от применения анимации на первых экранах версий для мобильных устройств. План-минимум – она отсутствует хотя бы в больших элементах.
3. Подключите «Высокий приоритет загрузки» для изображений на первом экране версий для мобильных устройств (сюда входит и логотип).
4. Для изображений, расположенных ниже первого экрана, желательно подключить «ленивую загрузку» (оптимальна) или же «низкий приоритет загрузки».
5. Используйте системные шрифты. В Craftum автоматически удаляются неиспользуемые шрифты из кода сайта после его публикации. Это улучшает скорость загрузки и показатели PageSpeed. Конструкторсам определяет какие шрифты подключены на сайте, а какие нет, поэтому пользователям не нужно дополнительно управлять используемыми и не используемыми шрифтами.
6. Избегайте подключения сторонних JS-скриптов, метрик, библиотек и прочих компонентов, отбирающих ресурсы. Если очень необходимо, то используйте отложенное подключение скриптов после загрузки страницы.
7. Не встраивайте YouTube видео на страницы, особенно на первых экранах, особенно сейчас, когда YouTube начали замедлять. Такой формат негативно влияет на метрики, альтернатива – картинка-превью, содержащая ссылку на видеохостинг.

В заключение

Параметр LCP – важная метрика, которую учитывает поисковая система Google, снижение LCP позволяет улучшить пользовательский опыт и существенно сократить процент отказов. Измерение должно проводиться регулярно, для чего проще всего применять официальный инструмент – PageSpeed Insights. При выявлении факторов, повышающих LCP, следует действовать комплексно, следуя подсказкам сервиса и вышеприведенным рекомендациям. На опыте Craftum доказали, что соответствие Core Web Vitals – вполне возможно при учете всех требований Google!