← Все статьи

Картинка весит 40 КБ, а страница всё равно медленная: где теряется LCP

Картинка весит 40 КБ, а страница всё равно медленная: где теряется LCP

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

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

Определите элемент в конкретных условиях

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

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

Разложите время на четыре участка

Официальное руководство по оптимизации LCP предлагает отдельно рассматривать получение первого байта документа, задержку начала загрузки ресурса, саму загрузку и задержку отображения. Для элемента без отдельного ресурса соответствующие сетевые участки отсутствуют. Сжатие влияет прежде всего на передачу файла, но не гарантирует сокращения общего времени.

Условный пример: документ начинает приходить через полсекунды, затем браузер полторы секунды не запрашивает обложку. Файл скачивается быстро, но изображение ещё ждёт открытия компонента. Уменьшение размера вдвое затронет короткий участок. Основная возможность улучшения находится в ожидании.

Найдите, почему запрос начинается поздно

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

В технической задаче полезно написать не «ускорить фото», а «запрос главного изображения начинается после загрузки необязательного компонента». Это уже проверяемая гипотеза. После исправления сравните начало запроса, а не только конечный балл. Не назначайте всем ресурсам одинаково высокий приоритет: тогда исчезает смысл выделения главного.

Проверьте, что удерживает готовое изображение

Если загрузка завершена, а элемент ещё не виден, исследуйте состояние интерфейса. Возможно, он скрыт до завершения анимации, сборки компонента или иной работы. Не каждый промежуток объясняется сетью. Нужна временная связь между готовностью ресурса и фактическим кадром.

Сравните нормальный сценарий с отключением подозрительной задержки в тестовой среде. Такой опыт показывает направление работы, но сам по себе не является готовым исправлением. Удаление компонента может ускорить страницу ценой потери нужной функции; приёмка должна учитывать оба результата.

Не перепутайте загрузку и отзывчивость

Главный экран способен быстро появиться, а меню — медленно реагировать. Это другой участок пользовательского опыта, разобранный в диагностике INP. И наоборот: хорошая реакция кнопок после загрузки не объясняет долгое ожидание первого полезного экрана.

Если часть содержания вообще не завершает формирование, используйте проверку потоковой отдачи HTML. Не сводите отсутствие материала к проблеме скорости картинки.

Примите изменение по сценарию и данным

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

Аудит сайта используйте как отправную точку, а подробную временную шкалу — для локализации причины. В проверки после обновления включите сохранённый сценарий. Критерий результата — более ранний полезный экран при сохранённой функциональности, а не минимальный размер любого файла.