​Что делать с изображениями, когда ваш H1 или лид-текст является LCP?

​Что делать с изображениями, когда ваш H1 или лид-текст является LCP?

Ответ на самом деле прост:

→ при использовании Lighthouse может показаться, что (или ) всегда является LCP

→ но если вы собираете реальные пользовательские данные через такой инструмент, как RUMvision - мониторинг Core Web Vitals, вы могли заметить (или вам стоит знать), что LCP будет отличаться в зависимости от вьюпорта

→ что и имеет значение для CWV , а не то, что думает Lighthouse

Итак, для надежности, делайте следующее:

1️⃣ считайте ваше самое большое видимое изображение над фолдом как LCP

2️⃣ это значит: не применяйте к нему ленивую загрузку и используйте fetchpriority=high

Вот почему:

3️⃣ ваш и уже будут в исходном HTML-коде (*)

4️⃣ поэтому, загрузка вашего HTML + рендеринг этих элементов в любом случае не будут конкурировать с вашим изображением ()

5️⃣ именно поэтому безопасно повышать приоритет вашего изображения

6️⃣ при этом нужно применять это только к одному изображению на странице

(*) это применимо к `HTML` с серверным рендерингом = также лучше для скорости загрузки страницы и SEO 😜

() если вышеуказанное не применимо, потому что вы используете CSR, нюансы могут отличаться

@MikeBlazerX

Источник новости https://t.me/mikeblazerx/5216...