Оптимизация LCP (Core Web Vitals)

«Значение показателя lcp слишком велико» — сообщение от Google, которое вводит в ступор множество людей. Мы расскажем, что это за показатель и как его можно улучшить.

Показатель LCP один из показателей Google Core Web Vitals относительно новый, поэтому для того, чтобы лучше друг друга понимать, определимся с основными понятиями. Что же такое наибольший элемент содержимого первого экрана.

«Первый экран» — область экрана, которую пользователь видит при заходе на страницу. В зависимости от типа устройства (телефон/компьютер) и размеров его экрана, видимая часть первого экрана будет разной. Google ориентируется на усредненные показатели размеров экрана, которые медленно, но верно меняются с течением времени.

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

1. Картинки <img>
2. Векторная графика <sgv>
3. Видео
4. Блоки с фоновым изображение погружаемым с помощью url()
5. Блоки с множеством текста, параграфы

Самый простой способ — это использовать встроенный в браузер Google Chrome инструмент Development Tools (Performance > Web Vitals). Альтернативный вариант — использовать специализированный инструмент Lighthouse

Этапы загрузки страницы влияющие на значение показателя LCP

Формально детализация процесса загрузки страницы браузером может быть гораздо сложнее, поэтому здесь мы затронем лишь наиболее значимые для нас шаги

Шаг-1. Обработка HTTP-запроса веб-сервером

Веб-сервер пытаясь обработать запрашиваемый адрес загружает программный код* приложения (wordpress, битрикс, тд). Это довольно “тяжелый” процесс.

* здесь и далее мы подразумеваем, что речь идет о сайтах, работающих на php, наиболее популярных в мире.

Оптимизация

1 — Используйте VPS или выделенный сервер. Показатели производительности напрямую зависят от мощности вашего железа и, разумеется, будут выше, чем на недорогом виртуальном хостинге, где все ресурсы делятся на сотни, а то и тысячи проектов. Как получить скидку 60% на сервер?

2 — Убедитесь, что вы используете NGINX. Это если не самый, то пожалуй один из самых быстрых и эффективных веб-серверов на сегодняшний день. При всей своей простоте он обладает обширным функционалом: реверс-прокси, кеширование, балансировка нагрузки, тд всем этим необходимо пользоваться и как можно скорее. Правильно настроенное файловое кеширование nginx может снизить скорость обработки HTTP-запроса до нескольких тысячных долей секунды, снизить нагрузку на запросы к базе данных и сэкономить на дорогостоящем железе.

3 — Используйте последнюю версию PHP. Хотя бы версию 7.2. С выходом последних обновлений, производительность PHP сильно увеличилась и данное обновление может дать большой прирост к производительности вашего сайта (по нашему опыту до 40%)

4 — Используйте FPM. По нашему опыту, конфигурация веб-сервера NGINX + PHP-FPM является наиболее производительной, отказоустойчивой и масштабируемой. Да, необходимо будет отказаться от привычных apache и .htaccess, но в этом нет ничего страшного, возможности rewrite-правил nginx куда больше, чем у apache и обратная совместимость довольно просто настраивается.

5 — Используйте серверное сжатие. Как только сервер закончил генерировать запрашиваемую страницу возникает вопрос как ее передать. Можно просто текстом, а можно в сжатом виде — архивом. Текст хорошо сжимается, конечный размер документа кратно уменьшается, скорость растет. Используйте сжатие. Если у вас слабый процессор, то сам процесс сжатия может быть довольно затратный, а выигрыша не быть. Поэтому подберите оптимальный для вашего сервера/трафика коэффициент сжатия, например 5-7.

6 — Используйте HTTP2. Его поддерживают уже все современные браузеры. С помощью него возможно организовать предварительную загрузку медиа-файлов, css, js и существенно увеличить LCP Google.

Шаг-2. Построение модели документа

Как только HTML-код страницы получен браузер начнет его отрисовку, которая в свою очередь складывается из этапов:

1. Построение объектной (виртуальной) модели документа
2. Загрузка и обработка стилей, скриптов
3. Загрузка медиа-контента

Оптимизация

1 — Устранение блокирующих ресурсов. Убедитесь, что в техническом разделе head загружаются только критичные для отображения страницы ресурсы (css/js-файлы). Например, те, которые отвечают за разметку страницы и основные стили. Для всего остального необходимо реализовать отложенную загрузку или вовсе убрать в конец документа.

2 — Используйте CDN-сервера. Браузер ограничивает количество одновременных соединений с одним сервером. Если все картинки, css-, js-файлы загружаются с вашего основного документа, то распределение их по разным адресам CDN-серверов увеличит скорость параллельной загрузки.

3 — Минимизируйте HTML-код страницы. Избавьтесь от лишней разметки, это облегчит построение модели документа.

Шаг-3. Стили, скрипты

В 2022 году CMS-системы нацелены на удобную работу с админкой, интеграцию со сторонними сервисами, а вот возможности манипуляций с этапами загрузки стилей и скриптов остаются без внимания вот уже много лет.

Оптимизация

1 — Используйте подход «critical css». Разделите css-стили сайта на 2 группы: критичные для загрузки первого экрана и остальные. Критичные в head, остальные в footer.

2 — Загружайте только актуальные css-стили. Если браузер отрисовывает главную страницу сайта, то разумеется не рационально заставлять пользователя ждать загрузку стилей для внутренних страниц. А именно это и происходит в наших любимых bitrix, wordpress по-умолчанию, когда вы для оптимизации используете минимизацию css/js и объединение в один файл. В результате ваш «царь-файл» становится неприличных размеров. Да, при переходе на другие страницы того же сайта, т.к. файл уже закеширован, то страница отобразится быстрее. Есть только одно маленькое НО, из-за высокого LCP пользователь просто покинет ваш сайт. Если приложению нужно предварительно загрузить стили других страниц, то используйте возможности HTTP2 server push.

3 — Размещайте стили inline. Данный подход стоит применять с осторожностью, так как вы лишаете себя преимущества кеширования css/js-файлов на стороне клиента (браузера).

4 — Минимизируйте css- и js-файлы. Бразер перед анализом все равно убирает все лишние переносы строк и пробелы, но убрав их самостоятельно можно сократить размер загружаемых файлов на 10-15%, что существенно.

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

Шаг-4. Загрузка медиа-контента

Дольше скриптов аналитики в head может грузиться только картинка размером 5000х3000…

Оптимизация

1 — Используйте современные форматы изображений. Например, WebP рекомендуемый самим Google. Идеальной является комбинация с CDN, которые при запросе картинки определяют браузер и отдают оптимальный формат изображения. Это позволяет не заботиться самостоятельно о форматах изображений и сократить накладные расходы сервера на их оптимизацию.

2 — Используйте оптимальный размер изображений. Это самая распространенная ошибка разработчиков – отображать на сайте фотографии загруженные администратором сайта «как есть» без предварительной нарезки и обработки.  В результате редактор сайта загружает фотографии сразу с камеры мобильного телефона или фотоаппарата размером 5000х3000. Такая фотография, в зависимости от качества снимка, может «весить» несколько мегабайт, что достаточно существенно для мобильного интернета.

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