Оптимизация изображений в WordPress для ускорения сайта

Изображения часто являются самым тяжёлым элементом на странице и значительно влияют на скорость загрузки сайта WordPress. Правильная оптимизация изображений позволяет ускорить сайт, улучшить пользовательский опыт и повысить SEO-показатели. В этой статье мы подробно рассмотрим эффективные методы оптимизации изображений в WordPress с примерами плагинов и кодовых решений.

Почему важна оптимизация изображений в WordPress

Многие начинающие разработчики и владельцы сайтов загружают изображения без сжатия и преобразования, что приводит к увеличению времени загрузки страниц. Это негативно влияет на поведенческие факторы, такие как показатель отказов и длительность сессии, а также ухудшает позиции сайта в поисковых системах.

Оптимизация изображений снижает вес файлов без потери качества, позволяет уменьшить потребление трафика и ускоряет рендеринг страниц. Особенно это важно для мобильных устройств с ограниченной скоростью интернета.

Автоматическая оптимизация с помощью плагинов WordPress

Для большинства пользователей удобнее всего применять плагины, которые автоматически сжимают и оптимизируют изображения при загрузке. Рассмотрим несколько популярных решений:

• Smush — один из самых популярных плагинов для сжатия изображений. Он предлагает как бесплатный, так и платный функционал, включая пакетную оптимизацию и ленивую загрузку.
• Imagify — плагин с несколькими режимами сжатия: нормальное, агрессивное и без потерь. Поддерживает WebP и автоматическую оптимизацию.
• ShortPixel — позволяет сжимать изображения и конвертировать их в современные форматы, такие как WebP и AVIF, для максимального ускорения загрузки.

Все перечисленные плагины интегрируются в медиабиблиотеку WordPress и автоматически оптимизируют изображения при загрузке, а также предлагают опцию пакетной оптимизации для уже загруженных файлов.

Пример настройки плагина Smush

После установки и активации плагина Smush, перейдите в раздел Smush → Bulk Smush для пакетной оптимизации существующих изображений. В настройках включите опцию «Автоматически оптимизировать новые изображения».

Оптимизация изображений без плагинов: сжатие и WebP вручную

Если вы хотите минимизировать использование плагинов или повысить контроль над процессом, можно оптимизировать изображения до загрузки и использовать современный формат WebP с помощью кода.

Для сжатия изображений рекомендуется использовать инструменты типа TinyPNG или Squoosh. После сжатия загрузите оптимизированные файлы в медиабиблиотеку.

Включение поддержки WebP в WordPress через functions.php

По умолчанию WordPress поддерживает загрузку WebP с версии 5.8, но не всегда отображает их корректно в старых темах. Чтобы добавить поддержку WebP и выводить WebP версии изображений, можно использовать следующий код:

function wplist_allow_webp_uploads($mime_types) {
    $mime_types['webp'] = 'image/webp';
    return $mime_types;
}
add_filter('mime_types', 'wplist_allow_webp_uploads');

function wplist_serve_webp_images($html, $id, $caption, $title, $align, $url, $size, $alt) {
    $image_path = get_attached_file($id);
    $webp_path = preg_replace('/\.(jpe?g|png)$/i', '.webp', $image_path);
    $webp_url = preg_replace('/\.(jpe?g|png)$/i', '.webp', wp_get_attachment_url($id));

    if (file_exists($webp_path)) {
        $html = '<picture><source srcset="' . esc_url($webp_url) . '" type="image/webp">' . $html . '</picture>';
    }
    return $html;
}
add_filter('image_send_to_editor', 'wplist_serve_webp_images', 10, 8);

Этот код разрешает загрузку WebP и выводит WebP через тег <picture>, если файл существует. Для генерации WebP файлов можно использовать сторонние утилиты или плагины.

Ленивая загрузка изображений: как ускорить рендеринг страниц

Ленивая загрузка (lazy load) — это техника, при которой изображения загружаются только тогда, когда пользователь прокручивает страницу до их появления в зоне видимости. Это сильно сокращает время первой загрузки страницы.

Начиная с WordPress 5.5, ленивая загрузка включена по умолчанию для изображений через атрибут loading="lazy". Но можно улучшить и расширить этот функционал.

Плагин WP Rocket для продвинутой ленивой загрузки

WP Rocket — популярный плагин для кэширования, который также оптимизирует ленивую загрузку изображений, видео и iframe, улучшая работу на мобильных устройствах.

Реализация ленивой загрузки с помощью кода

Если не хотите использовать платные решения, можно добавить поддержку ленивой загрузки самостоятельно. Например, с помощью JavaScript и атрибута data-src:

document.addEventListener('DOMContentLoaded', function() {
    const lazyImages = [].slice.call(document.querySelectorAll('img.lazy'));
    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.dataset.src;
                    lazyImage.classList.remove('lazy');
                    lazyImageObserver.unobserve(lazyImage);
                }
            });
        });
        lazyImages.forEach(function(lazyImage) {
            lazyImageObserver.observe(lazyImage);
        });
    } else {
        // fallback для старых браузеров
    }
});

В HTML изображения нужно будет добавить класс lazy и атрибут data-src с ссылкой на изображение, а в src поставить небольшой placeholder.

Оптимизация изображений для SEO и доступности

Оптимизация изображений — это не только сжатие и формат. Не забывайте про SEO-аспекты и доступность:

• Всегда добавляйте правильный атрибут alt — он нужен для поисковых систем и пользователей с ограниченными возможностями.
• Используйте описательные имена файлов, содержащие ключевые слова.
• Добавляйте структурированные данные, если изображения являются важной частью контента.
• Оптимизируйте размеры изображений под разные устройства с помощью атрибутов srcset и sizes.

Пример использования атрибутов srcset и sizes

Для адаптивных изображений можно использовать следующий код в шаблоне:

<img src="example-800.jpg" 
     srcset="example-400.jpg 400w, example-800.jpg 800w, example-1200.jpg 1200w" 
     sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px" 
     alt="Описание изображения">

Это позволит браузеру выбирать подходящий размер изображения в зависимости от ширины экрана пользователя.

Выводы и рекомендации

Оптимизация изображений — обязательный этап при разработке и поддержке сайта на WordPress. Используйте комбинацию автоматических плагинов и ручных техник для максимального эффекта. Пользуйтесь современными форматами (WebP), ленивой загрузкой и адаптивными изображениями, чтобы значительно ускорить загрузку страниц.

Для комплексной оптимизации рекомендуем попробовать плагин Smush с расширенными настройками.