Оптимизация изображений — один из ключевых факторов ускорения загрузки сайта на WordPress. Формат WebP предлагает отличное сжатие при сохранении качества, что снижает вес картинок и улучшает производительность. В теме GeneratePress можно добавить поддержку WebP несколькими способами, чтобы автоматически отдавать браузерам изображения WebP, если они поддерживают этот формат.
Почему WebP важен для GeneratePress и WordPress
GeneratePress — легкая и быстрая тема, ориентированная на производительность. Но даже быстрая тема страдает от тяжёлых изображений. WebP позволяет уменьшить размер файлов на 25-35% по сравнению с JPEG и PNG, что снижает время загрузки и повышает оценки в Google PageSpeed.
Однако WordPress по умолчанию не всегда корректно обрабатывает WebP на всех этапах — загрузка, ресайз, вывод. Поэтому надо правильно интегрировать WebP в GeneratePress, чтобы изображения автоматически подставлялись там, где это возможно.
Способы добавить поддержку WebP в GeneratePress
1. Использование плагина Optimole для автоматической конвертации и отдачи WebP
Плагин Optimole позволяет автоматически конвертировать изображения в WebP и отдавать их браузерам, поддерживающим формат.
Преимущества:
- Автоматическая оптимизация при загрузке
- Поддержка CDN для быстрой загрузки
- Совместимость с GeneratePress и другими темами
Недостатки: для больших сайтов возможны ограничения в бесплатной версии.
2. Внедрение WebP с помощью плагина WebP Express
WebP Express конвертирует загруженные изображения в WebP и автоматически перенаправляет запросы браузеров, которые поддерживают WebP, на соответствующие версии картинок.
После установки и активации:
- Перейдите в настройки плагина и выберите метод конвертации (GD, Imagick или cwebp)
- Включите автоматическую подмену URL изображений на WebP
- Проверьте работу на фронтенде, используя инструменты разработчика браузера
3. Ручное добавление поддержки WebP в GeneratePress через functions.php
Если вы хотите сделать это без плагинов, можно добавить поддержку WebP на уровне темы, используя фильтры и хуки WordPress и GeneratePress.
Для начала разрешим загрузку WebP через медиа-библиотеку:
function generatepressru_mime_types($mimes) {
$mimes['webp'] = 'image/webp';
return $mimes;
}
add_filter('upload_mimes', 'generatepressru_mime_types');Далее, чтобы автоматически подставлять WebP версии картинок, если они есть, можно использовать следующий фильтр:
function generatepressru_replace_img_with_webp($html, $id, $caption, $title, $align, $url, $size, $alt) {
if (strpos($_SERVER['HTTP_ACCEPT'], 'image/webp') !== false) {
$upload_dir = wp_upload_dir();
$image_path = get_attached_file($id);
$webp_path = preg_replace('/\.(jpg|jpeg|png)$/i', '.webp', $image_path);
if (file_exists($webp_path)) {
$webp_url = str_replace($upload_dir['basedir'], $upload_dir['baseurl'], $webp_path);
$html = str_replace(wp_get_attachment_url($id), $webp_url, $html);
}
}
return $html;
}
add_filter('image_send_to_editor', 'generatepressru_replace_img_with_webp', 10, 8);Этот код заменяет URL обычных изображений на WebP, если браузер поддерживает WebP и если файл с расширением .webp существует.
Настройка GeneratePress для корректной работы с WebP
GeneratePress использует стандартные функции WordPress для вывода изображений, что упрощает интеграцию WebP. Однако важно:
- Проверить кэширование — если вы используете плагины кэширования, очистите кэш после добавления поддержки WebP
- Убедиться, что CDN не блокирует WebP файлы
- Тестировать загрузку на разных браузерах
Если вы хотите использовать WebP в фоновых изображениях через CSS, то можно добавить кастомный стиль в Customizer GeneratePress:
body {
background-image: url('path-to-image.webp');
}Для динамического переключения между WebP и PNG в CSS потребуется более сложный JS, что не всегда оправдано.
Проверка и тестирование поддержки WebP на сайте
После настройки важно проверить, что WebP действительно работает:
- Откройте сайт в браузере с поддержкой WebP (Chrome, Firefox, Edge)
- Нажмите правой кнопкой на изображении и выберите "Открыть в новой вкладке", посмотрите расширение в URL
- Используйте инструменты разработчика (Network) и фильтруйте по типу изображений — убедитесь, что загружаются .webp файлы
- Используйте онлайн-сервисы, например WebPageTest или PageSpeed Insights для проверки производительности
Выводы и рекомендации
Добавление поддержки WebP в тему GeneratePress значительно повысит скорость загрузки сайта без потери качества изображений. Рекомендуется использовать специализированные плагины, такие как Optimole или WebP Express, для автоматизации процесса. Если хотите гибко настраивать и понимаете код, можно добавить ручные фильтры.
Важный момент — всегда делайте резервные копии сайта перед внесением изменений и проводите тестирование на тестовом стенде или локально.