Скорость сайта: за что отвечает LCP и как его чинить

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

Что такое LCP простыми словами

Это момент, когда посетитель видит основное содержимое: крупную картинку первого экрана, заголовок или блок текста. Не когда «страница загрузилась», а когда человек понял, что попал куда хотел. Хороший результат – до 2,5 секунды на мобильном интернете, отличный – около полутора.

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

Четыре причины медленного LCP

1. Тяжёлая картинка первого экрана. Самая частая и самая простая. Фотография на 2,5 МБ в формате JPEG вместо 180 КБ в webp – это две секунды разницы на мобильном интернете. Плюс отсутствие явных размеров, из-за которого страница дёргается при загрузке.

2. Сторонние скрипты в критическом пути. Счётчики, виджеты чатов, карты, шрифтовые сервисы. Каждый – это отдельное соединение с чужим сервером, и пока оно не отработает, браузер часто не рисует содержимое. Виджет чата, загружаемый до контента, стоит дороже, чем приносит.

3. Медленный ответ сервера. Если сервер думает больше 600 мс, никакая оптимизация картинок не спасёт. Причины обычно две: тяжёлые запросы к базе на каждой странице и отсутствие кеша.

4. Шрифты. Загрузка шрифта с чужого домена блокирует отрисовку текста. Свои файлы в формате woff2 с предзагрузкой решают вопрос полностью и заодно снимают вопрос о передаче данных на сторону.

Порядок работ, который даёт результат

1. Измерить у реальных посетителей и найти, какой именно элемент считается главным на ключевых типах страниц. Часто это оказывается не то, что предполагали.
2. Разобраться с изображениями: современный формат, правильный размер, явные атрибуты ширины и высоты, отложенная загрузка всего, что ниже первого экрана.
3. Вынести сторонние скрипты из критического пути: отложенная загрузка, подключение после первого взаимодействия, отказ от того, чем не пользуются.
4. Заняться сервером: кеш страниц, кеш запросов, индексы в базе. Это дороже первых трёх шагов, поэтому идёт последним.

Чего делать не нужно

• Гнаться за 100 баллами. Разница между 85 и 100 обычно не видна посетителю, а стоит она как половина проекта.
• Ставить плагин «ускорение» и считать вопрос закрытым. Плагины кеширования помогают, но не чинят тяжёлую графику и чужие скрипты.
• Оптимизировать то, что не измеряли. Половина усилий по ускорению обычно уходит на страницы, которые почти никто не открывает.

Сколько это даёт в деньгах

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