Наверх
Open Nav
/
/
Как улучшить Core Web Vitals? Рекомендации по каждому показателю: CLS, LCP, FID
В тренде

Как улучшить Core Web Vitals? Рекомендации по каждому показателю: CLS, LCP, FID

19.03.2021 Время прочтения: 4 минуты

Дата обновления: 11.11.2021

Надежда Чернышева

Автор статьи: Надежда Чернышева, руководитель отдела веб-разработки компании SEO.RU

Core Web Vitals — группа новых факторов ранжирования, которые Google запускает в мае 2021 года. Ранее мы рассказывали об этом в отдельном материале.

Читайте по теме: Core Web Vitals от Google: что это такое и как повлияет на SEO в 2021 году

Для вступления быстро повторим самое основное. В Core Web Vitals входят 3 параметра:

  • CLS (Cumulative Layout Shift) — стабильность верстки и элементов. Сдвиг блоков по макету нужно свести к минимуму.
  • LCP (Largest Contentful Paint) — скорость загрузки основного контента, то есть самого большого элемента на странице. В идеале должна быть менее 2,5 секунд.
  • FID (First Input Delay) — время ожидания до того момента, когда можно начинать взаимодействовать с сайтом (кликать по ссылкам и элементам). Лучше всего, когда это время — менее 100 мс.

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

Как улучшить CLS — устойчивость верстки?

Сначала нужно отметить, CLS и LCP косвенно связаны между собой. Когда мы улучшаем показатель LCP, часто бывает, что показатель CLS, наоборот, падает. Это связано с тем, что мы начинаем «откладывать» загрузку стилей и скриптов вниз страницы, давая прогрузится в первую очередь всему контенту. Поэтому на доли секунды мы видим нестилизованную страницу:

Нестилизованная страница

Затем стили подгружаются, и открывается нормальная стилизованная страница:

Стилизованная страница

Такая ситуация считается сдвигом макета, то есть элементы нестабильны во время загрузки страницы. А это означает, что параметр CLS ухудшается. Чтобы такого не происходило, нужно основные стили сайта добавлять в head в <style></style>:

head теги style

Для уточнения покажем фрагмент кода — как это выглядит, когда кода меньше, но можно прочитать его содержание:

фрагмент кода для уточнения

CLS можно улучшать и другими способами. Один из них — прописывать высоту блока для адаптивности элементов. Лучше всего прописывать минимальную высоту min-height для блоков, в которых не сразу подгружается контент:

прописывать минимальную высоту

Это поможет уменьшить сдвиг и сделать элементы более устойчивыми. Вариант не самый лучший, но вполне рабочий и имеет место быть.

Другой способ уменьшить сдвиги по макету — указывать для изображения и видео атрибуты высоты и ширины. Проверить, какие изображения или видео не проходят тест, можно в PageSpeed Insights:

Проверить, какие изображения или видео не проходят тест

Изначально для этого сайта показатель CLS был таким:

Изначальный показатель CLS пример

После внесения изменений CLS немного улучшился:

CLS после внесения изменений пример

Проверяем в PageSpeed Insights — рекомендация выполнена:

Проверка в PageSpeed Insights

Когда используются абсолютные величины width и height, для повышения CLS можно еще использовать transform:transform: scale(). Это поможет избежать смещения по макету и сохранить адаптивность сайта:

Использование transform:transform: scale()

Как улучшить LCP — скорость загрузки основного контента?

Чтобы улучшить этот показатель, сначала нужно отложить загрузку CSS и JS, оставив для первой загрузки только критические стили. Скрипты JS переносим в футер:

Перенос скриптов в футер

Затем проверяем (опять же в PageSpeed Insights), какие сторонние ресурсы нагружают сайт — например, Jivosite:

Проверка какие сторонние ресурсы нагружают сайт

Поэтому откладываем его на скроллинг:

откладываем скрипт на скроллинг

Теперь во время загрузки страницы Google не увидит Jivosite, а пользователь при первом скроллинге — увидит.

Помимо этого, можно улучшить показатель LCP с помощью подгрузки некоторых блоков при скроллинге. Это можно сделать за счет стилей, а можно — за счет скриптов. В этом случае в HTML у нас оправляется только строка вида <div id="hidden-block"></div>, а при скроллинге скриптом добавляется нужный контент.

Условный пример JS:

	window.addEventListener('scroll', () => {
  function loadContent(hidden-block) {                
               if (document.getElementById(hidden-block)) {  
			   document.getElementById(hidden-block).innerHTML =
                       "<h2>Загрузка контента</h2><p style="color:red";>Тут можно любой контент</p>";
               }
           }});

Как уменьшить FID — время ожидания до начала взаимодействия?

Чтобы улучшить показатель FID, нужно уменьшить использование стороннего кода. Счетчики Яндекс.Метрики и Google Analytics нужны для корректного сбора статистических данных, поэтому добавляем их в отдельный JS-файл, пишем в JS функцию, которая будет асинхронно подгружать сторонние ресурсы:

JS функция, которая асинхронно подгружает сторонние ресурсы

И наслаждаемся результатом проверки в PageSpeed Insights:

результат проверки в PageSpeed Insights

Еще один действенный способов уменьшить FID — использовать кеширование. Кеширование настраиваем на сервере:

Кеширование на сервере

В данном примере настроили кеширование для всех ресурсов, которые грузятся с сайта, за исключением Я.Метрики и Google Analytics:

Кеширование ресурсов загружаемых с сайта

Он помогут повышать FID, но с ними не рекомендуется ничего делать, чтобы не нарушить сбор информации по посещаемости и конверсиям.

Пусть другие тоже знают!

Еще на эту тему

Другие интересные статьи

10 базовых советов по SEO-оптимизации landing page
10 базовых советов по SEO-оптимизации landing page
10 базовых советов по SEO-оптимизации landingpage. Возможно,...
30.01.2019 14548
Seo-программы, которые помогут в продвижении сайта
Seo-программы, которые помогут в продвижении сайта
Набор необходимого seo-софта для детального анализа сайтов и...
27.06.2018 30063
Внешняя оптимизация сайта
Внешняя оптимизация сайта
Продвижение интернет-сайта делится на два направления: внут...
06.09.2017 28379
Оставить заявку Оставить заявку