10 best lazy loading javascript libraries (2021 update)

Загрузка каких изображений может быть отложена?

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

Вы можете узнать, какие изображения являются кандидатами на отложенную загрузку и сколько байтов вы можете сохранить при начальной загрузке страницы, используя инструмент Google Lighthouse . Аудит Lighthouse имеет раздел, посвященный закадровым (offscreen) изображениям. 

Lazy Loading and CDN

Lazy loading and content delivery networks (CDNs), such as Imperva’s CDN, are two ways to improve page load time and optimize the end-user experience. A CDN helps by placing resources on a cache server closer to the user, allowing them to access it much faster.

How does lazy loading compare to a CDN for website performance optimization?

• Lazy loading avoids unnecessary resource downloads or code execution. However it can’t help when the user actually requests large or numerous resources.
• A CDN caches resources and can serve them to users much faster – but it may transmit unnecessary resources which users don’t actually need.

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

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

Как видите, нет JavaScript, нет динамической подмены значения атрибута , просто «старый, тёплый, ламповый» HTML.

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

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

У этого метода нет конкурентов: у него нет ничего лишнего, он чистый и простой. Однако, хотя на момент написания статьи большинство основных браузеров уже хорошо , большинство — это ещё не все.

Принцип работы скриптов lazy-load

Lazy-load или «ленивая» загрузка — это способ отображения контента на сайте, когда элементы, появление которых определяет внешний ресурс, загружаются не сразу вместе с запрашиваемой страницей, а асинхронно — по мере необходимости. К подобным элементам относятся, например, изображения () и фреймы (). Их объединяет наличие атрибута , указывающего на источник ресурса.

Когда браузер «видит» у элемента атрибут , то осуществляет сетевой запрос по указанному адресу, что увеличивает время полной загрузки документа. Соответственно, чем больше внешних ресурсов синхронно подключается к странице, тем медленнее она загружается. Чтобы избежать множества одновременных запросов и оптимизировать скорость загрузки, используется техника lazy-load.

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

Основы работы большинства скриптов «ленивой» загрузки описываются подобным алгоритмом:

1. Элементы, которые необходимо загружать асинхронно, встраиваются на страницу с другим, временным значением атрибута (или вовсе без него, что неправильно с точки зрения валидации кода). Как правило, временное значение содержит адрес шаблона, который по весу на порядок легче оригинального исходника.
2. При необходимости в атрибут вставляется оригинальный, исходный адрес ресурса. Как правило, эта замена может осуществляться двумя путями:
   1. По требованию пользователя, когда для элемента наступают события или .
   2. Автоматически при попадании элемента в пользовательский viewport путём проверки события , а также и для мобильных устройств.

Таким образом, при использовании lazy-load при первой загрузке страницы производится не одновременно несколько запросов к разным внешним ресурсам, а всего один — к временному шаблону, указанному в атрибуте , который кэшируется браузером, и только затем при необходимых условиях (наступление заданных событий) для выбранных элементов устанавливается их оригинальный .

Существует и иной подход, при котором можно обойтись без замещающих шаблонов для оригинальных ресурсов: элементы не встраиваются на страницу изначально, а создаются динамически в процессе просмотра или определенных действий пользователя (подобные манипуляции с DOM используются, например, при подключении скриптов статистики Google Analytics или Яндекс. Метрики) либо клонируются из Shadow DOM (по такому принципу работает элемент ).

What Lazy Loading Is and How it Works

Lazy loading images means loading images on your WordPress site asynchronously. In other words, loading images and other content on your web page at different times.

In a nutshell, here’s how lazy loading works: when someone visits your website, images will load above the fold, but the remaining images on the page will only download when they come into view on the user’s screen. In other words, lazy loading means deferring offscreen images.

Lots of image-heavy websites use this technique. As you scroll down the page, you’ll see placeholder images that quickly fill up with real images.

A great example is Medium, the popular blogging website.

Lazy loading in action on the Medium website.

As you can see from the image above, Medium displays a blurred placeholder image until the actual high-resolution image has fully loaded. Hence, visitors know that an image is coming.

Lazy Loading on Mobile

Lazy loading works on mobile as it works on desktop — and the same goes for how lazy loading should be implemented. 

What’s more, mobile lazy loading gives users a higher benefit as they don’t have to consume any mobile data for loading images they don’t scroll to.

Please note that AMP for images doesn’t work the same. Amp-img uses JavaScript to handle lazy loading with a fallback to the main image if JS is disabled.

Асинхронная загрузка картинок и фреймов

«Презентацию» скрипта lazy-load следует начать с некоторых разъяснений. Во-первых, для правильной работы скрипт должен запускаться после полной загрузки HTML и постройки DOM-дерева, т. е. наступления события . Во-вторых, в HTML-разметке у элементов, которые планируется загружать асинхронно, будет присутствовать атрибут , указывающий на оригинальный источник ресурса, — с его помощью происходит поиск элементов, для которых необходимо инициализировать lazy-load, поэтому, чтобы отложенная загрузка заработала на желаемом элементе, к нему достаточно будет добавить указанный атрибут с источником. В-третьих, при использовании скрипта следует заранее позаботиться о шаблонах, которые станут отображаться взамен оригинального элементов. Наконец, настройки скрипта учитывают варианты отображения оригинального контента — по требованию пользователя и автоматически, для чего применяются описанные выше события: ,  — непосредственно на самих элементах, а , и  — для окна браузера, если требуется отследить попадание во viewport.

JavaScript

В качестве единственного аргумента в метод init() функции «ленивой» загрузки должен передаваться объект с предварительными настройками, содержащий:

1. название селектора, по которому через выбираются необходимые элементы;
2. указание на событие, активирующее замену атрибута на оригинальный, — , или (попадание во viewport);
3. callback-функцию, вызываемую во время загрузки источника.

Скрипт представлен в самом тривиальном исролнении и работает по следующей схеме: выборка всех необходимых элементов на странице, проверка их на наличие атрибута и источника оригинального ресурса (атрибут ), установка событий на окно или на сами элементы в зависимости от выбранного способа отображения контента, замена у конкретного элемента на содержимое в при наступлении соответствующих событий. Для удобства добавлено информирование через консоль браузера об ошибках, возникающих при поиске элементов, при добавлении элемента без атрибута , при отсутствии или неудачной загрузке (событие ) оригинального источника. Если на сайте есть картинки, которые могут не загрузиться из-за ошибки в источнике, рекомендуется также добавить CSS для «сломанных» изображений.

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

CSS-оформление

Чтобы добавить к lazy-элементам CSS, можно указать следующие селекторы:

Благодаря callback-функции к загружаемой картинке можно добавить класс и настроить эффект появления на свой вкус. В примере ниже это реализовано посредством и .

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

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

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

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

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

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

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

Опции

Опции передаются в формате — ключ/значение. Примерно следующим образом:

breakpoints

breakpoints (array, по умолчанию — false) — применяется для адаптивных изображений, имеющие контрольные точки, т. е. в зависимости от размера экрана показываем ту или иную картинку.

container

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

error

error (функция function(ele, msg), по умолчанию возвращает false) — функция возвращает два сообщения: missing и invalid, если мы сделали что-то не так. Missing — если атрибут пустой или вообще не указан. Invalid — если в атрибуте указан не валидный адрес изображения.

errorClass

errorClass (строка, по умолчанию — b-error) — данный класс добавится элементу если пойдет что-то не так. Например, если параметр error выше вернет missing или invalid.

loadInvisible 

loadInvisible (булево, по умолчанию — false) — если по каким-то причинам вы хотите загрузить скрытые изображения, то передайте значение — true.

offset

offset (число, по умолчанию — 100) — этот параметр отвечает за то, с каким отступом будут загружены изображения. По умолчанию — 100, значит изображение загрузится за 100 пикс до его появления в видимой части.

root

root (объект, по умолчанию — document) — корневой объект может быть изменен. Честно сказать, не совсем понял этот пункт, вернее его предназначение.

saveViewportOffsetDelay

saveViewportOffsetDelay (число, по умолчанию — 50) — задержка для срабатывания функции saveViewportOffsetDelay при изменении размера окна браузера. По умолчанию выставлено 50 мс.

selector

selector (строка, по умолчанию — b-lazy) — селектор для изображений, которые вы хотите загружать лениво. Например для всех изображений вы можете указать просто — img. Если хотите указать несколько селекторов, то перечислите их через запятую, например — .img-1, .img-2, .img-3…

separator

separator (символ, по умолчанию — |) — используется, если вы хотите указать несколько изображений в атрибуте для retina-дисплеев. Например, .

success

success (функция function(ele), по умолчанию возвращает — false) — обратный вызов, когда изображения все загрузились. Полезно, если мы после загрузки изображений хотим выполнить какие либо действия.

successClass

successClass (строка, по умолчанию — b-loaded) — класс, который добавляется изображению, когда оно успешно загрузилось.

validateDelay

validateDelay (число, по умолчанию — 25) — как часто должна вызываться функция валидации при проктуртке/ресайзинге страницы. По умолчанию — 25 мс.

Некоторые подробные примеры реализации вышеописанных опций вы сможете найти на сайте разработчика. Я лишь приведу некоторые.

Другие отличные плагины для включения ленивой загрузки

Lazy Load Optimizer — это бесплатный WordPress плагин ленивый загрузки изображений. Он поддерживает ленивую загрузку содержимого, вставленного из внешних источников на веб-страницу. Более того, он совместим с WooCommerce.

Из панели администратора WordPress установите и активируйте плагин Lazy Load Optimizer.

Затем перейдите в раздел Настройки > Lazy Load Optimizer

Включите контент, который вы хотите обработать на странице общих настроек и сохраните изменения.

Crazy Lazy — это простой и легкий в использовании плагин WordPress для реализации ленивой загрузки.

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

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

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

Чтобы использовать этот плагин, вы должны загрузить его из раздела «плагины» на панели администратора WordPress.

Затем перейдите в раздел Настройки> Lazy Load на панели мониторинга.

Проверьте все элементы, которые вы хотите лениво загрузить.

Сохраните внесенные изменения.

Ленивая загрузка для видео работает на встроенных видео Youtube и Vimeo. Он помогает отложить загрузку видео, когда пользователи нажимают на изображение предварительного просмотра. Он также работает с WordPress Multisite и другими плагинами.

Загрузите плагин Lazy Load for Videos с панели администратора WordPress.

Перейдите в Настройки> Lazy Load for Videos на панели мониторинга.

На странице «общие / стиль» вы можете настроить параметры для вашего сайта.

Обязательно проверьте «отзывчивый режим», чтобы улучшить отзывчивость на всех устройствах.

Затем сохраните внесенные изменения.

Этот плагин поддерживает другие настройки, такие как:

• Отключение отложенной загрузки для видео Youtube и Vimeo.
• Отображение заголовков видео на Youtube и Vimeo.
• Добавление пользовательского CSS.

WP YouTube Lyte позволяет добавлять лениво загруженные видео Youtube. Если вы хотите лениво загружать только видео с Youtube, это отличное решение для вас. Этот плагин работает на всех устройствах.

Чтобы использовать WP YouTube Lyte, вам необходимо скачать, установить и активировать его на своем сайте.

Нажмите на Настройки > WP YouTube Lyte на панели управления.

Просмотрите все параметры настройки на странице «основные настройки» и отметьте их соответствующим образом.

Обязательно введите свой ключ API YouTube. Это позволяет плагину функционировать оптимально.

Затем нажмите на кнопку «Сохранить изменения».

Использование ленивой загрузки

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

Также отложенная загрузка применяется к видео, скриптам и комментариям. По сути, перемещение файлов JavaScript в футер страницы – это способ ускорения загрузки страницы.

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

Бесконечная прокрутка – это альтернатива классической пагинации страниц. При ее использовании дополнительные записи загружаются во время скроллинга страницы вниз. Это можно заметить на Pinterest и Pocket.

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

Which Images can be Lazy Loaded?

The basic idea of lazy loading is simple — defer loading anything that is not needed right now. For images it usually translates to any image that is not visible to the user up front can be lazy loaded.

As the user scrolls down the page, the image placeholders start coming into viewport (visible part of the webpage). We trigger the load for these images when they become visible.

You can find out which images are a candidate for lazy loading and how many bytes you can save on the initial page load by using Google Lighthouse audit tool. The audit performed by this tool has a section dedicated for offscreen images. You can also use ImageKit’s website analyzer to identify if your website uses lazy loading or not, in addition other critical image-related optimizations on your page.

Lazy loading is critical not only for good performance, but also to deliver a good user experience.

Как использовать bLazy?

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

Далее, задаем всем картинкам, загрузку которых необходимо отложить класс . Адрес изображения в атрибуте меняем на прозрачную gif-заглушку с прозрачным фоном, закодированную в base64. Это так называемый плейсхолдер (placeholder) — то, что показывается до загрузки изображения. Такая заглушка не будет создавать лишних http-запросов. Оригинальный адрес изображения указываем в атрибуте .

Следующее, что мы сделаем — это подключим скрипт и инициализируем его.

Мы создали экземпляр класса . Он может принимать некоторые опции.

Jquery.lazyload.

http-equiv=»Content-Type» content=»text/html;charset=UTF-8″>style=»clear:both;»>

Jquery.lazyload.

Fadein — это эффект отображения изображения

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

Может установить порог для контроля чувствительности

$(“img”).lazyload({ threshold : 200 });

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

Вы также можете определить некоторое эффект отображения изображения, определяя параметр эффекта.

Загрузка триггера событий, событие может быть любое время jQuery, например: Щелкните и мыши. Вы также можете использовать пользовательские события, такие как Sporty и foobar. По умолчанию вы ждете, пока пользователь не прозвучал на место в окне. Серый заполнитель Картинки переключаются, чтобы предотвратить изображение, прежде чем вы сможете сделать это:

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

Image Внутри контейнера вы можете использовать плагин на элементе Div Scrioll-UP. Вы должны определить контейнер в качестве объекта jQuery и передавать его в качестве параметра метода инициализации.

CSS

Код JavaScript:

Когда картинка не будет последовательно устроен, ленивая нагрузка будет петлена на загруженное изображение. Обнаружение изображения в цикле в видимой области. По умолчанию первая картина найдена, когда изображение не в видимой области. Изображение это Рассматривается распределение потока, изображение одинаково в порядке на странице, а HTML-код одинаково. Но в некоторых макетах такая гипотеза не установлена. Однако вы можете контролировать поведение нагрузки через опцию Failuerelimit Отказ

Интеллектуальная рекомендация

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

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

1. Резервное копирование /etc/apt/sources.list 2. Найти более быстрый источник данных онлайн Сервер обновлений Шанхайского университета Цзяотун в Шанхае идеально подходит для меня Примеч…

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

Некоторое время назад организационная структура была откорректирована, а затем распределение проекта было скорректировано. Когда помощник отдела нашел меня, он сказал, что было6.0Мой проект был таким:…

Вам также может понравиться

【Android】 Сервис Подробное объяснение Этот блог был включен в мой сводный клик по разработке Android【Резюме разработки Android】 Справочные материалы:«Сводка Android Series: Android Сер…

Жизненный цикл переменной относится к временному интервалу, в течение которого переменная эффективно существует во время выполнения программы. Для переменных, объявленных на уровне пакета, их жизненны…

Тип данных не назначен описание проблемы Сборник изменяется в процессе передачи данных на NULL Постепенно добавить результаты печати журнала в тестовую среду Позиционирование в основном методе NULL, е…

задний план Недавно, занимаясь фоновой бизнес-обработкой, я связался сLayui Коробка челнокаtransfer Использование элементов управления; Я лично считаю, что эффект вполне удовлетворительный; но в конце…

wxml:  js:  …

Start Use Lazy Loading on Images Right Now!

You now know the most relevant information about image lazy loading for WordPress (including native lazy loading). You also understand how and why it’s essential to apply this powerful web performance optimization technique to boost your site speed. 

WP Rocket is the easiest way to lazy load your images and videos with no effort. Save yourself time and let WP Rocket do the job for you!

You can always count on our 100% money-back guarantee. Although we don’t think you’ll ever want one, we’ll gladly provide a refund if you request it within 14 days of purchase.

The only risk you’ll be taking with our plugin is speeding up your website. WP Rocket automatically applies 80% of web performance best practices, instantly boosting your PageSpeed Insights score!

Принцип работы атрибута loading

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

Событие load запускается, как только загружается полное изображение после первого запроса (для изображений размером менее 2 КБ) или после второго. Это событие может не запускаться для определенных изображений, из-за того, что не выполняется второй запрос.

Возможно, в будущем браузеры будут делать в два раза больше запросов на изображения. Сначала запрос Range, затем запрос целиком.

Убедитесь, что ваши серверы поддерживают HTTP-заголовок Range: 0-2047 и ответьте кодом состояния 206 («Частичный контент»), чтобы исключить доставку полноразмерного изображения дважды.

Поговорим об отложенном контенте. Движок рендеринга Chrome Blink определяет, загрузку какого контента и на какой срок следует отложить. Полный список требований можно найти в документации. Ниже приводится краткое описание ресурсов, загрузка которых может быть отложена:

• Изображения и фреймы на всех платформах, на которых установлено loading=»lazy».
• Изображения на Chrome для Android, где включен Data Saver и которые удовлетворяют следующим требованиям:
  • loading=»auto» или значение unset;
  • атрибуты width и height больше 10px;
  • не созданы программно с помощью JavaScript.
• Фреймы, которые удовлетворяют следующим требованиям:
  • loading=»auto» или значение unset;
  • из стороннего источника (домен или протокол, который отличается от тех, что были на странице встраивания);
  • если высота и ширина превышает 4 пикселя (чтобы предотвратить отложенную загрузку небольших следящих фреймов);
  • если для фреймов не установлено display: none или visibility: hidden (чтобы предотвратить отложенную загрузку небольших следящих фреймов);
  • если они не расположены за границами экрана из-за отрицательных координат x или

Как добавить ленивую загрузку (lazy load wordpress) с помощью плагина

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

Lazy Load

Данный плагин установили более 90 000 раз и его рейтинг достаточно высок – 4 звезды.

Lazy Load использует jQuery.sonar для загрузки изображений только тогда, когда они появляются в области просмотра. Разархивированный плагин весит всего 20 КБ.

BJ Lazy Load

Плагин  BJ Lazy Load установили более 60 000 раз и его рейтинг так же высок. Он заменяет все изображения и фреймы (включая видео с YouTube и Vimeo) в контенте заполнителем до просмотра пользователем.

Lazy Load by WP Rocket

Lazy Load by WP Rocket выполняет ленивую загрузку изображений и фреймов. Включая миниатюры, содержимое виджетов, аватары и смайлики. Данный плагин не использует библиотеки JavaScript. Поэтому он весит менее 10 КБ.

Более 10 000 сайтов используют Lazy Load от WP Rocket, что вызывает доверие.

a3 Lazy Load

Это один из немногих плагинов в этом списке, который имеет дополнительные параметры конфигурации. Он подходит для ленивой загрузки изображений, видео и фреймов в записях, страницах, виджетах, миниатюрах и аватарах. a3 Lazy Load совместим с WooCommerce.

Плагин позволяет выбрать эффекты для изображений, которые появляются на сайте. Также можно указать, куда загружать его скрипт: в шапку или футер страницы (плагин ленивой загрузки, который сам себя загружает).

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

Crazy Lazy

Этот плагин ленивой загрузки изображений использует мало ресурсов. Crazy Lazy задерживает загрузку изображений до того, как их увидит пользователь.

Также можно установить собственные заполнители с помощью CSS и заменить ими изображения.

Speed Up – Lazy Load

Еще один плагин отложенной загрузки изображений и фреймов. Он весит всего 5 КБ. Реализован шорткод для деактивации ленивой загрузки. В том числе и для отдельных изображений.

WordPress Infinite Scroll – Ajax Load More

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

WordPress Infinite Scroll также работает с WooCommerce и Easy Digital Downloads.

WP YouTube Lyte

Плагин позволяет размещать специальные ссылки на ролики, которые загружает проигрыватель YouTube только после нажатия.

Также можно использовать шорткоды для вывода видеоконтента или установить плагин для автоматического парсинга ссылок YouTube.

Альтернативный плагин ленивой загрузки видео – Lazy Load for Videos.

Lazy Loading Implementing Methods

There are several open source libraries that can be used to implement lazy loading, including:

• blazy.js – blazy.js is a lightweight JavaScript library for lazy loading and multi-serving images, iframes, video and other resources.
• LazyLoad – LazyLoad is a script that automatically loads images as they enter the viewport.

Methods for implementing lazy loading in your code include:

• Lazy initialization – This method sets objects to null. Object data is loaded only after and whenever invoking them, check if null, and if so, load object data.
• Virtual proxy – when accessing an object, call a virtual object with same interface as the real object. When the virtual object is called, load the real object, then delegate to it.
• Ghost – load an object in partial state, only using an identifier. The first time a property on the object is called, load the full data.
• Value holder – create a generic object that handles lazy loading behavior. This object should appear in place of an object’s data fields.

The loading attribute #

Today, Chrome already loads images at different priorities depending on where they’re located with respect to the device viewport. Images below the viewport are loaded with a lower priority, but they’re still fetched as soon as possible.

In Chrome 76+, you can use the attribute to completely defer the loading of offscreen images that can be reached by scrolling:

Here are the supported values for the attribute:

• : Default lazy-loading behavior of the browser, which is the same as not including the attribute.
• : Defer loading of the resource until it reaches a from the viewport.
• : Load the resource immediately, regardless of where it’s located on the page.

Caution: Although available in Chromium, the value is not mentioned in the . Since it may be subject to change, we recommend not to use it until it gets included.

Distance-from-viewport thresholds

All images that are above the fold—that is, immediately viewable without scrolling—load normally. Those that are far below the device viewport are only fetched when the user scrolls near them.

Chromium’s implementation of lazy-loading tries to ensure that offscreen images are loaded early enough so that they have finished loading once the user scrolls near to them. By fetching nearby images before they become visible in the viewport, we maximize the chance they are already loaded by the time they become visible.

Compared to JavaScript lazy-loading libraries, the thresholds for fetching images that scroll into view may be considered conservative. Chromium is looking at better aligning these thresholds with developer expectations.

Experiments conducted using Chrome on Android suggest that on 4G, 97.5% of below-the-fold images that are lazy-loaded were fully loaded within 10ms of becoming visible. Even on slow 2G networks, 92.6% of below-the-fold images were fully loaded within 10ms. This means browser-level lazy-loading offers a stable experience regarding the visibility of elements that are scrolled into view.

The distance threshold is not fixed and varies depending on several factors:

• The type of image resource being fetched
• Whether Lite mode is enabled on Chrome for Android
• The effective connection type

You can find the default values for the different effective connection types in the Chromium source. These numbers, and even the approach of fetching only when a certain distance from the viewport is reached, may change in the near future as the Chrome team improves heuristics to determine when to begin loading.

In Chrome 77+, you can experiment with these different thresholds by in DevTools. In the meantime, you will need to override the effective connection type of the browser using the flag.

😯 Notable features

It works with your favourite library or framework

As LazyLoad doesn’t rely on jQuery, you can use it in web applications using Angular, React or Vue.js without the need to include jQuery.

Intersection Observer API for optimized CPU usage

Instead of listening to the and events, LazyLoad uses the Intersection Observer API which is a new, blazing fast method to detect if an element is inside the browser viewport. Your users will see the difference in slow and even in fast devices or computers.

Flaky connections supported

If your users lose the internet connection causing errors on images loading, this script tries and loads those images again when the connection is restored.

Support for single and background images, and HiDPI displays

LazyLoad supports single and multiple lazy background images, with standard resolution or HiDPI (retina) displays.

Lazy Loading Best Practices

When performing lazy loading, consider the following tips:

• Only lazy load resources that are displayed below the fold or outside the user’s viewport. In code, only lazy load objects that are not needed for initial or essential system operations.
• When lazy loading an image, asynchronously decode it using the JavaScript decode() method before inserting it into the DOM. Otherwise, large images can cause the browser to freeze.
• Handle errors in case the image or object fails to load.
• Offer a  in case JavaScript is not available. Otherwise users with JavaScript disabled will not see any lazy-loaded resources.

See how Imperva CDN can help you with website performance.

Request demo
Learn more