Lazy Loading WordPress: лучшие практики и проверенные плагины для ускорения сайта

Почему lazy loading стал обязательным в WordPress?

Отложенная загрузка (lazy loading) позволяет загружать тяжелые ресурсы — изображения, видео, iframe — только тогда, когда они попадают в зону видимости пользователя. Это сокращает Time to First Byte, уменьшает количество запросов и повышает Core Web Vitals. По данным Google, сайты с правильно настроенным lazy loading получают на 30 % лучшее вес страниц и снижают показатель LCP.

Native lazy loading в WordPress 5.5+

Начиная с версии 5.5, ядро WordPress автоматически добавляет атрибут loading="lazy" к изображениям и iframe, если они выводятся через функции wp_get_attachment_image() или the_content. Это самый простой способ включить lazy loading без плагинов.

Как проверить, работает ли native lazy loading?

1. Откройте страницу сайта в режиме разработчика (F12).
2. Найдите тег <img> или <iframe>.
3. Убедитесь, что у него присутствует атрибут loading="lazy".

Если атрибут отсутствует, причина может быть в темах/плагинах, которые выводят изображения вручную через <img src=…> без функций WordPress.

JavaScript‑решения: когда native недостаточно

Native lazy loading не поддерживает старые браузеры (IE, Safari < 12) и не работает с фоновыми изображениями в CSS. В таких случаях подключают JS‑библиотеки.

Популярные библиотеки

• Vanilla LazyLoad – лёгкая, без зависимостей, поддерживает data-srcset и picture.
• lazysizes – самая гибкая, умеет lazy‑load iframe, video, background‑image.
• LazyLoad XT – расширяемая, подходит для SPA‑приложений.

Для WordPress удобно внедрять эти библиотеки через functions.php:

function theme_enqueue_lazyload_scripts() {
    wp_enqueue_script( 'vanilla-lazyload', 'https://cdn.jsdelivr.net/npm/vanilla-lazyload@17/dist/lazyload.min.js', [], null, true );
    wp_add_inline_script( 'vanilla-lazyload', "new LazyLoad({ elements_selector: '.lazy' });" );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_lazyload_scripts' );

После этого замените атрибут src на data-src и добавьте класс lazy к нужным элементам.

Топ‑плагины для lazy loading в WordPress

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

1. WP Rocket – премиум‑плагин, включающий lazy loading для изображений, iframes и видео. Работает «из коробки», добавляя атрибут loading="lazy" и data-src для старых браузеров.
2. Lazy Load by WP‑Beginner – бесплатный, прост в настройке, поддерживает фоновые изображения CSS.
3. a3 Lazy Load – гибкие настройки: исключения, отложенная загрузка YouTube‑видео, Instagram‑фид.
4. Smush Pro (модуль Lazy Load) – совмещает оптимизацию изображений и их отложенную загрузку.

Пример активации lazy loading в WP Rocket через фильтр (если нужен кастомный скрипт):

add_filter( 'rocket_lazyload_excluded_attributes', function( $attributes ) {
    $attributes[] = 'data-no-lazy'; // исключаем элементы с этим атрибутом
    return $attributes;
});

Кастомный скрипт lazy loading для фоновых изображений

Фоновые изображения, задаваемые через CSS (background-image), не попадают под native lazy loading. Ниже – простой скрипт, использующий IntersectionObserver.

function enqueue_lazy_background() {
    wp_enqueue_script( 'lazy-bg', get_template_directory_uri() . '/js/lazy-bg.js', [], null, true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_lazy_background' );

// file: js/lazy-bg.js
document.addEventListener('DOMContentLoaded', function() {
    const lazyBgs = document.querySelectorAll('[data-bg]');
    const observer = new IntersectionObserver((entries, obs) => {
        entries.forEach(entry => {
            if(entry.isIntersecting) {
                const el = entry.target;
                el.style.backgroundImage = `url(${el.dataset.bg})`;
                obs.unobserve(el);
            }
        });
    }, { rootMargin: '200px' });
    lazyBgs.forEach(el => observer.observe(el));
});

В шаблоне используйте:

<div class="hero" data-bg=""></div>

Такой подход экономит трафик до 40 % при загрузке страниц с большими баннерами.

Тестирование и отладка lazy loading

После внедрения проверяйте:

• Показатели LCP и CLS в Google PageSpeed Insights.
• Отсутствие «битых» изображений в консоли браузера.
• Корректную работу в Safari, Edge и старых Chrome (через Can I use).

Для глубокой отладки используйте WP_DEBUG и плагин WPDB Safe Queries – он поможет отследить запросы к базе, связанные с lazy loading (например, при генерации srcset).

Лучшие практики и типичные ошибки

Следуйте этим рекомендациям, чтобы lazy loading действительно ускорял ваш сайт:

• Не откладывайте критический контент. Логотип, hero‑изображение выше «fold» лучше оставлять без lazy loading.
• Указывайте размеры (width/height). Это предотвращает сдвиги контента (CLS).
• Проверяйте совместимость с кэшами. Плагины кэширования (Redis, Memcached) могут сохранять HTML‑версии без атрибутов lazy. Подробнее о кэшах читайте в нашем обзоре Redis vs Memcached.
• Исключайте рекламные баннеры. Некоторые рекламные сети требуют полной загрузки сразу.
• Тестируйте на мобильных. Большая часть трафика приходит с мобильных устройств, где экономия трафика критична.

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

Быстрый чек‑лист внедрения lazy loading

1. Включите native lazy loading в настройках темы (WordPress 5.5+).
2. Если нужны старые браузеры – подключите Vanilla LazyLoad или lazysizes.
3. Установите один из топ‑плагинов (WP Rocket, Lazy Load by WP‑Beginner).
4. Добавьте кастомный скрипт для фоновых изображений, если они есть.
5. Проверьте размеры и атрибуты srcset, sizes.
6. Запустите PageSpeed Insights, исправьте найденные ошибки.

Готово! Ваш WordPress теперь грузится быстрее, а пользователи получают лучший опыт.