Почему отложенная загрузка изображений важна для WordPress
Отложенная загрузка (lazy loading) — это техника, позволяющая загружать изображения только тогда, когда они становятся видимыми в области просмотра пользователя. Это существенно снижает время загрузки страницы, уменьшает нагрузку на сервер и улучшает пользовательский опыт, особенно на мобильных устройствах и при медленном интернете.
Несмотря на популярность плагинов для lazy loading, иногда стоит обойтись без них, чтобы избежать лишних зависимостей и повысить производительность сайта. В этом материале разберем, как реализовать отложенную загрузку картинок в WordPress самостоятельно, используя современные возможности браузеров и минимальный PHP-код.
Поддержка нативного lazy loading в браузерах
Современные браузеры поддерживают атрибут loading="lazy" для тегов <img>. Это самый простой способ включить отложенную загрузку без дополнительного кода или плагинов.
Чтобы автоматически добавить этот атрибут ко всем изображениям, вставляемым в записи WordPress, можно использовать фильтр wp_get_attachment_image_attributes. Ниже пример функции с префиксом wpapp_:
function wpapp_add_lazy_loading_attribute( $attr ) {
$attr['loading'] = 'lazy';
return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'wpapp_add_lazy_loading_attribute' );Эта функция добавляет loading="lazy" ко всем изображениям, выводимым через стандартные функции WordPress, такие как wp_get_attachment_image() или the_post_thumbnail().
Преимущества нативного lazy loading
- Минимум кода и влияние на производительность.
- Поддержка во всех современных браузерах.
- Не требует сторонних библиотек и плагинов.
Ограничения нативного lazy loading
Некоторые старые браузеры не поддерживают этот атрибут. Также нативное lazy loading не позволяет гибко настраивать поведение загрузки, например, загружать заранее изображения, которые скоро появятся в окне просмотра.
Реализация кастомной отложенной загрузки через JavaScript
Если требуется более тонкий контроль, можно реализовать lazy loading через JavaScript. Для этого используем Intersection Observer API — современный и эффективный способ отслеживать появление элементов в области просмотра.
Для начала изменим HTML изображений, чтобы они не загружались сразу. Вместо атрибута src укажем data-src с адресом картинки, а в src подставим небольшой прозрачный пиксель или заглушку:
<img class="wpapp-lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" data-src="URL_ВАШЕГО_ИЗОБРАЖЕНИЯ" alt="Описание" />Далее добавляем JavaScript, который будет подменять src на data-src, когда изображение появится в зоне видимости:
document.addEventListener('DOMContentLoaded', function() {
var lazyImages = [].slice.call(document.querySelectorAll('img.wpapp-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('wpapp-lazy');
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// Фоллбек для браузеров без IntersectionObserver
lazyImages.forEach(function(lazyImage) {
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove('wpapp-lazy');
});
}
});Как интегрировать эту логику в WordPress
Чтобы автоматизировать замену стандартных изображений в контенте, можно использовать фильтр the_content и регулярные выражения для замены src на data-src и добавления класса:
function wpapp_lazy_load_content_images( $content ) {
$content = preg_replace_callback('/<img([^>]+)src=["\']([^"\']+)["\']([^>]*)/i', function($matches) {
$before_src = $matches[1];
$src = $matches[2];
$after_src = $matches[3];
$placeholder = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
// Добавляем класс wpapp-lazy
if (strpos($before_src, 'class=') !== false) {
$before_src = preg_replace('/class=["\']([^"\']*)["\']/', 'class="$1 wpapp-lazy"', $before_src);
} else {
$before_src .= ' class="wpapp-lazy"';
}
return '<img' . $before_src . 'src="' . $placeholder . '" data-src="' . $src . '"' . $after_src;
}, $content);
return $content;
}
add_filter('the_content', 'wpapp_lazy_load_content_images');Этот код автоматически преобразует все изображения в содержимом записи в ленивые, соответствует примеру JavaScript выше.
Как проверить и отладить отложенную загрузку
Для проверки работы lazy loading откройте консоль браузера и убедитесь, что изображения загружаются по мере прокрутки страницы. Вкладка Network позволяет увидеть, когда именно браузер подгружает картинки.
Если изображения не подгружаются, проверьте:
- Правильность подключения JavaScript.
- Отсутствие конфликтов с другими скриптами.
- Корректность изменения HTML кода изображений (проверьте вывод функции фильтра).
Советы по улучшению производительности
- Используйте форматы изображений следующего поколения (WebP) — они быстрее загружаются.
- Минимизируйте размеры картинок до реального отображаемого размера.
- Для критичных изображений (например, логотипы в шапке) можно отключить lazy loading, чтобы не задерживать отображение.
Использование плагина Clearfy для расширенной оптимизации загрузки
Если вы хотите получить дополнительные возможности по оптимизации загрузки изображений и других элементов, советуем обратить внимание на плагин Clearfy. Он включает в себя функции по включению и настройке lazy load, а также множество других улучшений производительности.
Однако если вы предпочитаете минимальный и кастомный подход, описанный в этой статье, то ручная реализация без плагинов отлично подойдет.
Заключение по настройке отложенной загрузки картинок в WordPress
В этой статье мы рассмотрели два основных способа реализовать lazy loading в WordPress без сторонних плагинов: простой и эффективный с использованием нативного атрибута loading="lazy" и более гибкий через JavaScript с Intersection Observer.
Выбор зависит от ваших задач и требований к поддержке браузеров. Обе техники помогут значительно ускорить загрузку страниц, улучшить SEO и пользовательский опыт на сайте.