Как отложить загрузку скрытых изображений
Браузерная ленивая загрузка изображений (атрибут 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, сообщите об ошибке.
Детальное описание техники ленивой загрузки изображений (Lazy Load)
Ленивая (или отложенная) загрузка картинок – это популярный метод асинхронного обращения к адресу изображения, по мере необходимости его загрузки, а не сразу после того, как HTML страницы был проанализирован браузером. Вы, скорее всего, уже видели эту реализацию в действии, поскольку этот метод используется на многих популярных сайтах.
Сегодня невозможно представить себе Интернет без картинок и видео. Мы все привыкли к этому. Плюс, если на странице сайта нет каких-то графических элементов, нам тяжелее будет уловить смысл послания, которое заложено в этой странице. А один только текст нагоняет тоску.
Обратной стороной медали является то, что графические элементы и медиа-данные (картинки, видео, аудио) – это очень «тяжелые» файлы, которые замедляют скорость загрузки страницы.
Выходит, что нам всем нужны картинки, но мы должны заботиться и о скорости загрузки сайта, на котором эти картинки размещаются. В сегодняшнем практическом руководстве мы рассмотрим все основные моменты Lazy Load загрузки изображений (техника «ленивой» или отложенной загрузки). Этот метод позволяет сократить время загрузки страницы сайта, откладывая загрузку изображений до того момента, когда они будут нужны.
Сегодня мы рассмотрим следующие пункты:
Вот что мы будем сегодня реализовывать:
Что такое ленивая загрузка (Lazy Load) изображений и как она работает?
Вместо того, чтобы загружать все изображения одновременно, Lazy Load загрузка загружает только те изображения, которые видны на экране пользователя. А все другие изображения заменяются заполнителем (например, цветовой заливкой или размытой копией изображения низкого качества).
Когда пользователь прокручивает страницу вниз, сайт загружает изображения, которые в данный момент видны в области просмотра браузера.
Слово «ленивый» у нас ассоциируется с человеком, который как можно дольше избегает работы, или у которого явное желание вообще ничего не делать.
В данном же контексте речь идет о том, что ленивая загрузка откладывает загрузку ресурсов на странице до тех пор, пока они не нужны. Вместо того, чтобы загружать все картинки на странице сразу, мы разрешаем им загружаться позже, когда эти ресурсы действительно будут нужны. Поэтому, данная техника называется ленивой или отложенной загрузкой (Lazy Load).
Техника отложенной загрузки может применяться не только к картинкам, но и практически к любым ресурсам на странице. Это могут быть JavaScript файлы, видео, iframe и даже текст.
Эффективность техники ленивой загрузки
Если посетитель вашего сайта не прокручивает страницу до большой картинки, например, в футере, соответственно он ее не увидит, а значит и загружать ее не нужно. Здесь можно добиться двух позитивных моментов: увеличения скорости загрузки сайта и снижения нагрузки на сервер.
Если мы не загружаем картинки на странице, соответственно эта страница будет загружаться быстрее. Поскольку браузер не будет загружать эти картинки с сервера, сайт будет рендериться (визуализироваться) быстрее. Также это гарантирует, что на сервер будет меньшая нагрузка.
Теория реализации отложенной загрузки
Типичная HTML-разметка для изображения выглядит так:
Теперь, когда атрибут src пустой, браузер не будет запускать загрузку изображения.
После этого нам нужно сообщить браузеру, когда нужно запускать загрузку. В противном случае этого никогда не случится. Мы проверяем вхождение изображения (т.е., его заполнителя) в область просмотра (видимую часть экрана), после чего запускаем загрузку.
Есть два способа проверить, когда изображение попадает в видимую часть экрана. Давайте рассмотрим эти способы на практике, с примерами рабочего кода.
Практические примеры достижения отложенной загрузки
Рассмотрим практические примеры достижения отложенной загрузки для изображений.
Способ №1: Отложенная загрузка изображения с помощью событий JavaScript
Когда мы пролистываем страницу, событие прокрутки срабатывает несколько раз и быстро. Таким образом, нужно добавить небольшой тайм-аут в скрипт, который будет ограничивать выполнение отложенной загрузки, чтобы она не блокировала другие задачи, которые выполняются в том же потоке.
Вот рабочий пример этого подхода:
Обратите внимание, что первое изображение в данном примере загружается без отложенной загрузки. Поскольку это изображение находится в самой верхней части страницы, его следует сделать видимым как можно скорее. Поэтому, не стоит загружать его с помощью JavaScript.
Способ №2: Отложенная загрузка изображения с помощью API Intersection Observer
Intersection Observer API появился относительно недавно. Этот программный интерфейс приложения упрощает процесс обнаружения момента, когда элемент появляется в области просмотра, и упрощает выполнение действия, когда это событие происходит. В предыдущем методе нам приходилось связывать события, помнить о производительности и реализовывать способ вычисления, находился ли элемент в области просмотра или нет. API Intersection Observer не имеет недостатков предыдущего способа, а также снабжен отличной производительностью.
Ниже приведен рабочий пример использования API для отложенной загрузки изображений.
Важно! Учтите, что поддержка API Intersection Observer доступна не во всех браузерах.
Зависимость отложенной загрузки от JavaScript
Реализация отложенной загрузки изображений на сайте зависит от того, включен ли JavaScript и доступен ли он в браузере пользователя. Хотя у большинства пользователей JavaScript включен, важно учесть случаи, когда это не так. Вы можете показать сообщение, объясняющее, почему изображения не загружаются, и предложить им либо использовать современный браузер, либо включить JavaScript.
Популярные JavaScript библиотеки для ленивой загрузки
Поскольку среда разработки и детали реализации могут различаться в разных браузерах и на разных устройствах, вы можете использовать проверенные JavaScript библиотеки для отложенной загрузки, а не создавать что-либо с нуля для этого.
(библиотеки представлены в алфавитном порядке)
Как протестировать отложенную загрузку?
После того, как вы внедрили отложенную загрузку, вы, вероятно, захотите убедиться, что она работает так, как задумано. Самый простой способ – открыть инструменты разработчика в вашем браузере (нажмите F5 или Ctrl+Shift+I ).
Оттуда перейдите в Сеть > Изображения (Network > Images). Обновите страницу и вы должны увидеть только загруженные изображения в этом списке.
Затем, когда вы начнете прокручивать страницу вниз, сработают другие запросы и будут загружены остальные картинки.
Подведение итогов
Сегодня мы рассмотрели много вопросов, которые касаются ленивой загрузки картинок. Ленивая (или отложенная) загрузка, если она реализована правильно, может значительно повысить производительность вашего сайта, увеличить скорость загрузки страницы, а также снизить нагрузку на сервер.
Поскольку изображения являются основным фактором, влияющим на время загрузки веб-страниц, ленивая загрузка изображений – это подход, который вы можете эффективно использовать на своем сайте.
Надеемся, что сегодняшняя информация была для вас практически полезной и нужной. Спасибо, что читаете нас!
Lazy Load 2.0 – ленивая (отложенная) загрузка изображений на JavaScript
Если вам доводилось сталкиваться с PageSpeed Insights – инструментом по анализу скорости загрузки сайта от компании Google, то вы могли наблюдать в нем сообщение вида «Отложите загрузку скрытых изображений». Что это и зачем Google рекомендует внедрить эту технологию на ваш сайт?
Все дело в том, что когда человек заходит на ваш сайт, первое, что он видит, это первый (ключевой) экран сайта – ту область от начала (самого верха) вашего сайта, что умещается на его мониторе. Что идет ниже – он пока не видит, и может не увидеть в принципе (по своему желанию или другим причинам).
К чему я все это рассказываю? Если на вашем сайте большое количество изображений, все они будут грузиться, независимо от того, видит их пользователь или нет, что, в свою очередь, добавляет лишние секунды к времени полной загрузки страниц вашего сайта.
Чтобы не заставлять человека ждать и максимально быстро предоставить ему информацию, в которой он нуждается, и существует чудесный плагин под названием «Lazy Load». Он позволяет подгружать изображения по мере прокрутки страницы, когда они начинают попадать в область видимости.
Первые версии плагина, автором которого, кстати говоря, является Мика Туупола, были реализованы с использованием jQuery. В этой же статье я покажу вам свежую версию плагина (Remastered, как называет ее сам автор) на чистом JavaScript.
Инструкция по установке Lazy Load 2.0 на сайт
Итак, все как обычно.
1. Скачайте архив в конце статьи, разархивируйте и содержимое загрузите на ваш сайт удобным для вас способом.
2. Далее в секцию HEAD на всех страницах вашего сайта подключите ранее загруженный скрипт:
Не забывайте корректно прописывать адрес до скрипта на вашем сайте.
Отложенная загрузка изображений
Плагин jquery.lazy для отложенной (ленивой) загрузки изображений
Консоль
Загружено 0 / 10 изображений
jQuery и Zepto плагин Lazy — это быстрый, многофункциональный и легкий плагин для отложенной загрузки контента. Другими словами, загрузки только того материала, который виден на экране.
В этой заметке описана отложенная загрузка изображений. Фреймы, скрипты, медиа и т.д. рассмотрены в теме: «Отложенная загрузка контента».
Для отслеживания процесса загрузки нажмите на меню справа (с монитора)
Установка:
jquery.lazy доступен для подключения через cdnjs и jsDelivr CDN:
Использование:
У картинки вместо атрибута src используем атрибут data-src и добавляем нужный класс:
Инициализируем скрипт после загрузки страницы к нужному классу:
Пример:
Атрибут src у изображения является не обязательным, но если его нет и у картинки нет размеров, то ее высота будет равна нулю. Соответственно, если 100 таких фотографий будут следовать друг за другом, то все они одновременно окажутся в видимой области и начнут загружаться.
Чтобы этого избежать, нужно задать размеры фотографий или использовать миниатюру, как в примере.
Функции обратного вызова:
Плагин Lazy имеет четыре функции обратного вызова, которые срабатывают в разных точках загрузки элемента.
Lazy loading или «ленивая загрузка» для изображений
Скорость загрузки – ключевой аспект оптимизации сайта, в особенности под Google. Эта метрика влияет на:
Основная причина медленной загрузки страниц – большой размер изображений и видео. Google, посредством PageSpeed Insights, рекомендует несколько способов оптимизации медиафайлов: сжатие, кэширование и lazy loading или «ленивую загрузку». О последнем поговорим в нашей сегодняшней статье:
Что такое «ленивая загрузка»
Lazy loading – это метод оптимизации скорости загрузки медиафайлов, некритичных для отображения страницы или взаимодействия с пользователями. При «отложенной загрузке» изображения не будут загружаться, пока не понадобятся посетителю. В зависимости от настроек, они могут отображаться при скролле до определённой части страницы или нажатии пользователем на элемент.
«Отложенную загрузку» рекомендуется использовать для медиафайлов, которые находятся вне экрана.
Внеэкранные или закадровые элементы – это медиаконтент, который находится ниже той части страницы, которую просматривает пользователь, или, как определяет Web Tools, ниже сгиба.
Поскольку пользователи не видят закадровые изображения при начальной загрузке страницы, нет смысла подгружать их сразу. Кроме того, в таком случае увеличивается время загрузки для взаимодействия (Time to Interactive). Эта метрика сейчас имеет наибольший вес при оценке скорости загрузки на мобильных устройствах.
Для кого нужна «ленивая загрузка»
Рекомендуем использовать ленивую загрузку сайтам:
Почему следует внедрить lazy loading
Есть две весомые причины внедрить отложенную загрузку:
Виды отображения при «отложенной загрузке»
Есть 3 вида отображения контента при реализации lazy loading:
Скроллинг предусматривает, что медиаконтент подгружается только тогда, когда попадает в видимую зону или пользователь доскроллит до определённой части страницы, например, середины, предыдущего изображения и т. д. Такой метод используют на страницах СМИ с бесконечной лентой прокрутки, на листингах интернет-магазинов, страницах каталогов товаров и услуг.
Например, вот так выглядит страница https://unsplash.com/ при скролле листинга с фотографиями:
Однако меньше, чем за секунду, на место квадратов подгружаются фотографии в высоком качестве:
Ещё один вариант реализации: 
Пользователь видит картинку-заглушку, на место которой подставляются изображения.
При втором варианте реализации (клик) контент будет загружаться, когда пользователь перейдёт по ссылке, нажав «Подробнее» или на миниатюру. Так выглядит реализация на карточке товара интернет-центра бронирования:
До нажатия на миниатюру 
После 
Загрузка в фоновом режиме будет полезна только для тех медиафайлов, которые действительно необходимы пользователям для последующей работы. Например, образцы заполнения документов, чертежи. Обязательное условие такой загрузки – пользователь нажал на документ и оставил его открытым. Чтобы определить, нужна ли пользователю такая загрузка, нужно провести A/B тестирование на нескольких страницах и только после этого внедрять на всём сайте.
Как реализовать
Рекомендации Google по реализации lazy loading для картинок
Рекомендации Google для картинок зависят от способа реализации медиаконтента на сайте: встроенные или в CSS. Для встроенных в тег в Справке поисковой системы рекомендуется использовать:
Изображения на страницах также могут быть реализованы через CSS. В отличие от тегов, которые загружаются независимо от их видимости, загрузка изображений в CSS выполняется с большим количеством предположений. Прежде чем запрашивать внешние ресурсы, браузер проверяет, как CSS применяется к документу.
Это может быть использовано для отсрочки загрузки изображений в CSS. С помощью JavaScript можно определить, когда элемент находится в области просмотра, и загрузить фоновое изображение.
Готовые решения
В сети есть 5 готовых решений реализации «отложенной загрузки» для изображений:
Lazy loading от David Walsh
Элементы img, содержащие атрибуты data-src, скрыты в CSS. После того как картинки будут загружены, они плавно отображаются с применением переходов:
Затем JavaScript передаёт всем тегам img атрибут src, которые в итоге получают значение атрибута data-src. После загрузки всех изображений, data-src убирается из img:
Загрузка с прогрессивным улучшением от Robin Osborne
Разработчик предлагает «ленивую загрузку» на основе прогрессивного улучшения. В его решении lazy loading на JS будет считаться улучшением для HTML и CSS.
При этом ленивая загрузка работает посредством скроллинга, а при реализации не нужно использовать фреймворки или плагины. При прогрессивном улучшении пользователь увидит изображение, даже если скрипт отключён или появилась ошибка, блокирующая его работу.
Плагин bLazy.js на простом JS
Стандартная реализация отложенной загрузки этим методом выглядит так:
Среди преимуществ скрипта: он мало весит, работает с несколькими изображениями одновременно, чтобы сэкономить трафик и уменьшить количество запросов на сервер. Также он поддерживает браузеры устаревших версий, в том числе IE 7 и 8 версии.
Плагин Lazy Load XT jQuery
Подойдёт для написания своего скрипта для «ленивой загрузки». Если нужно реализовать lazy loading только для картинок, рекомендуем воспользоваться упрощённой версией.
Для реализации «отложенной загрузки» с помощью этого плагина нужно добавить jQuery-библиотеку перед закрывающимся тегом и указать jquery.lazyloadxt.js.
Есть альтернативный вариант, который позволяет не использовать весь плагин. Это облегчённый скрипт jqlight.lazyloadxt.min.js:
Плагин активируется автоматически или в ручном режиме. В последнем случае нужно ввести:
Размытое изображение от Craig Buckler
Есть несколько вариантов реализации «ленивой загрузки» с эффектом размытости. Наиболее популярный и простой в реализации – Craig Buckler.
У техники высокая производительность: затрачивает немного больше 1 байта JS-кода и 463 байта CSS. Для работы не нужны дополнительные фреймворки или библиотеки. Есть прогрессивное улучшение для поддержки устаревших браузеров или подгрузки картинок при сломанном JavaScript.
Посмотреть код можно в репозитории на GitHub.
3 плагина для WordPress
BJ Lazy Load 
Количество установок: более 90 тыс.
Последнее обновление: год назад.
С помощью этого плагина можно отложить загрузку картинок в постах, изображений из миниатюр, фотографий пользователей. Контент будет подгружаться по мере приближения к окну браузера при прокрутке страницы.
Lazy Load by WP Rocket 
Количество установок: более 20 тыс.
Последнее обновление: 17 часов назад.
Плагин работает с миниатюрами, всеми изображениями. Подгружает контент только тогда, когда он становится видимым пользователю. Вес скрипта – 10 КБ. Не использует JavaScript библиотеку jQuery.
Loading Page with Loading Screen 
Количество установок: более 10 тыс.
Последнее обновление: 2 дня назад.
Бесплатный плагин, который выполняет предварительную загрузку изображения на сайт и отображает экран загрузки с процентом завершения. Как только всё загружено, экран пропадает.
Какие проблемы могут возникнуть при реализации
Если ленивая загрузка выполнена неправильно, техника может непреднамеренно скрыть контент от Google. Это приводит к тому, что медиаконтент не может участвовать в поиске по картинкам. Сейчас Google в своей Справке рассказал, что их бот может видеть такие элементы, однако просит проверять реализацию.
Как проверить, видит ли Googlebot изображение
В руководстве Google есть рекомендации о том, как убедиться, что ПС может индексировать контент, который грузится в технике «ленивой загрузки».
Для локального тестирования можно использовать скрипт Puppeteer. Чтобы проверить скрипт и запустить его, используйте следующие команды:
После запуска проверки посмотрите скриншоты, сделанные скриптом, и убедитесь, что они содержат весь контент, который должен проиндексировать Googlebot.
Заключение
Lazy loading – один из методов оптимизации загрузки сайта. Его реализация позволяет уменьшить время до первого отображения и взаимодействия пользователя со страницей. При «ленивой загрузке» посетитель сразу видит рабочий сайт, ему не приходится ждать, пока будут выполнены все элементы страницы.
Если у Вас возникли проблемы с оптимизацией, обращайтесь к нам!