How to enable lazy load in wordpress (images, iframes, and videos)

Новая функция исключения блока с изображениями для Lazy Load

Друзья мной горячо любимый плагин Lazy Loader получил очередное обновление (не без усилий Вашего покорного слуги ??)

Теперь у Вас есть возможность исключать родительский блок изображений, то есть достаточно указать класс:

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

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

То есть нам достаточно присвоить класс disable-lazyload блоку содержащему изображения. Данная функция просто фантастически необходима при работе с страницами созданными в Elementor. Так как теперь мы можем указать класс для отмены Lazy Load в секцию главного экрана. Вследствие чего главный экран сайта (верхняя часть страницы которая появляется сразу при загрузке сайта) не будет “дергаться и прыгать” подгружая изображения (так как плагин обрабатывает все изображения на сайте).

Источник записи:

Другие отличные плагины для включения ленивой загрузки

Lazy Load Optimizer — это бесплатный WordPress плагин ленивый загрузки изображений. Он поддерживает ленивую загрузку содержимого, вставленного из внешних источников на веб-страницу. Более того, он совместим с WooCommerce.

Из панели администратора WordPress установите и активируйте плагин Lazy Load Optimizer.

Затем перейдите в раздел Настройки > Lazy Load Optimizer

Включите контент, который вы хотите обработать на странице общих настроек и сохраните изменения.

Crazy Lazy — это простой и легкий в использовании плагин WordPress для реализации ленивой загрузки.

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

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

Этот плагин может лениво загружать изображения, видео и iframes, а также заменяет видео YouTube с помощью миниатюр.

Чтобы использовать этот плагин, вы должны загрузить его из раздела «плагины» на панели администратора WordPress.

Затем перейдите в раздел Настройки> Lazy Load на панели мониторинга.

Проверьте все элементы, которые вы хотите лениво загрузить.

Сохраните внесенные изменения.

Ленивая загрузка для видео работает на встроенных видео Youtube и Vimeo. Он помогает отложить загрузку видео, когда пользователи нажимают на изображение предварительного просмотра. Он также работает с WordPress Multisite и другими плагинами.

Загрузите плагин Lazy Load for Videos с панели администратора WordPress.

Перейдите в Настройки> Lazy Load for Videos на панели мониторинга.

На странице «общие / стиль» вы можете настроить параметры для вашего сайта.

Обязательно проверьте «отзывчивый режим», чтобы улучшить отзывчивость на всех устройствах.

Затем сохраните внесенные изменения.

Этот плагин поддерживает другие настройки, такие как:

  • Отключение отложенной загрузки для видео Youtube и Vimeo.
  • Отображение заголовков видео на Youtube и Vimeo.
  • Добавление пользовательского CSS.

WP YouTube Lyte позволяет добавлять лениво загруженные видео Youtube. Если вы хотите лениво загружать только видео с Youtube, это отличное решение для вас. Этот плагин работает на всех устройствах.

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

Нажмите на Настройки > WP YouTube Lyte на панели управления.

Просмотрите все параметры настройки на странице «основные настройки» и отметьте их соответствующим образом.

Обязательно введите свой ключ API YouTube. Это позволяет плагину функционировать оптимально.

Затем нажмите на кнопку «Сохранить изменения».

Принцип работы скриптов lazy-load

Lazy-load или «ленивая» загрузка — это способ отображения контента на сайте, когда элементы, появление которых определяет внешний ресурс, загружаются не сразу вместе с запрашиваемой страницей, а асинхронно — по мере необходимости. К подобным элементам относятся, например, изображения () и фреймы (). Их объединяет наличие атрибута , указывающего на источник ресурса.

Когда браузер «видит» у элемента атрибут , то осуществляет сетевой запрос по указанному адресу, что увеличивает время полной загрузки документа. Соответственно, чем больше внешних ресурсов синхронно подключается к странице, тем медленнее она загружается. Чтобы избежать множества одновременных запросов и оптимизировать скорость загрузки, используется техника lazy-load.

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

Основы работы большинства скриптов «ленивой» загрузки описываются подобным алгоритмом:

  1. Элементы, которые необходимо загружать асинхронно, встраиваются на страницу с другим, временным значением атрибута (или вовсе без него, что неправильно с точки зрения валидации кода). Как правило, временное значение содержит адрес шаблона, который по весу на порядок легче оригинального исходника.
  2. При необходимости в атрибут вставляется оригинальный, исходный адрес ресурса. Как правило, эта замена может осуществляться двумя путями:
    1. По требованию пользователя, когда для элемента наступают события или .
    2. Автоматически при попадании элемента в пользовательский viewport путём проверки события , а также и для мобильных устройств.

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

Существует и иной подход, при котором можно обойтись без замещающих шаблонов для оригинальных ресурсов: элементы не встраиваются на страницу изначально, а создаются динамически в процессе просмотра или определенных действий пользователя (подобные манипуляции с DOM используются, например, при подключении скриптов статистики Google Analytics или Яндекс. Метрики) либо клонируются из Shadow DOM (по такому принципу работает элемент ).

Which Images can be Lazy Loaded?

The basic idea of lazy loading is simple — defer loading anything that is not needed right now. For images it usually translates to any image that is not visible to the user up front can be lazy loaded.

As the user scrolls down the page, the image placeholders start coming into viewport (visible part of the webpage). We trigger the load for these images when they become visible.

You can find out which images are a candidate for lazy loading and how many bytes you can save on the initial page load by using Google Lighthouse audit tool. The audit performed by this tool has a section dedicated for offscreen images. You can also use ImageKit’s website analyzer to identify if your website uses lazy loading or not, in addition other critical image-related optimizations on your page.

Lazy loading is critical not only for good performance, but also to deliver a good user experience.

Native Image Lazy Loading in WordPress 5.5

Introducing has been an ongoing debate among WordPress contributors for many years now. However, with no proper standard in place then, it wasn’t a straightforward process. 

The introduction of the native HTML attribute, and its eventual support by major browsers, changed this. A few months later, the WordPress core development team announced . 

How Lazy Loading is Implemented on WordPress

WordPress 5.5 will add the loading=”lazy” attribute-value pair to every image with width and height attributes specified already. This condition is included to avoid Cumulative Layout Shift (CLS). It’s when the webpage layout shifts abruptly, creating a jarring user experience.

An example of bad user experience due to CLS (Source: )

Google grades websites based on their . Those that rank poorly are penalized by Google in their search results ranking. Since including width and height size attributes on images can help eliminate layout shifts, it’s a good condition to have.

Technically, WordPress’s native lazy loading image feature works similar to how it already handles responsive images by appending the srcset and sizes attributes. 

In addition to the above, WordPress will back-fill all img tags with width and height attributes if they aren’t present already. It’s done to ensure that all images on your site benefit from lazy loading. The core team is also pushing for a new feature to force all images to have width and height attributes. 

By default, WordPress adds the loading=”lazy” attribute to all image tags in the output of the following functions or hooks:

  • the_content(): Images in post content.
  • the_excerpt(): Images in post excerpts.
  • widget_text_content: Images in text widgets.
  • get_avatar(): Avatar images.
  • wp_get_attachment_image(): Images added as an attachment on WordPress. They’re also called template images.

Each of these functions’ outputs leads to a specific “context” within WordPress. You’ll learn the importance of these five contexts in the next section.

WordPress has also added a set of new core functions to make this transition easier on your server’s resources. Below is a list of them all with a brief description of what they do:

  • wp_filter_content_tags(): Modifies HTML tags in post content to include new attributes. For example, it modifies img tags by calling the next three functions if needed. Similar functions can be added later for optimizing other HTML elements too.  
  • wp_img_tag_add_width_and_height_attr(): Adds width and height attributes to img tags which don’t have them.
  • wp_img_tag_add_srcset_and_sizes_attr(): Adds srcset and sizes attributes to existing img tags.
  • wp_img_tag_add_loading_attr(): Adds attribute to img tags.

Customizing Native Image Lazy Loading on WordPress

You can customize the default behavior of native image lazy loading on WordPress through various filters:

  • The most important of them is the wp_lazy_loading_enabled filter which accepts three parameters for customizations: $default, $tag_name, and $context. You can hook into this filter and turn off lazy loading for all the template images.If you want to know more about disabling lazy loading, !
  • Another new filter called wp_img_tag_add_loading_attr can be hooked in to modify images within content related contexts such as the_content, the_excerpt, and widget_text_content.
  • For contexts which output purely images (e.g. wp_get_attachment_image() ), you can change its $attr directly using PHP. 

The WordPress core team has published a few to help you get familiar with all its features. If you’re a WordPress theme or plugin developer, we highly recommend you to look at them.

As of now, WordPress supports native lazy-loading functionality for images only. But they may extend it to other HTML elements (e.g., iframes) in the future.

Why is WordPress 5.5 Lazy Load Not Working?

If WordPress Lazy Load is not working, it’s likely because the images you want to lazy load are background images. Background images don’t have the <img> or <iframe> tags — the only tags that WordPress lazy load.

You should also keep in mind that the native Lazy load has a threshold. Images above that threshold will be loaded. Images above the threshold won’t be lazy-loaded, even though technically lazy loading is working.

If you’re using WP Rocket and your images are not lazy-loaded, it’s because:

  • Images are added within a stylesheet.
  • Images are added dynamically with a script.
  • Images contain one of the excluded attributes, such as data-src and data-no-lazy (the list is pretty long).

You can read more on why some images are not lazy-loaded with WP Rocket in the dedicated resource.

Lazy Loading Feature Modules

In addition to general purpose lazy loading, UI-Router also provides lazy loading of application modules.

An normal app (which doesn’t use lazy loading) often bundles all its code and libraries together into a single javascript file.

A monolithic app bundle

To use modular lazy loading, the application should be split up into logical chunks (modules).
The simplest way to split an application into modules is by application feature.
If your application has a Messages feature, a Contacts feature, and a Preferences feature, each one should be bundled as a separate module.
You can then use UI-Router’s lazy loading capabilities to load the feature module when the user activates it.

Modular app bundles

A feature module contains the code which implements the feature.
For the Contacts Feature Module, this may include:

  • States
    • Top level state, e.g.,
    • Nested states, e.g., , ,
  • Routed components
  • Non-routed components/directives
  • Any services or other code necessary to implement the feature

Future States

A UI-Router application is structured as a tree of states.

An entire branch of the state tree (i.e., a module) can be lazy loaded.
In this example, the state and all its child states will be lazy loaded.

Instead of defining the states tree when the application bootstraps, a placeholder for and all its children is created.
This placeholder is called a “Future State”.

A future state is any state which ends in a glob double-wildcard ().
The future state for the contacts feature module is named .

The URL for a future state has an implicit wildcard on the end.
The example will match on both and .

When defining the future state placeholder, only include the minimum details necessary to load the module.
You should include the , the , and the instructions to fetch and load the module.
Do not include other properties such as or .
Those properties should be placed on the full state, inside the lazy loaded module.

When a user activates a future state (by clicking a ui-sref, etc), UI-Router invokes the function.
The function should load the module’s javascript bundle, including the feature’s components, states, services, etc.
UI-Router then replaces the future state placeholder with the fully loaded state tree.

Now that the module and its states are fully loaded, the original transition is re-run and the correct state is activated.

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

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

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

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

How our lazy loading works

We use a small (2.5 KB), open-source JavaScript library for lazy loading images, iframes, etc. We also support lazy-loading WebP files. You will see a request to the following file on your site:

Perfmatters lazy loading vs native lazy loading

WordPress 5.5 now has native lazy loading by default. However, we recommend using the lazy loading solution in Perfmatters. Why? Our solution is faster and better than native lazy loading for the following reasons:

  • Native means it’s letting the browser decide what should be lazy loaded. Unfortunately with that is the problem that by default, it’s way too eager. This can be an advantage as you probably won’t need any exclusions, but in general, not as many resources will be lazy loaded. This means it won’t be as fast.
  • Native lazy loading is making improvements but still lacks support for certain things. We’ve been adding a lot of features to ours, as you can see below.

Important: When lazy loading in Perfmatters is enabled, the default native lazy loading in WordPress is automatically disabled.

Как использовать отложенную загрузку в WordPress

Можно добавить ленивую загрузку на WordPress- сайт с помощью плагинов или Javascript. Оба варианта дают схожие результаты.

Вариант 2. Использование JavaScript-библиотеки ленивой загрузки

Если вы хотите использовать JavaScript- библиотеку, есть много вариантов:

  • react-lazyload – библиотека отложенной загрузки React, не использует Intersection Observer.
  • js – использует только Intersection Observer, суперлегкая.
  • blazy – тоже легкая, но не использует Intersection Observer.
  • js – использует Intersection Observer и обработчики событий.
  • lazysizes – подходит для ленивой загрузки видео и фреймов.

Также можно использовать jQuery, так как эта библиотека уже содержится в ядре ​​WordPress.

Вариант 3. Использование плагина отложенной загрузки

Самый простой способ добавить ленивую загрузку на свой сайт – это использовать специализированный WordPress- плагин. Большинство платных плагинов для оптимизации изображений (например, Smush Pro) имеют встроенный функционал ленивой загрузки. Также мы добавили ее в бесплатную версию Smush, размещенную на WordPress.org.

Мы сделали процесс активации ленивой загрузки в плагине Smush предельно простым. Все, что нужно сделать, это перейти в раздел «Ленивая загрузка» плагина Smush Pro и нажать кнопку «Активировать».

Установите Smush Pro и активируйте ленивую загрузку меньше, чем за две минуты

Опции

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

breakpoints

breakpoints (array, по умолчанию — false) — применяется для адаптивных изображений, имеющие контрольные точки, т. е. в зависимости от размера экрана показываем ту или иную картинку.

container

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

error

error (функция function(ele, msg), по умолчанию возвращает false) — функция возвращает два сообщения: missing и invalid, если мы сделали что-то не так. Missing — если атрибут пустой или вообще не указан. Invalid — если в атрибуте указан не валидный адрес изображения.

errorClass

errorClass (строка, по умолчанию — b-error) — данный класс добавится элементу если пойдет что-то не так. Например, если параметр error выше вернет missing или invalid.

loadInvisible 

loadInvisible (булево, по умолчанию — false) — если по каким-то причинам вы хотите загрузить скрытые изображения, то передайте значение — true.

offset

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

root

root (объект, по умолчанию — document) — корневой объект может быть изменен. Честно сказать, не совсем понял этот пункт, вернее его предназначение.

saveViewportOffsetDelay

saveViewportOffsetDelay (число, по умолчанию — 50) — задержка для срабатывания функции saveViewportOffsetDelay при изменении размера окна браузера. По умолчанию выставлено 50 мс.

selector

selector (строка, по умолчанию — b-lazy) — селектор для изображений, которые вы хотите загружать лениво. Например для всех изображений вы можете указать просто — img. Если хотите указать несколько селекторов, то перечислите их через запятую, например — .img-1, .img-2, .img-3…

separator

separator (символ, по умолчанию — |) — используется, если вы хотите указать несколько изображений в атрибуте для retina-дисплеев. Например, .

success

success (функция function(ele), по умолчанию возвращает — false) — обратный вызов, когда изображения все загрузились. Полезно, если мы после загрузки изображений хотим выполнить какие либо действия.

successClass

successClass (строка, по умолчанию — b-loaded) — класс, который добавляется изображению, когда оно успешно загрузилось.

validateDelay

validateDelay (число, по умолчанию — 25) — как часто должна вызываться функция валидации при проктуртке/ресайзинге страницы. По умолчанию — 25 мс.

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

Why browser-level lazy-loading? #

According to HTTPArchive, images are the most requested asset type for most websites and usually take up more bandwidth than any other resource. At the 90th percentile, sites send about 4.7 MB of images on desktop and mobile. That’s a lot of cat pictures.

Currently, there are two ways to defer the loading of off-screen images:

  • Using the Intersection Observer API
  • Using , , or

Either option can let developers include lazy-loading functionality, and many developers have built third-party libraries to provide abstractions that are even easier to use. With lazy-loading supported directly by the browser, however, there’s no need for an external library. Browser-level lazy loading also ensures that deferred loading of images still works even if JavaScript is disabled on the client.

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

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

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

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

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

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

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

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

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

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

JCH Optimize Pro Плагин

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

В дополнение к отложенной загрузке вы также получите:

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

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

📺 Demos

Didn’t find the that exactly matches your case? We have demos!

The demos folder contains 30+ use cases of vanilla-lazyload. You might find there what you’re looking for.

Type Title Code Demo
Content Simple lazy loaded images, not using any placeholder Code
Content Lazy images that use an inline SVG as a placeholder Code
Content Lazy images that use an external SVG file as a placeholder Code
Content Lazy responsive images with Code
Content Lazy responsive images with the tag and the attribute (art direction) Code
Content Lazy responsive images with and (using ) Code
Content Lazy responsive images with and (using plain ) Code
Content Lazy video with multiple tags, different preload options, NO autoplay Code
Content Lazy video with multiple tags, different preload options, WITH autoplay Code
Content Lazy loading background images Code
Content Lazy loading multiple background images Code
Content Lazy WebP images with the tag and the attribute for WebP Code
Asynchronous loading LazyLoad with requireJS Code
Asynchronous loading LazyLoad + InterserctionObserver with requireJS Code
Asynchronous loading LazyLoad with Code
Asynchronous loading multiple LazyLoad instances with Code
Technique Fade in images as they load Code
Technique Lazily create lazyload instances Code
Technique Lazily execute functions as specific elements enter the viewport Code
Technique How to manage the print of a page with lazy images Code
Technique A popup layer containing lazy images in a scrolling container Code
Settings Multiple scrolling containers Code
Settings Single scrolling container Code
Methods How to LazyLoad Code
Methods Adding dynamic content, then LazyLoad Code
Methods Adding dynamic content, then LazyLoad passing a NodeSet of elements Code
Methods Load punctual images using the method Code
Methods Load all images at once using Code
Test Test for multiple thresholds Code
Test Test behaviour with hidden images Code
Test Test performance, lazy loading of hundreds of images Code
Native Test the native lazy loading of images WITHOUT any line of javascript, not even this script Code
Native Test the native lazy loading of images conditionally using the option (see API) Code
Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector