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

Отложенная загрузка изображений (lazy load) — один из самых эффективных способов ускорить загрузку страниц WordPress, особенно если на сайте много медиа-контента. В этой статье разберём, как реализовать lazy load как с помощью кода, так и с использованием проверенных плагинов, а также рассмотрим, как оптимизировать работу с изображениями, чтобы улучшить пользовательский опыт и повысить SEO.

Что такое отложенная загрузка изображений и зачем она нужна

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

В WordPress по умолчанию с версии 5.5 включена базовая поддержка отложенной загрузки через атрибут loading="lazy" у тегов <img>. Однако этот метод работает не во всех браузерах и не всегда даёт максимальную производительность.

Поэтому иногда стоит использовать более продвинутые методы и плагины, которые обеспечивают комплексный lazy load и дополнительные возможности, например, загрузку изображений в формате WebP, placeholder и т.п.

Отложенная загрузка без плагинов: как улучшить стандартный lazy load WordPress

Если вам недостаточно стандартного lazy load, вы можете добавить дополнительный JavaScript для более гибкого управления загрузкой. Вот пример простой функции для темы, которая добавляет класс lazyload к изображениям и подключает библиотеку lazysizes — один из популярных скриптов для lazy load:

function wpcourse_add_lazyload_scripts() {
    wp_enqueue_script('lazysizes', 'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js', array(), '5.3.2', true);
}
add_action('wp_enqueue_scripts', 'wpcourse_add_lazyload_scripts');

function wpcourse_add_lazyload_class($content) {
    $content = preg_replace('/<img(.*?)src=/i', '<img$1class="lazyload" data-src=', $content);
    $content = preg_replace('/<img(.*?)srcset=/i', '<img$1data-srcset=', $content);
    return $content;
}
add_filter('the_content', 'wpcourse_add_lazyload_class');

Этот код:

Подключает скрипт lazysizes из CDN.
Меняет атрибут src у изображений на data-src и добавляет класс lazyload.

В результате загрузка изображений будет происходить по мере прокрутки страницы. Этот способ полезен, если ваша тема не поддерживает lazy load или вы хотите расширить функциональность.

Преимущества и недостатки данного метода

Плюсы:

Не требует установки плагина.
Можно кастомизировать под свои задачи.
Библиотека lazysizes поддерживает разные типы медиа: iframe, видео, картинки.

Минусы:

Требуется базовое знание PHP и JS.
Возможны конфликты с другими скриптами темы или плагинов.

Используем плагины для отложенной загрузки в WordPress

Если хотите максимально упростить задачу, стоит обратить внимание на проверенные плагины, которые уже реализуют lazy load с расширенными возможностями.

1. a3 Lazy Load

Очень популярный и надёжный плагин для отложенной загрузки изображений, видео и iframe. Он автоматически оптимизирует загрузку и не требует настройки. Подходит как для блогов, так и для магазинов на WooCommerce.

Подробнее о плагине a3 Lazy Load на WPSHOP.RU

2. Lazy Load by WP Rocket

Легковесный плагин от разработчиков WP Rocket, который отлично справляется с lazy load и минималистичен по функционалу. Подходит для сайтов, где важна простота и совместимость.

Подробнее о плагине Lazy Load by WP Rocket на WPSHOP.RU

3. Clearfy Pro (оптимизация загрузки)

Плагин Clearfy Pro не только улучшает безопасность и производительность сайта, но и включает в себя функцию расширенного lazy load с возможностью исключения элементов, настройки placeholder и интеграцией с другими оптимизациями.

Подробнее о Clearfy Pro на WPSHOP.RU

Как проверить и отладить lazy load на сайте WordPress

После внедрения lazy load важно проверить, что изображения действительно загружаются по мере прокрутки и не ломают верстку или SEO.

Проверка в браузере

Откройте консоль разработчика (F12), перейдите во вкладку Network и выберите фильтр Images. Обновите страницу и прокрутите вниз — вы должны видеть, что изображения начинают загружаться только при появлении в видимой области.

SEO и доступность

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

Если используете JavaScript для lazy load, убедитесь, что поисковые боты способны индексировать контент. Современные боты умеют выполнять JS, но лучше дополнительно проверить через сервисы типа Google Search Console.

Итог

Отложенная загрузка — обязательный инструмент для современных сайтов на WordPress, особенно если вы хотите улучшить скорость и удобство для посетителей. Выбирайте между простым кодовым решением с библиотекой lazysizes и готовыми плагинами в зависимости от уровня вашей подготовки и задач. Не забывайте тестировать и оптимизировать изображения комплексно для достижения лучших результатов.