Что такое lazy load в WordPress и зачем его менять
Lazy load — это технология отложенной загрузки изображений и других ресурсов, которая позволяет ускорить загрузку страниц и снизить нагрузку на сервер. Начиная с версии 5.5, WordPress по умолчанию добавляет атрибут loading="lazy" ко всем тегам <img>. Это удобное решение, но иногда его поведение не устраивает — например, при работе с определёнными плагинами, кастомными скриптами или когда нужно точечно отключить или изменить параметры lazy load.
В этой статье мы разберём, как изменить или отключить стандартный lazy load WordPress, а также как внедрить кастомные решения для более гибкого управления загрузкой изображений.
Как отключить стандартный lazy load WordPress
Если вам нужно полностью убрать отложенную загрузку, например, из-за конфликтов с плагинами кэширования или визуальными конструкторами, можно использовать фильтр WordPress, который отвечает за добавление атрибута loading.
Добавьте следующий код в файл functions.php вашей темы или в отдельный плагин:
function wptemy_disable_lazy_load($value, $image, $context) {
return false; // Отключаем lazy load
}
add_filter('wp_lazy_loading_enabled', 'wptemy_disable_lazy_load', 10, 3);Этот фильтр полностью отключит отложенную загрузку для всех изображений, что может повлиять на скорость загрузки сайта, поэтому используйте его только в исключительных случаях.
Настройка lazy load для отдельных изображений
Иногда нужно отключить lazy load не глобально, а только для конкретных изображений, например, логотипа или баннера наверху страницы. Для этого можно использовать фильтр с проверкой контекста.
function wptemy_lazy_load_exclude($default, $image, $context) {
// Отключаем lazy load для логотипа
if (strpos($image->get_attribute('class'), 'site-logo') !== false) {
return false;
}
return $default;
}
add_filter('wp_lazy_loading_enabled', 'wptemy_lazy_load_exclude', 10, 3);В этом примере мы проверяем класс изображения на наличие site-logo и отключаем lazy load только для него. Такой подход позволяет тонко настраивать поведение загрузки изображений.
Кастомная реализация lazy load с использованием Intersection Observer
Стандартный атрибут loading="lazy" поддерживается не во всех браузерах, и иногда нужна более гибкая реализация. Например, можно использовать JavaScript с API Intersection Observer для динамической подгрузки изображений при прокрутке.
Вот пример простой реализации:
document.addEventListener('DOMContentLoaded', function() {
const images = document.querySelectorAll('img[data-wptemy-lazy]');
if('IntersectionObserver' in window) {
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if(entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.removeAttribute('data-wptemy-lazy');
observer.unobserve(img);
}
});
});
images.forEach(img => observer.observe(img));
} else {
// Резервный вариант для старых браузеров
images.forEach(img => img.src = img.dataset.src);
}
});Для работы скрипта в HTML нужно выставить изображения так:
<img data-wptemy-lazy data-src="path/to/image.jpg" alt="Example" />Такой подход даёт полный контроль над моментом загрузки и позволяет добавлять дополнительные эффекты или логику.
Плагины для управления lazy load в WordPress
Если не хочется писать код, можно использовать готовые плагины с расширенными настройками:
- Clearfy Pro — оптимизирует загрузку сайта, включая гибкие настройки lazy load (смотрите https://wpshop.ru/plugins/clearfy-pro/).
- WP Rocket — популярный плагин кеширования с функционалом deferred image loading и исключениями.
- a3 Lazy Load — плагин, который добавляет lazy load и позволяет исключать блоки и изображения по CSS-селектору.
Выбор зависит от задач и совместимости с вашим сайтом.
Практические советы и рекомендации по lazy load
1. Не отключайте lazy load для всех изображений без веской причины — это негативно скажется на скорости сайта и SEO.
2. Используйте фильтры WordPress для выборочного управления, чтобы исключить из lazy load только важные элементы интерфейса.
3. Тестируйте работу lazy load на мобильных устройствах и в разных браузерах, так как поведение может отличаться.
4. Комбинируйте lazy load с оптимизацией изображений (сжатие, WebP) для максимального ускорения.
5. Если вы используете визуальные конструкторы или кастомные темы, убедитесь, что lazy load не конфликтует с их скриптами.