4 способа ускорить загрузку контента через оптимизацию LCP

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

LCP, или Largest Contentful Paint — это время рендеринга самого большого элемента, видимого в области просмотра пользователем: изображения, текстового блока, видео или другого контента.

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

Отчет Core Web Vitals в Search Console. Он находится в Отчете об основных интернет-показателях.

PageSpeed Insights — инструмент, который оценивает скорость загрузки страницы по 100 бальной шкале.

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

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

Вы можете улучшить TTFB — время до первого байта. Какие есть способы:

1. Обратитесь к рекомендациям по производительности сервера. Многие веб-фреймворки, работающие на сервере, имеют такие рекомендации, нужные для ускорения.

2. Используйте CDN (Content Delivery Network). CDN хранят контент и быстро отдают его клиентам из разных географических точек. Использование CDN коррелирует с улучшением показателей скорости загрузки TTFB, особенно на десктопах.

3. Кэшируйте страницы. Статичный HTML, который редко изменяется, можно закэшировать в браузере пользователя, чтобы при каждом визите не загружать контент заново.

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

5. Устанавливайте сторонние подключения на раннем этапе. На LCP могут влиять запросы сервера к сторонним источникам. Можно дать сигнал браузеру, что страница как можно скорее собирается установить соединение, для этого есть rel=" preconnect ".

Другой вариант — dns-prefetch для ускорения поиска DNS, подходит для браузеров, которые не поддерживают preconnect.

Можно использовать оба варианта для разных браузеров.

Браузер преобразовывает разметку HTML в дерево DOM, а потом уже отображает контент. Он не сможет продолжать работу, если обнаружит ресурсы, блокирующие рендеринг: внешние таблицы стилей link rel="stylesheet" и сценарии JavaScript script src="main.js". Чтобы ускорить загрузку содержимого страницы, нужно отложить все некритические JavaScript и CSS.

Неиспользуемый JavaScript и CSS можно найти с помощью Chrome DevTools.

Найденный неиспользуемый CSS можно вообще удалить или переместить в другую таблицу стилей, если он нужен на других страницах сайта.

Если CSS не нужен для начального рендеринга, можно использовать loadCSS для асинхронной загрузки файлов, который использует rel="preload" и onload.

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

Как автоматизировать добавление встроенных стилей на сайт:

Еще полезна минификация или минимизация кода CSS и JavaScript — удаление символов, которые не нужны браузеру для чтения кода. Минификаторы удаляют отступы, интервалы, разделители и комментарии, файл по сути не меняется, но становится легче.

Время, которое требуется контенту для загрузки, влияет на LCP, так что имеет смысл поработать с элементами на странице.

Что можно сделать:

1. Оптимизировать изображения. Если на сайте много больших по размеру изображений, которые замедляют загрузку страниц, попробуйте lazy loading картинок — постепенную подгрузку, которая обычно зависит от действий пользователя на странице. Еще можно сжать изображения, если они много весят, попробовать формат WebP, обратиться к CDN.

2. Загрузить важное сначала. Критически важные ресурсы, например, шрифты, изображения или видеозаписи, нужно загрузить первым делом. Для придания ресурсу приоритета есть < link rel = "preload" >.

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

4. Использовать gzip или brotli. Эти виды сжатия могут значительно уменьшить размер файлов HTML, CSS и JavaScript при их передаче между сервером и браузером.

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

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

Что можно сделать:

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

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

Расскажите в комментариях, о каких способах оптимизировать LCP знаете вы!