Отложенная загрузка изображений (lazy loading) — это техника оптимизации, которая позволяет загружать изображения только тогда, когда они становятся видимыми пользователю на экране. Это значительно снижает время загрузки страницы и экономит трафик, особенно на мобильных устройствах. В этой статье мы рассмотрим, как реализовать ленивую загрузку изображений в WordPress своими силами и с помощью популярных плагинов, а также разберём частые ошибки и лучшие практики.
Зачем нужна отложенная загрузка изображений в WordPress
Современные сайты часто содержат десятки и сотни изображений, что замедляет загрузку страниц и негативно влияет на пользовательский опыт и SEO. Отложенная загрузка решает эту проблему, подгружая только те изображения, которые попадают в область видимости браузера, а остальные — по мере прокрутки страницы.
Это особенно важно для WordPress-сайтов, где контент активно обновляется и может содержать большое количество картинок в блогах, магазинах или портфолио.
Кроме того, Google учитывает скорость загрузки при ранжировании сайтов, поэтому внедрение ленивой загрузки поможет улучшить позиции в поисковой выдаче.
Как работает ленивое загружение: технические детали
Основная идея ленивой загрузки — подменить стандартный атрибут src у тега <img> на специальный атрибут, например data-src, и загружать изображение только когда оно появляется в области видимости пользователя.
Для отслеживания видимости обычно используется JavaScript API Intersection Observer, который эффективно определяет, когда элемент становится видимым на экране, без накладных расходов.
Если браузер поддерживает нативный атрибут loading="lazy", его тоже можно использовать для упрощения задачи, но поддержка не во всех браузерах идеальна.
Реализация ленивой загрузки изображений в WordPress вручную
Давайте рассмотрим пример функции для WordPress, которая автоматически добавляет ленивую загрузку к изображениям в контенте. Для этого мы напишем фильтр, который заменит атрибут src на data-src и добавит класс для обработки JS.
function wpstart_add_lazy_loading($content) {
if (is_feed() || is_preview()) {
return $content;
}
// Заменим все теги img
$content = preg_replace_callback('/<img([^>]+)>/i', function($matches) {
$img = $matches[0];
if (strpos($img, 'loading=') !== false) {
// Если уже есть loading, не меняем
return $img;
}
// Добавляем loading="lazy"
if (strpos($img, 'src=') !== false) {
// Заменяем src на data-src
$img = preg_replace('/src=\"([^\"]+)\"/i', 'data-src="$1"', $img);
// Добавляем пустой src для placeholder
$img = preg_replace('/<img/i', '<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" loading="lazy" class="wpstart-lazy"', $img);
}
return $img;
}, $content);
return $content;
}
add_filter('the_content', 'wpstart_add_lazy_loading');Этот код заменяет у всех изображений в контенте атрибут src на data-src и добавляет небольшой прозрачный placeholder. Для работы нужно подключить JavaScript, который будет подставлять реальный src при прокрутке:
document.addEventListener('DOMContentLoaded', function() {
var lazyImages = [].slice.call(document.querySelectorAll('img.wpstart-lazy'));
if ('IntersectionObserver' in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove('wpstart-lazy');
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// Фоллбэк для старых браузеров
lazyImages.forEach(function(lazyImage) {
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove('wpstart-lazy');
});
}
});Такой подход позволяет гибко контролировать загрузку и адаптировать её под свои нужды без установки плагина.
Использование плагинов для реализации ленивой загрузки
Если не хочется писать свой код, можно воспользоваться популярными плагинами. Вот несколько проверенных вариантов:
- Lazy Load by WP Rocket — лёгкий и простой плагин, который автоматически добавляет ленивую загрузку ко всем изображениям и iframe.
- Smush — комплексный плагин для оптимизации изображений с функцией ленивой загрузки и сжатием.
- a3 Lazy Load — удобный инструмент с настройками для мобильных устройств и разных типов контента.
Все эти плагины можно найти на wpshop.ru с подробными описаниями и поддержкой.
Обработка изображений в блоках Gutenberg и кастомных шорткодах
С внедрением редактора Gutenberg изображения чаще всего вставляются через блоки, где ленивую загрузку можно добавить через фильтр wp_lazy_loading_enabled или через модификацию рендеринга блоков.
Для кастомных шорткодах, которые выводят изображения, рекомендуется явно добавлять атрибут loading="lazy" при генерации тега img:
function wpstart_lazy_shortcode_img($atts) {
$atts = shortcode_atts(array(
'src' => '',
'alt' => '',
'class' => '',
), $atts);
if (empty($atts['src'])) return '';
return '<img src="'.esc_url($atts['src']).'" alt="'.esc_attr($atts['alt']).'" loading="lazy" class="'.esc_attr($atts['class']).'"/>';
}
add_shortcode('lazyimg', 'wpstart_lazy_shortcode_img');Такой шорткод [lazyimg src="url" alt="описание"] позволит легко вставлять ленивую загрузку в любые места сайта.
Частые ошибки и рекомендации при работе с ленивой загрузкой
Несмотря на простоту идеи, ленивую загрузку можно неправильно реализовать, что приведёт к проблемам:
- Изображения не загружаются вообще — проверьте правильность атрибутов и работу JS.
- SEO-проблемы — поисковые системы могут не индексировать изображения, если они не видны сразу. Используйте нативный атрибут
loading="lazy"или правильную разметку. - Конфликты с кэшированием — при кэшировании страницы убедитесь, что JS и HTML корректно обновляются.
Рекомендуется тестировать ленивую загрузку на разных устройствах и браузерах, а также использовать инструменты типа Google PageSpeed Insights для оценки эффективности.
Проверка поддержки браузеров
Нативная ленивое загрузка поддерживается в большинстве современных браузеров, но не во всех. Поэтому лучше использовать сочетание нативного атрибута и JavaScript-фоллбэка, как показано в примерах.
Оптимизация изображений
Ленивая загрузка эффективна только в сочетании с оптимизированными изображениями. Используйте сжатие, WebP формат и адаптивные размеры, чтобы дополнительно ускорить загрузку.
Для этого отлично подойдут плагины типа Smush или интеграция с сервисами CDN.
Выводы и рекомендации для разработчиков
Отложенная загрузка изображений — обязательный этап оптимизации современных сайтов на WordPress. Внедрить её можно как с помощью плагинов, так и самостоятельно, если нужна гибкость и контроль.
При реализации вручную используйте фильтры для контента и корректный JavaScript с Intersection Observer. Проверяйте совместимость с кэшами и SEO.
Если вы используете темы из wpshop.ru, некоторые из них уже имеют встроенную поддержку ленивой загрузки, что упрощает задачу.