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

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

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

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

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

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

Использование плагинов для автоматической оптимизации изображений

Существует множество плагинов для WordPress, которые автоматически сжимают и оптимизируют изображения при загрузке. Рассмотрим самые популярные и эффективные решения.

1. Smush

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

Особенности Smush:

Сжатие без потерь.
Поддержка WebP формата.
Оптимизация изображений в библиотеке.

Для установки перейдите в Smush на WPShop.

2. ShortPixel Image Optimizer

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

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

3. EWWW Image Optimizer

EWWW Image Optimizer оптимизирует картинки локально на сервере, что удобно при работе с чувствительными данными. Плагин также поддерживает конвертацию в WebP и имеет опцию автоматической оптимизации при загрузке.

Использование современных форматов изображений: WebP и AVIF

Форматы WebP и AVIF значительно уменьшают размер файлов по сравнению с JPEG и PNG без потери качества. WordPress начиная с версии 5.8 поддерживает WebP "из коробки".

Для добавления поддержки AVIF можно использовать плагины, например, WP Avif.

Важно настроить правильные заголовки сервера для поддержки этих форматов и fallback на JPEG/PNG для браузеров, которые не поддерживают WebP/AVIF.

Реализация lazy load для изображений в WordPress

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

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

Пример кода для добавления lazy load к элементам background-image через JavaScript:

document.addEventListener('DOMContentLoaded', function() {
  const lazyBackgrounds = [].slice.call(document.querySelectorAll('.lazy-background'));

  if ('IntersectionObserver' in window) {
    let lazyBackgroundObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          entry.target.style.backgroundImage = 'url(' + entry.target.dataset.bg + ')';
          lazyBackgroundObserver.unobserve(entry.target);
        }
      });
    });

    lazyBackgrounds.forEach(function(lazyBackground) {
      lazyBackgroundObserver.observe(lazyBackground);
    });
  } else {
    // fallback для старых браузеров
    lazyBackgrounds.forEach(function(lazyBackground) {
      lazyBackground.style.backgroundImage = 'url(' + lazyBackground.dataset.bg + ')';
    });
  }
});

В HTML для фонового блока нужно указать класс и дата-атрибут с URL изображения:

<div class="lazy-background" data-bg="путь_к_изображению.jpg" style="min-height:200px;"></div>

Оптимизация изображений через пользовательские функции WordPress (wpshab)

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

function wpshab_optimize_image_on_upload($upload) {
  $file = $upload['file'];
  $mime = $upload['type'];

  if (strpos($mime, 'image') !== false) {
    try {
      $image = new Imagick($file);
      $image->stripImage(); // удаляет метаданные
      $image->setImageCompressionQuality(85); // качество сжатия
      $image->writeImage($file);
      $image->clear();
      $image->destroy();
    } catch (Exception $e) {
      error_log('wpshab: ошибка оптимизации изображения - ' . $e->getMessage());
    }
  }
  return $upload;
}
add_filter('wp_handle_upload', 'wpshab_optimize_image_on_upload');

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

Использование CDN и кэширования для ускорения изображений

Оптимизация изображений — лишь часть процесса ускорения. Подключение CDN (Content Delivery Network) позволяет хранить и отдавать статику (в том числе изображения) с географически близких серверов пользователям.

Популярные CDN: Cloudflare, BunnyCDN, KeyCDN. Для интеграции с WordPress можно использовать плагины, например WP Rocket, который совместно с CDN и lazy load обеспечит максимальное ускорение загрузки.

Также рекомендовано использовать кэширование браузера для изображений, добавляя в .htaccess или в конфигурацию сервера следующие правила:

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpg "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
</IfModule>

Выводы и рекомендации по оптимизации изображений в WordPress

Для комплексной оптимизации загрузки изображений на сайте WordPress советую:

Использовать плагины для автоматической оптимизации (Smush, ShortPixel, EWWW).
Перейти на современные форматы WebP и AVIF.
Включить и настраивать lazy load для обычных и фоновых изображений.
Использовать CDN и кэширование для быстрой отдачи файлов.
При необходимости добавить собственные функции оптимизации через PHP и Imagick.

Следуя этим рекомендациям, вы существенно улучшите скорость загрузки сайта, что положительно скажется на конверсии и SEO.