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