Отложенная загрузка изображений (lazy load) — это важный метод оптимизации производительности сайта, который позволяет значительно ускорить загрузку страниц за счет загрузки картинок только тогда, когда они становятся видимы в области просмотра пользователя. В WordPress отложенная загрузка уже частично внедрена с версии 5.5, но часто этого недостаточно для оптимальной работы. В этой статье рассмотрим, как правильно настроить lazy load, какие плагины использовать и как реализовать свою функцию с примерами кода.
Почему отложенная загрузка важна для WordPress
Визуально привлекательные сайты часто содержат множество изображений, которые могут замедлять загрузку страницы. Если браузер загружает все картинки сразу, даже те, что находятся внизу страницы и не видны пользователю, это увеличивает время первичной загрузки, расходует трафик и ухудшает пользовательский опыт.
Отложенная загрузка помогает решить эту проблему, загружая изображения только по мере необходимости — когда пользователь прокручивает страницу до них. Это снижает нагрузку на сервер и ускоряет отображение контента, что положительно влияет на SEO и конверсию.
В WordPress 5.5+ для тегов <img> автоматически добавляется атрибут loading="lazy", который поддерживается современными браузерами, но функционал можно расширить с помощью плагинов или собственного кода.
Популярные плагины для отложенной загрузки изображений в WordPress
Рассмотрим несколько популярных плагинов, которые помогут реализовать lazy load с расширенными возможностями:
- WP Rocket — мощный плагин для кеширования и оптимизации, включает продвинутую отложенную загрузку с поддержкой iframe и видео.
- Lazy Load by WP Rocket — бесплатный плагин, который добавляет отложенную загрузку для всех изображений, iframe и видео, минималистичный и эффективный.
- Smush — плагин для оптимизации изображений с функцией lazy load, позволяет настраивать исключения и задержки.
- a3 Lazy Load — простой и удобный плагин с поддержкой мобильных устройств и кастомных элементов.
Все эти плагины можно найти на официальном репозитории WordPress и на wpshop.ru.
Как реализовать свою функцию отложенной загрузки в WordPress на PHP и JavaScript
Если вы хотите иметь полный контроль и не использовать плагины, можно реализовать отложенную загрузку самостоятельно. Рассмотрим простой пример, как это сделать.
Шаг 1. Изменение вывода изображений в контенте
Для начала нам нужно перехватить вывод изображений в контенте и заменить атрибут src на data-src, а в src поставить заглушку — небольшой прозрачный gif.
function wpfaq_lazyload_images($content) {
if (is_feed() || is_preview()) return $content;
$placeholder = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
$content = preg_replace_callback('/<img([^>]+?)src=["\']([^"\']+)["\']([^>]*?)>/i', function($matches) use ($placeholder) {
$before = $matches[1];
$src = $matches[2];
$after = $matches[3];
return '<img' . $before . 'src="' . $placeholder . '" data-src="' . $src . '"' . $after . ' loading="lazy">';
}, $content);
return $content;
}
add_filter('the_content', 'wpfaq_lazyload_images');Этот фильтр заменит все изображения в постах, чтобы они грузились отложенно. Атрибут loading="lazy" добавлен для поддержки современных браузеров.
Шаг 2. Добавление скрипта для подстановки настоящих URL
Далее нужен небольшой JavaScript, который будет отслеживать появление изображений в видимой области и подставлять настоящий src вместо data-src.
function wpfaq_lazyload_script() {
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
var lazyImages = [].slice.call(document.querySelectorAll('img[data-src]'));
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.getAttribute('data-src');
lazyImage.removeAttribute('data-src');
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// Фолбэк для старых браузеров
lazyImages.forEach(function(lazyImage) {
lazyImage.src = lazyImage.getAttribute('data-src');
lazyImage.removeAttribute('data-src');
});
}
});
</script>
<?php
}
add_action('wp_footer', 'wpfaq_lazyload_script');Этот скрипт использует IntersectionObserver, чтобы отслеживать, когда картинка попадает в зону видимости, и загружать её.
Советы по улучшению отложенной загрузки и совместимости
При реализации lazy load важно учитывать несколько моментов:
- Не загружайте отложенно лого и картинки, которые видны сразу — это повлияет на UX.
- Проверяйте совместимость с другими плагинами и темами, чтобы избежать конфликтов JavaScript.
- Используйте прозрачный placeholder минимального размера, чтобы не влиять на верстку.
- Если у вас WooCommerce, используйте дополнительные фильтры для изображений товаров.
Также полезно протестировать скорость загрузки с помощью инструментов Google PageSpeed Insights или GTmetrix, чтобы убедиться, что lazy load работает корректно и улучшает показатели.
Заключение
Отложенная загрузка изображений — обязательный элемент оптимизации современных сайтов на WordPress. Используя встроенные возможности WordPress, дополненные плагинами или собственной реализацией, вы сможете значительно улучшить скорость загрузки, снизить нагрузку на сервер и повысить удовлетворенность пользователей. Если хотите проще и мощнее — попробуйте плагин Lazy Load by WP Rocket от WPSHOP.