Core/Dash Измерение: LCP Priority

Измерение: Ресурс: LCP Priority

Измерение LCP Priority сегментирует данные о производительности на основе того, как браузер обнаружил и приоритезировал ресурс LCP. В то время как измерение "Element Type" сообщает, чем является элемент (Текст или Изображение), это измерение объясняет, почему браузер отложил его загрузку.

Это ваш основной инструмент аудита для Load Delay (задержки загрузки). Он показывает, борется ли ваш актив LCP за пропускную способность или искусственно задерживается из-за некорректных атрибутов HTML.

Иерархия приоритетов

Браузер назначает приоритет загрузки каждому ресурсу. Это измерение сопоставляет элемент LCP с одним из пяти конкретных состояний загрузки, ранжированных от наиболее деструктивного (Lazy Loaded) до наиболее оптимального (Text/High Priority).

Контекст: Когда пользователь возвращается на вашу страницу с помощью кнопки "Назад" или "Обновить", большинство браузеров возвращают его на предыдущую вертикальную позицию. Если эта позиция находится ниже первого экрана (below the fold), ваше оптимизированное Hero-изображение больше не является LCP. Вместо этого браузер измеряет самый большой элемент в текущем viewport. Это создает неизбежный набор событий "Not Preloaded" в вашем наборе данных. И это абсолютно нормально!

1. Lazy Loaded 

Если более 10% ваших элементов LCP попадают в эту категорию, вы обнаружили проблему. Изображения с отложенной загрузкой (lazy loading) ставятся в очередь намного позже (медленным парсером DOM, а не быстрым сканером предзагрузки). Атрибут loading="lazy" дает браузеру инструкцию подождать с  загрузкой до тех пор, пока не будет рассчитан макет и элемент не окажется рядом с viewport.

Решение: Вы должны удалить этот атрибут загрузки. Элемент LCP никогда не должен загружаться отложенно.

<!-- НЕПРАВИЛЬНО -->
<img src="hero.jpg" loading="lazy" alt="Hero Image" />

<!-- ПРАВИЛЬНО -->
<img src="hero.jpg" fetchpriority="high" alt="Hero Image" />

2. Not Preloaded

Это представляет собой стандартное поведение браузера. Браузер обнаружил изображение в HTML во время первоначального парсинга, но не получил сигнала о приоритете над другими изображениями.

Влияние на скорость страницы зависит от сложности вашей веб-страницы. Изображение LCP попадает в очередь конкуренции за ресурсы. Если на вашей странице много скриптов, шрифтов, других изображений без lazy-loading или стилей для загрузки, браузер может отложить загрузку этого изображения, увеличивая Load Delay.

3. Preloaded

Это указывает на то, что ресурс был обнаружен через тег <link rel="preload"> в head документа. Эти ссылки предзагрузки по сути означают раннее обнаружение, даже если ссылка на изображение глубоко спрятана в DOM или скрыта в файле CSS (фоновое изображение).

Предзагрузка — самый эффективный способ принудительно начать раннюю загрузку, но она требует поддержки отдельного тега ссылки, который должен точно совпадать с URL изображения. Если они разойдутся, вы загрузите актив дважды.

4. High fetchpriority

Это современный инженерный стандарт. Браузер получил инструкцию через атрибут fetchpriority="high" рассматривать это конкретное изображение как критический ресурс.

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

5. Not an Image

Статус: Текстовый узел / SVG

Элемент LCP представляет собой блок текста (h1, p) или "сырой" SVG. Это идеальное архитектурное состояние, поскольку текст имеет нулевую задержку загрузки (он уже присутствует в документе HTML).

Оптимизация: Если ваш LCP находится в этой категории, но все еще медленный, узким местом является исключительно Render Delay (задержка рендеринга). Вы должны оптимизировать ваш Critical Rendering Path (блокировка CSS/JS) или стратегию загрузки шрифтов (font-display: swap), так как файл изображения для загрузки отсутствует.

Рабочий процесс: Оптимизация Load Delay

Используйте это измерение для проверки вашей стратегии фронтенд-ресурсов.

1. Устраните Lazy Loading: Отфильтруйте по Lazy Loaded. Если это значение больше 0%, найдите компонент, добавляющий loading="lazy" к hero-изображению, и удалите его. Это часто встречается в шаблонах CMS, которые применяют lazy loading глобально ко всем медиафайлам.
2. Перейдите на Fetchpriority: Переместите трафик с Not Preloaded и Preloaded на High fetchpriority. Замена <link rel="preload"> на fetchpriority="high" очищает ваш <head> и связывает логику приоритетов непосредственно с компонентом.
3. Аудит фоновых изображений: Если у вас большой объем в Not Preloaded и ваш LCP — это фоновое изображение, браузер обнаруживает его слишком поздно (только после парсинга CSS). Вы должны рефакторить это в тег HTML <img> с fetchpriority="high" или принудительно использовать заголовок Preload.

Инженерное правило

Ваша цель распределения для этого измерения строга:

• <10% Lazy Loaded
• > 90% High fetchpriority (для LCP-изображений)
• 100% Not an image (для текстовых LCP)

Любой трафик, попадающий в "Not Preloaded", представляет собой неоптимизированное состояние, в котором вы отдаете контроль над приоритетом ресурсов стандартным эвристикам браузера.