Почему важно оптимизировать загрузку изображений в WordPress
Изображения зачастую занимают большую часть веса страницы, замедляя загрузку сайта и ухудшая пользовательский опыт. Особенно это критично для сайтов на WordPress, где часто используется большое количество медиафайлов. Оптимизация изображений позволяет уменьшить время загрузки, повысить баллы в PageSpeed Insights и улучшить позиции в поисковой выдаче.
Кроме того, оптимизация снижает нагрузку на сервер и трафик пользователей, что особенно важно для сайтов с большим количеством посетителей или с ограниченными ресурсами хостинга.
В этой статье мы разберём несколько эффективных способов оптимизации изображений, включая автоматизацию и использование плагинов, а также пример кастомного кода для lazy loading.
Использование современных форматов изображений (WebP и AVIF)
Форматы WebP и AVIF обеспечивают значительно лучшее сжатие при сохранении качества по сравнению с классическими JPEG и PNG. WordPress с версии 5.8 поддерживает WebP из коробки, но не всегда этот формат используется автоматически.
Для автоматической конвертации и загрузки изображений в WebP можно воспользоваться плагинами, например:
- Imagify – умеет сжимать и конвертировать изображения в WebP и AVIF.
- WebP Express – автоматически генерирует WebP-версии и подставляет их на фронтенд.
- ShortPixel – мощный инструмент с поддержкой множества форматов и адаптивных изображений.
Использование этих плагинов позволяет значительно снизить размер файлов без потери качества, что мгновенно улучшает скорость загрузки страниц.
Пример настройки WebP Express
После установки и активации плагина WebP Express, необходимо зайти в его настройки и выбрать стратегию конвертации, например, «Преобразование при загрузке». Плагин будет автоматически создавать WebP-версии и отдавать их браузерам, которые поддерживают этот формат.
Для более тонкой настройки можно использовать фильтры WordPress:
add_filter('wpdetect_webp_express_quality', function() {
return 80; // Качество WebP изображений, по умолчанию 75
});Lazy loading: отложенная загрузка изображений для ускорения рендера страниц
Техника lazy loading позволяет загружать изображения только тогда, когда они появляются в области видимости пользователя. Это помогает ускорить первоначальную загрузку страницы и уменьшить потребление ресурсов.
Начиная с WordPress 5.5, lazy loading включён по умолчанию для всех изображений через атрибут loading="lazy". Однако для более гибкой реализации можно использовать кастомный код или специальные плагины.
Кастомный пример lazy loading с фильтром wp_detect_lazy_load_images
Предположим, что вы хотите добавить lazy loading только для изображений в контенте, исключив лого и другие важные элементы. Для этого можно написать такой код в файле functions.php вашей темы:
function wpdetect_add_lazy_loading($content) {
// Исключаем изображения с классом no-lazy
return preg_replace_callback('/<img([^>]+)>/', function($matches) {
if (strpos($matches[1], 'no-lazy') !== false) {
return $matches[0];
}
if (strpos($matches[1], 'loading=') === false) {
return str_replace('<img', '<img loading="lazy"', $matches[0]);
}
return $matches[0];
}, $content);
}
add_filter('the_content', 'wpdetect_add_lazy_loading');Этот код проходит по всему контенту и добавляет атрибут loading="lazy" ко всем изображениям, кроме тех, что имеют класс no-lazy. Таким образом, вы можете вручную контролировать, какие изображения должны загружаться сразу.
Автоматическая оптимизация и сжатие при загрузке
Чтобы не заниматься ручной оптимизацией, можно использовать плагины, которые автоматически сжимают и оптимизируют изображения при загрузке в медиабиблиотеку. Примеры:
- Smush – бесплатный плагин с функцией сжатия и lazy loading.
- EWWW Image Optimizer – мощный инструмент для оптимизации с поддержкой WebP и автовоображения.
- Imagify – кроме конвертации, умеет оптимизировать качество и размер.
Эти плагины помогут поддерживать сайт в оптимальном состоянии без лишних усилий.
Пример интеграции EWWW Image Optimizer с программным вызовом оптимизации
Если необходимо программно оптимизировать изображение, можно использовать хук, например:
function wpdetect_optimize_image_on_upload($metadata, $attachment_id) {
if (class_exists('EWWWIO')) {
$ewww = new EWWWIO();
$path = get_attached_file($attachment_id);
$ewww->optimize($path);
}
return $metadata;
}
add_filter('wp_generate_attachment_metadata', 'wpdetect_optimize_image_on_upload', 10, 2);Этот код вызовет оптимизацию картинки сразу после её загрузки и генерации миниатюр.
Использование CDN и кэширования для ускорения загрузки изображений
Даже при отличной оптимизации изображений важна их быстрая доставка пользователям. CDN (Content Delivery Network) позволяет хранить копии изображений на серверах по всему миру, снижая задержки и нагрузку на основной сервер.
Популярные сервисы CDN для WordPress:
- Cloudflare – бесплатный и платный тарифы, легко интегрируется через плагины.
- KeyCDN – специализированный CDN с простой настройкой.
- Jetpack Site Accelerator – бесплатный сервис от Automattic с CDN для изображений.
Для интеграции CDN с WordPress можно использовать плагины, либо вручную изменить URL изображений.
Пример замены URL изображений на CDN в коде темы
Если CDN не интегрирован автоматически, можно заменить URL при выводе изображений через фильтр:
function wpdetect_replace_image_url_with_cdn($url) {
$cdn_url = 'https://cdn.wpdetect.ru'; // адрес вашего CDN
$site_url = get_site_url();
if (strpos($url, $site_url) === 0) {
$url = str_replace($site_url, $cdn_url, $url);
}
return $url;
}
add_filter('wp_get_attachment_url', 'wpdetect_replace_image_url_with_cdn');Этот простой фильтр подменит базовый URL на CDN, ускоряя загрузку изображений.
Заключение
Оптимизация изображений в WordPress — важный аспект, который напрямую влияет на скорость сайта и удовлетворённость пользователей. Используйте современные форматы, lazy loading, автоматические плагины и CDN для максимального эффекта.
Приведённые примеры кода помогут вам гибко управлять загрузкой изображений и интегрировать оптимизацию под ваши нужды. Внедряйте эти методы поэтапно и измеряйте результат с помощью инструментов анализа скорости и SEO.