Ленивая загрузка для WordPress как добавить ее на сайт


Оглавление (нажмите, чтобы открыть):

Как сделать ленивую загрузку Lazy Load на WordPress

Функция ленивой загрузки (Lazy Load) предназначена для ускорения загрузки сайта посредством постепенной загрузки медиафайлов при прокрутке страницы. Особенно полезна когда у ваш большой сайт и на страницах большое количество изображений.

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

Ленивая загрузка как раз таки и помогает от части решить эту проблему.

Плагин для ленивой загрузки (Lazy Load) для WordPress

Для WordPress существуют плагины для реализации такого функционала, и даже несколько. Лично я остановил свой выбор на плагине a3 Lazy Load. Установить можете через панель администратора Плагины — Добавить новый и в поисковой строке ввести название a3 Lazy Load.

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

Exclude by URI’s and Page Types — здесь можно выбрать какие страницы исключить для плагина ленивой загрузки.

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

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

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

Так же ленивая загрузка помогает в улучшении показателей сервиса проверки скорости загрузки сайта Google.

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 от “А” до “Я”, раскрывая все секреты и особенности вебмастеринга. По ссылке выше вы найдете более подробную информацию.

WordPress.org

Русский

Lazy Load Optimizer

Описание

Плагин добавляет ленивую загрузку для изображений и iframe, что ускорит ваш сайт. Совместим с WooCommerce.
Плагин использует lazysizes — популярный, быстрый, SEO-дружественный ленивый загрузчик изображений.
Демо работы плагина

Характеристики

  • Lazy loading images;

  • Ленивая загрузка iframe;
  • улучшает показатели PageSpeed Insights;
  • легкий и быстрый;

Скриншоты

  • Настройки плагина

Установка

  1. Разорхивируйте скаченный zip файл.
  2. Загрузите папку плагина в wp-content/plugins/ директорию вашего WordPress сайта..
  3. Активируйте Lazy Load Optimizer на странице плагинов.

Часто задаваемые вопросы

Просто активируйте плагин в панели управления WordPress. Дополнительных настроек не требуется.

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

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

How To minimize content jumping or unpredictable behavior images before loading?

Add width and height attributes to image.


Как добавить ленивую загрузку к фоновым изображениям?

В случае, если вы загружаете фоновое изображение через класс, вам нужно привязать фон к классу lazyloaded:

Ленивая загрузка изображений – Плагин BJ Lazy Load

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

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

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

Чтобы реализовать на WordPress ленивую загрузку изображений много знаний не нужно иметь. Достаточно установить и активировать плагин, а именно BJ Lazy Load. Особенности этого плагина заключаются в применении ленивой загрузки для:

  • Миниатюр
  • Граватар
  • Подзагрузка iframe
  • Изображений в постах

После установки плагина во вкладке «Настройки — BJ Lazy Load» можно найти несколько пунктов настроек для полного удобства в использовании. Стоит отметить что плагин русифицирован и нет особых трудностей в настройке его.

Ленивая загрузка (Lazy Load) на WordPress: 2 плагина

Внедрить Ленивую загрузку (Lazy load) для более быстрой загрузки документов и изображений на своем сайта на WordPress вы можете при помощи специальных плагинов: a3 Lazy load и Lazy Load XT.

Принцип работы плагинов

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

Но если вы примените технологию, которая называется lazy load или ленивая загрузка, то загрузка картинок начнет происходит только после того, как страница будет прокручена, и они появятся в зоне видимости экрана. До этого момента медиафайлы не будут подгружаться из базы данных. Подобная функция применяется во всех популярных социальных сетях и сайтах: Facebook, Instagram, Twitter, ВКонтакте и так далее.

Плагин a3 Lazy Load

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

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

В плагине можно настроить, какой тип контента загружать через ленивую загрузку.


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

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

Плагин Lazy Load XT

Более старый плагин, который уже давно не обновляется, но до сих пор продолжает работать. Плагин умеет работать с изображениями, видео YouTube и Vimeo, а также iframes.

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

Перейдя в настройки вы увидите, что lazy load по стандарту используется для следующего типа контента:

  1. Видеофайлы с Youtube и прочих ресурсов, отображающихся на сайте с помощью вставки на сайт посредством iframes или ссылки, аудиозаписи и т.п.
  2. Адаптивные картинки.
  3. Миниатюры.
  4. Виджет текст.
  5. Аватарки Gravatars.

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

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

Заключение

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

Два удобнейших плагина на WordPress помогут вам решить проблему долгой загрузки таких страниц. Установить a3 Lazy Load и Lazy Load XT проще простого.

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

Настройка Lazy Load в WordPress без плагинов

В том случае, если вы хотите ускорить загрузку вашего сайта работающего на CMS WordPress, имеет смысл настроить в нем Lazy Loading для картинок (изображений). Т.е. их загрузку браузером только в том случае, если они должны отображаться пользователю. Есть множество плагинов, которые позволяют это сделать в пару кликов, но для тех, кто не хочет устанавливать лишние плагины из-за соображений безопасности (или каких то еще) и написан данный пост.

Что такое Lazy Load?

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

Как подключить Lazy Load в WordPress?

На момент написания этой статьи, на нашем сайте используется именно этот способ отложенной загрузки изображений.
Первым делом необходимо скачать сам скрипт Lazy Load, я воспользовался следующим:
https://github.com/eisbehr-/jquery.lazy
В файле вашей темы, необходимо подключить загрузку файла jquery.lazy.min.js, который можно скачать с github разработчика.


Как активировать Lazy Load в WordPress?

В предыдущем пункте мы загрузили необходимую библиотеку, теперь осталось ее активировать. Для ее нормальной работы, у каждого изображения на странице (тег img), должен быть указан параметр data-src, а стандартный src должен отсутствовать или быть пустым. Чтобы этого добиться, необходимо в файл functions.php вашей темы оформления, добавить следующие строки:
images_lazy_load_wordpress.txt

$pattern — данным регулярным выражением, мы ищем необходимые атрибуты в теге img чтобы сформировать свой новый тег img, вместо стандартного, который генерируется движком WordPress.
$replacement — тут мы формируем новый тег img, добавляем ко всем уже существующим классам дополнительный класс lazy, вместо src, мы используем data-src, а также переносим alt, width, height.

Т.е., если изначально тег img выглядел вот так:

То после обработки, он примет вот такой вид:

Lazy Load на сайте WordPress: этап ускорить загрузку сайта

Вступление

В своих экспериментах по ускорению сайта WordPress, наткнулся на интересный прием, под названием Lazy Load. Дословный перевод «ленивая нагрузка», ничего не говорит. А вот разумный перевод «отложенная загрузка» начинает прояснять суть приёма lazy load.

Мастер Йода рекомендует:  Построить алгоритм выбора случайного элемента из последовательности, чтобы каждый элемент мог

Что такое Lazy Load

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

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

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

Возможные недостатки Lazy Load

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

Вполне возможно, что такое «отложение» может восприняться ботами, как команда на запрет обхода. Например, роботы поисковика Яндекс, YandexMedia и YandexImages или робот Google Image Search, могут (в теории) перестать видеть картинки и медиафайлы.

В теории, потому что всё зависит от выбранной реализации Lazy Load на WordPress, а проще говоря, от плагина из группы «Lazy Load».

Проверка

Прежде чем остановиться на плагинах Lazy Load, напомню, как проверять сайты на видимость поисковых систем. В одной из прошлых статей, я рассказывал, как Яндекс выкинул все сайты из индекса из-за прокола HTTP/2, Lazy Load может быть из той же серии.

Проверить, как поисковые роботы видят ваш сайт, можно (и нужно) на специальных вкладках в инструментах для веб-мастеров:

Яндекс. Вкладка Инструменты>> Проверка ответа сервера. Выбираете робота и смотрите ответ сервера. Не ограничиваете результат ответом «200 OK», этого мало. Спуститесь вниз и откройте ссылку «Содержание страницы».


Google. Search Console, инструмент Fetch as Google (Просмотреть как Google). Вкладка: Сканирование>>Посмотреть как Googlebot.

Плагины Lazy Load на сайте WordPress

Не буду утомлять длинными списками плагинов Lazy Load, тем более их не много. Приведу, несколько актуальных плагина. Актуальными называю обновляемые плагины. На данный момент обновленными для версии WP 4.8.2.

BJ Lazy Load

Этот плагин заменяет все ваши почтовые изображения, миниатюры сообщений, изображения gravatar и контентные iframes с помощью заполнителя и загружает контент по мере приближения к окну браузера, когда посетитель прокручивает страницу. Также работает с текстовыми виджетами. Поскольку он работает с iframe, он также охватывает встроенные видеоролики с YouTube, Vimeo и т. д.

От автора WP Media

Lazy Load отображает изображения и / или iframes на странице только тогда, когда они видны пользователю. Это уменьшает количество механизмов запросов HTTP и улучшает время загрузки.

Этот плагин работает с эскизами, всеми изображениями в сообщении или в виде виджета, аватарах, смайлах и iFrames. Нет библиотеки JavaScript, такой как jQuery, и вес скрипта меньше 10 КБ.

WordPress Infinite Scroll — Ajax Load More

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

Lazy Loading Responsive Images

Плагин не работает с фоновыми изображениями CSS и не работает для изображений на страницах вложений (wp_get_attachment_image).

Ленивая загрузка в WordPress — ускорение Вордпресс сайта

Ленивая загрузка в WordPress сегодня очень распространена. Если вы хотите улучшить скорость своего Вордпресс сайта, то ленивая загрузка (lazy load) обязательно поможет. Этот метод задерживает HTTP-запросы для контента ниже на странице, так что он загружается только тогда, когда пользователь прокручивается вниз.

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

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

Плагины для ускорения wordpress сайта

BJ Lazy Load — плагин для ускорения wordpress

BJ Lazy Load — плагин ленивой загрузки для вордпресс, который позволяет увеличить скорость wordpress. С плагином BJ Lazy Load вы полностью контролируете, как ваша страница загружает контент. Плагин может обрабатывать комментарии пользователей, фотографии на странице и даже специальные носители, такие как iframes для встроенных видео.

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


a3 Lazy Load — плагин для скорости загрузки wordpress

a3 Lazy Load — плагин позволяющий увеличить скорость wordpress. Для сайтов с большим количеством контента вы можете попробовать плагин a3 Lazy Load, оптимизированный для изображений.

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

Lazy Load XT — плагин для увеличения скорости wordpress

Для быстрой загрузки изображений ( что приводит к увеличению скорости сайта wordpress ) попробуйте бесплатный плагин Lazy Load XT, один из самых легких плагинов для ленивой загрузки, которые вы можете найти для WordPress.

PROG-TIME

Продвинутая настройка Lazy Load 2020. Как правильно настроить ленивую загрузку для изображений

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

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

Установка Lazy Load

Для установки Lazy Load я буду использовать плагин Lazy load XT – https://github.com/ressio/lazy-load-xt/ .

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

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

По мимо этого внутри тега head вам нужно подключить библиотеку jQuery.

Дополнительная настройка. Улучшение работы Lazy Load

Данный способ я узнал из записи на сайте WebDising Master.

Суть проста. У Lazy Load есть небольшой недочет, по стандарту при подгрузки изображений они не имеют жесткого каркаса, поэтому изначально не имеют не какого размера занимаемой области.

Простой пример. На моем сайте, на главной странице при загрузки видны 3 блока с записями. Если указать режим загрузки Slow 3G, то будет заметно что изначально большие элементы с превью не имеют высоты, так как они еще не прогрузились, но зато браузер думает что мы уже спустились до уровня с превью из рубрики “JavaScript плагины”, из-за этого прогружаются лишние изображения.

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

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

Для этого нам понадобится следующий конструктор – https://webdesign-master.ru/services/lazy/

Этот код нужно указать в качестве значения атрибута src .

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

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

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

В WordPress процесс создания такой загрузки гораздо легче из-за использования плагинов.

Плагины для создания ленивой загрузки

  • Lazy Load for V >

Также по этой теме:

1 комментарий

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

Добавить комментарий