Автозагрузка изображений (lazy loading) — это техника, которая позволяет загружать изображения только тогда, когда они появляются в области видимости пользователя. Это значительно сокращает время загрузки страниц и экономит трафик, что особенно важно для сайтов с большим количеством медиа-контента. В этой статье расскажу, как правильно добавить автозагрузку изображений на сайт WordPress, используя как готовые плагины, так и собственные решения на PHP и JavaScript.
Что такое автозагрузка изображений и зачем она нужна
Когда браузер загружает страницу, по умолчанию он сразу загружает все изображения, даже те, что находятся ниже видимой области экрана. Это приводит к долгой загрузке и плохому пользовательскому опыту. Ленивая загрузка позволяет отложить загрузку картинок до того момента, когда пользователь прокрутит страницу и они станут видимыми.
Преимущества автозагрузки:
- Ускорение первичной загрузки страницы;
- Снижение нагрузки на сервер и трафика;
- Улучшение показателей Core Web Vitals и SEO;
- Экономия ресурсов на мобильных устройствах.
В современных браузерах с версии Chrome 76+ и Firefox 75+ есть встроенная поддержка атрибута loading="lazy" для тега <img>. Но не все темы и плагины WordPress автоматически его используют, поэтому стоит добавить это вручную или с помощью плагинов.
Добавление автозагрузки изображений с помощью плагинов WordPress
Плагин a3 Lazy Load
a3 Lazy Load — один из самых популярных и простых в использовании плагинов для автозагрузки изображений, видео и iframe. Он работает на фронтенде и поддерживает все основные типы контента.
Как установить и настроить:
- Перейдите в админке WordPress в раздел «Плагины» → «Добавить новый»;
- В строке поиска введите a3 Lazy Load;
- Установите и активируйте плагин;
- В разделе «Настройки» выберите нужные типы контента для автозагрузки (изображения, видео, iframe);
- Сохраните изменения.
Плагин автоматически добавит необходимые атрибуты и скрипты, чтобы изображения грузились только при прокрутке.
Плагин WP Rocket (платный)
WP Rocket — популярный плагин для кэширования и оптимизации производительности WordPress. В его функционале есть встроенная поддержка автозагрузки изображений.
Чтобы включить lazy loading в WP Rocket:
- Установите и активируйте WP Rocket;
- Перейдите в «Настройки» → «Оптимизация файлов»;
- Включите опцию «LazyLoad для изображений»;
- Сохраните изменения.
WP Rocket дополнительно оптимизирует загрузку скриптов и стилей, что даёт комплексный эффект ускорения.
Реализация автозагрузки изображений на PHP и JavaScript без плагинов
Если хотите полностью контролировать процесс, можно добавить lazy loading вручную. Рассмотрим пример, как это сделать в теме или собственном плагине.
Шаг 1. Добавляем атрибут loading="lazy" в теги img
Для начала нужно, чтобы в HTML генерировались картинки с этим атрибутом. В WordPress можно использовать фильтр wp_get_attachment_image_attributes:
function wpdownload_add_lazy_loading_attr($attr) {
$attr['loading'] = 'lazy';
return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'wpdownload_add_lazy_loading_attr');Этот код добавит loading="lazy" ко всем изображениям, которые выводятся через функцию wp_get_attachment_image() и похожие.
Шаг 2. Заменяем стандартные теги img на ленивую загрузку для остальных случаев
Если изображения выводятся через обычные теги <img> в контенте, можно применить JavaScript, который будет подгружать картинки по мере прокрутки.
Пример простого скрипта lazy loading с использованием Intersection Observer API:
document.addEventListener('DOMContentLoaded', function() {
const lazyImages = document.querySelectorAll('img.lazyload');
if ('IntersectionObserver' in window) {
let observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let img = entry.target;
img.src = img.dataset.src;
img.classList.remove('lazyload');
observer.unobserve(img);
}
});
});
lazyImages.forEach(function(img) {
observer.observe(img);
});
} else {
// Фолбэк для старых браузеров - просто загружаем все сразу
lazyImages.forEach(function(img) {
img.src = img.dataset.src;
img.classList.remove('lazyload');
});
}
});Чтобы этот скрипт работал, в HTML нужно указывать изображения так:
<img class="lazyload" data-src="url-izobrazheniya.jpg" alt="Описание" />Можно автоматически менять стандартный вывод WordPress, добавляя класс lazyload и меняя src на data-src, но это уже более сложная задача, требующая парсинга контента.
Использование плагина Clearfy Pro для управления lazy loading и оптимизацией
Для тех, кто предпочитает готовые решения с множеством настроек, отлично подойдет Clearfy Pro. Этот плагин позволяет включать и настраивать lazy loading, отключать ненужные скрипты, удалять лишние стили и многое другое для ускорения сайта.
В Clearfy Pro lazy loading активируется в разделе «Оптимизация» — «Изображения» с возможностью задать исключения, типы контента и режимы загрузки.
Использование Clearfy Pro удобно, если хотите получить быстрый результат без ручного кода и при этом иметь гибкие настройки.
Советы и лучшие практики для автозагрузки изображений в WordPress
Для максимального эффекта от lazy loading учитывайте следующие моменты:
- Всегда указывайте размеры изображения (width и height) или используйте CSS, чтобы избежать сдвигов контента при загрузке;
- Проверяйте работу lazy loading на мобильных устройствах и разных браузерах;
- Не применяйте lazy loading к важным изображениям, которые видны сразу (например, логотип, главный баннер);
- Комбинируйте lazy loading с оптимизацией форматов изображений (WebP, AVIF) и сжатия;
- Обязательно тестируйте производительность с инструментами типа Google PageSpeed Insights и Lighthouse.
В итоге автозагрузка изображений — это эффективный способ ускорить сайт WordPress, особенно если у вас много графики. Выбирайте подходящий метод — от плагинов до своего кода — и улучшайте пользовательский опыт.