В Недавний эпизод Из поиска Google из подкаста записи Мартин Сплитт и Джон Мюллер обсуждали, когда ленивая загрузка помогает и когда он может замедлить страницы.

Splitt использовал реальный пример на Developers.google.com, чтобы проиллюстрировать общий рисунок: сделать каждое изображение ленивым по умолчанию, может задержать самую большую довольную краску (LCP), если оно включает в себя визуальные эффекты.

Сплит сказал:

«Система управления контентом, которую мы используем для разработчиков.google.com… по умолчанию все изображения на ленивую загрузку, что не очень здорово».

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

Сплит сказал:

«Если вы используете ленивую нагрузку на изображение, которое немедленно видно, это, скорее всего, окажет влияние на вашу самую большую довольную краску. Это почти гарантировано».

Как ленивая загрузка задержек lcp

LCP измеряет момент, который окрашен самый большой текст или изображение в начальном виде просмотра.

Как правило, сканер предварительного нагрузки браузера находит этот герой изображение рано и извлекает его с высоким приоритетом, чтобы он мог быстро рисовать.

Когда вы добавляете loading="lazy" Для того же героя вы меняете планирование браузера:

  • Изображение рассматривается как более низкий приоритет, поэтому другие ресурсы начинаются первыми.
  • Браузер ждет до тех пор, пока макет и другие работы будут прогрессировать, прежде чем он запрашивает изображение героя.
  • Затем герой конкурирует за пропускную способность после того, как сценарии, стили и другие активы уже встали в очередь.
ЧИТАТЬ  Microsoft выиграла дело о поглощении Activision Blizzard в FTC

Эта задержка сдвигает время краски самого большого элемента позже, что увеличивает ваш LCP.

На медленных сетях или устройствах с ограниченным процессором эффект более заметен. Если ширина и высота отсутствуют, позднее изображение также может подтолкнуть макет и чувствовать себя «резким».

SEO риск с некоторыми библиотеками

Браузеры теперь поддерживают встроенный loading Атрибут для изображений и iframes, которые устраняют необходимость тяжелого JavaScript в стандартных сценариях. WordPress принял нативную ленивую загрузку по умолчанию, помогая ей распространяться.

Сплит сказал:

«Браузеры получили собственный атрибут для изображений и iframes, атрибут загрузки… который заставляет браузер позаботиться о ленивой загрузке для вас».

Старые или пользовательские библиотеки с ленивым загрузкой могут скрыть URL-адреса изображения в нестандартных атрибутах. Если настоящий URL никогда не приземляется в src или srcset В рендерингах html Google изображения могут не забрать для индексации.

Сплит сказал:

«Мы видели несколько ленивых библиотек с загрузкой… которые используют какой-то атрибут источника данных, а не атрибут источника… если его нет в атрибуте источника, мы не будем подбирать его, если он находится в каком-то пользовательском атрибуте».

Как проверить свои страницы

Используйте URL -инспекцию поисковой консоли, чтобы просмотреть рендер HTML и подтвердите, что вышеупомянутые изображения и ленивые модули решаются до стандартных атрибутов. Избегайте полагаться на скриншот.

Splitt посоветовал:

«Если рендерированный HTML выглядит так, как будто он содержит все URL -адреса изображения в атрибуте источника тега изображения… тогда у вас все будет в порядке».

Воздействие

Splitt рамка рейтинга как скромные. Основные жизненные силы вносят свой вклад в рейтинг, но в большинстве случаев он назвал это «крошечным мельчайшим фактором».

Что вы должны сделать дальше

  • Держите героя и другие вышеупомянутые изображения с нетерпением жду ширины и высоты.
  • Используйте родной loading="lazy" Для изображений ниже и iframes.
  • Если вы полагаетесь на библиотеку для предварительных просмотров, видео или динамических разделов, убедитесь, что окончательная разметка разоблачает реальные URL -адреса в стандартных атрибутах и ​​подтвердите в рендерированном HTML.
ЧИТАТЬ  Наконец, обновление сообщения Google добавляет важный инструмент безопасности - и дразнит функцию. Я удивлен, что приложение еще нет

Глядя в будущее

Ленивая загрузка полезна при избирательном применении. Обратитесь к нему как к выбору для некритического содержания.

Проверьте свою реализацию с помощью HTML и посмотрите, как ваши тенденции LCP с течением времени.

Избранное изображение: скриншот с YouTube.com/googlesearchcentral, август 2025 года.



Source link