Отложенная загрузка изображений wordpress

Constructor Options

key description default options
proportion of pre-loading height
src of the image upon load fail
src of the image while loading
attempts count
events that you want vue listen for
dynamically modify the attribute of element
the image’s listener filter
lazyload component
trigger the dom event
throttle wait
use IntersectionObserver
IntersectionObserver options { rootMargin: ‘0px’, threshold: 0.1 }
do not print debug info

You can configure which events you want vue-lazyload by passing in an array of listener names.

Vue.use(VueLazyload,{  preLoad1.3,  error'dist/error.png','dist/loading.gif',  attempt1,  listenEvents'scroll'})

This is useful if you are having trouble with this plugin resetting itself to loading when you have certain animations and transitions taking place

dynamically modify the src of image


Vue.use(vueLazy,{    filter{progressive(listener,options){constisCDN=qiniudn.comif(isCDN.test(listener.src)){listener.el.setAttribute('lazy-progressive','true')listener.=listener.src+'?imageView2/1/w/10/h/10'}},webp(listener,options){if(!options.supportWebp)returnconstisCDN=qiniudn.comif(isCDN.test(listener.src)){listener.src+='?imageView2/2/format/webp'}}}})
Vue.use(vueLazy,{    adapter{loaded({ bindType, el, naturalHeight, naturalWidth, $parent, src,, error, Init }){LoadedHandler(el)},(listender,Init){console.log('')},error(listender,Init){console.log('error')}}})
Vue.use(vueLazy,{  observertrue,  observerOptions{    rootMargin'0px',    threshold.1}})
Vue.use(VueLazyload,{  lazyComponenttrue});
<lazy-component @show="handler"><imgclass="mini-cover"src="img.src"width="100%"height="400"></lazy-component><script>{...    methods{handler(component){console.log('this component is showing')}}}</script>

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

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

Опции

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

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 мс.

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

Configuration Parameters

The following configurations is available by default:

Name Type Default Description
name string ‘lazy’ Internal name, used for namespaces and bindings.
chainable boolean true By default Lazy is chainable and will return all elements. If set to Lazy will return the created plugin instance itself for further use.
autoDestroy boolean true Will automatically destroy the instance when no further elements are available to handle.
bind string ‘load’ If set to ‘ Lazy starts working directly after page load. If you want to use Lazy on own events set it to ‘.
threshold integer 500 Amount of pixels below the viewport, in which all images gets loaded before the user sees them.
visibleOnly boolean false Determine if only visible elements should be load.
appendScroll integer window An element to listen on for scroll events, useful when images are stored in a container.
scrollDirection string ‘both’ Determines the handles scroll direction. Possible values are , and .
imageBase string null If defined this will be used as base path for all images loaded by this instance.
defaultImage string blank image Base64 image string, set as default image source for every image without a predefined source attribute.
placeholder string null Base64 image string, set a background on every element as loading placeholder.
delay integer -1 If you want to load all elements at once after page load, then you can specify a delay time in milliseconds.
combined boolean false With this parameter, Lazy will combine the event driven and delayed element loading.
attributes
attribute string ‘data-src’ Name of the image tag attribute, where the image path is stored.
srcsetAttribute string ‘data-srcset’ Name of the image tag attribute, where the source set is stored.
sizesAttribute string ‘data-sizes’ Name of the image tag attribute, where the size definition for source set is stored.
retinaAttribute string ‘data-retina’ Name of the image tag attribute, where the path for optional retina image is stored.
loaderAttribute string ‘data-loader’ Name or the element attribute, where the identifier of the plugin or customer loader is sored.
imageBaseAttribute string ‘data-imagebase’ Name ot the image tag element, where the specific image base is stored. This will overwrite the global config.
removeAttribute boolean true Determine if the attribute should be removed from the element after loading.
handledName string ‘handled’ Name of the element tag data attribute, to determine if element is already handled.
loadedName string ‘loaded’ Name of the element tag data attribute, to determine if element is already loaded.
effect
effect string ‘show’ Function name of the effect you want to use to show the loaded images, like or .
effectTime integer Time in milliseconds the effect should use to view the image.
throttle
enableThrottle boolean true Throttle down the loading calls on scrolling event.
throttle integer 250 Time in milliseconds the throttle will use to limit the loading calls.
callbacks
beforeLoad function undefined Callback function, which will be called before the element gets loaded. Has current element and response function as parameters. is the current Lazy instance.
afterLoad function undefined Callback function, which will be called after the element was loaded. Has current element and response function as parameters. is the current Lazy instance.
onError function undefined Callback function, which will be called if the element could not be loaded. Has current element and response function as parameters. is the current Lazy instance.
onFinishedAll function undefined Callback function, which will be called after all elements was loaded or returned an error. The callback has no parameters. is the current Lazy instance.

Props

Type: Node Default: undefined

NOTICE Only one child is allowed to be passed.

Type: String/DOM node Default: undefined

Pass a query selector string or DOM node. LazyLoad will attach to the window object’s scroll events if no container is passed.

Type: Number/String Default: undefined


In the first round of render, LazyLoad will render a placeholder for your component if no placeholder is provided and measure if this component is visible. Set properly will make LazyLoad calculate more precisely. The value can be number or string like . You can also use css to set the height of the placeholder instead of using .

Type: Bool Default: false

Once the lazy loaded component is loaded, do not detect scroll/resize event anymore. Useful for images or simple components.

Type: Number/Array(Number) Default: 0

Say if you want to preload a component even if it’s 100px below the viewport (user have to scroll 100px more to see this component), you can set props to . On the other hand, if you want to delay loading a component even if it’s top edge has already appeared at viewport, set to negative number.

Library supports horizontal lazy load out of the box. So when you provide this prop with number like it will automatically set left edge offset to and top edge to ;

If you provide this prop with array like , it will set left edge offset to and top offset to .

Type: Bool Default: true

Listen and react to scroll event.

Type: Bool Default: false

Respond to event, set it to if you do need LazyLoad listen resize event.

Type: Bool Default: false

If lazy loading components inside a overflow container, set this to . Also make sure a property other than has been set to your overflow container.

Type: Any Default: undefined

Specify a placeholder for your lazy loaded component.

If you provide your own placeholder, do remember add appropriate or to your placeholder element for better lazyload performance.

Type: Bool Default: false

The lazy loaded component is unmounted and replaced by the placeholder when it is no longer visible in the viewport.

Type: Bool / Number Default: undefined

If you provide a number, that will be how many to wait; if you provide , the wait time defaults to .

NOTICE Set / to all lazy loaded components unanimously, if you don’t, the first occurrence is respected.

Type: String Default:

While rendering, Lazyload will add some elements to the component tree in addition to the wrapped component children.

The prop allows the user to supply their own custom class prefix to help: # Avoid class conflicts on an implementing app # Allow easier custom styling

These being: # A wrapper div, which is present at all times (default )

DEPRECATED NOTICE This props is not supported anymore, try set for lazy loading in overflow containers.

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

Скрытые изображения — это картинки, которые находятся за пределами видимости веб-страницы (viewport), не прибегая к прокрутке. То есть те картинки, которые нам еще предстоит посмотреть, когда мы будем прокручивать страницу вниз или вверх. Отложенную загрузку еще называют ленивой загрузкой изображений (lazy load images).


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

Все эти действия сводятся к оптимизации сайта, то есть на ускорение загрузки отдельных страниц сайта. Этот фактор учитывается при тестировании сайта в сервисе pageSpeed Insights от гугла.

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

CDN

<scriptsrc="https://unpkg.com/vue-lazyload/vue-lazyload.js"><script><script>Vue.use(VueLazyload)...</script>

main.js:

importVuefrom'vue'importAppfrom'./App.vue'importVueLazyloadfrom'vue-lazyload'Vue.use(VueLazyload)Vue.use(VueLazyload,{  preLoad1.3,  error'dist/error.png','dist/loading.gif',  attempt1})newVue({  el'body',  components{    App}})

template:

<ul><liv-for="img in list"><imgv-lazy="img.src"></li></ul>

use work with raw HTML

<divv-lazy-container="{ selector: 'img' }"><imgdata-src="//domain.com/img1.jpg"><imgdata-src="//domain.com/img2.jpg"><imgdata-src="//domain.com/img3.jpg"></div>

custom and placeholder image

<divv-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }"><imgdata-src="//domain.com/img1.jpg"><imgdata-src="//domain.com/img2.jpg"><imgdata-src="//domain.com/img3.jpg"></div>
<divv-lazy-container="{ selector: 'img' }"><imgdata-src="//domain.com/img1.jpg"data-error="xxx.jpg"><imgdata-src="//domain.com/img2.jpg"data-loading="xxx.jpg"><imgdata-src="//domain.com/img3.jpg"></div>

Cookbook

<imgclass="lazyload"src="thumbnail.jpg"data-src="original.jpg"width="1024"height="768" />
<divclass="lazyload"style="background-image: url('thumbnail.jpg')"data-src="original.jpg">
<imgclass="lazyload"src="thumbnail.jpg"data-src="large.jpg"data-srcset="small.jpg 480w, medium.jpg 640w, large.jpg 1024w"width="1024"height="768" />
<imgclass="lazyload"src="thumbnail.jpg"data-src="normal.jpg"data-srcset="normal.jpg 1x, retina.jpg 2x"width="1024"height="768" />

To reduce the amount of request you can use data uri images as the placeholder.

<imgsrc="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs="data-src="original.jpg"width="1024"height="768" />

😋 Tips & tricks

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.

<divclass="image-wrapper"><imgclass="lazy image"alt="An image"data-src="lazy.jpg" /></div>
.image-wrapper{width100%;height;padding-bottom150%;positionrelative;}.image{width100%;heightauto;positionabsolute;}

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.

<imgsrc="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.

Features

  • Includes two components ( and ) and a HOC () which adds scroll position tracking to any component you wish.
  • Handles scroll events, resize events and re-renders that might change the position of the components. And, of course, above-the-fold on initial render.
  • Placeholder by default with the same size of the image/component.
  • A custom placeholder component or image can be specified.
  • Built-in on-visible effects (blur, black and white and opacity transitions).
  • threshold is set to 100px by default and can be modified.
  • and events.
  • and included by default and configurable.
  • Uses IntersectionObserver for browsers that support it.
  • Server Side Rendering (SSR) compatible.

😯 Notable features

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.

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.

LazyLoad doesn’t hide your images from search engines, even if you don’t specify any initial for your image.

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.

LazyLoad optimizes for slow connections by cancelling the download of images when they exit the viewport.

LazyLoad supports responsive images, both via the & attributes and via the tag.

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

What makes lazysizes so awesome:

lazysizes is different than other lazy image loaders.

  1. Future-proof: It directly includes standard responsive image support ( and )
  2. Separation of concerns: For responsive image support it adds an automatic calculation as also alias names for media queries feature. There is also no JS change needed if you add a scrollable container with CSS (overflow: auto) or create a mega menu containing images.
  3. Performance: It’s based on highly efficient, best practice code (runtime and network) to work jank-free at 60fps and can be used with hundreds of images/iframes on CSS and JS-heavy pages or webapps.
  4. Intelligent prefetch/Intelligent resource prioritization: lazysizes prefetches/preloads near the view assets to improve user experience, but only while the browser network is idling (see also , and options). This way in view elements are loaded faster and near of view images are preloaded lazily before they come into view.
  5. Lightweight, but mature solution: lazysizes has the right balance between a lightweight and a fast, reliable solution
  6. SEO improved: lazysizes does not hide images/assets from Google. No matter what markup pattern you use. Google doesn’t scroll/interact with your website. lazysizes detects, whether the user agent is capable to scroll and if not, reveals all images instantly.

Why lazysizes

In the past, I often struggled using lazy image loaders, because the «main check function» is called repeatedly and with a high frequency. Which makes it hard to fulfill two purposes runtime and memory efficiency. And looking into the source code of most so called lazy loaders often also unveils lazy developers…

But in a world of responsive retina optimized images on the one hand and JS widgets like carousels or tabs (a lot of initially hidden images) on the other hand lazy loading images becomes more and more important, so I created this project.

lazysizes is different:

Due to the fact, that it is designed to be invoked with a high frequency and therefore works highly efficient, it was possible to hook into all kinds of events as a mutationobserver meaning this lazyloader works as a simple drop in solution — you simply write/render your markup and no matter whether the element was added by AJAX or revealed by a JS or CSS animation it will be picked up by lazysizes.

<imgdata-sizes="auto"data-srcset="image2.jpg 300w,    image3.jpg 600w,    image4.jpg 900w"data-src="image3.jpg"class="lazyload" /><imgdata-src="image.jpg"class="lazyload" />

С этим читают