Отложенная загрузка может задержать отрисовку самого большого контента (LCP) ✅ На сайте developer.google.com была проиллюстрирована распространенная закономерность: если сделать все изображения по умолчанию отложенными, это может привести к задержке отрисовки самого большого контента (LCP), если в них содержатся визуальные элементы, расположенные в верхней части страницы. Мартин Сплитт из Google пояснил: «Система управления контентом, которую мы используем для developer.google.com по умолчанию устанавливает для всех изображений отложенную загрузку, что не очень хорошо». ❗️ Отложенная загрузка изображений в верхней части страницы рискованна: вы сообщаете браузеру, что нужно ждать самого видимого элемента, что может отодвинуть LCP и вызвать сдвиги макета, если размеры не заданы. «Если вы используете отложенную загрузку для изображения, которое видно сразу, это, скорее всего, повлияет на отрисовку самого большого контента. Это почти гарантировано». Как отложенная загрузка задерживает LCP LCP измеряет момент отрисовки самого большого текста или изображения в исходной области просмотра. Обычно сканер предварительной загрузки браузера находит главное изображение заранее и загружает его с высоким приоритетом, чтобы оно могло отрисоваться быстрее. При добавлении loading="lazy" того же hero image в верхней части страницы вы меняете расписание браузера: 1️⃣ Изображение рассматривается как имеющее более низкий приоритет, поэтому другие ресурсы запускаются в первую очередь. 2️⃣ Браузер ждет завершения компоновки и других работ, прежде чем запросить главное изображение. 3️⃣ Затем hero image конкурирует за пропускную способность после того, как скрипты, стили и другие ресурсы уже поставлены в очередь. ❗️Эта задержка сдвигает время покраски самого большого элемента на более позднее время, что увеличивает ваш LCP. ⚠️ На медленных сетях или устройствах с ограниченной производительностью процессора эффект более заметен. Если ширина и высота не указаны, запаздывающее изображение может также смещать макет и вызывать ощущение «резкости». SEO-риски при использовании некоторых библиотек Браузеры теперь поддерживают встроенный loading атрибут для изображений и фреймов, что устраняет необходимость в тяжёлом JavaScript в стандартных сценариях. «Браузеры получили собственный атрибут для изображений и фреймов — атрибут загрузки… который позволяет браузеру позаботиться о ленивой загрузке». ❗️ Устаревшие или пользовательские библиотеки отложенной загрузки могут скрывать URL-адреса изображений в нестандартных атрибутах. Если реальный URL-адрес не отображается в src HTML srcset-коде, отрендеренном Google, изображения могут не индексироваться. «Мы видели несколько библиотек с отложенной загрузкой… которые используют некий атрибут источника данных, а не исходный атрибут… Если его нет в исходном атрибуте, мы не подхватим его, если он есть в каком-то пользовательском атрибуте». Итоги 1️⃣ Удерживайте hero image и другие изображения в верхней части страницы, задавая их ширину и высоту. 2️⃣ Используйте нативные функции loading="lazy"для изображений, расположенных ниже сгиба, и фреймов. 3️⃣ Если вы полагаетесь на библиотеку для предпросмотров, видео или динамических разделов, убедитесь, что окончательная разметка отображает реальные URL-адреса в стандартных атрибутах и ​​подтверждает это в отображаемом HTML.