В галерее товара десять фотографий, и шаблон загружает их одинаково. Главное фото появляется поздно, хотя вторые ракурсы уже скачиваются. Сначала измерьте страницу и найдите её LCP-элемент. На телефоне это может оказаться заголовок, если главное фото находится ниже первого экрана.
LCP показывает, когда на первом экране появился самый крупный элемент — часто главное фото товара или большой текстовый блок. Допустим, в карточке есть главное изображение, миниатюры и скрытые слайды. Сначала определите реальный LCP-элемент для этой страницы, затем меняйте загрузку именно его.
Найдите LCP в измерении страницы
Откройте Chrome DevTools → Performance, запишите перезагрузку страницы и выберите событие LCP на временной шкале. В сведениях события найдите связанный элемент и откройте его в Elements. Если это фото, запишите его currentSrc; если заголовок — начинать с приоритета картинки не нужно.
Проверьте несколько повторных запусков. Один необычный прогон может отражать нестабильный серверный ответ, кеш или сторонний скрипт. Сохраните выбранный элемент, время и условия каждого наблюдения, прежде чем менять правила загрузки целой галереи на основании одной цифры.
Разберите время до появления фото
Во вкладке сети сравните запрос главного фото с запросами остальных слайдов. Сохраните инициатор, приоритет и время начала. Если важный адрес создаётся только после запроса данных товара, отметьте эту зависимость: браузер не может заранее загрузить источник, о котором ещё ничего не знает.
В задаче опишите последовательность конкретно: «главное фото добавляется после ответа API», а не «картинки медленные». Так разработчик сможет проверить, что изменилось после правки, и не подменит устранение позднего обнаружения снижением качества изображения.
Проверьте loading и реальный src
Если фактический LCP-элемент — изображение первого экрана, проверьте loading и работу библиотеки lazy loading. Важный видимый ресурс не должен ждать того же условия, что изображения далеко ниже. Google разбирает задержку обнаружения и загрузки в руководстве по оптимизации LCP.
Посмотрите исходный HTML: есть ли действующий адрес в src или srcset, либо он хранится только в служебном data-src до выполнения скрипта. Сравните этот факт с водопадом запросов. Наличие picture не помогает, если реальное изображение вставляется слишком поздно.
Не отключайте отложенную загрузку для всех фотографий автоматически. Вторые слайды и большие изображения ниже по странице имеют другую роль. Решение должно разделять видимый основной ресурс и остальные материалы, сохраняя разумную загрузку каталога и карточек на медленном соединении.
Если измерение подтвердило, что фото первого экрана является LCP, разметка может выглядеть так:
<img src="/images/product-main.webp" width="640" height="640"
loading="eager" fetchpriority="high" alt="Чёрный светильник L-24">Размеры и alt замените данными своего файла. Высокий приоритет нужен подтверждённому важному ресурсу; не ставьте его всем скрытым слайдам. Сверьте начало запроса в Network до и после.
Дайте приоритет нужному изображению
Ресурсам галереи нужны разные условия загрузки:
| Ресурс | Роль при первом открытии | Что проверяем |
|---|---|---|
| Главное фото | Показывает товар сразу | Раннее обнаружение и отсутствие лишнего ожидания |
| Миниатюры | Позволяют выбрать ракурс | Доступность управления и подходящий размер файлов |
| Скрытые крупные слайды | Нужны после взаимодействия | Отсутствие ненужной конкуренции с основным ресурсом |
| Увеличенный оригинал | Нужен при подробном просмотре | Успешную загрузку по действию пользователя |
Если используете предварительную загрузку, проверьте совпадение с ресурсом, который выбирает адаптивная разметка. Неправильный preload может скачать отдельный файл дополнительно. Сохраните список запросов до и после, чтобы убедиться, что оптимизация не создала двойную передачу.
Выберите файл по размеру блока
Убедитесь, что новый формат и степень сжатия не исказили цвет и мелкие элементы. Для одежды, текстур и технических изделий это часть качества карточки. Проверяйте один и тот же товар, а не сравнивайте лёгкое фото другого предмета с исходным изображением.
Методика выбора размеров рассмотрена в руководстве по изменению размера изображений. Общую работу с LCP можно сверять с инструкцией по этой метрике. Сравните отдельно размер и качество файла, затем время появления LCP при прежних условиях сети и экрана.
Проверьте галерею после изменения
Проверьте резервирование места под фото. Если контейнер получает высоту только после загрузки, цена и кнопка заказа могут смещаться. Это отдельная проблема стабильности макета; хороший LCP не подтверждает отсутствие сдвигов. В результате проверки запишите и LCP, и сдвиг элементов, если изменение затронуло размеры галереи.
На слабом соединении проверьте поведение до получения следующего слайда. Управление должно оставаться понятным, а отсутствующее изображение не должно выдавать чужой товар или бесконечно скрывать информацию. Не создавайте быстрый первый экран ценой неработающей основной функции галереи.
Повторите измерение и переключение слайдов
При тех же условиях важное фото обнаруживается раньше и появляется без прежней задержки. Галерея показывает остальные ракурсы, увеличение и вариант товара работают. Если новым LCP стал текстовый блок, запишите это отдельно при сравнении.
Читайте также: Размеры изображений, Как улучшить LCP, Техническая проверка.