Извлечение критических изображений для LCP и SEO

Последнее обновление: June 28, 2026

Критическое извлечение изображения означает поиск одного изображения, которое контролирует первое визуальное впечатление со страницы. На многих страницах продуктов, целевых страницах и в блогах это изображение является главным (hero), основной фотографией продукта или большой иллюстрацией над линией сгиба (above-the-fold). Если вы определите его заранее, вы сможете предварительно загрузить или приоритизировать нужный файл вместо того, чтобы одинаково ускорять каждое изображение.

Краткий ответ: как извлечь критическое изображение?

Используйте извлечение критического изображения, чтобы определить изображение, которое с наибольшей вероятностью станет элементом Largest Contentful Paint, а затем предоставьте этому файлу специальную обработку загрузки. Обычно это означает, что самое большое видимое изображение в начальном окне получает fetchpriority="high", без ленивой загрузки (lazy loading), стабильные размеры и иногда <link rel="preload">.

Не нужно предварительно загружать каждый большой файл. Предварительная загрузка изображения-героя или продукта необходима только в том случае, если браузер иначе обнаружит его поздно, например, внутри CSS, карусели, клиентски отрендеренного компонента или адаптивной стека <picture> со сложным выбором источников.

После внесения изменений проверьте результат. В документации Google о Largest Contentful Paint определяется LCP вокруг самого большого видимого элемента контента, а PageSpeed Insights покажет, какой элемент был измерен. Chrome DevTools также должны показать запрос критического изображения в начале водопада (waterfall).

Используйте следующий порядок:

1. Загрузите страницу при реалистичном мобильном размере окна просмотра.
2. Найдите самое большое изображение выше сгиба или постер.
3. Проверьте, сообщает ли PageSpeed или Lighthouse о нем LCP.
4. Удалите loading="lazy" из этого изображения.
5. Добавьте размеры или соотношение сторон.
6. Добавьте fetchpriority="high", если это <img>.
7. Предварительно загружайте его только в том случае, если обнаружение происходит поздно.
8. Оставьте изображения ниже сгиба ленивыми.
9. Повторно протестируйте после изменений макета, CMS или текста заголовка (hero copy).

Что считается критическим изображением?

Критическое изображение — это то изображение, которого ждет посетитель, прежде чем страница покажется ему полезной. Часто это элемент LCP, но не всегда. Небольшой логотип в верхней части страницы может загрузиться первым, но редко контролирует воспринимаемую готовность. Обычно это делает главное (hero) изображение, занимающее половину экрана телефона.

Используйте вместе рендеризованный размер, позицию в области просмотра (viewport position) и назначение. Миниатюра в меню навигации видна, но это не основной контент. Фоновое изображение за заголовком может быть критическим, если оно является самым крупным видимым элементом. Изображение социальной карточки в метаданных важно для обмена, но оно не загружается для рендеризованной страницы, если только шаблон также его не отображает.

Руководство Google по LCP перечисляет элементы <img>, изображения внутри SVG, фоновые изображения видео и фоновые изображения CSS как возможные кандидаты. Это означает, что извлечение не может остановиться на поиске первой метки <img>. Вам нужно проинспектировать рендеризованную страницу.

Для смежной работы держите рядом более общий чек-лист оптимизации изображений для SEO. Извлечение критического изображения определяет приоритет; сжатие, имена файлов, alt text и структурированный контент по-прежнему определяют, будет ли изображение полезным после загрузки.

Какое изображение должно получить preload или высокий приоритет?

Присвойте высокий приоритет одному изображению: вероятному изображению LCP текущей страницы. Если кандидатов несколько и они близки, выберите то, которое самое большое для мобильных устройств, поскольку пройти показатели Core Web Vitals на мобильных устройствах обычно сложнее.

Используйте fetchpriority="high", когда критическое изображение является обычным тегом <img> или резервным изображением <img> в элементе <picture>. В руководстве Google по приоритету загрузки объясняется, что этот намек изменяет приоритет ресурсов браузера без изменения пути обнаружения разметки.

Используйте preload, когда проблема в обнаружении. Ссылка MDN rel="preload" reference описывает preload как способ запроса ресурсов на более раннем этапе загрузки страницы. Это помогает, когда URL изображения появляется в CSS, поступает после гидратации или находится за разметкой, которую браузер не может обнаружить достаточно быстро.

Для обычного адаптивного изображения разметка может выглядеть так:

<img
  src="/images/product-hero-960.webp"
  srcset="/images/product-hero-480.webp 480w, /images/product-hero-960.webp 960w, /images/product-hero-1440.webp 1440w"
  sizes="(max-width: 640px) 100vw, 960px"
  width="960"
  height="640"
  fetchpriority="high"
  alt="Black leather backpack shown open with laptop sleeve visible"
>

Если изображение является фоном CSS и вы пока не можете переместить его в HTML, выполните предварительную загрузку того же ресурса, который будет использоваться начальным окном просмотра:

<link
  rel="preload"
  as="image"
  href="/images/home-hero-960.webp"
  imagesrcset="/images/home-hero-480.webp 480w, /images/home-hero-960.webp 960w"
  imagesizes="100vw"
>

В руководстве по предварительной загрузке изображений более подробно описан синтаксис. Важное правило здесь уже: выполнять предварительную загрузку после извлечения, а не до него.

Как избежать ленивой загрузки неправильного изображения?

Ленивая загрузка должна быть ниже первого области просмотра (viewport). Это ошибка для извлеченного критического изображения, потому что она говорит браузеру ждать, пока произойдут проверки макета и расстояния. В руководстве Google по ленивой загрузке на уровне браузера предупреждает о ленивой загрузке изображений, которые сразу видны.

Внимательно проверьте глобальные компоненты изображений. Многие фреймворки делают ленивую загрузку настройкой по умолчанию, потому что большинство изображений находятся ниже линии сгиба (below the fold). Эта настройка по умолчанию ломает страницы, где главное изображение обернуто в тот же компонент, что и миниатюры галереи.

Проверьте следующие места:

1. Рендереры изображений в богавом тексте CMS.
2. Компоненты галереи продуктов.
3. Компоненты фонового изображения блога.
4. Утилиты фона главного изображения на главной странице.
5. Слайдеры, которые скрывают все слайды до запуска JavaScript.
6. Компоненты-заполнители, которые заменяют data-src на src.
7. Блоки персонализации сторонних разработчиков.
8. Обертки для A/B тестирования, которые задерживают разметку главного изображения.

Исправление обычно небольшое. Добавьте опцию priority, aboveFold или isLcp в компонент и заставьте владельца шаблона выбирать ее явно. Изображения основного текста ниже линии сгиба по-прежнему должны использовать нативную ленивую загрузку, особенно длинные руководства со скриншотами и диаграммами.

Для страниц с большим количеством мобильного контента сочетайте это с руководством по оптимизации изображений для мобильных устройств. Даже правильно приоритизированное главное изображение будет работать плохо, если телефон загружает десктопный обрезок 2400 px для слота 390 px.

Как следует извлекать изображения с реальной страницы?

Начинайте в браузере, а не в библиотеке ресурсов. Библиотека ресурсов говорит вам о том, что существует; браузер говорит вам о том, что получают пользователи.

Используйте этот ручной рабочий процесс:

1. Откройте страницу шириной 390 px и перезагрузите с отключенным кэшем.
2. Обратите внимание на самое крупное видимое изображение до прокрутки.
3. Проинспектируйте этот элемент и запишите его окончательный URL.
4. Убедитесь, что это <img>, <picture>, фоновое изображение видео или CSS background.
5. Подтвердите отображенную ширину и высоту.
6. Сравните ширину загруженного файла с выделенным слотом.
7. Ищите loading="lazy" или присвоение src через JavaScript с задержкой.
8. Проверьте DevTools Network на время начала запроса и приоритет.
9. Запустите PageSpeed Insights и запишите элемент LCP.
10. Повторите для десктопа, если главный экран меняется при изменении брейкпоинта.

Для аудитов шаблонов создайте небольшую таблицу извлечения перед редактированием кода:

Я сгенерировал диаграммы в этой статье в формате WebP и сохранил каждую из них объемом менее 40 KB. Это не универсальная цель для фотографий, но это полезное напоминание: извлеченное изображение должно быть правильно масштабировано до того, как ему будет присвоен приоритет. Если файл все еще слишком большой, используйте image compression deep dive и batch resize guide перед публикацией.

Как проверить критическое изображение в инструментах?

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

Используйте PageSpeed Insights для контекста работы в полевых условиях (field) и лабораторных условиях (lab). Панель диагностики обычно называет элемент LCP, а скриншот помогает подтвердить, соответствует ли заявленный элемент визуальному главному изображению страницы. Используйте Lighthouse или DevTools Performance, если вам нужна локальная трассировка.

Используйте DevTools Network для анализа поведения запросов:

1. Отфильтруйте по запросам изображений.
2. Обновите страницу с отключенным кэшем.
3. Подтвердите, что критическое изображение начинается в верхней части вотерфолла.
4. Проверьте, что приоритет установлен как High или был повышен рано.
5. Убедитесь, что изображения ниже линии сгиба (below-fold) не конкурируют все одновременно.
6. Проверьте код состояния, тип контента, размер передачи и заголовки кэша.

Используйте проверку отрендеренного HTML для выявления ошибок разметки:

1. Критическое изображение должно иметь src или обнаруживаемый srcset в исходной разметке.
2. Оно не должно использовать loading="lazy".
3. У него должны быть указаны width и height или стабильное CSS-соотношение сторон.
4. Его alt text должен описывать видимый объект, если изображение является контентом.
5. URL CDN должен возвращать сканируемый ответ 200.

Для поисковой оптимизации Google's image SEO best practices также подчеркивают важность описательных имен файлов, alt text и полезного окружающего текста. Извлечение критического изображения улучшает приоритет загрузки, но само изображение все равно нуждается в контексте для поиска.

Что приводит к сбоям при критическом извлечении изображений?

Самая распространенная ошибка — считать, что каждая страница имеет одинаковый "герой" (hero). Индекс блога, страница продукта и страница с ценами могут иметь разные кандидаты для LCP. Этап извлечения должен происходить на уровне шаблона и на уровне брейкпоинта.

Остерегайтесь этих ловушек:

1. Прелоадинг изображения Open Graph. Изображение социальной карточки может никогда не отобразиться на странице.
2. Ленивая загрузка первой фотографии продукта. Галереи продуктов часто наследуют значения по умолчанию для миниатюр.
3. Приоритизация каждого слайда карусели. Критическим при загрузке может быть только первый видимый слайд.
4. Игнорирование мобильных обрезных кадров. Для десктопа и мобильной версии могут выбираться разные изображения LCP.
5. Использование фоновых изображений CSS для значимого контента. Их сложнее приоритизировать, и они менее доступны.
6. Забывание о размерах (dimensions). Приоритет не предотвращает сдвиг макета.
7. Предоставление одного слишком большого источника. Изображение высокого приоритета размером 3 MB все равно будет медленным.
8. Тестирование только в локальной сети Wi-Fi. Медленный 4G выявляет задержки обнаружения.

Если проблема в основном связана с весом файла, начните со полного контрольного списка оптимизации изображений. Если проблема в выборе формата, сравните AVIF vs WebP, прежде чем менять правила доставки.

Сводка: контрольный список извлечения критического изображения

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

Перед публикацией убедитесь:

1. Вероятное LCP изображение указано в шаблоне или заметках аудита.
2. Кандидаты для мобильных и десктопных устройств проверяются отдельно.
3. Критическое изображение не загружается лениво (lazy-loaded).
4. Для видимого кандидата LCP <img> используется fetchpriority="high".
5. Презагрузка (Preload) используется только в случае позднего обнаружения.
6. Выбранный файл был изменен по размеру и сжат.
7. Ширина и высота, или соотношение сторон, резервируют место макета.
8. Изображения ниже области просмотра остаются ленивыми.
9. PageSpeed Insights сообщает ожидаемый элемент LCP.
10. DevTools показывает запрос критического изображения в начале водопада (waterfall).
11. URL CDN возвращает 200 с ожидаемым типом изображения.
12. Изображение имеет полезный alt text и близлежащий пояснительный контент.

Кредиты изображений

• Обложка, кандидат-диаграмма LCP, дерево приоритетных решений и трассировка проверки были сгенерированы для этой статьи с помощью ImageMagick и экспортированы как WebP.