Сайт seozp.ru

Более 10 лет мы помогаем компаниям достичь своих финансовых и брендинговых целей. SEOZP — это специализированное SEO-агентство, ориентированное на ценности.

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

Вы в курсе, что с 2021 года Google будет использовать новые показатели для оценки качества сайтов. Largest Contentful Paint — один из таких. А вы знаете, как его измерить и улучшить? Если нет — тогда наш сегодняшний материал придется вам как раз кстати!

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

Как оптимизировать LCP-показатель: эффективные способы

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

LCP: как измерить

Самый простой метод — использовать соответствующее API, которое работает по следующему принципу:

  1. В процессе открытия сайта его контент может меняться, поэтому каждый раз при появлении нового большого элемента на странице браузер отправляет PerformanceEntry, который имеет тип “largest-contentful-paint”.
  2. Как только пользователь начинает как-то взаимодействовать со страницей, работа метрики прекращается. И нужное нам значение — время самого последнего отправленного события. 

Для того, чтобы измерить Largest Contentful Paint, можно также использовать:

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

Нормальный показатель LCP

Будет просто замечательно, если вы сможете ускорить загрузку сайта до такой степени, чтобы самый большой элемент на странице открывался не дольше 2,5 секунд от момента открытия сайта на 75% сессий. Только в таком случае сайтом будет удобно пользоваться. И это независимо от того, “на чем” сделан сайт — на Bitrix или WordPress.

LCP: как улучшить показатели

Разберемся, как оптимизировать показатель LCP. Во-первых, нужно запомнить, что на этот показатель влияет 4 фактора:

  1. Время ответа сервера.
  2. Время загрузки сайта.
  3. Рендеринг на стороне пользователя.
  4. JS и CSS с блокировкой рендеринга.

А теперь более детально разберем все эти показатели и подумаем, как их улучшить.

Время ответа сервера

Нам нужно улучшить время загрузки первого байта — TTFB. Для этого можно:

  • Изучить советы по производительности сервера и проверить, все ли рекомендации вы соблюли для того, чтобы ускорить загрузку сайта.
  • Применить Content Delivery Network (CDN), который хранит контент и быстро возвращает его пользователю из разных точек планеты.
  • Кэшировать страницы. Для этого можно использовать все возможности инструментов brotli, gzip и т.п.

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

Время загрузки сайта

Если этот показатель довольно большой, то на LCP он скажется негативно — это 100%. Чтобы уменьшить его, необходимо:

  • Оптимизировать все картинки на сайте. Лучше всего преобразовать их в формат WebP от Google, попробовать активировать постепенную загрузку или сжать изображения.
  • Загружать все самое важное вначале. Сюда входят критически важные ресурсы по типу шрифтов, текстов и картинок, которые посетитель сайта должен обязательно увидеть первыми.
  • Применять сервис-воркеры. Мы уже упоминали, что brotli, gzip и подобные инструменты способны положительно сказаться на скорости загрузки сайта.

Также о том, как ускорить свой сайт, вы можете почитать по ссылке.

Рендеринг на стороне пользователя

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

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

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

JS и CSS с блокировкой рендеринга

HTML-разметка преобразовывается браузером в DOM-дерево, после чего контент начинает отображаться. И он не будет работать, если найдет ресурсы, которые блокируют рендеринги (внешние таблицы стилей и сценариев). Поэтому, нужно найти весь неиспользуемый JS и CSS и отложить его. Для этого можно воспользоваться инструментом Chrome DevTools

Разумеется, критический CSS необходимо оставить включенным, если он необходим в верхней части страницы. Для JavaScript нужно использовать асинхронную загрузку. А для достижения максимального эффекта — нужно минимизировать весь код JavaScript и CSS на сайте.

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *