Как оптимизировать загрузку изображений в WordPress без плагинов

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

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

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

• Уменьшить время загрузки страниц;
• Снизить потребление трафика;
• Повысить рейтинг сайта в поисковых системах;
• Снизить нагрузку на сервер.

Основные методы оптимизации изображений без плагинов

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

1. Использование формата WebP с помощью функции yelly_convert_to_webp()

WebP — современный формат сжатия, поддерживаемый большинством браузеров. Чтобы автоматически показывать WebP версии изображений, можно использовать фильтр wp_get_attachment_image_attributes. Вот пример кода, который заменит URL изображения на WebP, если он существует:

function yelly_convert_to_webp($attr, $attachment, $size) {
    if (isset($attr['src'])) {
        $webp = preg_replace('/\.(jpe?g|png)$/i', '.webp', $attr['src']);
        // Проверяем, существует ли файл WebP
        $upload_dir = wp_upload_dir();
        $file_path = str_replace($upload_dir['baseurl'], $upload_dir['basedir'], $webp);
        if (file_exists($file_path)) {
            $attr['src'] = $webp;
        }
    }
    return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'yelly_convert_to_webp', 10, 3);

Этот код проверяет, есть ли WebP версия для изображения, и подставляет её. Для создания WebP версий можно использовать сторонние инструменты локально перед загрузкой на сайт.

2. Ленивое (lazy) загрузка изображений с помощью атрибута loading

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

function yelly_add_lazy_loading($attr) {
    $attr['loading'] = 'lazy';
    return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'yelly_add_lazy_loading');

Это простой и эффективный способ уменьшить время первой загрузки страницы.

3. Использование адаптивных изображений с помощью srcset и sizes

WordPress автоматически генерирует несколько размеров каждого изображения и использует атрибуты srcset и sizes для загрузки подходящего варианта под устройство пользователя. Для этого достаточно использовать стандартную функцию wp_get_attachment_image(), которая уже возвращает разметку с этими атрибутами.

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

Пример комплексного решения оптимизации загрузки изображений

Объединим все вышеописанные приемы в одну функцию для вывода оптимизированного изображения:

function yelly_get_optimized_image($attachment_id, $size = 'medium', $alt = '') {
    $attr = [];
    $attr['loading'] = 'lazy';
    $attr['alt'] = $alt;
    $image = wp_get_attachment_image($attachment_id, $size, false, $attr);
    // Применим замену на WebP
    $image = preg_replace_callback('/<img[^>]+src="([^"]+)"[^>]*>/i', function($matches) {
        $src = $matches[1];
        $webp = preg_replace('/\.(jpe?g|png)$/i', '.webp', $src);
        $upload_dir = wp_upload_dir();
        $file_path = str_replace($upload_dir['baseurl'], $upload_dir['basedir'], $webp);
        if (file_exists($file_path)) {
            return str_replace($src, $webp, $matches[0]);
        }
        return $matches[0];
    }, $image);
    return $image;
}

Используйте функцию следующим образом в шаблонах:

echo yelly_get_optimized_image(123, 'large', 'Описание изображения');

Дополнительные советы по оптимизации изображений

Оптимизация перед загрузкой

Перед загрузкой на сайт рекомендуется сжимать изображения с помощью инструментов, например, TinyPNG или ImageOptim. Это значительно снизит вес файлов.

Уменьшение размеров изображений

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

Кэширование и CDN

Используйте кэширование браузера и Content Delivery Network (CDN) для быстрой отдачи изображений посетителям из разных регионов.

Использование плагина Clearfy для дополнительной оптимизации

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

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