На десктопе LCP в норме, а на мобильных — 4–6 секунд. Это классическая ситуация: мобильные устройства медленнее, сети хуже, а ресурсы тяжелее. LCP (Largest Contentful Paint) измеряет, как быстро загружается главный элемент страницы. Если он высокий на мобильных, страница кажется медленной, и это влияет на Core Web Vitals и позиции. Разберём, почему LCP высокий на мобильных и как его снизить.
Что такое LCP и почему он важен
LCP — это метрика Core Web Vitals, которая измеряет время загрузки самого крупного элемента на странице. Обычно это изображение, видео или крупный блок текста. LCP показывает, как быстро пользователь видит главный контент.
Нормы LCP:
— до 2,5 секунды — хорошо;
— 2,5–4 секунды — требует улучшения;
— более 4 секунд — плохо.
На мобильных LCP обычно выше, чем на десктопе, потому что:
— процессор медленнее;
— сеть менее стабильна;
— экран меньше, но ресурсы те же;
— JavaScript выполняется дольше.
Причина 1: тяжёлые изображения
Самая частая причина высокого LCP на мобильных — тяжёлые изображения. Если главный элемент страницы — изображение, его загрузка напрямую влияет на LCP.
Что проверить:
— размер изображения в килобайтах;
— формат (JPEG, PNG, WebP, AVIF);
— размеры в пикселях;
— используется ли srcset для разных экранов;
— используется ли lazy loading для главного изображения.
Что делать:
— сжать изображения;
— использовать WebP или AVIF;
— использовать srcset для разных разрешений;
— не применять lazy loading к главному изображению;
— использовать preload для главного изображения.
Причина 2: медленный сервер
Если сервер отвечает медленно, LCP растёт независимо от изображений. На мобильных это заметнее, потому что сеть менее стабильна.
Что проверить:
— TTFB (время до первого байта);
— время ответа сервера;
— используется ли кэширование;
— используется ли CDN;
— есть ли медленные запросы к базе данных.
Что делать:
— включить кэширование;
— использовать CDN;
— оптимизировать запросы к базе данных;
— проверить, не тормозит ли сервер под нагрузкой.
Причина 3: блокирующий JavaScript и CSS
JavaScript и CSS могут блокировать рендеринг, из-за чего LCP растёт. На мобильных это особенно заметно, потому что процессор медленнее.
Что проверить:
— есть ли блокирующие скрипты в head;
— есть ли блокирующие стили;
— используется ли defer или async для скриптов;
— есть ли неиспользуемый JavaScript;
— есть ли неиспользуемый CSS.
Что делать:
— добавить defer или async для скриптов;
— вынести критический CSS в head;
— отложить загрузку неиспользуемого JavaScript;
— минифицировать CSS и JavaScript.
Причина 4: шрифты
Шрифты могут блокировать рендеринг текста, что влияет на LCP, если главный элемент — текст. На мобильных это заметнее, потому что шрифты загружаются дольше.
Что проверить:
— используется ли font-display;
— есть ли preload для критичных шрифтов;
— сколько шрифтов загружается;
— есть ли неиспользуемые начертания.
Что делать:
— использовать font-display: swap;
— добавить preload для критичных шрифтов;
— уменьшить количество шрифтов и начертаний;
— использовать системные шрифты, если это возможно.
Причина 5: медленная сеть и устройство
На мобильных сеть и устройство медленнее, чем на десктопе. Это объективная причина, но её можно смягчить.
Что учесть:
— пользователи могут быть на 3G или медленном 4G;
— устройство может быть старым;
— процессор может быть медленным;
— память может быть ограничена.
Что делать:
— уменьшить размер страницы;
— уменьшить количество запросов;
— использовать кэширование;
— использовать CDN;
— тестировать на реальных устройствах, а не только в эмуляторе.
Для проверки размера страницы используйте проверка размера страницы — инструмент покажет, сколько весит страница и какие ресурсы самые тяжёлые.
Как найти причину
Пошаговая диагностика:
— откройте PageSpeed Insights или Lighthouse;
— посмотрите, какой элемент является LCP;
— проверьте, что его загружает;
— проверьте размер элемента;
— проверьте TTFB;
— проверьте блокирующие ресурсы;
— проверьте шрифты;
— проверьте на реальном мобильном устройстве.
Если нужно проверить сразу несколько параметров — размер страницы, запросы, сжатие — логично перейти к SEO-аудиту.
Как снизить LCP на мобильных
План действий:
— сжать главное изображение;
— использовать WebP или AVIF;
— добавить srcset;
— не применять lazy loading к LCP-элементу;
— добавить preload для главного изображения;
— ускорить сервер и включить кэширование;
— использовать CDN;
— отложить некритичный JavaScript;
— оптимизировать шрифты;
— проверить результат на реальном устройстве.
Частые ошибки
— lazy loading для главного изображения;
— слишком большие изображения;
— отсутствие srcset;
— блокирующий JavaScript в head;
— отсутствие font-display;
— тестирование только в эмуляторе;
— игнорирование TTFB.
FAQ
Почему LCP высокий на мобильных, но в норме на десктопе?
Мобильные устройства медленнее, сети менее стабильны, а ресурсы те же. Тяжёлые изображения, блокирующий JavaScript и шрифты сильнее влияют на мобильных.
Какой LCP считается хорошим?
До 2,5 секунды — хорошо, 2,5–4 секунды — требует улучшения, более 4 секунд — плохо.
Что чаще всего вызывает высокий LCP?
Тяжёлые изображения, медленный сервер, блокирующий JavaScript и CSS, шрифты без font-display.
Можно ли использовать lazy loading для главного изображения?
Нет. Lazy loading задерживает загрузку, что увеличивает LCP. Для главного изображения используйте preload.
Влияет ли LCP на SEO?
Да. LCP — часть Core Web Vitals, а это фактор ранжирования. Высокий LCP может снизить позиции.
Как проверить LCP?
Используйте PageSpeed Insights, Lighthouse или Search Console. Они покажут LCP и укажут, какой элемент является LCP.
Почему LCP высокий, хотя изображение маленькое?
Возможно, проблема в TTFB, блокирующем JavaScript или шрифтах. Проверьте все факторы, а не только изображение.
Какой формат изображений лучше для LCP?
WebP или AVIF. Они меньше по размеру, чем JPEG и PNG, и быстрее загружаются.
Нужен ли preload для главного изображения?
Да. Preload сообщает браузеру, что изображение нужно загрузить как можно раньше. Это снижает LCP.
Что делать, если LCP не снижается после оптимизации?
Проверьте TTFB, блокирующие ресурсы и шрифты. Также проверьте на реальном устройстве, а не только в эмуляторе. Иногда проблема в сервере или CDN.
