Ленивая загрузка изображений

? API

lazyLoad

Type:

Example:

The image to be lazy loaded. This image will replace the default image ().

<img ="'https://www.placecage.com/1000/1000'" ="'https://hd.unsplash.com/photo-1431400445088-1750c997c6b5'" />

defaultImage (optional)

Type:

Example:

Path to default image. This image will be loaded right away.

You can also use attribute for img tag to define default image:

or property for non-image tags:

errorImage (optional)

Type:

Example:

An image to be loaded if failing to load . Will load the default image () if absent.

<img ="someDefaultImage" ="imageToLazyLoad" ="imageToShowOnError" />

offset (optional)

Type:

Example:

Default:

Number of px a image should be loaded before it is in view port

<img ="someDefaultImage" ="imageToLazyLoad" offset="100" />

scrollTarget (optional)

Type:

Example:

Default:

You will need to set this property if you are using a scroll container and do not propagate the scroll event to window.

customObservable (optional)

Type:

Example:

You can pass your own observable if you need more control over the flow. Can be useful if integrating with other frameworks like ionic. See for more information.

useSrcset (optional)

Type:

Example:

You can set this to if you need to lazy load images with attribute, instead of . tags are set to use by default, so you don’t need to set this option additionaly.

Type:

Example:

type:

Exaple:

See for more information.

Events

onStateChange (optional)

Type:

Example:

You can pass a callback function, which will be called when the image is getting into different state.

myCallbackFunction(event: StateChange) {
  switch (event.reason) {
    case 'setup':
      // The lib has been instantiated but we have not done anything yet.
      break;
    case 'observer-emit':
      // The image observer (intersection/scroll/custom observer) has emit a value so we
      // should check if the image is in the viewport.
      // `event.data` is the event in this case.
      break;
    case 'start-loading':
      // The image is in the viewport so the image will start loading
      break;
    case 'mount-image':
      // The image has been loaded successfully so lets put it into the DOM
      break;
    case 'loading-succeeded':
      // The image has successfully been loaded and placed into the DOM
      break;
    case 'loading-failed':
      // The image could not be loaded for some reason.
      // `event.data` is the error in this case
      break;
    case 'finally':
      // The last event before cleaning up
      break;
  }
}

? 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.

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

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

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

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

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

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

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

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>

Installation

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.

Преимущества отложенной загрузки изображений

Основные преимущества ленивой загрузки разбиты на две области…

Ускорьте загрузку вашей страницы

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

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

Это подводит меня к следующему пункту …

Сохранить пропускную способность ваших пользователей

Не все используют неограниченную пропускную способность. Для людей, которые ограничены, скажем, мобильными тарифными планами 3G (или просто ужасными интернет-провайдерами), вы можете сделать им одолжение, лениво загружая ваши изображения. Им нужно будет использовать данные только для изображений, которые они на самом деле видят.

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

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

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

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

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

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

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

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

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

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

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

Lazy Loader – лучший плагин для реализации Lazy Load изображениям в CMS WordPress

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

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

Ленивые загрузки (без необходимости каких-либо модификаций вручную):

• Изображения, вставленные через img или picture в сообщениях, страницах, пользовательских типах сообщений, текстовых виджетах,…
• Lazy Load для миниатюр.
• Поддерживает фреймы. *
• Видео элементы. *
• Аудио элементы. *

Плагин имеет свои настройки в разделе «Настройки» -> « Медиа » -> « Параметры Lazy Loader » в которых Вы можете настроить:

• Классы присвоенные изображениям которые не нужно загружать отложено.
• Включить отложенную загрузку для iFrames.
• Включите плагин lazysizes unveilhooks, который добавляет поддержку для большего количества элементов, например, видео и аудио элементов для Lazy Load. *
• Включить отложенную загрузку для аудио элементов.
• Включите плагин lazysizes aspectratio . Этот плагин рассчитывает необходимое пространство для изображений до их загрузки. Это позволяет избежать скачков содержимого при загрузке изображений и обеспечивает ленивую загрузку для изображений который находятся в сетке постов.
• Показать загрузочный счетчик.
• Расширение unveilhooks lazysizes поддерживает больше, чем видео и аудио элементы, но вам нужно вручную изменить разметку, чтобы использовать его для:
• Фоновые изображения.
• Сценарии.
• Стили.

Плагин добавляет noscript элемент как запасной вариант для браузеров у которых отключен JavaScript.

Автоматическая модификация разметки изображения не работает для изображений, добавленных с использованием wp_get_attachment_image(), поскольку не может быть обработана noscript.

Вы можете отключить отложенную загрузку для элементов с определенными классами CSS, определив их с помощью настроек плагина ( Настройки › Медиа › Параметры Lazy Loader ). Или используйте атрибут data-no-lazyload.

Описание

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
• Скрыть элементы управления плеера Youtube
• 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

Будущие возможности:

• 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.

Зачем откладывать загрузку картинок?

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

Это дает два основных преимущества.

1. Оптимизация производительности

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

2. Экономия трафика

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

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

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 с помощью плагинов довольно легко, выбирайте, какой вам подойдет лучше и вперед, покорять вершины скорости загрузки сайта!

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

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

JavaScript

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

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

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

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

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

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

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

Usage

First of all it’s necessary to load jQuery and Lazy Load XT script. There are two versions of Lazy Load XT:

1. , standard version for lazy loading of images only.

2. , version with included video addon for lazy loading of both images and videos.

To make media elements (, , , ) to be lazy loaded, rename attribute to .
It is highly recommended to set and attributes. Optionally you can add a placeholder to bypass
HTML validators:

<script src="jquery.js"></script>
<script src="jquery.lazyloadxt.js"></script>

<img data-src="lazy.jpg" width="100" height="100">

PS. In directory you can found , it is initial LazyLoadXT version of minimal size
with excluded support of on* handlers, lazy* events, option and addons.

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.