Отложенная загрузка изображений (lazy loading) — важный способ оптимизации скорости загрузки страниц в WordPress. Особенно это актуально для сайтов с большим количеством картинок, таких как журналы и блоги. В этой статье мы рассмотрим, как автоматически добавить атрибуты для отложенной загрузки изображений, используя как плагины, так и собственные решения на PHP и JavaScript.
Почему отложенная загрузка изображений важна для WordPress
Отложенная загрузка позволяет браузеру загружать изображения только тогда, когда они становятся видимыми пользователю при прокрутке страницы. Это снижает время первоначальной загрузки, уменьшает нагрузку на сервер и экономит трафик пользователей. Особенно заметен эффект на мобильных устройствах и при медленном интернете.
Поисковые системы, такие как Google, положительно оценивают сайты с быстрой загрузкой, поэтому внедрение lazy loading помогает улучшить SEO и пользовательский опыт.
Как работает стандартная отложенная загрузка в WordPress 5.5 и новее
Начиная с версии 5.5, WordPress по умолчанию добавляет атрибут loading="lazy" ко всем изображениям, встроенным через редактор. Но этот механизм не всегда охватывает картинки, которые выводятся динамически через PHP-шаблоны или старые плагины.
Поэтому для комплексной отложенной загрузки часто требуется дополнительная настройка или плагины.
Использование плагинов для автоматической отложенной загрузки изображений
Существуют популярные плагины, которые расширяют возможности lazy loading и поддерживают все типы изображений на сайте:
- Lazy Load by WP Rocket: лёгкий и быстрый плагин, который автоматически применяет отложенную загрузку к изображениям, iframe и видео. Поддерживает фильтрацию исключений.
- Smush: не только оптимизирует изображения, но и добавляет lazy loading с гибкими настройками.
- a3 Lazy Load: удобный плагин с возможностью настройки отложенной загрузки для мобильных устройств и различных элементов.
Например, чтобы установить Lazy Load by WP Rocket с UTM-метками, можно использовать ссылку: Установить Lazy Load by WP Rocket.
Добавление отложенной загрузки через код (фильтр для изображений)
Если вы хотите более тонко контролировать процесс или избежать использования плагинов, можно добавить функцию в файл functions.php вашей темы или в отдельный плагин. Ниже пример функции, которая добавляет атрибут loading="lazy" к тегам <img> в содержимом поста:
function journalx_add_lazy_loading($content) {
if (is_singular()) {
$content = preg_replace_callback('/<img(.*?)>/i', function($matches) {
if (strpos($matches[1], 'loading=') === false) {
return '<img' . $matches[1] . ' loading="lazy">';
}
return $matches[0];
}, $content);
}
return $content;
}
add_filter('the_content', 'journalx_add_lazy_loading');Эта функция проверяет изображения в тексте поста и добавляет атрибут только если его ещё нет. Это простой и эффективный способ внедрить lazy loading для всех контентных картинок.
Обработка изображений в пользовательских шаблонах
Если изображения выводятся через PHP-функции, например the_post_thumbnail(), можно использовать параметр attr для добавления атрибута:
the_post_thumbnail('full', array('loading' => 'lazy'));Для кастомных функций вывода изображений можно расширить код, добавив проверку и вставку нужного атрибута.
Отложенная загрузка с использованием JavaScript для динамического контента
Иногда изображения загружаются динамически через AJAX или в слайдерах. В таких случаях атрибут loading="lazy" не всегда срабатывает корректно. Тогда можно использовать JavaScript-библиотеки, например lazysizes.
Подключите библиотеку в футере темы:
function journalx_enqueue_lazysizes() {
wp_enqueue_script('lazysizes', 'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'journalx_enqueue_lazysizes');Замените у изображений атрибут src на data-src и добавьте класс lazyload:
<img data-src="image.jpg" class="lazyload" alt="Описание" />Это обеспечит загрузку изображений только при прокрутке до них и подойдёт для сложных сценариев.
Рекомендации по тестированию и отладке отложенной загрузки
После внедрения lazy loading важно проверить работу на разных устройствах и браузерах. В Chrome DevTools можно отследить, когда загружаются изображения, проверяя вкладку Network и фильтр по типу images.
Также стоит проверить, что изображения корректно отображаются и нет визуальных артефактов или сбоев в верстке.
Заключение
Автоматическое добавление отложенной загрузки изображений в WordPress — простой и эффективный способ ускорить сайт. Используйте стандартные возможности WP, подключайте проверенные плагины или пишите собственные фильтры и скрипты. Это улучшит скорость, SEO и удобство для посетителей вашего журнала на journalx.ru.