Пять плагинов lazy load для предзагрузки изображений

Мы собрали ТОП лучших lazy-load плагинов на JavaScript, которые заставляют Ваши изображения «лениво» подгружаться по мере необходимости.

Что же такое lazy load?

Начнем с того, что отношения с любым ресурсом состоит из двух этапов:

1. Подключение или инициализация объекта.
2. Использование или отображение объекта.

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

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

Как создать lazy load для изображений?

На сегодняшний день создано достаточное количество библиотек, которые позволяют с легкостью создать «ленивую загрузку» картинок. Какие-то из них менее функциональны, а какие-то предлагают целый ряд манипуляций с графическими элементами. Последовательность приведенных плагинов оценивается по популярности.

1. blazy.js – легковесная JS-библиотека для создания lazy loading изображений. Работает на все современных браузерах, а также, включая IE7+. Не использует зависимости.

Формат изображения:

<img src=»placeholder-image.jpg» data-src=»image.jpg» data-src-small=»small-image.jpg» alt=»Image description» />

<img src=»placeholder-image.jpg» data-src=»image.jpg» data-src-small=»small-image.jpg» alt=»Image description» />

Демо: http://dinbror.dk/blazy/

Источник: https://github.com/dinbror/blazy
Скачать: https://github.com/dinbror/blazy/archive/master.zip

2. lazysizes.js – плагин JavaScript с высокой производительность и дружественным SEO. Применяется также и к видео-элементам. Срабатывает автоматически и отлично взаимодействует с пользователем. Не использует зависимости.

Формат изображения:

<img data-sizes=»auto» data-src=»image2.jpg» data-srcset=»image1.jpg 300w, image2.jpg 600w, image3.jpg 900w» />

<img data-sizes=»auto» data-src=»image2.jpg» data-srcset=»image1.jpg 300w, image2.jpg 600w, image3.jpg 900w» />

Демо: http://afarkas.github.io/lazysizes/#examples
Источник: https://github.com/aFarkas/lazysizes

Скачать: https://github.com/aFarkas/lazysizes/archive/gh-pages.zip

3. responsivelyLazy.js – еще один неплохой lazy load-плагин для отзывчивых изображений. Может работать с ссылками в формате base64. Не использует зависимостей. Может использовать ленивую подгрузку и через src.

Формат изображения:

<img src=»blank.gif» data-src=»image.jpg» />

<img src=»blank.gif» data-src=»image.jpg» />

Демо: https://ivopetkov.com/b/lazy-load-responsive-images/
Источник: https://github.com/ivopetkov/responsively-lazy
Скачать: https://github.com/ivopetkov/responsively-lazy/archive/master.zip

4. lazyload.js – ленивый загрузчик изображений, видео, фреймов, да и вообще, любых элементов с атрибутом

src, пока они будут доступны для скрипта. Без зависимостей.

Формат изображения:

<img data-src=»real/image/src.jpg» src=»data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==» onload=»lzld(this)»>

<img data-src=»real/image/src.jpg» src=»data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==» onload=»lzld(this)»>

Демо: https://vvo.github.io/lazyload/
Источник: https://github.com/vvo/lazyload
Скачать: https://github.com/vvo/lazyload/archive/master.zip

5. jquery.lazy.js – ну и куда же без плагина на jQuery… Легкий, быстрый, многофункциональный, мощный и высоко настраиваемый с задержкой подгрузки изображения и бекграундов. Lazy load jQuery:

Формат изображения:

<img data-src=»path/to/image_to_load.jpg» src=»» />

<img data-src=»path/to/image_to_load.jpg» src=»» />

Демо: http://jquery.eisbehr.de/lazy/
Источник: https://github.com/eisbehr-/jquery.lazy
Скачать: https://github.com/eisbehr-/jquery.lazy/archive/master.zip

---

Вот такой получился у нас список из популярных lazy load-плагинов для изображений, видео и фреймов. Рекомендовать какой-то конкретный – означает сделать ошибку. Каждый из этих библиотек имеет свои особенности и недостатки. Использовать их необходимо в зависимости от свои потребностей и проектов.

Lazy Load Optimizer — Плагин для WordPress

1.4.5

Release Date: Jul 12, 2019

1.4.4

Release Date: Jun 29, 2019

• Improved Lazy Load styles

1.4.3

Release Date: Jun 25, 2019

• Improved Lazy Load styles

1.4.2

Release Date: Jun 07, 2019

1.4.1

Release Date: Jun 02, 2019

1.4.0

Release Date: Jun 01, 2019

• Update — lazysizes — v5.1.0
• Add — Lazyloading all template images

1.3.4

Release Date: May 04, 2019

1.3.3

Release Date: May 01, 2019

• Add — Exclude pages by Category, Tag
• Fix — bugs

1.3.2

Release Date: Apr 28, 2019

• Add — Exclude pages by Page Type

1.3.1

Release Date: Mar 10, 2019

• Add — Exclude pages by URI

1.3.0

Release Date: Feb 10, 2019

• Add — lazy loading for iframes

1.2.5

Release Date: Feb 10, 2019

1.2.4

Release Date: Feb 06, 2019

1.2.3

Release Date: Jan 22, 2019

• Add — CSS classes to exclude lazy load avatar

1.2.2

Release Date: Jan 04, 2019

• Add — CSS classes to exclude

1.2.1

Release Date: Dec 31, 2018

1.2.0

Release Date: Dec 31, 2018

• Add — Init setting
• Add — Exp. factor setting
• Fix — bug with Rss

1.1.9

Release Date: Dec 29, 2018

• Add — Expand setting
• Add — filter «lazy_load_styles»

1.1.8

Release Date: Dec 19, 2018

• Improved lazy load styles

1.1.7

Release Date: Dec 19, 2018

1.1.6

Release Date: Dec 17, 2018

• Add — Transparent background

1.1.5

Release Date: Dec 17, 2018

• Add — Translation-ready

1.1.4

Release Date: Dec 16, 2018

1.1.3

Release Date: Dec 16, 2018

• Добавление настройки размера спиннера

1.1.2

Release Date: Dec 16, 2018

• Lazysizes update
• Возможность добавить свой спиннер

1.1.1

Release Date: Dec 14, 2018

• Добавление настройки фона изображения

1.1

Release Date: Dec 13, 2018

1.0.6

Release Date: Dec 12, 2018

• Fix — Bug with data-src

1.0.5

Release Date: Dec 10, 2018

• Добавление поддержки WordPress 5.0

1.0.4

Release Date: Nov 26, 2018

• Added support Text Widget

1.0.3

Release Date: Nov 25, 2018

1.0.2

Release Date: Nov 23, 2018

• Fix bug with srcset in post content

1.0.1

Release Date: Nov 23, 2018

1.0

Release Date: Nov 23, 2018

Реализация Lazy Load на Jquery

Видеоурок: Lazy Load на Jquery

 

Что такое Lazy Load

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

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

 

 

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

Lazy Load стал неотъемлемой частью сайтов веб 2.0 не только потому что он облегчает вес страницы, но и еще потому что классно смотрится.

 

Реализация Lazy Load загрузки страницы

Для реализации Lazy Load на Jquery создайте такую структуру проекта:

 

Скачайте плагин jquery.lazyload.min.js и положите его в корень или создайте для нее отдельный каталог js и положите туда.

Затем создайте каталог img и поместите туда картинки, которые вы хотите загружать Lazy Load.

Создайте файл index.php и напишите следующий код:

 

В блок head мы помещаем библиотеку Jquery и плагин jquery Lazy Load. В моем примере, картинки называются 1.png, 2.png и так далее.

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

Пример вы можете скачать по этой ссылке. Далее у нас идет Javascript код работы плагина lazy load. documet.ready обозначает, что мы вызываем код только после того, как все DOM элементы загрузятся.

Это делается для того, чтобы не было ошибок выполнения кода. Затем мы применяем к изображениям с классом lazy эффект lazy load.

Настроить подгрузку изображений можно с разными эффектами. Я поставил стандартный fadeIn.

Вы можете поэкспериментировать и пробовать другие Jquery эффекты.

Поместите каталог с файлами на ваш веб-сервер и запустите проект в каталоге lazyload. Затем попробуйте прокрутить страницу вниз.

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

 

Вывод

Как вы видите, реализовать Lazy Load или ленивую подгрузку изображений с помощью Jquery очень просто.

Скачать готовый пример вы можете по ссылке.

В следующих статьях, мы поговорим о том, как реализовать Lazy Load эффект для div элементов.

Подписывайтесь на наш канал в YouTube и группу VK. Впереди у нас много интересного материала для веб-программистов.

---

---

Читайте также

---

Все материалы с сайта wh-db.com и ru.wh-db.com защищены авторским правом. Копирование, публикация, продажа и распространение материала строго запрещены.

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

Скорость загрузки является важным требованием к сайту как со стороны поисковиков, так и с точки зрения пользователей. Люди хотят быстро получать информацию, а не ждать несколько секунд пока отобразится страница. Именно поэтому разработчики пытаются всячески улучшить данный процесс: внедряют подборки рекомендаций как на mkels.com, экспериментируют с сервисами и CMS модулями.

Если говорить про картинки, то тут 2 варианта: оптимизация с помощью веб-решений или графических редакторов, а также ленивая загрузка изображений (англ. — Lazy Load). В WordPress для второго метода имеется целый ряд плагинов, которые сегодня рассмотрим. 

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

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

• браузер подгружает содержимое сайта без медиафайлов;
• с помощью некого JavaScript определяются какие картинки/видео должны выводиться изначально при запуске страницы;
• «дополнительная» материалы отображается при прокрутке, когда пользователь доходит до нужного контента.

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

По теме в сети была найдена интересная статья, где автор оценивал эффективность скриптов Lazy Load в WordPress. Для теста был взят максимально простой шаблон TwentySixteen. Некоторыми цифрами из заметки есть смысл поделиться. Во-первых, посмотрим как именно медиафайлы влияют на результат.

Сверху показаны данные обычной страницы без оптимизации, кэширования и тому подобных вещей. Снизу — она же, но с добавлением картинок / видео. Общий вес изменился с 115Кб до 1,7Мб — при этом скорость «уменьшилась» с 416мс до 1,28 секунды. Короче говоря, проблема имеет место быть.

Плагины ленивой загрузки в WordPress

Чтобы найти подходящие для задачи модули вводите фразу «lazy load» в Вордпресс репозитории. Жалко там нет сортировки, приходится вручную искать наиболее популярные плагины, хотя по данной нише их и не так много. Подобрал 8 решений, на которые следует обратить взор в первую очередь. Внимание(!) оценку эффективности отложенной загрузки картинок и некоторые технические детали рассмотрю ниже.

Lazy Load

Первый модуль основан на скрипте jQuery.sonar (автор Dave Artz, AOL), позволяющем определить какая картинка находится в видимости пользователя. Я использую именно его т.к. в описании сказано, что созданием занималась команда из Automattic (wordpress.com) и другие опытные программисты. К тому же здесь больше всего установок (90 тыс.), хотя он и обновлялся давненько + оценка лишь 4. По личному опыту все работает отлично.

BJ Lazy Load

Кроме картинок в постах плагин добавляет ленивую загрузку изображений из миниатюр, аватаров пользователей + iframes (включая популярные видеохостинги YouTube / Vimeo). Поддерживается контент в виджетах — особенно актуально после добавления в WP виджетов вставки видео/графики. Пользователи без Javascript будут видеть обычную неоптимизированную страницу. Нормально работает с CDN. Загрузок — 50 тыс, оценка 4, обновление было не так давно.

a3 Lazy Load

Одно из самых «новых» решений — апдейт 2 месяца назад + поддержка самой последней версии WordPress. Скачивания — более 10тысяч, оценка 4,5. Отличительной его особенностью есть целый блок настроек в админке, где вы можете вручную выбрать какие типы объектов будут обработаны: миниатюры, виджеты, граватары и т.п.

Аналогичные настройки есть для видео и iframe контента (встроенного кода). Также модуль совместим с CDN, AMP, WooCommerce, WPTouch, WP Super Cache и W3 Total Cache. По ощущениям это самый продвинутый вариант из всех — тут реализована не просто отложенная загрузка картинок, а предоставляется целый комплекс функций по оптимизации.

Rocket Lazy Load

Собственно модуль делает то же, что и остальные — улучшает время загрузки и сокращает число HTTP запросов. В описании сказано, что он не использует тяжелые библиотеки по типу jQuery, а скрипт весит 6Кб. Для старта не нужны дополнительные настройки — просто устанавливаете и активируете.

Rocket Lazy Load работает в том числе с аватарами и превью, хотя в отзывах были замечания, что могут возникать ошибки с дизайном — проверяйте работоспособность сайта после внедрения. А еще лучше использовать пример кода с репозитория, позволяющий отключить вызов решения на некоторых ненужных страницах (оставить только single).

Crazy Lazy

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

Скачиваний — 5000, оценка — 4,5. В описании нет информации, что аватары и виджеты также  «подхватываются» автоматические, уточните при тестировании. С другой стороны, если у вас, например, для комментариев используется сторонний скрипт, то это нормально.

Lazy Load XT

Авторы охарактеризовали свое творение как самый быстрый, легкий и производительный метод отложенной загрузки в Вордпресс. Лучше бы они, конечно, детальнее рассказали о списке настроек, которые получит пользователь после установки. Здесь есть: выбор типов графики для обработки, использование минифицированных версий скриптов, а также перемещение их в футер, добавление эффектов прелоадеру и некоторые другие аддоны. Таким образом, модуль позволяет дополнительно реализовать некоторые SEO рекомендации для WordPress, что весьма удобно.

Плюсом Lazy Load XT можно назвать использование прозрачной картинки-загрузчика, поэтому на странице пользователи не увидят «белых блоков» вместо подгружаемых изображений. Также здесь есть поддержка фоновой графики при желании (но это уже выходит за рамки контента, и нужно быть внимательным).

Loading Page with Loading Screen

Напоследок парочка нестандартных решений. Данный плагин кроме функции Lazy Load в Вордпресс добавляет парочку интересный штук. Во время генерации контента появляется полупрозрачный экран загрузки, где будет отображен процент завершения процесса. Все это идет с анимацией и разными настройками: цвет/изображение для фона, срабатывание один раз на страницу/сессию, исключения и т.п. В целом, воспринимается больше как WOW эффект, но после нескольких раз может начать раздражать.

Lazy Load for Videos

Модуль заменяет встроенные видео с Vimeo и Youtube на кликабельные изображения. Загрузка ролика начнется только после клина пользователя на превью. Используется jQuery поэтому никаких дополнительных скриптов не нужно. В принципе, у него есть достаточно много функций, он активно развивается + показатели скачивания (6тыс.) и оценка (4,5) весьма неплохие. В предыдущих модулях вы могли видеть также поддержку видеоконтента и iframes, но здесь гораздо больше разных опций. Думаю, Lazy Load for Videos идеально подойдет для видео-сервисов с подборками клипов, трейлеров, смешных роликов и т.п.

Эффективность отложенной загрузки

Как я уже сказал, работаю с модулем Lazy Load — проблем пока не возникает, картинки грузятся только при прокрутке, причем достаточно быстро. Лично я никаких специальных замеров не проводил, ориентируюсь исключительно на визуальный эффект, который наблюдаю «до» и «после».

Однако автор статьи, которую упоминал выше, проводил анализ результатов по трем разным плагинам, и вот что получилось:

Можно заметить, как ленивая загрузка изображений и контента с помощью a3 Lazy Load значительно отличается по показателям у других методов. Все дело в обработке картинок:

• По умолчанию WordPress передает браузеру все доступные значения размеров изображений, которые имеются. Тот в свою очередь загружает наименьшую версию, доступную для текущего размера окна.
• Модули BJ Lazy Load, Lazy Load XT подменяют базовую функцию системы и атрибуты в коде, что позволяет использовать полноценную версию картинки.
• Решение a3 Lazy Load полностью копирует логику Вордпресс — то есть считываются минимально возможные по объему файлы.

Не смотря на меньшее число запросов и итоговый вес в последнем варианте, BJ Lazy Load все равно оказывается быстрее. Дело в том, что плагин отправляет в браузер информацию вида data:image/gif, которая вынуждают его создавать gif файлы локально, а не скачивать с сервера (через HTTP запросы).

Однако тут есть один очень важный момент — отложенная загрузка изображений в BJ Lazy Load будет хорошо работать, если сами картинки были оптимизированы ранее. То есть, допустим, пользователь добавляет на сайт 10 фоток 3000х2000 пикселей — в таком случае вы рискуете получить глюк, когда при прокрутке страницы во время загрузки графики будут выводится белые непрозрачные блоки-прелоадеры.

Так не случится, если фон у вас белый изначально. В противном случае нужно будет добавить другой прелоадер (почти все модули позволяют это сделать). В Lazy Load XT даже предусмотрена прозрачная картинка для подобных целей.

Итого

Можно сделать следующие выводы:

• Если вы используете оптимизированные изображения через программы или Tinypng, то самый быстрый вариант BJ Lazy Load (при сравнении трех модулей).
• Когда фото вставляются на сайте «как есть» (с большим разрешением), оптимальнее будет решение a3 Lazy Load, которое кроме ленивой загрузки использует встроенную в WP логику работы с графикой.
• Могу также посоветовать плагин, которым пользуюсь я — Lazy Load. Каких-либо тестов не проводил, но там крутые разработчики и максимум скачиваний.
• Если будете пробовать другие решение, желательно проверять их эффективность.

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

Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!

Lazy Load — как настроить отложенную загрузку картинок и ускорить ваш сайт WordPress

Скорость – это ключ к успеху в интернете. Если вы хотите больше обсуждений, больше трафика, больше довольных пользователей, то стоит оптимизировать скорость загрузки вашего сайта WordPress. Но что, если вы уже используете CDN, и оптимизировали размер своих картинок? Как можно добиться ещё большей скорости?

Решением может стать отложенная загрузка изображений!

С отложенной загрузкой (lazy load) WordPress загружает изображения только тогда, когда пользователи прокрутили страницу до них. На сайтах с большим количеством изображений это может значительно ускорить загрузку страницы, поскольку будут загружаться только те фотографии, которые отображаются на экране до прокрутки страницы.

Смотрите также:

В этой статье мы обсудим достоинства и недостатки отложенной загрузки и покажем наилучшие плагины WordPress для Lazy Load.

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

Главные преимущества отложенной загрузки делятся на две категории.

1. Ускорение загрузки сайта

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

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

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

2. Экономия трафика пользователей

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

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

Недостатки отложенной загрузки изображений

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

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

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

Однако, если вы попытаетесь ранжировать изображения в чем-то типа Google Image Search, то вам не стоит забывать об этом.

И всегда помните – если вы хотите отложить загрузку всего контента (включая текст), то используйте инструмент Fetch as Googlebot, чтобы проверить, не вызовет ли это проблем у Google.

UX и отложенная загрузка

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

Как использовать Lazy Load на WordPress

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

Lazy Load

Наиболее популярным бесплатным плагином для реализации отложенной загрузки является Lazy Load.

Это простой плагин, который использует jQuery.sonar для загрузки изображений только тогда, когда они попадают в поле зрения пользователя. Просто загрузите его и нажмите Activate. Не требуется никаких настроек.

Rocket Lazy Load

Rocket Lazy Load – это лёгкий бесплатный плагин для реализации отложенной загрузки. Он занимает не более 2 KB и не использует библиотеки JavaScript.

Он работает с изображениями и миниатюрами в записях и виджетах. Как и Lazy Load, вам нужно просто установить плагин и нажать Activate.

Image Lazy Load

Image Lazy Load – это свободно распространяемый плагин, который использует библиотеку unveil.js для отложенной загрузки ваших изображений. Он обрабатывает изображения на главной странице, в записях и пользовательских типах записей. И в отличии от Rocket Lazy Load, не откладывает загрузку виджетов.

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

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

BJ Lazy Load

BJ Lazy Load – это бесплатный плагин, который не использует внешние библиотеки JavaScript и насчитывает более 40,000 активных установок. Мы поместили его не сверху списка только потому, что он не обновлялся уже 11 месяцев.

Плагин загружает изображения, миниатюры, gravatar, iframe содержимое и видео с YouTube.

WordPress Advanced Image Lazy Load

Это премиум плагин, доступный на CodeCanyon. Вы получите поддержку всех изображений, независимо от их местонахождения: запись, страница, боковая панель, избранной или ещё где-то.

Он дружен с поисковыми системами, поэтому у вас не будет проблем с индексацией.

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

Плагин стоит $15.

JCH Optimize Pro

JCH Optimize Pro — это премиум версия бесплатного плагина JCH Optimize. К сожалению, для доступа к отложенной загрузке необходимо приобрести платную версию. Но вы также получаете ещё массу полезных функций:

• Минимизированные запросы HTTP
• Уменьшенный размер страниц
• Оптимизированные изображения
• Несколько небольших функций, как поддержка CDN

Если вы хотите получить полный комплекс услуг, то выбирайте JCH Optimize Pro. Его цена начинается от $29 за 6 месяцев пользования.

Бонус: Crazy Lazy

У Crazy Lazy около 3,000 активных установок, и он постоянно выпускает обновления. Это отличный бесплатный и лёгкий вариант для отложенной загрузки картинок на WordPress.

Итоги

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

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

Сейчас доступно огромное количество плагинов для этого. Просто не забывайте проверять ваш сайт на Fetch as Googlebot, чтобы убедиться в правильном индексировании.

Смотрите также:

Ленивая загрузка изображений WordPress (lazy load): лучшие плагины в 2019

Поделитесь с друзьями:

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

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

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

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

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

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

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

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

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

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

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

Поехали!

Lazy Load by WP Rocket

Lazy Load — Optimize Images

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

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

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

Smush

Smush — Compress, Optimize and Lazy Load Images

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

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

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

WordPress Infinite Scroll — Ajax Load More

WordPress Infinite Scroll — Ajax Load More

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

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

Lazy Load Optimizer

Lazy Load Optimizer

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

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

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

PageSpeed Ninja

PageSpeed Ninja

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

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

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

A3 Lazy Load

a3 Lazy Load

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

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

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

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

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

3.7 / 5 ( 4 голоса )