Ленивая загрузка постеров + preconnect: как корректно замерять LCP?
 

Добрый день! Делаю каталог видео-страниц: список карточек сериалов, постеры тянутся с CDN, используем loading="lazy" + IntersectionObserver.
Заметил, что LCP скачет, когда добавляю preconnect к CDN и priority для главного постера.
Есть минимальная страница, где поведение воспроизводится: https://indiserial.net/
(карточки на главной).
Вопросы:
Правильно ли поднимать LCP-кандидата через fetchpriority="high" на первом видимом постере?
Не конфликтует ли это с ленивой загрузкой ниже складки?
Стоит ли добавлять rel="preload" для шрифтов или достаточно preconnect?
Ниже черновой код теста (усечённый):

<link rel="preconnect" href="https://cdn.example.com">
<img src="/poster.jpg" fetchpriority="high" decoding="async">

Буду благодарен за советы и «правильные» метрики.

У вас в целом правильный подход.
fetchpriority="high" на первом LCP-кандидате действительно помогает — особенно если это единственный крупный постер выше складки. Главное — не ставить loading="lazy" на этот элемент, иначе браузер может проигнорировать высокий приоритет.
Ленивая загрузка ниже складки никак не конфликтует. Оптимально: для первого видимого изображения — fetchpriority="high", для остальных — lazy через IntersectionObserver. Так браузер получает чёткий сигнал, что именно грузить в первую очередь.
Для шрифтов обычно достаточно preconnect, если они реально грузятся с другого домена. Если видите скачки FOUT/FOIT — тогда стоит добавить preload с правильным as="font" и crossorigin. Но перегружать preload’ами всё подряд не стоит, они могут навредить.
Проверяйте LCP не только в Lighthouse, а ещё в WebPageTest или через поле Chrome UX Report — там поведение часто реалистичнее.
На вашем примере всё ожидаемо: главная картинка лучше загружается при high, а "ленивые" постеры подтягиваются уже по мере скролла.
В целом у вас всё сделано верно, можно смело оставлять такую схему.