Lazy loading изображений: что это и как настроить отложенную загрузку картинок

Краткое саммари

Для большинства сайтов базовый способ настроить ленивую загрузку изображений — использовать нативный атрибут loading="lazy" у img и iframe. Для сложных сценариев подойдут Intersection Observer и проверенные библиотеки. В WordPress ленивая загрузка уже встроена в ядро, но можно использовать отдельные плагины, если вам нужно тонко настроить видео, фоны, галереи и исключения.

Кому стоит прочитать эту статью:

• владельцам интернет-магазинов и медиа с большим количеством картинок;
• SEO-специалистам, которые работают со скоростью сайта и Core Web Vitals;
• разработчикам, которые настраивают lazy loading без ухудшения индексации;
• администраторам сайтов на WordPress, 1С-Битрикс, OpenCart, Joomla! и Drupal.
  

Отложенную или по-другому ленивую загрузку изображений используют довольно много сайтов. В октябре 2019 команда Backlinko провела исследование, в котором проанализировала скорость загрузки 5,2 млн десктопных и мобильных страниц. Они подсчитали, какие способы оптимизации загрузки практикуют самые быстрые страницы.

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

Исследователи посмотрели, какой подход используют сайты, получившие высокие оценки инструмента для измерения скорость загрузки Lighthouse. Таблица похожа на предыдущую, lazy loading на втором месте после адаптивных изображений:

Разберем, что такое lazy loading, каким сайтам нужно внедрять эту функцию, как настроить отложенную загрузку изображений и как не навредить SEO.

Что такое lazy loading изображений и как работает ленивая загрузка

Lazy loading или «ленивая загрузка» — это способ отложенной загрузки изображений: браузер не скачивает все картинки вместе со страницей, а подгружает их ближе к моменту, когда они понадобятся пользователю. Сейчас это можно сделать нативно через HTML-атрибут loading или через JavaScript, например на Intersection Observer API.

Способ работает для элементов img и iframe. Для фоновых изображений из CSS используют JavaScript: скрипт отслеживает появление блока в области просмотра и только затем подставляет нужный фон.

Варианты отложенного отображения контента:

1. По скроллингу
   Изображения и фреймы подгружаются, когда пользователь до них доскролливает. Обычно используют в блогах с бесконечной лентой, в интернет-магазинах с большими листингами.
2. По клику
   Контент подгружается, когда пользователь переходит по ссылке. К примеру, большое изображение загружается, когда пользователь нажимает на миниатюру.
3. В фоновом режиме
   Контент подгружается фоново, к примеру, когда пользователь загрузил документ и оставил его открытым. Этот способ обычно используют для документов, которые нужны для работы — картинок больших размеров, чертежей, схем.

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

На демонстрационной странице indexoid.com/speed картинки загружаются по мере просмотра:

Не стоит настраивать такую загрузку для элементов на первом экране — они должны загружаться сразу же, как только пользователь зашел на страницу.

Как ПС относятся к отложенной загрузке

Поисковые системы нормально воспринимают lazy loading, если контент есть в HTML или становится доступен без действий пользователя вроде клика по кнопке «Показать еще». Для SEO важно проверить, что изображения имеют корректные src, srcset, alt, размеры width и height, а робот видит страницу после рендеринга. Это особенно важно для Яндекса и Google: если картинка подставляется только сложным клиентским скриптом, ее могут проиндексировать позже или не учесть как основной контент.

FAQ по разделу

Lazy loading ускоряет сайт?

Да, если на странице есть изображения ниже первого экрана. Браузер скачивает меньше файлов при первом открытии, поэтому страница быстрее становится полезной для пользователя.

Можно ли лениво загружать первое изображение?

Главное изображение первого экрана влияет на LCP, поэтому его лучше загружать сразу и при необходимости повысить приоритет через fetchpriority="high".

Отложенная загрузка мешает SEO?

Если изображения доступны в разметке, имеют понятные атрибуты и видны при рендеринге страницы поисковым роботом, то не помешает.

Каким сайтам нужно внедрять отложенную загрузку

В пятом выпуске рубрики «Спроси PR-CY» один из пользователей задал эксперту вопрос о способах оптимизации картинок на сайте:

«Стоит ли на сайте интернет магазина внедрять lazy loading изображений? Слышал, что Google прочитает фото, находящиеся за пределом экрана, а вот Яндекс — нет. Общался с популярными SEO конторами, 7 из 10 уверяют, что не стоит, обрушу SEO.

И еще вопрос по поводу WebP, jpeg2000 — стоит ли внедрять на сайт? На сайте уже 25000 фото, сам процесс конвертации не быстрый».

Ответил Михаил Шакин, автор SEO-блога и специалист по продвижению сайтов в рунете и англоязычном интернете:

«Если есть хороший трафик с изображений, то реализовывать lazy loading не стоит.

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

По поводу новых форматов изображений — пока можно не тратить на это время. А вот оптимизировать для быстрой загрузки без потери качества очень желательно».

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

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

Почитать по теме:
Как использовать WebP для оптимизации картинок на сайте

В каких случаях стоит внедрять lazy loading:

1. На страницах много больших изображений: карточки товаров, галереи, портфолио, подборки, длинные статьи.
2. Картинки составляют основную часть контента — вы продвигаете сервисы с фотографиями, фотостоки, медиа, блоги с большим количеством иллюстраций и фреймов.
3. Невысокие показатели PageSpeed Insights, Lighthouse или внутренней проверки скорости сайта.
4. Много посетителей с мобильных устройств, особенно если часть аудитории открывает сайт с медленным соединением.
5. Конкуренты быстрее вас, хотя базовая оптимизация уже сделана: включено сжатие, кеширование, современные форматы изображений и CDN.
6. Сервер или тариф хостинга не справляется с резкими пиками запросов к тяжелым изображениям.

Проверить скорость загрузки сайта можно с помощью сервиса «Анализ сайта». Он проверит загрузку в соответствии с новыми требованиями поисковиков и даст советы, что сделать, чтобы ее улучшить.

FAQ по разделу

Нужен ли lazy loading интернет-магазину?

Чаще всего да: в каталогах, листингах и карточках с галереями он снижает количество запросов при первом открытии страницы.

Когда отложенную загрузку лучше не включать?

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

Что важнее, lazy loading или WebP?

WebP и AVIF уменьшают вес файла, а lazy loading откладывает загрузку лишних файлов. Лучше использовать оба подхода.

Как настроить lazy loading изображений на сайте

Разберем, какие есть способы для настройки отложенной загрузки, и что проще применить на практике.

Атрибут loading="lazy" для отложенной загрузки

C помощью атрибута loading веб-мастеры задают браузеру режим загрузки. Атрибут можно установить для изображений с тегом img и для встраиваемого контента с тегом iframe.

Он поддерживает три значения:

• lazy — асинхронная загрузка по мере надобности изображения;
  

  <img src="image.png" loading="lazy" alt="prcy" width="200" height="200">

• eager — загрузка элемента немедленно;
  

  <img src="image.png" loading="eager" alt="prcy" width="200" height="200">

• auto — порядок загрузки по усмотрению браузера.
  

  <img src="image.png" loading="auto" alt="prcy" width="200" height="200">

Если значение для атрибута loading не указано, браузер сам выбирает стратегию загрузки. Для изображений ниже первого экрана обычно задают loading="lazy", а для важных изображений первого экрана оставляют обычную загрузку или используют loading="eager".

Для iframe код аналогичный.

Иногда на сайте используют скрытые фреймы, к примеру, для аналитики, для них отложенная загрузка не действует. Chrome определяет, является ли фрейм скрытым, по критериям:

• высота и ширина фрейма — 4px или меньше;
• применяются свойства display: none или visibility: hidden;
• расположение за пределами экрана с помощью отрицательного позиционирования по осям X или Y.

Если хоть одно условие соблюдено, Chrome считает фрейм скрытым и не будет загружать его асинхронно.

Как работает lazy loading

Без внедрения lazy loading браузер делает запросы по адресам из атрибутов, и когда картинок много, он одновременно делает много запросов ко внешним источникам. Это замедляет загрузку страницы.

Ленивая загрузка позволяет делать запросы не синхронно, а порциями — по мере просмотра страницы пользователем. При первой загрузке страницы браузер делает один запрос к временному шаблону, указанному в атрибуте src, закэшированному браузером. И потом при необходимости для элементов возвращает их оригинальный src.

Для отложенной загрузки картинок и фреймов есть два работающих способа настройки:

• с помощью нативного HTML-атрибута loading="lazy";
• с помощью JavaScript: Intersection Observer API, собственной логики или библиотеки lazy loading.

Как это работает в Chrome:

1. При загрузке страницы браузер создает DOM страницы без изображений и видео.
   
2. С помощью JavaScript он определяет, какие изображения и видео нужно загружать, запрашивает первые 2 КБ изображений и узнает из них сведения о размерах.
   
3. На основе этих данных браузер создает заглушки, заполняющие места изображений, с такими же размерами, как у картинок. У атрибута src появляется временное значение, которое содержит адрес шаблона с меньшим весом, чем у оригинального исходника. Элементы, которые будут загружаться асинхронно, встраиваются на страницу с новым значением src.
   
4. Когда изображение нужно загрузить, в атрибут src вставляется оригинальный адрес ресурса и изображение появляется в исходном качестве. Могут быть два условия для загрузки:
   
   1. автоматически, когда элемент попадает в область просмотра пользователя — путем проверки события scroll или resize или orientationchange для мобильных устройств;
   2. на элементах по требованию пользователя, когда для элемента наступают события click или hover.

Если изображения внедрены через CSS, настроить отложенную загрузку тоже можно. Это делают через JavaScript: нужно определить, когда элемент находится в области просмотра, и также загрузить фоновое изображение. Теги img загружаются вне зависимости от их видимости, а в загрузке CSS есть много предположений, так что сначала браузер проверяет применение CSS к документу, а потом запрашивает внешние ресурсы.

Какие браузеры поддерживают lazy loading изображений

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

Google Chrome обрабатывает loading начиная с 76 версии. Сейчас нативный lazy loading поддерживают актуальные версии Chrome, Edge, Opera, Firefox, Safari и большинство мобильных браузеров. Старые браузеры просто игнорируют незнакомый атрибут и загружают элементы обычным способом.

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

Как настроить кроссбраузерную функцию lazy loading

Сначала нужно проверить, поддерживает ли браузер атрибут:

<script>
if ('loading' in HTMLImageElement.prototype) { 
    // Поддерживается
} else {
   // Применить полифилл или JavaScript
}
</script>

Для браузеров, которые не поддерживают встроенный режим отложенной загрузки, можно реализовать его с помощью полифила или сторонней библиотеки. Можно настроить, чтобы библиотеку загружал только браузер, который не поддерживает loading.

Изображения на первом экране просмотра

Изображения, которые должны быть видны сразу после загрузки страницы, нужно описать с помощью тегов img и указать атрибут src. Если использовать для них атрибут data-src без src, изображения не будут показаны.

Изображения на остальных экранах в ленивой загрузке

Если браузер поддерживает атрибут ленивой загрузки, используем src.

Если браузер не поддерживает lazy loading, нужно, чтобы обычная одновременная загрузка не сработала для изображений на всех экранах, кроме первого. Для этого в работе с изображениями на остальных экранах в разметке нужно использовать img data-src=image.png /, а не src, srcset или source.

Это можно сделать с помощью скрипта Lazy loading от David Walsh. Скрипт заменяет атрибут src на data-src в теге img:

<img data-src="image.jpg" alt="test image">

Элементы img с атрибутами data-src скрыты в CSS. После загрузки картинок они будут отображаться с применением плавных переходов:

img {
  opacity: 1;
  transition: opacity 0.3s;
}
 
img[data-src] {
  opacity: 0;
}

Затем JavaScript передает всем тегам img атрибут src, которые в итоге получают значение атрибута data-src. После загрузки всех изображений, data-src убирается из img:

[].forEach.call(document.querySelectorAll('img[data-src]'),    function(img) {
  img.setAttribute('src', img.getAttribute('data-src'));
  img.onload = function() {
    img.removeAttribute('data-src');
  };
});

JavaScript библиотеки

С помощью возможностей JavaScript можно загрузить соответствующую библиотеку. Библиотек много, к примеру, yall.js (Yet Another Lazy Loader), которая использует Intersection Observer API, Query Lazy, основанная на jQuery, LazySizes с поддержкой адаптивных изображений «srcset» и атрибута «sizes» и другие.

В случае с популярной библиотекой LazySizes нужно использовать class=lazyload, чтобы указать библиотеке на изображения, которые должны загружаться асинхронно.

Как это выглядит на примере:

<img align="center" src="image.png" alt="..">


<img data-src="bulls.jpg" loading="lazy" alt=".." class="lazyload">
<img data-src="cats.jpg" loading="lazy" alt=".." class="lazyload">
<img data-src="dogs.jpg" loading="lazy" alt=".." class="lazyload">

<script>
(async () => {
    if ('loading' in HTMLImageElement.prototype) {
        const images = document.querySelectorAll("img.lazyload");
        images.forEach(img => {
            img.src = img.dataset.src;
        });
    } else {
        // Динамический импорт библиотеки LazySizes
        const lazySizesLib = await import('/lazysizes.min.js');
        // Инициализация LazySizes (чтение data-src & class=lazyload)
        lazySizes.init(); // lazySizes применяется при обработке изображений, находящихся на странице.
    }
})();
</script>

Демонстрация отложенной загрузки работы на сайте:

Как настроить время отложенной загрузки

В режиме auto скорость загрузки зависит от близости элемента к области просмотра и скорости интернета.

В режиме lazy браузер сам решает, когда начать загрузку: учитывает расстояние до области просмотра, тип соединения, устройство и внутренние эвристики. Эти пороги не стоит считать стабильной настройкой сайта — они могут меняться между версиями браузера.

Ниже — исторический пример настройки порогов в Chrome Canary через командную строку. Для обычного сайта так не настраивают lazy loading у пользователей, потому что это способ тестирования поведения браузера, а не рабочая настройка продакшена.

canary --user-data-dir="$(mktemp -d)" --enable-features=LazyImageLoading --blink-settings=lazyImageLoadingDistanceThresholdPxUnknown=5000,lazyImageLoadingDistanceThresholdPxOffline=8000,lazyImageLoadingDistanceThresholdPxSlow2G=8000,lazyImageLoadingDistanceThresholdPx2G=6000,lazyImageLoadingDistanceThresholdPx3G=4000,lazyImageLoadingDistanceThresholdPx4G=3000 'https://indexoid.com/speed/'

Если нужно управлять расстоянием до загрузки на реальном сайте, используйте Intersection Observer API и параметр rootMargin. Например, можно начинать загрузку за 300–600 пикселей до появления изображения в области просмотра, чтобы пользователь не видел пустую заглушку.

canary --user-data-dir="$(mktemp -d)" --enable-features=LazyImageLoading --blink-settings=lazyImageLoadingDistanceThresholdPxUnknown=400,lazyImageLoadingDistanceThresholdPxOffline=400,lazyImageLoadingDistanceThresholdPxSlow2G=1,lazyImageLoadingDistanceThresholdPx2G=1,lazyImageLoadingDistanceThresholdPx3G=400,lazyImageLoadingDistanceThresholdPx4G=400 'https://indexoid.com/speed/'

На сайте indexoid.com/speed настроена команда со значением один пиксель, задержка в загрузке не ощущается.

Для сайтов на CMS настраивать отложенную загрузку проще всего с помощью плагинов, которые все сделают автоматически.

FAQ по разделу

Какой способ выбрать?

Начните с loading="lazy" для изображений и iframe ниже первого экрана. JavaScript добавляйте только там, где нативного атрибута не хватает.

Нужно ли указывать width и height?

Да, размеры помогают браузеру заранее выделить место под картинку и уменьшают риск сдвигов макета CLS.

Что делать с CSS-фонами?

Для них атрибут loading не работает. Используйте Intersection Observer и подставляйте класс или URL фона, когда блок приближается к области просмотра.

Плагины и модули для настройки lazy loading

Собрали плагины и решения для популярных движков. Перед установкой проверяйте дату обновления, совместимость с вашей версией CMS, отзывы и список функций: поддержка WebP/AVIF, iframe, видео, CSS-фонов, исключений для первого экрана и адаптивных изображений.

Настроить ленивую загрузку: скрипт bLazy.js на JavaScript

Скрипт для отложенной загрузки, работает на чистом JavaScript и не зависит от сторонних библиотек.

Возможности:

1. Запускает ленивую загрузку фоновых и добавочных изображений и картинок в прокрутке.
2. Работает со всеми элементами с атрибутом src, видео HTML5, фреймы.
3. Поддерживает srcset и элемент picture.
4. Загружает фотографии асинхронно с учетом разрешения и размера экрана.
5. Поддерживается устаревшими браузерами.
6. Весит меньше 1,4 КБ.
7. Использует CDN для размещения.

Реализация стандартная. Разметка:

<img class="b-lazy" src="placeholder.gif" data-src="image.jpg" alt="test image">

Страница скрипта на GitHub

Размыть изображение: Craig Buckler

Перед загрузкой в высоком качестве можно настроить разное отображение для картинки — сжатие, размытие, шаблонная заглушка. Плагин Craig Buckler позволяет настроить размытое отображение перед загрузкой.

Возможности:

1. Поддерживает любой тип изображений, включая CSS фоновые изображения, атрибуты srcset и sizes.
2. Быстро загружается и работает, занимает 1350 байт JavaScript, 440 байт CSS.
3. Не зависит от фреймворков и библиотек.
4. Поддерживает экраны с матрицами Retina.
5. Применяет прогрессивное улучшение для устаревших браузеров.
6. Делает до трех попыток, если изображение по какой-то причине не загрузилось.

Страница плагина на GitHub

Проще установить специальные плагины для CMS, которые запустят отложенную загрузку. Некоторые вообще не требуют настройки.

WordPress

В WordPress нативная ленивая загрузка изображений появилась в ядре после версии 5.4 и стала штатной частью платформы. Сейчас WordPress автоматически добавляет атрибуты загрузки и умеет не применять lazy loading к изображениям, которые с высокой вероятностью находятся в первом экране. Веб-мастер может менять поведение через тему, фильтры и плагины оптимизации.

Поэтому плагины нужны не для базового включения lazy loading в WordPress, а для расширенных задач: исключить конкретные изображения, настроить видео и iframe, добавить заглушки, оптимизировать WebP/AVIF, управлять preload и CDN.

Популярные плагины WordPress для lazy loading

• a3 Lazy Load — подходит для изображений, iframe и видео, если нужен отдельный контроль ленивой загрузки.
• LazyLoad Plugin by WP Rocket — легкий вариант для картинок, iframe и видео без установки полного WP Rocket.
• LiteSpeed Cache — актуален для сайтов на LiteSpeed-сервере: совмещает кеширование, оптимизацию изображений и lazy loading.
• Smush — помогает с оптимизацией изображений и может включать ленивую загрузку в составе общего набора функций.
• Optimole — облачная оптимизация изображений, адаптивная доставка и lazy loading.

Еще варианты, которые можно проверить под конкретный проект:

• EWWW Image Optimizer
• ShortPixel Image Optimizer
• Autoptimize
• Perfmatters

Другие плагины lazy load для WP

OpenCart

Несколько расширений ленивой загрузки для OpenCard:

• Lazy Load Images — бесплатный плагин, настраивает ленивую загрузку по прокрутке, работает на jQuery.
  
• Lazyload Images — плагин для асинхронной загрузки с возможностью настроить визуальные эффекты для появляющихся изображений. Поддерживает Opencart версии 1.5.X + 2.X + 3.0.X + 3.1.X. Цена 20 долларов.

Другие расширения lazy load для OpenCart

Joomla!

• JSLazyLoading — плагин для отложенной загрузки, работает с изображениями и динамическими модулями, в том числе с Retina изображениями, AJAX навигацией, выводит уменьшенные изображения для мобильных устройств. Единственный плагин для Joomla!, который работает с отложенной загрузкой фоновых изображений. Работает на чистом JavaScript, не зависит от внешних библиотек, к примеру от jQuery.

Drupal

Для Drupal есть несколько модулей асинхронной загрузки.

• Lazy-load — модуль Drupal для отложенной загрузки встроенных изображений и фреймов, работает на библиотеке lazysizes.
  
• Blazy — плагин обеспечивает интеграцию с bLazy и Intersection Observer API для асинхронной загрузки изображений и фреймов.
  
• Bamboo Twig — модуль на Drupal 8 для повышения производительности, в том числе в нем можно включить отложенную загрузку.
  
• Image Lazyloader — модуль для ленивой загрузки картинок, подходит для версий Drupal 7.12 и выше.
  
• Lazy Pane — плагин загружает картинки по требованию со стороны клиента из кэша, через AJAX.

Другие модули в списке для Drupal

FAQ по разделу

Нужен ли плагин WordPress для lazy loading?

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

Можно ли ставить сразу несколько плагинов?

Два плагина могут одновременно менять одни и те же изображения, из-за чего появятся дубли атрибутов, ошибки загрузки и лишний JavaScript.

Как выбрать модуль для 1С-Битрикс или OpenCart?

Проверьте совместимость с вашей версией CMS, дату обновления, отзывы, поддержку адаптивных изображений и возможность исключать первый экран.

Как проверить ленивую загрузку и индексацию изображений

После настройки lazy loading нужно проверить две вещи: стало ли быстрее пользователю и видят ли поисковые системы контент, который загружается асинхронно. Для локальной проверки используют Chrome DevTools, Lighthouse, Network, Performance, Rendering, а для автоматической — Puppeteer или Playwright.

Команды для проверки и запуска скрипта:

git checkout <a href="https://github.com/GoogleChromeLabs/puppeteer-examples" class="redactor-autoparser-object">https://github.com/GoogleChromeLabs/puppeteer-examples</a>
cd puppeteer-examples
npm i
node lazyimages_without_scroll_events.js -h

После проверки проверьте скриншоты и HTML после рендеринга: на них должен быть виден весь контент, который должен индексировать поисковый робот. Отдельно проверьте Яндекс Вебмастер: переобход важных страниц, ошибки загрузки ресурсов, индексирование изображений и поведение мобильной версии.

Небольшой чек-лист проверки lazy loading:

• откройте страницу в режиме инкогнито,
• включите замедление сети в DevTools,
• проверьте вкладку Network до и после скролла,
• убедитесь, что первый экран не отложен, у изображений есть alt, width и height, а в Lighthouse не появились предупреждения по LCP и CLS.

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

FAQ по разделу

Как понять, что lazy loading работает?

В DevTools на вкладке Network изображения ниже первого экрана не должны загружаться сразу. Они появляются в списке запросов при прокрутке или незадолго до нее.

Как проверить влияние на SEO?

Проверьте HTML после рендеринга, скриншот страницы, логи обхода и данные Яндекс Вебмастера. Важные изображения должны быть доступны роботу.

Почему после lazy loading вырос CLS?

Скорее всего, для изображений не заданы размеры. Добавьте width, height или CSS-соотношение сторон, чтобы браузер заранее резервировал место.

Еще интересное:
Как оптимизировать показатель LCP — время отрисовки самого крупного элемента страницы
Как оптимизировать CLS — сдвиги макета страницы
Как оптимизировать FID — еще один показатель Core Web Vitals

Что вы думаете о методе отложенной загрузки? Будем рады, если вы поделитесь своими мыслями и опытом!