Что такое lazy loading

Lazy loading

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

Обзор

Вместе с ростом web-приложений драматически вырос объем и размеры ресурсов, отправляемых клиентскому приложению. С 2011 по 2019 медианный рост размеров ресурсов вырос с

400KB для настольных компьютеров и с

350KB для мобильных. А размер изображений вырос с

900KB для настольных компьютеров и со

850KB для мобильных.

Стратегии

Ленивая загрузка (Lazy loading) может применяться к разным ресурсам и разными подходами.

Общий подход

Разделение кода (code splitting)
JavaScript, CSS и HTML могут быть разделены на небольшие части, называемые чанками (chunks). При первоначальной загрузке приложения вы можете отправлять не цельное приложение, а только необходимые части, например, только каркас разметки. Данные для заполнения этого каркаса могут быть подгружены позже, например, с помощью AJAX. Есть два вида разделения кода:

JavaScript

Указание типа «module»
Любой тег скрипта с type=»module» рассматривается как JavaScript module, а его загрузка откладывается по умолчанию.

По умолчанию CSS считается ресурсом, блокирующим рендеринг (render blocking). Это означает, что браузер не будет отображать контент до тех пор, пока не будет построена объектная модель CSS (CSSOM). Поэтому CSS-файл должен быть небольшим, чтобы он был доставлен так быстро, насколько это возможно. Рекомендуется использовать медиавыражения, для того чтобы вместо одного монолитного CSS-файла грузить специализированные.

Также в целях ускорения CSS можно применять оптимизации (CSS optimizations).

Шрифты

По умолчанию, загрузка шрифтов откладывается на тот момент, пока дерево рендера (render tree) не сформировано полностью. Это приводит к тому, что текст страницы может появиться не сразу.

Изображения

Очень часто веб-страницы содержат множество изображений, загрузка которых заметно нагружает канал передачи данных и увеличивает длительность загрузки. Подавляющая часть этих изображений находятся за видимой областью экрана и не являются необходимым (non-critical), а для взаимодействия с пользователем требуют действия (например, прокрутки до них).

Атрибут Loading
Атрибут loading элемента (или loading (en-US) атрибут для (en-US)) могут быть использованы, чтобы указать браузеру на необходимость отложить загрузку изображений / iframe до тех пор, пока пользователь не доскроллит до них.

Полифил
Для использованиях в браузерах, которые не поддерживают данную технологию, рекомендуется использовать полифил: loading-attribute-polyfill

Intersection Observer API
Intersection Observers позволяют вам узнать, как наблюдаемый вами элемент входит или выходит из зоны видимости браузера (viewport).

Источник

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

В статье:

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

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

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

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

Что такое lazy loading изображений

Lazy loading или «ленивая загрузка» — это способ отложенной загрузки изображений, когда картинки подгружаются не сразу вместе с запрашиваемой страницей, а по мере надобности, асинхронно. Функция работает на технологии AJAX с помощью JavaScript.

Способ работает для картинок img и фреймов iframe. У этих элементов есть атрибут src, указывающий на источник.

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

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

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

Отображение загрузки картинок на странице при скроллинге Код страницы indexoid.com/speed

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

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

Раньше у Google была проблема с индексированием контента с атрибутом loading, сейчас бот воспринимает такие элементы. Но нужно убедиться, что все материалы страницы доступны для Googlebot.

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

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

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

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

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

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

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

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

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

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

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

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

Фрагмент проверки скорости

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

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

Атрибут loading

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

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

Если значение для атрибута loading не указали, браузер воспримет его как auto.

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

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

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

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

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

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

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

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

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

Какие браузеры поддерживают отложенную загрузку

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

Google Chrome обрабатывает loading начиная с 76 версии. Другие браузеры на базе Chromium 76 тоже могут работать с этим атрибутом. Для настройки отложенной загрузки в Firefox есть открытый баг.

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

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

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

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

Для браузеров, которые не поддерживают встроенный режим отложенной загрузки, можно реализовать его с помощью полифила или сторонней библиотеки. Можно настроить, чтобы библиотеку загружал только браузер, который не поддерживает 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 скрыты в CSS. После загрузки картинок они будут отображаться с применением плавных переходов:

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

JavaScript библиотеки

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

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

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

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

Загрузка картинок при быстром скролле

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

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

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

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

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

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

Загрузка изображений при скроллинге

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

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

Собрали несколько плагинов и решений для популярных движков.

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

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

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

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

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

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

WordPress

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

Запуск WordPress 5.4 планируется в конце марта 2020 года, а пока можно справляться с помощью плагинов. Мы собрали самые лучшие плагины отложенной загрузки для WordPress.

Лучший плагин для lazy load WordPress: исследование

Хостинг Kinsta провел исследование популярных плагинов для lazy loading, чтобы выяснить, какие работают эффективнее.

Исследователи создали легкую страницу с темой TwentySixteen, она весила меньше 155 КБ и загружалась меньше, чем за полсекунды. Для теста ускорения загрузки страницу наполнили большими фото и видео с YouTube, вес увеличился до 1,7 МБ, а скорость уменьшилась до 1,28 секунд.

Тест скорости без плагинов для ленивой загрузки

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

3 лучших плагина WordPress для отложенной загрузки

Плагин a3 Lazy Load смог довести размер изображений до 150 КБ. У BJ Lazy Load и Lazy Load XT получились схожие результаты — размер страницы 2,0 МБ. Сравнение результатов внедрения плагинов показало, что a3 Lazy Load справился лучше.

Сравнение плагинов для lazy load

Исследование проводили в 2016 году, материал обновили в 2019, но в подборке остались плагины, которые не обновлялись по три месяца. Не смотря на это, они могут корректно работать, но вы можете подобрать другое решение, которое будет работать на вашем сайте.

Еще популярные плагины:

1-C Битрикс

Для этого движка удалось найти два плагина:

OpenCart

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

Joomla!

Для Joomla! нашлась пара плагинов:

Drupal

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

Как проверить ленивую загрузку

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

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

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

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

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

Источник

5 приёмов ленивой загрузки изображений

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

Что такое Lazy Loading (ленивая загрузка)?

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

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

Почему вы должны позаботиться о ленивой загрузке изображений?

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

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

Вряд ли существует идеальный вариант.

Если вы живете и дышите JavaScript, реализация собственного lazy load решения не должна быть проблемой. Ничто не даёт вам больше контроля, чем кодирование чего-либо самостоятельно. Кроме того, вы можете просматривать веб-страницы для поиска подходящих подходов и поэкспериментировать с ними.

№1 Нативный lazy load

Нативная ленивая загрузка для img и iframe очень крутая. Ничто не может быть более простым, чем такая разметка:

Атрибут loading даёт возможность задерживать скрытые за пределами окна изображения и фреймы, пока пользователь не прокрутит страницу до них. loading может принимать любое из этих трёх значений:

№2 Ленивая загрузка с использованием API Intersection Observer

Intersection Observer API — это современный интерфейс, который вы можете использовать для отложенной загрузки изображений и другого контента. Вот как MDN представляет этот API:

Intersection Observer API позволяет веб-приложениям асинхронно следить за изменением пересечения элемента с его родителем или областью видимости документа viewport.

Тут всё понятно: асинхронно отслеживается пересечение одного элемента с другим. Допустим, вы хотите лениво загрузить галерею изображений. Разметка для каждого изображения будет выглядеть так:

В JavaScript вы добавляете объект с конфигурацией и регистрируете его в экземпляре intersectionObserver :

Затем, надо перебрать все изображения и добавить их в этот экземпляр iterationObserver:

Преимущества этого решения: его легко внедрить, оно эффективно и перекладывает выполнение тяжелых вычислений на API intersectionObserver.

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

Вы можете узнать больше об API Intersection Observer и подробностях реализации в этой статье.

№3 Lozad.js

Быстрая и простая альтернатива реализации для ленивой загрузки изображений — позволить выполнить большую часть работы готовой JS-библиотеке.

Lozad.js — это высокопроизводительный, легкий и настраиваемый ленивый загрузчик на чистом JavaScript и без каких-либо зависимостей. Его можно использовать для отложенной загрузки изображений, видео, iframe и т.д. И он использует API Intersection Observer.

Lozad.js можно подключить с помощью npm/yarn:

и импортировать его:

Кроме того, вы можете просто загрузить библиотеку с помощью CDN и добавить ее в конец HTML-страницы в теге

Далее, для базовой реализации, добавьте css-класс lozad html-элементам в разметке:

Наконец, в JS создайте экземпляр Lozad:

Если нет желания углубляться в работу API-интерфейса Intersection Observer или просто ищете быструю реализацию, применимую к различным типам контента, Lozad — отличный выбор.

Только следует помнить о поддержке маргинальных браузеров, для API Intersection Observer всё еще требуется polyfill.

№4 Отложенная загрузка с эффектом размытия

Если читаете Medium.com, то наверняка заметили, как сайт загружает основное изображение внутри поста. Первое, что увидите, это размытая копия изображения с низким разрешением, тогда как его версия с высоким разрешением лениво загружается:

Размытое изображение-заглушка на сайте Medium.com

Лениво загруженное изображение высокого разрешения на веб-сайте Medium.com

Лениво загружать изображения с этим интересным эффектом размытия можно несколькими способами. Вот один из них:

№5 Yall.js

Yall.js — это многофункциональный скрипт для ленивой загрузки изображений, видео и iframe. Он использует Intersection Observer API и, при необходимости, использует интеллектуальные методы обработки событий.

Для использования Yall его нужно инициализировать так:

На что следует обратить внимание:

Источник

Браузерная ленивая загрузка изображений (атрибут loading)

Поддержка встроенной ленивой загрузки изображений и iframe пришла в веб!
Начиная с Chrome 76 версии, вы можете использовать новый атрибут loading для ленивой загрузки ресурсов без необходимости писать для этого дополнительный код или использовать стороннюю JavaScript-библиотеку. Давайте рассмотрим детали.

Это видео демонстрирует пример этой функции:

Почему встроенная ленивая загрузка?

Согласно HTTPArchive, изображения являются наиболее востребованным типом ресурсов на большинстве сайтов и обычно отнимают больше пропускной способности канала, чем любые другие. На 90-м процентиле, сайты отправляют около 4.7 МБ изображений на десктопы и мобильные устройства. Достаточно много фотографий с кошками.

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

В данный момент существует два способа отложить загрузку изображений и фреймов, расположенных за пределами экрана:

Атрибут loading

Сегодня Chrome уже загружает изображения с разным приоритетом, в зависимости от того, где они расположены относительно области просмотра устройства. Изображения ниже области просмотра загружаются с меньшим приоритетом, но всё ещё загружаются, как можно быстрее.

Поддерживаемые значения атрибута loading :

Порог расстояния загрузки

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

Расстояние, при котором начинается загрузка, не фиксировано и изменяется в зависимости от нескольких факторов:

В Chrome 77 вы можете экспериментировать с этими различными пороговыми значениями путем замедления скорости соединения в DevTools. Во время этого вам потребуется переопределить эффективный тип соединения в браузере с помощью флага chrome://flags/#force-effective-connection-type.

Загрузка изображений

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

Есть ли планы расширить эту функцию?

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

Можно ли изменить расстояние до изображения или фрейма, при котором запускается отложенная загрузка?

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

Могут ли изображения, заданные через CSS-свойство background, получить атрибут loading?

Нет, в данный момент он может использоваться только тегами

Как работает атрибут loading с изображениями, которые находятся в области видимости, но не видны (например, карусель)?

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

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

Атрибут loading не должен влиять на код, который в отложенном режиме загружает данные, но важно учитывать некоторые важные моменты:

Другие браузеры поддерживают встроенную отложенную загрузку?

Атрибут loading можно рассматривать, как прогрессивное улучшение. Браузеры, которые поддерживают его, могут загружать изображения и фреймы в отложенном режиме. Те, что не поддерживают — пока что загружают изображения как обычно. С точки зрения кроссбраузерной поддержки, атрибут loading поддерживается в Chrome 76 и любых браузерах, основанных на базе Chromium 76. Также существует открытый баг про реализацию данной функции в Firefox.

Похожее API было предложено и использовалось в IE и Edge, но оно было сфокусировано на понижении приоритетов загрузки вместо полного её откладывания.

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

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

Демонстрация работы. Испробуйте это в таким браузерах, как Firefox или Safari, чтобы увидеть фолбек в действии.

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

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

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

Как изображения обрабатываются, если веб-страницу распечатать?

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

Заключение

Использование встроенной поддержки ленивой загрузки изображений и фреймов может существенно облегчить повышение производительности веб-страниц.

Если замечаете любое необычное поведение при включении этой функции в Chrome, сообщите об ошибке.

Источник