Lazy load или ленивая загрузка изображений

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

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

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

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

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

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

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

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

Download / Install

Dev version:jquery.lazyloadxt.jsjquery.lazyloadxt.extra.js
Minified version:jquery.lazyloadxt.min.jsjquery.lazyloadxt.extra.min.js

Effects:

Dev version:jquery.lazyloadxt.fadein.cssjquery.lazyloadxt.spinner.css
Minified version:jquery.lazyloadxt.fadein.min.cssjquery.lazyloadxt.spinner.min.css

Addons:

jquery.lazyloadxt.script.jsjquery.lazyloadxt.script.min.js
jquery.lazyloadxt.srcset.jsjquery.lazyloadxt.srcset.min.js
jquery.lazyloadxt.print.jsjquery.lazyloadxt.print.min.js
jquery.lazyloadxt.bg.jsjquery.lazyloadxt.bg.min.js
jquery.lazyloadxt.autoload.jsjquery.lazyloadxt.autoload.min.js
jquery.lazyloadxt.bootstrap.jsjquery.lazyloadxt.bootstrap.min.js
jquery.lazyloadxt.jquerymobile.jsjquery.lazyloadxt.jquerymobile.min.js

Get full snapshot of Lazy Load XT: lazy-load-xt-master.zip

If you have any feature to request or bug to report please use
GitHub issues.

What about users without JavaScript?

Slap on some :

<!-- A <noscript> example using <img> with src and srcset. -->
<img class="lazy" data-srcset="/img/image-to-lazy-load-2x.jpg 2x, /img/image-to-lazy-load-1x.jpg 1x" data-src="/img/image-to-lazy-load-1x.jpg" src="/img/placeholder.jpg" alt="Alternative text to describe image.">
<noscript>
  <img srcset="/img/image-to-lazy-load-2x.jpg 2x, /img/image-to-lazy-load-1x.jpg 1x" src="/img/image-to-lazy-load-1x.jpg" alt="Alternative text to describe image.">
</noscript>

<!-- And a <picture> example. -->
<picture>
  <source data-srcset="/img/image-to-lazy-load-2x.webp 2x, /img/image-to-lazy-load-1x.webp 1x" type="image/webp">
  <img class="lazy" data-srcset="/img/image-to-lazy-load-2x.jpg 2x, /img/image-to-lazy-load-1x.jpg 1x" data-src="/img/image-to-lazy-load-1x.jpg" src="/img/placeholder.jpg" alt="Alternative text to describe image.">
</picture>
<noscript>
  <picture>
    <source srcset="/img/image-to-lazy-load-2x.webp 2x, /img/image-to-lazy-load-1x.webp 1x" type="image/webp">
    <img srcset="/img/image-to-lazy-load-2x.jpg 2x, /img/image-to-lazy-load-1x.jpg 1x" src="/img/image-to-lazy-load-1x.jpg" alt="Alternative text to describe image.">
  </picture>
</noscript>

<!-- Here's a <video> example, too. -->
<video class="lazy" autoplay loop muted playsinline>
  <source data-src="video.webm" type="video/webm">
  <source data-src="video.mp4" type="video/mp4">
</video>
<noscript>
  <video autoplay loop muted playsinline>
    <source src="video.webm" type="video/webm">
    <source src="video.mp4" type="video/mp4">
  </video>
</noscript>

<!-- Here's an <iframe> example for good measure. -->
<iframe class="lazy" data-src="lazy.html"></iframe>
<noscript>
  <iframe src="lazy.html"></iframe>
</noscript>

Then place a class on the element:

<html class="no-js">

Finally, add this one line before any or elements in the document :

<!-- Remove the no-js class on the <html> element if JavaScript is on -->
<script>document.documentElement.classList.remove("no-js")</script>

Normally, this script will remove the class from the element as the page loads, but if JavaScript is turned off, this never happens. From there, you can add some CSS that hides elements with a of when the class is present on the element:

/* Hide .lazy elements if JavaScript is off */
.no-js .lazy {
  display: none;
}

Разгрузка фреймворка

Фреймворки добавляют довольно большой оверхед в работу любого приложения. Однако часто бывают ситуации, когда необходимо выполнить какое-то тривиальное действие. Например, увеличить счетчик в базе данных либо сбросить ключ в Memcache. В этом случае загрузка фреймворка может составлять 99% от всего времени, требуемого на выполнение этой операции. Если таких операций очень много (например, подсчет просмотра статьи), следует использовать разгрузку.

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

Мы могли бы сделать отдельный файл track.php для подсчета просмотров вместо реализации на основе фреймворка:

И изменить вызов в HTML:

Однако, необходимость делать кучу отдельных файлов может создать проблемы. Например, при изменении параметров соединений, понадобится менять их в разных местах. Это неудобно.

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

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

Теперь перед инициализацией фреймворка мы можем добавить обработку разгрузки:

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

Что такое отложенная загрузка и как она работает?

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

Как работает Lazy Load:

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

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

More than images

Images are not the only page elements that may be lazy loaded. Though default value for is
, you can append it by to use lazy-loading for iframes, for videos,
etc. Full list of supported tags include all tags with attribute: , , ,
, , , .

We distribute special «extra» version of the plugin with additional code for lazyloading of elements and
ed YouTube videos. To use this version, it’s necessary to just load instead of
.

-embedded Videos (YouTube, Vimeo, etc.)

Most of video hostings allow to embed videos as elements (e.g. Youtube, Vimeo, DailyMotion, and even KickStarter)
and they may be lazy loaded in the way similar to images (by replacing attribute by ):

<script src="jquery.lazyloadxt.extra.js"></script>
<iframe width="420" height="315" data-src="//www.youtube.com/embed/uOzO9O15gwI?rel=0" frameborder="" allowfullscreen></iframe>

Support tag

It is easy too, just replace attribute by and by (if exists).

<script src="jquery.lazyloadxt.extra.js"></script>
<video data-poster="/path/to/poster.jpg" width="320" height="240" controls>
  <source data-src="/path/to/video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source data-src="/path/to/video.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>

<video data-src="/path/to/video2.mp4" width="320" height="240" controls></video>

Установка

Upload Lazy Load for Videos into you plugin directory (/wp-content/plugins/) and activate the plugin through the ‘Plugins’ menu in WordPress.

When you had already published videos before you have activated Lazy Load for Videos, update all posts by clicking the «Update Posts» button below the «Save Changes» button.

You may have to clean the website’s and browser’s cache.

If you don’t see a preview image instead of the Youtube/Vimeo video, open the post editor and update/save the post again or even update all posts using the above mentioned «Update Posts» button.

Optionally: Sign up to the Lazy Load for Videos newsletter to get notified about major updates.

Description

This plugin improves page load time and increases your Google PageSpeed Score. It works with oEmbed and replaces embedded Youtube and Vimeo videos with a clickable preview image.
By loading videos only when the user clicks on the preview image, no unnecessary JavaScript is loaded. Especially on sites with many embedded videos this will make your visitors happy. Additionally, all Youtube videos are loaded in a privacy-enhanced mode using the “https://www.youtube.com” embed URL.

This plugin works for your existing YouTube and Vimeo blocks. No vendor lock-in and no custom shortcodes: Easily turn the plugin on and off anytime.

Demo on the developer’s website: www.kweber.com/lazy-load-videos/

You want to enhance this plugin? Please contribute on Github.

Some additional features:

  • Display video titles on preview images
  • Display privacy disclaimer on top of preview images (e.g. for GDPR compliance)
  • Pre-roll and post-roll advertisements: Convert all videos into a playlist and automatically add your corporate video, product teaser or another video advertisement to every video. (Great for branding and video ads!)
  • Hide annotations such as “subscribe to channel” to avoid distractions
  • Add custom CSS via the plugin’s admin panel
  • Choose custom colour for your Vimeo player
  • Hide controls from Youtube player
  • Hide information like the video title and uploader when the video starts playing
  • Even lazy load videos in text widgets (Youtube only)
  • Choose between thumbnail sizes (standard or cover)
  • Choose from several play button styles
  • Choose the traditional red or the alternative white progress bar for the Youtube video player
  • Don’t show related videos at the end of your videos
  • Works with WordPress Multisite and many plugins such as TablePress

Future features:

  • Set a custom preview image per video
  • Track how often the videos have been loaded with Google Analytics
  • … YOU want a new feature RIGHT NOW? Please implement it yourself and contribute on Github, and I’ll publish your enhancements to the official WordPress directory.

📺 Demos

Didn’t find the that exactly matches your case? We have demos!

The demos folder contains 30+ use cases of vanilla-lazyload. You might find there what you’re looking for.

TypeTitleCodeDemo
ContentSimple lazy loaded images, not using any placeholderCode
ContentLazy images that use an inline SVG as a placeholderCode
ContentLazy images that use an external SVG file as a placeholderCode
ContentLazy responsive images withCode
ContentLazy responsive images with the tag and the attribute (art direction)Code
ContentLazy responsive images with and (using )Code
ContentLazy responsive images with and (using plain )Code
ContentLazy video with multiple tagsCode
ContentLazy loading background imagesCode
ContentLazy loading multiple background imagesCode
ContentLazy WebP images with the tag and the attribute for WebPCode
Asynchronous loading LazyLoad with requireJSCode
Asynchronous loading LazyLoad + InterserctionObserver with requireJSCode
Asynchronous loading LazyLoad withCode
Asynchronous loading multiple LazyLoad instances withCode
TechniqueFade in images as they loadCode
TechniqueLazily create lazyload instancesCode
TechniqueLazily execute functions as specific elements enter the viewportCode
TechniqueHow to manage the print of a page with lazy imagesCode
TechniqueA popup layer containing lazy images in a scrolling containerCode
SettingsMultiple scrolling containersCode
SettingsSingle scrolling containerCode
MethodsHow to LazyLoadCode
MethodsAdding dynamic content, then LazyLoadCode
MethodsAdding dynamic content, then LazyLoad passing a NodeSet of elementsCode
MethodsLoad punctual images using the methodCode
MethodsLoad all images at once usingCode
TestTest for multiple thresholdsCode
TestTest behaviour with hidden imagesCode
TestTest performance, lazy loading of hundreds of imagesCode
NativeTest the native lazy loading of images WITHOUT any line of javascript, not even this scriptCode
NativeTest the native lazy loading of images conditionally using the option (see API)Code

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import LazyLoad from 'react-lazyload';
import MyComponent from './MyComponent';

const App = () => {
  return (
    <div className="list">
      <LazyLoad height={200}>
        <img src="tiger.jpg" /> /*
                                  Lazy loading images is supported out of box,
                                  no extra config needed, set `height` for better
                                  experience
                                 */
      </LazyLoad>
      <LazyLoad height={200} once >
                                /* Once this component is loaded, LazyLoad will
                                 not care about it anymore, set this to `true`
                                 if you're concerned about improving performance */
        <MyComponent />
      </LazyLoad>
      <LazyLoad height={200} offset={100}>
                              /* This component will be loaded when it's top
                                 edge is 100px from viewport. It's useful to
                                 make user ignorant about lazy load effect. */
        <MyComponent />
      </LazyLoad>
      <LazyLoad>
        <MyComponent />
      </LazyLoad>
    </div>
  );
};

ReactDOM.render(<App />, document.body);

If you want to have your component lazyloaded by default, try this handy decorator:

import { lazyload } from 'react-lazyload';

@lazyload({
  height: 200,
  once: true,
  offset: 100
})
class MyComponent extends React.Component {
  render() {
    return <div>this component is lazyloaded by default!</div>;
  }
}

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

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

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

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

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

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

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

Что такое ленивая загрузка

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

Без плагинов такой тип загрузки можно подключить только с помощью написания довольно сложной структуры из смеси php/js/css. Также можно использовать готовые решения. Например, jquery.lazyload.js. Но практически все плагины с данной функцией так или иначе используют данную библиотеку. Потому, в данном случае гораздо целесообразнее использовать готовое решение.

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

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

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

Условия таковы:

  • только бесплатные плагины;

  • доступны в репозитории WordPress;

  • обновлялись не позднее, чем пол года назад.

Поехали!

Lazy Load by WP Rocket

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

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

Вес картинок сократился минимально. Фактически, никакого профита от использования данного поделия не вижу. Можете, конечно, попробовать, но если что, я предупреждал.

Smush

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

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

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

WordPress Infinite Scroll — Ajax Load More

Вылезает по запросу в списке плагинов для WordPress. Ну, просто смотрите на скрины.

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

Lazy Load Optimizer

Тут уже более менее, работает плагин на ура. Ничего не рушит, все прекрасно. Правда, чуть подтормаживает сайт, но все в пределах погрешности. Так что, претензий особо не будет.

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

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

PageSpeed Ninja

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

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

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

A3 Lazy Load

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

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

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

Сделайте сайт быстрым

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

👨‍💻 Getting started — HTML

In order to make your content be loaded by LazyLoad, you must use some attributes instead of the actual attributes. Examples below.

Lazy responsive image with and :

<img
  alt="A lazy image"
  class="lazy"
  data-src="lazy.jpg"
  data-srcset="lazy_400.jpg 400w, 
    lazy_800.jpg 800w"
  data-sizes="100w"
/>

To have a low quality placeholder, add the attribute pointing to a very small version of the image. E.g. .

Lazy responsive image with hi-dpi support using the tag:

<picture>
  <source media="(min-width: 1200px)" data-srcset="lazy_1200.jpg 1x, lazy_2400.jpg 2x" />
  <source media="(min-width: 800px)" data-srcset="lazy_800.jpg 1x, lazy_1600.jpg 2x" />
  <img alt="A lazy image" class="lazy" data-src="lazy.jpg" />
</picture>

To have a low quality placeholder, add the attribute pointing to a very small version of the image to the tag. E.g. .

Lazy responsive image with automatic WebP format selection, using the tag:

<picture>
  <source
    type="image/webp"
    data-srcset="lazy_400.webp 400w, 
      lazy_800.webp 800w"
    data-sizes="100w"
  />
  <img
    alt="A lazy image"
    class="lazy"
    data-src="lazy.jpg"
    data-srcset="lazy_400.jpg 400w, 
      lazy_800.jpg 800w"
    data-sizes="100w"
  />
</picture>

To have a low quality placeholder, add the attribute pointing to a very small version of the image to the tag. E.g. .

Lazy background image

IMPORTANT NOTE: To display content images on your pages, always use the tag. This would benefit the SEO and the accessibility of your website. To understand if your images are content or background, ask yourself: «would my website user like to see those images when printing out the page?». If the answer is «yes», then your images are content images and you should avoid using background images to display them.

Single background image:

<div class="lazy" data-bg="lazy.jpg"></div>

Single background, with HiDPI screen support:

<div class="lazy" data-bg="lazy.jpg" data-bg-hidpi="lazy@2x.jpg"></div>

Multiple backgrounds:

<div
  class="lazy"
  data-bg-multi="url(lazy-head.jpg), 
    url(lazy-body.jpg), 
    linear-gradient(#fff, #ccc)"
>
  ...
</div>

Please note that you must use to wrap the URLs in your attributes.

Multiple backgrounds, HiDPI screen support:

<div
  class="lazy"
  data-bg-multi="url(lazy-head.jpg),
    url(lazy-body.jpg),
    linear-gradient(#fff, #ccc)"
  data-bg-multi-hidpi="url(lazy-head@2x.jpg),
    url(lazy-body@2x.jpg),
    linear-gradient(#fff, #ccc)"
>
  ...
</div>

Please note that you must use to wrap the URLs in your attributes.

Lazy video

<video class="lazy" controls width="620" data-src="lazy.mp4" data-poster="lazy.jpg">
  <source type="video/mp4" data-src="lazy.mp4" />
  <source type="video/ogg" data-src="lazy.ogg" />
  <source type="video/avi" data-src="lazy.avi" />
</video>

Please note that the video poster can be lazily loaded too.

FAQ #

Are there plans to automatically lazy-load images in Chrome?

Chromium already automatically
lazy-loads any images that are well suited to being deferred if Lite
mode is enabled on Chrome for Android. This is primarily aimed at users who are conscious about data-savings.

Can I change how close an image needs to be before a load is triggered?

These values are hardcoded and can’t be changed through the API. However, they may change in the
future as browsers experiment with different threshold distances and variables.

Can CSS background images take advantage of the attribute?

How does the attribute work with images that are in the viewport but not immediately visible (for example: behind a carousel, or hidden by CSS for certain screen sizes)?

What if I’m already using a third-party library or a script to lazy-load images?

The attribute should not affect code that currently lazy-loads your assets in any way, but
there are a few important things to consider:

  1. If your custom lazy-loader attempts to load images or frames sooner than when Chrome loads them
    normally—that is, at a distance greater than the —
    they are still deferred and load based on normal browser behavior.
  2. If your custom lazy-loader uses a shorter distance to determine when to load a particular image than the browser, then the behavior would conform to your custom settings.

One of the important reasons to continue to use a third-party library along with is
to provide a polyfill for browsers that do not yet support the attribute.

How do I handle browsers that don’t yet support lazy-loading?

Create a polyfill or use a third-party library to lazy-load images on your site. The
property can be used to detect if the feature is supported in the browser:

For example, lazysizes is a popular JavaScript lazy-loading
library. You can detect support for the attribute to load lazysizes as a fallback
library only when isn’t supported. This works as follows:

  • Replace with to avoid an eager load in unsupported browsers. If the
    attribute is supported, swap for .
  • If is not supported, load a fallback (lazysizes) and initiate it. As per lazysizes docs, you use the
    class as a way to indicate to lazysizes which images to lazy-load.

Here’s a demo of this pattern. Try
it out in a browser like Firefox or Safari to see the fallback in action.

The lazysizes library also provides a loading plugin
that uses browser-level lazy-loading when available but falls back to the library’s custom functionality when needed.

Is lazy-loading for iframes also supported in Chrome?

was recently standardized and is already implemented in Chromium. This allows you to lazy-load iframes using the attribute. A dedicated article about iframe lazy-loading will be published on web.dev shortly.

The attribute affects iframes differently than images, depending on whether the iframe is
hidden. (Hidden iframes are often used for analytics or communication purposes.) Chrome uses the
following criteria to determine whether an iframe is hidden:

  • The iframe’s width and height are 4 px or smaller.
  • or is applied.
  • The iframe is placed off-screen using negative X or Y positioning.

If an iframe meets any of these conditions, Chrome considers it hidden and won’t lazy-load it in
most cases. Iframes that aren’t hidden will only load when they’re within the .
A placeholder shows for lazy-loaded iframes that are still being fetched.

How are images handled when a web page is printed?

Although the functionality isn’t in Chrome currently, there’s an open
issue to ensure that all images and
iframes are immediately loaded if a page is printed.

Does Lighthouse recognize browser-level lazy-loading?

Earlier versions of Lighthouse would still highlight that pages using on images required a strategy for loading offscreen images. Lighthouse 6.0 and above better factor in approaches for offscreen image lazy-loading that may use different thresholds, allowing them to pass the Defer offscreen images audit.

Words of advice

This script aims to provide a reasonable level of compatibility down to IE 11, but as stated previously, you will need to polyfill for yall.js to work in that browser. If you don’t polyfill , non-supporting browsers won’t throw an error, they’ll fail silently. However, features that are natively available in at least IE 11 (such as and will not be checked for, and will throw errors if they are not available. For example, because is not available in IE 11, it will be checked for. If it doesn’t exist, it will simply not be used. Polyfill it if you need it.

In the case of , avoid lazy loading a placeholder with the attribute for autoplaying videos and just use . On the other hand, do consider lazy loading a placeholder image with for non-autoplaying videos. Or you can opt not to use a image. Your website, your call.

Also, do not lazy load resources that are likely to near the top of the page—or «above the fold», as it were. Doing so is an anti-pattern in that those resources will not begin loading until yall.js has been loaded, which may take much longer than if those resources were loaded normally.

😋 Tips & tricks

Occupy space and avoid content reflow

It’s a good idea to make sure that your lazy images occupy some space even before they are loaded, otherwise the elements will be shrinked to zero-height, causing your layout to reflow and making lazyload inefficient.

Vertical padding trick

<div class="image-wrapper">
  <img class="lazy image" alt="An image" data-src="lazy.jpg" />
</div>
.image-wrapper {
  width: 100%;
  height: ;
  padding-bottom: 150%;
  /*  image height / width * 100% */
  position: relative;
}
.image {
  width: 100%;
  height: auto;
  position: absolute;
}

Inline SVG

If you can’t use the vertical padding trick for some reason, the best option is to use an SVG placeholder of the same ratio of the lazy images.

<img
  src="data:image/svg+xml,%3Csvg 
    xmlns='http://www.w3.org/2000/svg' 
    viewBox='0 0 3 2'%3E%3C/svg%3E"
  data-src="//picsum.photos/900/600"
  alt="Lazy loading test image"
/>

Alternatively (but less efficiently) you can use a tiny, scaled-down version of your images as a placeholder, stretching them to the final size of the images, and obtain a blur-up effect when the full images load.

Using a placeholder image will also make sure that browsers don’t show your content instead of the images before the lazy-loading starts.

Оцените статью
Рейтинг автора
5
Материал подготовил
Андрей Измаилов
Наш эксперт
Написано статей
116
Добавить комментарий