Lazy load (ленивая загрузка) – это одна из самых эффективных техник оптимизации производительности сайтов на WordPress, особенно при большом количестве изображений и медиа-контента. Она позволяет загружать изображения только тогда, когда они появляются в области видимости пользователя, что значительно снижает время первой загрузки страницы и уменьшает нагрузку на сервер.
Что такое lazy load и почему он важен для WordPress
Lazy load – это отложенная загрузка ресурсов (чаще всего изображений и видео), которые не видны пользователю сразу при загрузке страницы. Вместо того чтобы загружать все изображения сразу, браузер грузит только те, что видны на экране, а остальные подгружаются по мере прокрутки страницы.
Для WordPress это особенно актуально, так как многие темы и плагины используют большое количество медиа, что негативно сказывается на скорости сайта и опыте пользователей. Использование lazy load помогает:
- Снизить время загрузки страниц;
- Уменьшить потребление трафика;
- Повысить рейтинг сайта в поисковых системах, учитывая скорость загрузки;
- Снизить нагрузку на сервер и хостинг.
Хотя в WordPress 5.5 и выше есть встроенный атрибут loading="lazy" для изображений, иногда этого недостаточно, или требуется более гибкий и кастомный подход.
Как работает lazy load в WordPress: обзор методов и подходов
Существует несколько способов реализации ленивой загрузки:
- Использование нативного атрибута
loading="lazy"в тегах<img>; - Подключение готовых плагинов, таких как Lazy Load by WP Rocket, Smush, a3 Lazy Load;
- Самостоятельная реализация с помощью JavaScript и модификации вывода изображений;
- Использование Intersection Observer API для отслеживания появления изображения в области видимости.
Самый гибкий и продвинутый способ — реализовать lazy load с помощью Intersection Observer, так как он позволяет не только лениво грузить изображения, но и управлять загрузкой других медиа и элементов.
Создаем собственный lazy load для изображений в WordPress
1. Модификация вывода изображений с помощью фильтра
Для начала нам нужно заменить стандартный src у изображений на специальный плейсхолдер и добавить новый атрибут data-src, чтобы в него записать настоящий URL изображения. Для этого используем фильтр wp_get_attachment_image_attributes. Ниже пример функции wpspeed_lazyload_image_attributes:
function wpspeed_lazyload_image_attributes($attr, $attachment, $size) {
if (is_admin()) return $attr; // не применяем в админке
if (isset($attr['src'])) {
$attr['data-src'] = $attr['src'];
$attr['src'] = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='; // пустой прозрачный пиксель
$attr['class'] .= ' wpspeed-lazy';
}
return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'wpspeed_lazyload_image_attributes', 10, 3);В этом коде мы меняем src на прозрачный пиксель, а настоящий URL кладем в data-src. Также добавляем класс wpspeed-lazy для селектора в JS.
2. Подключаем JavaScript с Intersection Observer для подгрузки
Теперь напишем JS, который будет наблюдать за элементами с классом wpspeed-lazy и подгружать настоящие изображения, когда они появляются в зоне видимости.
document.addEventListener('DOMContentLoaded', function() {
if (!('IntersectionObserver' in window)) {
// fallback: сразу грузим все изображения если браузер не поддерживает
const images = document.querySelectorAll('img.wpspeed-lazy');
images.forEach(img => {
img.src = img.getAttribute('data-src');
img.classList.remove('wpspeed-lazy');
});
return;
}
const observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.getAttribute('data-src');
img.classList.remove('wpspeed-lazy');
observer.unobserve(img);
}
});
});
const images = document.querySelectorAll('img.wpspeed-lazy');
images.forEach(img => {
observer.observe(img);
});
});Этот скрипт надежно и эффективно загружает изображения только при необходимости.
3. Подключение скрипта в WordPress
Добавьте следующий PHP код в functions.php вашей темы или в отдельный плагин для подключения скрипта:
function wpspeed_enqueue_lazyload_script() {
wp_enqueue_script('wpspeed-lazyload', get_stylesheet_directory_uri() . '/js/wpspeed-lazyload.js', array(), '1.0', true);
}
add_action('wp_enqueue_scripts', 'wpspeed_enqueue_lazyload_script');В данном примере предполагается, что JS файл с кодом выше сохранен по пути js/wpspeed-lazyload.js в теме.
Дополнительные советы по оптимизации lazy load и изображениям
Помимо правильной реализации lazy load, стоит учесть несколько важных моментов:
- Используйте правильные размеры изображений – WordPress позволяет генерировать несколько размеров, выводите именно подходящие под блоки на странице.
- Компрессия и форматы – WebP и сжатые JPEG/PNG значительно снижают вес файлов.
- Предзагрузка критичных изображений – например, логотипа или первого баннера, чтобы не ухудшать UX.
- Отложенная загрузка видео и iframe – можно расширить подход lazy load на другие тяжелые элементы.
Готовые плагины для lazy load на WordPress
Если не хочется писать код самому, можно использовать проверенные плагины:
- Lazy Load by WP Rocket – легкий и эффективный, хорошо сочетается с кэшированием.
- a3 Lazy Load – гибкие настройки, поддержка видео и iframe.
- Smush – кроме lazy load предлагает сжатие изображений.
Однако самостоятельная реализация дает полное понимание и контроль, а также избавляет от лишних плагинов.
Выводы по созданию собственного lazy load в WordPress
Реализация ленивой загрузки изображений своими руками на WordPress с помощью фильтра вывода и Intersection Observer – это отличный способ ускорить сайт без лишних плагинов. Такой подход гибкий, современный и совместим с большинством тем и плагинов, если правильно реализован.
Код, приведенный выше, можно доработать под свои нужды, добавляя поддержку SVG, фонов и других типов медиа. Главное – тестировать на разных устройствах и браузерах, чтобы не ухудшить пользовательский опыт.