Ленивая загрузка изображений (Lazy Load) — это современный способ оптимизации производительности сайтов, при котором изображения загружаются только тогда, когда пользователь до них доскроллит. В WordPress есть встроенная поддержка lazy load с версии 5.5, но иногда бывает необходимо настроить ее вручную или усовершенствовать под конкретные задачи без использования дополнительных плагинов. В этой статье разберем, как реализовать и настроить lazy load для изображений в WordPress самостоятельно, с примерами кода.
Что такое lazy load и зачем она нужна в WordPress
Lazy Load — это техника, при которой ресурсы (чаще всего изображения и видео) загружаются не сразу при открытии страницы, а только тогда, когда они становятся видимыми в окне браузера пользователя. Это ускоряет первоначальную загрузку страницы, снижает нагрузку на сервер и экономит трафик посетителей.
Для сайтов на WordPress, особенно с большим количеством медиа-контента, lazy load помогает повысить скорость загрузки и улучшить показатели Core Web Vitals — фактор ранжирования в поисковых системах.
Начиная с версии 5.5 WordPress автоматически добавляет атрибут loading="lazy" ко всем изображениям в контенте. Однако, в некоторых случаях стандартного поведения может быть недостаточно, например, при кастомных галереях, изображениях в виджетах или при необходимости более гибкой настройки.
Как работает встроенный lazy load в WordPress
По умолчанию WordPress добавляет атрибут loading="lazy" к тегу <img>. Это нативная поддержка браузеров, которая обрабатывается без дополнительных скриптов и плагинов.
Пример тега изображения с lazy load:
<img src="image.jpg" alt="Описание" loading="lazy" />Плюсы нативного lazy load:
- Простота — не нужно писать скрипты и подключать плагины.
- Поддержка современных браузеров.
- Маленький размер страницы и отсутствие дополнительной нагрузки.
Минусы:
- Не во всех браузерах работает одинаково.
- Нельзя гибко настроить поведение загрузки.
- Не работает для фоновых изображений и некоторых кастомных элементов.
Настройка lazy load вручную с помощью фильтра wpassist_lazyload_img
Если требуется добавить или изменить поведение lazy load, можно использовать фильтр, который модифицирует HTML тег изображения перед выводом. Ниже пример функции для добавления атрибута loading="lazy" ко всем изображениям в контенте, если он отсутствует.
function wpassist_add_lazy_loading_to_images( $content ) {
// Добавляем loading="lazy" ко всем изображениям без этого атрибута
$content = preg_replace_callback(
'/<img(.*?)>/i',
function( $matches ) {
$img = $matches[0];
if ( strpos( $img, 'loading=' ) === false ) {
$img = str_replace( '<img', '<img loading="lazy"', $img );
}
return $img;
},
$content
);
return $content;
}
add_filter( 'the_content', 'wpassist_add_lazy_loading_to_images', 20 );Этот код добавляет ленивую загрузку ко всем изображениям в контенте постов и страниц, даже если для них изначально не был установлен атрибут.
Как реализовать lazy load для фоновых изображений с помощью JavaScript
Нативный атрибут loading="lazy" не работает для фоновых изображений (CSS background-image). Для них нужно реализовать lazy load самостоятельно с помощью JavaScript и Intersection Observer.
Пример кода для ленивой загрузки фоновых изображений:
document.addEventListener('DOMContentLoaded', function() {
const lazyBackgrounds = document.querySelectorAll('.lazy-bg');
if ('IntersectionObserver' in window) {
let lazyBackgroundObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
entry.target.style.backgroundImage = 'url(' + entry.target.dataset.bg + ')';
lazyBackgroundObserver.unobserve(entry.target);
}
});
});
lazyBackgrounds.forEach(function(lazyBackground) {
lazyBackgroundObserver.observe(lazyBackground);
});
} else {
// Фолбек для старых браузеров
lazyBackgrounds.forEach(function(lazyBackground) {
lazyBackground.style.backgroundImage = 'url(' + lazyBackground.dataset.bg + ')';
});
}
});HTML разметка для элемента с фоновым изображением:
<div class="lazy-bg" data-bg="image.jpg" style="min-height:300px;"></div>Такой подход позволяет загружать фоновые изображения только при скролле до блока, экономя трафик и ускоряя загрузку страницы.
Оптимизация и дополнительные советы по lazy load в WordPress
Чтобы lazy load работал максимально эффективно, рекомендуем следующее:
- Используйте актуальные версии WordPress — с 5.5 и выше нативная поддержка уже есть.
- Не отключайте встроенный lazy load без веских причин — он очень легкий и эффективный.
- Для фоновых изображений применяйте кастомные решения с JavaScript как показано выше.
- Оптимизируйте размеры изображений до загрузки — используйте WebP, сжимайте картинки, генерируйте разные размеры через медиазапросы.
- Проверяйте работу lazy load на разных устройствах и браузерах.
- Если нужна расширенная функциональность (например, lazy load для iframe, видео или галерей), рассмотрите плагины с поддержкой этих возможностей.
Примеры плагинов для ленивой загрузки на WordPress
Если вы хотите готовое решение с расширенными настройками, можно использовать следующие плагины:
- a3 Lazy Load — один из самых популярных плагинов с поддержкой lazy load для изображений, видео, iframe.
- Lazy Load by WP Rocket — легкий плагин от создателей WP Rocket, добавляет быструю ленивую загрузку без лишних функций.
- Clearfy Pro — многофункциональный оптимизатор сайта с возможностью тонкой настройки lazy load и других параметров производительности.
Выбор плагина зависит от ваших задач и возможностей сайта.
Удаление lazy load с определенных изображений
Иногда требуется отключить ленивую загрузку для конкретных изображений, например, логотипа или первого баннера. Для этого можно добавить фильтр, который исключит нужные изображения по CSS классу или атрибуту.
function wpassist_disable_lazy_load_for_images( $value, $image, $context ) {
if ( isset( $image['class'] ) && strpos( $image['class'], 'no-lazy' ) !== false ) {
return false; // Отключить lazy load
}
return $value;
}
add_filter( 'wp_lazy_loading_enabled', 'wpassist_disable_lazy_load_for_images', 10, 3 );В этом примере все изображения с классом no-lazy не будут загружаться лениво.
Выводы и рекомендации
Реализация Lazy Load в WordPress без плагинов — вполне выполнимая задача, особенно с учетом встроенной поддержки. Можно использовать фильтры для доработки поведения, а также добавить JavaScript для ленивой загрузки фоновых изображений.
Такой подход экономит ресурсы сайта, ускоряет загрузку и улучшает пользовательский опыт без лишних зависимостей. Для более сложных сценариев всегда можно подключить специализированные плагины, например, Clearfy Pro или a3 Lazy Load.