lazy loading что это
Lazy loading
Ленивая загрузка может происходить в разные моменты работы приложения, но, как правило, она запускается во время взаимодействия пользователя и системы, например, при скроллинге или навигации.
Обзор
Вместе с ростом web-приложений драматически вырос объем и размеры ресурсов, отправляемых клиентскому приложению. С 2011 по 2019 медианный рост размеров ресурсов вырос с
400KB для настольных компьютеров и с
350KB для мобильных. А размер изображений вырос с
900KB для настольных компьютеров и со
850KB для мобильных.
Стратегии
Ленивая загрузка (Lazy loading) может применяться к разным ресурсам и разными подходами.
Общий подход
Разделение кода (code splitting)
JavaScript, CSS и HTML могут быть разделены на небольшие части, называемые чанками (chunks). При первоначальной загрузке приложения вы можете отправлять не цельное приложение, а только необходимые части, например, только каркас разметки. Данные для заполнения этого каркаса могут быть подгружены позже, например, с помощью AJAX. Есть два вида разделения кода:
JavaScript
Указание типа «module»
Любой тег скрипта с type=»module» рассматривается как JavaScript module, а его загрузка откладывается по умолчанию.
По умолчанию CSS считается ресурсом, блокирующим рендеринг (render blocking). Это означает, что браузер не будет отображать контент до тех пор, пока не будет построена объектная модель CSS (CSSOM). Поэтому CSS-файл должен быть небольшим, чтобы он был доставлен так быстро, насколько это возможно. Рекомендуется использовать медиавыражения, для того чтобы вместо одного монолитного CSS-файла грузить специализированные.
Также в целях ускорения CSS можно применять оптимизации (CSS optimizations).
Шрифты
По умолчанию, загрузка шрифтов откладывается на тот момент, пока дерево рендера (render tree) не сформировано полностью. Это приводит к тому, что текст страницы может появиться не сразу.
Изображения
Очень часто веб-страницы содержат множество изображений, загрузка которых заметно нагружает канал передачи данных и увеличивает длительность загрузки. Подавляющая часть этих изображений находятся за видимой областью экрана и не являются необходимым (non-critical), а для взаимодействия с пользователем требуют действия (например, прокрутки до них).
Атрибут Loading
Атрибут loading элемента (или loading (en-US) атрибут для (en-US)) могут быть использованы, чтобы указать браузеру на необходимость отложить загрузку изображений / iframe до тех пор, пока пользователь не доскроллит до них.
Полифил
Для использованиях в браузерах, которые не поддерживают данную технологию, рекомендуется использовать полифил: loading-attribute-polyfill
Intersection Observer API
Intersection Observers позволяют вам узнать, как наблюдаемый вами элемент входит или выходит из зоны видимости браузера (viewport).
Lazy loading или «ленивая загрузка» для изображений
Скорость загрузки – ключевой аспект оптимизации сайта, в особенности под Google. Эта метрика влияет на:
Основная причина медленной загрузки страниц – большой размер изображений и видео. Google, посредством PageSpeed Insights, рекомендует несколько способов оптимизации медиафайлов: сжатие, кэширование и lazy loading или «ленивую загрузку». О последнем поговорим в нашей сегодняшней статье:
Что такое «ленивая загрузка»
Lazy loading – это метод оптимизации скорости загрузки медиафайлов, некритичных для отображения страницы или взаимодействия с пользователями. При «отложенной загрузке» изображения не будут загружаться, пока не понадобятся посетителю. В зависимости от настроек, они могут отображаться при скролле до определённой части страницы или нажатии пользователем на элемент.
«Отложенную загрузку» рекомендуется использовать для медиафайлов, которые находятся вне экрана.
Внеэкранные или закадровые элементы – это медиаконтент, который находится ниже той части страницы, которую просматривает пользователь, или, как определяет Web Tools, ниже сгиба.
Поскольку пользователи не видят закадровые изображения при начальной загрузке страницы, нет смысла подгружать их сразу. Кроме того, в таком случае увеличивается время загрузки для взаимодействия (Time to Interactive). Эта метрика сейчас имеет наибольший вес при оценке скорости загрузки на мобильных устройствах.
Для кого нужна «ленивая загрузка»
Рекомендуем использовать ленивую загрузку сайтам:
Почему следует внедрить lazy loading
Есть две весомые причины внедрить отложенную загрузку:
Виды отображения при «отложенной загрузке»
Есть 3 вида отображения контента при реализации lazy loading:
Скроллинг предусматривает, что медиаконтент подгружается только тогда, когда попадает в видимую зону или пользователь доскроллит до определённой части страницы, например, середины, предыдущего изображения и т. д. Такой метод используют на страницах СМИ с бесконечной лентой прокрутки, на листингах интернет-магазинов, страницах каталогов товаров и услуг.
Например, вот так выглядит страница https://unsplash.com/ при скролле листинга с фотографиями:
Однако меньше, чем за секунду, на место квадратов подгружаются фотографии в высоком качестве:
Ещё один вариант реализации: 
Пользователь видит картинку-заглушку, на место которой подставляются изображения.
При втором варианте реализации (клик) контент будет загружаться, когда пользователь перейдёт по ссылке, нажав «Подробнее» или на миниатюру. Так выглядит реализация на карточке товара интернет-центра бронирования:
До нажатия на миниатюру 
После 
Загрузка в фоновом режиме будет полезна только для тех медиафайлов, которые действительно необходимы пользователям для последующей работы. Например, образцы заполнения документов, чертежи. Обязательное условие такой загрузки – пользователь нажал на документ и оставил его открытым. Чтобы определить, нужна ли пользователю такая загрузка, нужно провести A/B тестирование на нескольких страницах и только после этого внедрять на всём сайте.
Как реализовать
Рекомендации Google по реализации lazy loading для картинок
Рекомендации Google для картинок зависят от способа реализации медиаконтента на сайте: встроенные или в CSS. Для встроенных в тег в Справке поисковой системы рекомендуется использовать:
Изображения на страницах также могут быть реализованы через CSS. В отличие от тегов, которые загружаются независимо от их видимости, загрузка изображений в CSS выполняется с большим количеством предположений. Прежде чем запрашивать внешние ресурсы, браузер проверяет, как CSS применяется к документу.
Это может быть использовано для отсрочки загрузки изображений в CSS. С помощью JavaScript можно определить, когда элемент находится в области просмотра, и загрузить фоновое изображение.
Готовые решения
В сети есть 5 готовых решений реализации «отложенной загрузки» для изображений:
Lazy loading от David Walsh
Элементы img, содержащие атрибуты data-src, скрыты в CSS. После того как картинки будут загружены, они плавно отображаются с применением переходов:
Затем JavaScript передаёт всем тегам img атрибут src, которые в итоге получают значение атрибута data-src. После загрузки всех изображений, data-src убирается из img:
Загрузка с прогрессивным улучшением от Robin Osborne
Разработчик предлагает «ленивую загрузку» на основе прогрессивного улучшения. В его решении lazy loading на JS будет считаться улучшением для HTML и CSS.
При этом ленивая загрузка работает посредством скроллинга, а при реализации не нужно использовать фреймворки или плагины. При прогрессивном улучшении пользователь увидит изображение, даже если скрипт отключён или появилась ошибка, блокирующая его работу.
Плагин bLazy.js на простом JS
Стандартная реализация отложенной загрузки этим методом выглядит так:
Среди преимуществ скрипта: он мало весит, работает с несколькими изображениями одновременно, чтобы сэкономить трафик и уменьшить количество запросов на сервер. Также он поддерживает браузеры устаревших версий, в том числе IE 7 и 8 версии.
Плагин Lazy Load XT jQuery
Подойдёт для написания своего скрипта для «ленивой загрузки». Если нужно реализовать lazy loading только для картинок, рекомендуем воспользоваться упрощённой версией.
Для реализации «отложенной загрузки» с помощью этого плагина нужно добавить jQuery-библиотеку перед закрывающимся тегом и указать jquery.lazyloadxt.js.
Есть альтернативный вариант, который позволяет не использовать весь плагин. Это облегчённый скрипт jqlight.lazyloadxt.min.js:
Плагин активируется автоматически или в ручном режиме. В последнем случае нужно ввести:
Размытое изображение от Craig Buckler
Есть несколько вариантов реализации «ленивой загрузки» с эффектом размытости. Наиболее популярный и простой в реализации – Craig Buckler.
У техники высокая производительность: затрачивает немного больше 1 байта JS-кода и 463 байта CSS. Для работы не нужны дополнительные фреймворки или библиотеки. Есть прогрессивное улучшение для поддержки устаревших браузеров или подгрузки картинок при сломанном JavaScript.
Посмотреть код можно в репозитории на GitHub.
3 плагина для WordPress
BJ Lazy Load 
Количество установок: более 90 тыс.
Последнее обновление: год назад.
С помощью этого плагина можно отложить загрузку картинок в постах, изображений из миниатюр, фотографий пользователей. Контент будет подгружаться по мере приближения к окну браузера при прокрутке страницы.
Lazy Load by WP Rocket 
Количество установок: более 20 тыс.
Последнее обновление: 17 часов назад.
Плагин работает с миниатюрами, всеми изображениями. Подгружает контент только тогда, когда он становится видимым пользователю. Вес скрипта – 10 КБ. Не использует JavaScript библиотеку jQuery.
Loading Page with Loading Screen 
Количество установок: более 10 тыс.
Последнее обновление: 2 дня назад.
Бесплатный плагин, который выполняет предварительную загрузку изображения на сайт и отображает экран загрузки с процентом завершения. Как только всё загружено, экран пропадает.
Какие проблемы могут возникнуть при реализации
Если ленивая загрузка выполнена неправильно, техника может непреднамеренно скрыть контент от Google. Это приводит к тому, что медиаконтент не может участвовать в поиске по картинкам. Сейчас Google в своей Справке рассказал, что их бот может видеть такие элементы, однако просит проверять реализацию.
Как проверить, видит ли Googlebot изображение
В руководстве Google есть рекомендации о том, как убедиться, что ПС может индексировать контент, который грузится в технике «ленивой загрузки».
Для локального тестирования можно использовать скрипт Puppeteer. Чтобы проверить скрипт и запустить его, используйте следующие команды:
После запуска проверки посмотрите скриншоты, сделанные скриптом, и убедитесь, что они содержат весь контент, который должен проиндексировать Googlebot.
Заключение
Lazy loading – один из методов оптимизации загрузки сайта. Его реализация позволяет уменьшить время до первого отображения и взаимодействия пользователя со страницей. При «ленивой загрузке» посетитель сразу видит рабочий сайт, ему не приходится ждать, пока будут выполнены все элементы страницы.
Если у Вас возникли проблемы с оптимизацией, обращайтесь к нам!
Браузерная ленивая загрузка изображений (атрибут loading)
Поддержка встроенной ленивой загрузки изображений и iframe пришла в веб!
Начиная с Chrome 76 версии, вы можете использовать новый атрибут loading для ленивой загрузки ресурсов без необходимости писать для этого дополнительный код или использовать стороннюю JavaScript-библиотеку. Давайте рассмотрим детали.
Это видео демонстрирует пример этой функции:
Почему встроенная ленивая загрузка?
Согласно HTTPArchive, изображения являются наиболее востребованным типом ресурсов на большинстве сайтов и обычно отнимают больше пропускной способности канала, чем любые другие. На 90-м процентиле, сайты отправляют около 4.7 МБ изображений на десктопы и мобильные устройства. Достаточно много фотографий с кошками.
Встроенные iframe также используют много данных и могут вредить производительности страницы. Загрузка некритичных изображений и iframe только в тот момент, когда пользователь может увидеть их, улучшает скорость загрузки страницы, минимизирует нагрузку на пропускную способность канала пользователя и уменьшает использование памяти.
В данный момент существует два способа отложить загрузку изображений и фреймов, расположенных за пределами экрана:
Атрибут loading
Сегодня Chrome уже загружает изображения с разным приоритетом, в зависимости от того, где они расположены относительно области просмотра устройства. Изображения ниже области просмотра загружаются с меньшим приоритетом, но всё ещё загружаются, как можно быстрее.
Поддерживаемые значения атрибута loading :
Порог расстояния загрузки
Все изображения и фреймы, видимые на странице без необходимости прокрутки, загружаются стандартно. Те, которые располагаются ниже области просмотра устройства, загружаются только тогда, когда пользователь прокручивает до них.
Расстояние, при котором начинается загрузка, не фиксировано и изменяется в зависимости от нескольких факторов:
В Chrome 77 вы можете экспериментировать с этими различными пороговыми значениями путем замедления скорости соединения в DevTools. Во время этого вам потребуется переопределить эффективный тип соединения в браузере с помощью флага chrome://flags/#force-effective-connection-type.
Загрузка изображений
Атрибут loading влияет на фреймы иначе, чем на изображения, в зависимости от того, является ли фрейм скрытым (скрытые фреймы часто используются для задач аналитики или общения). Chrome использует следующие критерии, чтобы определить, является ли фрейм скрытым:
Есть ли планы расширить эту функцию?
Есть планы изменить режим отложенной загрузки браузера по умолчанию, чтобы автоматически отображать в таком режиме любые изображения и фреймы, загрузку которых можно отложить, если включен Lite mode в Chrome для Android.
Можно ли изменить расстояние до изображения или фрейма, при котором запускается отложенная загрузка?
Эти значения жестко закодированы и не могут быть изменены через API. Однако, они могут измениться в будущем, так как команда Chrome экспериментирует с разными пороговыми расстояниями и переменными.
Могут ли изображения, заданные через CSS-свойство background, получить атрибут loading?
Нет, в данный момент он может использоваться только тегами
Как работает атрибут loading с изображениями, которые находятся в области видимости, но не видны (например, карусель)?
В отложенном режиме загружаются только те изображения, которые находятся на определенном расстоянии от нижней грани области просмотра устройства. Все изображения выше области просмотра, независимо от того, видны они в данный момент, загружаются в обычном режиме.
Что, если я уже использую стороннюю библиотеку или скрипт для отложенной загрузки изображений или фреймов?
Атрибут loading не должен влиять на код, который в отложенном режиме загружает данные, но важно учитывать некоторые важные моменты:
Другие браузеры поддерживают встроенную отложенную загрузку?
Атрибут loading можно рассматривать, как прогрессивное улучшение. Браузеры, которые поддерживают его, могут загружать изображения и фреймы в отложенном режиме. Те, что не поддерживают — пока что загружают изображения как обычно. С точки зрения кроссбраузерной поддержки, атрибут loading поддерживается в Chrome 76 и любых браузерах, основанных на базе Chromium 76. Также существует открытый баг про реализацию данной функции в Firefox.
Похожее API было предложено и использовалось в IE и Edge, но оно было сфокусировано на понижении приоритетов загрузки вместо полного её откладывания.
Как поступить с браузерами, которые еще не поддерживают встроенную отложенную загрузку?
Создайте полифил или используйте стороннюю библиотеку, чтобы загружать изображения на сайте в отложенном режиме. Свойство loading может быть использовано для определения, поддерживается ли функционал в браузере:
Демонстрация работы. Испробуйте это в таким браузерах, как Firefox или Safari, чтобы увидеть фолбек в действии.
Библиотека lazysizes также обеспечивает плагин встроенной загрузки, который использует встроенную отложенную загрузку, когда это возможно, и задействует функционал библиотеки, когда в этом есть потребность.
Как отложенная встроенная загрузка влияет на рекламу на странице?
Вся реклама, представленная в виде изображений или фреймов, также загружается в отложенном режиме, как любые другие изображения или фреймы.
Как изображения обрабатываются, если веб-страницу распечатать?
Хотя функционала нет в Chrome 76, существует открытая проблема, обеспечивающая немедленную загрузку всех изображений и фреймов при печати страницы.
Заключение
Использование встроенной поддержки ленивой загрузки изображений и фреймов может существенно облегчить повышение производительности веб-страниц.
Если замечаете любое необычное поведение при включении этой функции в Chrome, сообщите об ошибке.
Lazy load или ленивая загрузка изображений – что это, и как ее сделать на сайте
Доброго времени суток, дорогие друзья!
В этой статье я расскажу про ленивую загрузку изображений (lazy load), а также о том, как ее можно реализовать на сайте с WordPress. Помимо этого, мы обсудим значение ленивой загрузки для поисковой оптимизации.
Я расскажу о том, почему этот функционал должен присутствовать на вашем ресурсе и какие плюсы и минусы он в себе несет. В рамках материала мы будем рассматривать преимущественно WordPress, поэтому я расскажу вам о плагинах и других решениях, которые могут помочь вам в создании lazy load. Итак, давайте начинать!
Что такое ленивая загрузка изображений
Ленивая загрузка изображений подразумевает, что они будут загружаться только при необходимости. Допустим, если на сайте есть длинная статья, внутри которой есть фотографии, они не будут загружаться все сразу, как это бывает обычно. Вместо этого, все картинки будут подгружаться асинхронно – это значит независимо от остальных фрагментов ресурса.
На деле это выглядит так. Сайт открывается, и если это статья, то сначала появляется текст, а уже после изображения, которые находятся в поле зрения пользователя. Если пользователь начинает прокручивать страницу вниз, те картинки, которые находились далее, тоже начинают загружаться. Если же он не делает этого, предпочитая просматривать только верхнюю часть материала, те фото не будут загружаться.
Благодаря этому скорость открытия страницы сайта увеличивается. В стандартных ситуациях браузер загружает абсолютно все картинки, которые есть на странице. Они будут весить довольно много, поэтому в некоторых случаях от подобного страдает скорость отображения.
Если на таком сайте активировать lazy load, то скорость отображения будет намного выше. Изначально будет загружаться только текстовой контент, а вот уже изображения начнут грузиться в процессе изучения сайта пользователем.
Подобное решение очень ценится поисковыми системами, потому что скорость отображения – один из важнейших критериев качества ресурса. Если сайт грузится слишком медленно, то велика вероятность, что пользователи будут покидать его, так и не дождавшись окончательного отображения контента.
В случае с изображениями, особенно на тех проектах, где их очень много, это тоже актуально. Только представьте, что на странице есть несколько десятков фото в высоком разрешении. Каждое такое фото может весить несколько мегабайт, и людям с медленным интернетом будет очень сложно их все прогрузить.
А если они не смогут прогрузить графику, то и сама страница сайта не будет отображаться корректно. В таком случае пользователь просто предпочтет покинуть ресурс, потому что нет смысла ждать, возможно, в поисковой выдаче есть более быстрые сайты, на которых нет таких проблем.
Ленивая загрузка изображений позволит отобразить текстовый контент, поэтому пользователь не будет сразу покидать ресурс. Возможно, он заинтересуется и начнет изучать его. В процессе изучения текста подгрузятся и картинки, и вот уже перед пользователем будет полноценная статья. Он не покинет ресурс, и поисковые системы не будут считать это отказом. Именно поэтому lazy load – это функционал, который рекомендуется многими SEO-специалистами для коммерческих и информационных ресурсов.
То есть это помогает улучшить поведенческие факторы и является одним из основных факторов поискового ранжирования. ПС сейчас особенно сильно стараются учитывать показатели ПФ при формировании результатов поиска. Если ваш ресурс имеет плохие показатели, он улетает на дно, если хорошие, наоборот, повышается в топе, постепенно доходя до самых верхних позиций.
Виды lazy load
У этого функционала есть несколько разновидностей. Каждая из них предполагает определенную модель взаимодействия пользователя и сайта. Выше я рассмотрел самую популярную – скроллинг. Она подразумевает, что все картинки будут загружаться в процессе прокрутки страницы. Обычно ее используют на контентных сайтах, интернет-магазинах и т. д.
Это довольно удобно, потому что не требует от пользователя никаких действий. Он просто просматривает страницу и в процессе этого его браузер загружает все нужные изображения. При этом в большинстве случаев он не испытывает каких-то проблем с ожиданием загрузки изображения и т. д. Если все реализовано на должном уровне, то все картинки будут загружаться в течение секунды.
В отдельных случаях особенно когда у пользователя медленный интернет или слабое устройство, закачивание изображений может занимать до 10 – 15 секунд. Это не так много, учитывая, что в это время перед пользователем будет текстовый контент.
Если бы не было ленивой загрузки, то эти 10 – 15 секунд ушли бы на открытие страницы. Смотреть в белый экран браузера не очень приятно, так что, скорее всего, человек просто бы закрыл сайт. А тут он будет занят изучением контента и вряд ли заметит какие-то проблемы.
Следующий вид ленивой загрузки подразумевает, что фото будет загружаться только после клика пользователем по какой-нибудь области или ссылке. То есть все картинки будут изначально скрыты (не будут загружаться), однако если пользователю захочется увидеть какую-то (будет специально размеченная область), то он сможет на нее кликнуть, после чего только эта картинка будет загружена.
Такой вид lazy load обеспечивает высокую скорость отображения страницы, но вместе с тем у пользователя появляется необходимость в дополнительных действиях. Согласитесь, не каждый человек захочет прокликивать все фото, когда их очень много на странице.
Этот вариант подойдет больше для каких-то блогов или небольших информационных порталов, где картинки не несут в себе особо много информации. Тогда пользователю действительно не нужно будет тратить время на клики в случаях, когда ему это не интересно. Он вполне сможет обойтись текстовым контентом.
Еще один вид ленивой загрузки, который довольно часто используется на разных ресурсах, – догрузка фото в фоновом режиме. Когда человек заходит на страницу и оставляет ее открытой, предположим, отойдя куда-то или остановившись на чтении, браузер продолжает загружать контент в фоновом режиме.
На самом деле этот способ очень похож на вариант со скроллингом, за тем лишь исключением, что сама догрузка происходит независимо от того, скроллит человек страницу или нет. Все фотографии в любом случае загружаются, только происходит это в отложенном фоновом режиме. Сначала грузится текст и скелет сайта, и уже после начинают грузиться изображения.
Вариант довольно удобный, но не везде его нужно применять. Фоновая догрузка будет актуальна для проектов с изображениями в большом разрешении. Тогда загрузка в фоновом режиме будет действительно оправдана. Однако если вы будете наполнять свой сайт бесполезными материалами, которые не вызывают никакого интереса у аудитории, то все старания будут напрасны.
В таком случае подойдет способ со скроллингом. Если люди будут прокручивать страницу, то картинки начнут загружаться. Если же нет, то никакой необходимости в загрузке фото в высоком разрешении нет.
Любой из вышеперечисленных вариантов ускоряет загрузку сайта и улучшает поведенческие факторы. Самым популярным и общепризнанным видом lazy load считается вариант со скроллингом. Однако никто не запрещает использовать другие вариации этого функционала. В каких-то особенных условиях использование способов с загрузкой по клику или фоновой загрузкой будет более оправдано.
Как сделать lazy load на WordPress
Теперь я расскажу о том, как можно реализовать ленивую загрузку изображений на ресурсе с WordPress. Пользоваться мы будем дополнительными решениями.
С помощью функционала в шаблонах
Итак, сделать ленивую загрузку графики в WP можно с помощью функционала, который есть в шаблонах. Очень много шаблонов сейчас имеют дополнительные встроенные особенности. Как правило, это какие-то специальные визуальные улучшения, блоки с текстом и т. д. Есть шаблоны, которые предлагают кастомную возможность активации ленивой загрузки фото. Обычно такое есть в платных премиум-шаблонах, но вы можете поискать и бесплатные.
Из бесплатных можно выделить тему Hueman. Ее можно найти в бесплатном каталоге WordPress, также эту тему можно установить прямо из панели управления WP.
В основном этот шаблон используется на блогах. По скриншоту выше вы можете видеть, что для этого там есть все необходимые особенности. Сама тема довольно быстрая, но вы можете сделать ее еще быстрее с помощью встроенного инструмента, который активирует ленивую загрузку. Как только вы включите эту опцию, все картинки будут загружаться на вашем ресурсе последовательно при скроллинге страницы.
Также такой функционал есть и в других популярных шаблонах. В основном это платные решения, которые можно найти в различных магазинах или на Themeforest. В последнем магазине шаблонов можно найти очень много тем с этой функцией. Просто введите в строку поиска ключевые слова, после чего ресурс выдаст вам все результаты.
Шаблонов с таким функционалом очень много. Вы можете зайти в официальный список магазинов от WordPress.org, выбрать сайт нужного и попытаться найти там хороший шаблон.
С помощью плагинов
Если вы не хотите менять шаблон, то вам помогут плагины. В каталоге WordPress их очень много, вам просто нужно перейти в него и ввести ключевые слова в строку поиска. Здесь я расскажу о самых популярных и востребованных расширениях, которые помогут вам сделать lazy load на сайте с WP.
Довольно популярный плагин, который имеет более 100 000 активных установок по данным WordPress.org. Установить его можно прямо из панели управления в несколько кликов. Сам плагин имеет огромное количество преимуществ и подойдет для использования почти на любом проекте.
С помощью этого замечательного расширения вы сможете ускорить свой ресурс на WordPress. Особенно сильно это будет заметно на мобильных устройствах, потому как именно на них обычно видны проблемы со слишком тяжелыми изображениями. Если таких фото очень много, страница начинает загружаться в несколько раз дольше.
Чтобы убедиться в работоспособности данного модуля, разработчики предлагают ознакомиться с демо-версией, на которой последовательно размещены 1 000 картинок. Вы будете прокручивать страницу, эти изображения будут загружаться в процессе. Никаких проблем нет со скоростью или неправильным отображением контента.
Помимо ленивой загрузки изображений, этот плагин может помочь реализовать ленивую загрузку видео, медиа, фреймов и т. д. То есть ваш сайт не будет тормозить, весь медиаконтент загрузится в процессе скроллинга.
Этот плагин имеет предельно простой интерфейс, с которым разберется даже новичок.
Еще один популярный плагин, который позволит вам сделать отложенную загрузку картинок. Модуль имеет более 40 000 активных установок и продолжает набирать популярность. Его можно рассматривать как неплохую альтернативу предыдущему плагину.
Он умеет работать не только с картинками, но и с другими типами контента. Например, вы сможете сделать отложенную загрузку фреймов или видео. Если на сайте будет аудио, то можно проделать то же и с ним.
Сам скрипт плагина довольно легковесный. Его можно очень легко установить из каталога WordPress и настроить при помощи инструкций от разработчиков.
Небольшое расширение, которое помогает настроить отложенную загрузку фотографий на вашем ресурсе. Он также бесплатно доступен в каталоге WP, установить можно прямо из панели администратора WordPress. Сейчас плагин не особо популярен, всего 4 000+ активных установок. Однако отзывы он имеет довольно положительные.
Этот плагин имеет простой интерфейс. Он подойдет для новичков. Вам лишь необходимо просто установить его из панели управления, после чего настроить все параметры в стандартном настройщике WordPress. Каких-то сложностей возникнуть не должно, все предельно просто и понятно.
Простенькое расширение с 80 000+ активных установок. Доступен прямо в панели управления WordPress и имеет сравнительно простой интерфейс.
Этот плагин не особо подойдет для новичков, потому как с настройкой могут возникнуть некоторые трудности. Тем не менее многие вебмастеры выбирают именно его, потому что сам плагин представляет собой небольшой скрипт, который особо не нагружает CMS.
В каталоге есть и другие решения, которые помогут вам реализовать отложенную загрузку изображений. Однако они не такие популярные и функциональные как те, что я описал.
Как сделать lazy load без плагинов
Вы можете сделать отложенную загрузку без помощи плагинов. Для этого придется использовать скрипты, с которыми нужно будет работать вручную. То есть новички вряд ли смогут осилить такое. Им придется обращаться за помощью к специалистам.
Самым популярным решением для ленивой загрузки можно считать скрипт от David Walsh, который выложил на своем сайте мануал, где в подробностях описан принцип работы этого скрипта.
Этот скрипт работает очень просто: вы заменяете все атрибуты src в теге img на data-src (можно использовать с каким-либо другим префиксом), после чего добавляете в CSS-код несколько строчек. Они и будут отвечать за отображение графики при скроллинге. Также вам необходимо будет использовать JS-код, который будет заменять все атрибуты с префиксом на обычные после того, как все картинки на странице будут загружены.
В инструкции по ссылке выше этот процесс описан более подробно, но на английском языке. С этим должен разбираться знающий человек, новичку лучше даже не пытаться.
Есть другие способы и скрипты, которые помогают реализовать отложенную загрузку на сайте. Какие-то из них просты в установке, какие-то нет. Рассматривать их я не буду, потому что исчерпывающей важной информации это все вам не даст. Работает все примерно так же, как я описал выше.
Заключение
Вариантов реализации функционала отложенной загрузки изображений очень много. Я постарался рассказать обо всех простых способах, которые подойдут вебмастерам, использующим WordPress. На других платформах также есть свои решения, которые позволят сделать lazy load на сайте. Нужно просто поискать на тематических площадках или в каталогах.
Я надеюсь, что эта статья помогла вам разобраться с этим вопросом, и теперь у вас не будет проблем, если вы захотите реализовать такое на своем ресурсе.
Ну а если вы хотите научиться зарабатывать на своем сайте с помощью разных способов, то я советую вам обратить внимание на курс от Василия Блинова. В нем автор рассматривает создание блога на WordPress от “А” до “Я”, раскрывая все секреты и особенности вебмастеринга. По ссылке выше вы найдете более подробную информацию.