Оптимизация скорости загрузки основного контента (LCP) - часть 2

Оптимизация скорости загрузки основного контента (LCP) - часть 2.

Еще одним важным аспектом приоритизации ресурса LCP является обеспечение того, чтобы вы не делали ничего, что может привести к потере его приоритета, например добавление loading="lazy" атрибута. На сегодняшний день 10% страниц фактически устанавливают loading="lazy" на свои LCP-изображения. Остерегайтесь решений для оптимизации изображений, которые без разбора применяют поведение отложенной загрузки ко всем изображениям. Если они предоставляют способ переопределить это поведение, обязательно используйте его для образа LCP. Если вы не уверены, какое изображение будет LCP, попробуйте использовать эвристику, чтобы выбрать подходящего кандидата.

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

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

✔️ Добавьте fetchpriority="high" в <img> тег вашего образа LCP. Если ресурс LCP загружается через <link rel="preload"> тег, не бойтесь, потому что вы также можете установить его fetchpriority="high"!

✔️ Никогда не устанавливайте loading="lazy" тег <img>вашего изображения LCP. Это приведет к снижению приоритета изображения и задержке начала его загрузки.

✔️ По возможности откладывайте некритические ресурсы. Либо переместив их в конец документа, используя встроенную ленивую загрузку изображений или фреймов , либо загрузив их асинхронно через JavaScript.

#DrMax #SEO #CoreWebVitals #LCP

Источник новости https://t.me/drmaxseo/216...