Почему важно использовать формат WebP в WordPress на GeneratePress
Формат WebP разработан Google и обеспечивает значительно меньший размер файлов при сохранении качества по сравнению с JPEG и PNG. Использование WebP позволяет ускорить загрузку сайта, уменьшить потребление трафика пользователей и повысить позиции в поисковой выдаче. Особенно важно внедрить поддержку WebP в GeneratePress — легкой и быстрой теме, где скорость и производительность стоят на первом месте.
Однако стандартный WordPress не всегда корректно обрабатывает WebP, а тема GeneratePress не имеет встроенной поддержки данного формата. В этой статье расскажу, как добавить поддержку WebP, оптимизировать загрузку изображений и внедрить отложенную загрузку (lazy load) с примерами кода и рекомендациями по плагинам.
Добавляем поддержку WebP в GeneratePress: что нужно знать
Первое, с чего нужно начать — разрешить загрузку WebP в медиабиблиотеку WordPress. По умолчанию поддержка WebP появилась в WordPress начиная с версии 5.8, но некоторые серверы и хостинги могут иметь ограничения.
Проверьте, что ваша версия WordPress не ниже 5.8, и что сервер поддерживает GD или Imagick с WebP.
Разрешаем загрузку WebP через фильтр в GeneratePress
Чтобы гарантировать, что тема не запрещает загрузку WebP, добавим фильтр в файл functions.php дочерней темы или в плагин для кастомных функций:
function generatepressru_mime_types_webp( $mimes ) {
$mimes['webp'] = 'image/webp';
return $mimes;
}
add_filter( 'mime_types', 'generatepressru_mime_types_webp' );Этот код добавляет MIME-тип для WebP и разрешает загрузку файлов формата WebP в медиабиблиотеку.
Оптимизация загрузки изображений с WebP и lazy load
Просто разрешить WebP мало — нужно еще заставить браузер загружать WebP, если он поддерживается, и fallback в виде JPEG/PNG, если нет. Это можно сделать через тег <picture> и атрибуты srcset.
Пример функции для вывода изображения с поддержкой WebP в GeneratePress
function generatepressru_get_picture_webp( $id, $size = 'full' ) {
$image_src = wp_get_attachment_image_src( $id, $size );
if ( ! $image_src ) return '';
$url_jpeg = $image_src[0];
$url_webp = preg_replace( '/\.(jpe?g|png)$/i', '.webp', $url_jpeg );
return '<picture>'
. '<source srcset="' . esc_url( $url_webp ) . '" type="image/webp">'
. '<img src="' . esc_url( $url_jpeg ) . '" alt="" loading="lazy" decoding="async">'
. '</picture>';
}Вызов echo generatepressru_get_picture_webp($attachment_id, 'large'); выведет изображение с WebP и fallback. Атрибуты loading="lazy" и decoding="async" дополнительно ускорят загрузку.
Плагины для автоматической конвертации и оптимизации WebP в GeneratePress
Для упрощения работы с WebP можно использовать плагины, которые самостоятельно конвертируют загружаемые изображения и подставляют правильные форматы для пользователей.
- Imagify — мощный плагин для сжатия и конвертации в WebP, интегрируется с GeneratePress без конфликтов. Настройте генерацию WebP и отложенную загрузку.
- WebP Express — бесплатный и гибкий плагин, который создает WebP и настраивает правила .htaccess для отдачи WebP браузерам, поддерживающим этот формат.
- Smush — популярный плагин с поддержкой WebP и lazy load, поддерживает автоматическую оптимизацию изображений.
Все они позволяют не писать вручную сложные правила и обеспечивают совместимость с темой GeneratePress.
Убираем лишние CSS и JS для ускорения загрузки изображений в GeneratePress
GeneratePress сама по себе оптимизирована, но иногда плагины для lazy load или WebP добавляют много скриптов. Можно вручную отключить ненужные стили и скрипты для страниц, где их нет:
function generatepressru_dequeue_lazyload_scripts() {
if ( ! is_singular() ) {
wp_dequeue_script( 'lazyload-js' );
wp_dequeue_style( 'lazyload-css' );
}
}
add_action( 'wp_enqueue_scripts', 'generatepressru_dequeue_lazyload_scripts', 20 );Замените 'lazyload-js' и 'lazyload-css' на реальные имена скриптов плагина. Это уменьшит количество загружаемых ресурсов и ускорит сайт.
Заключение по интеграции WebP и оптимизации в GeneratePress
Добавление WebP — обязательный шаг для современных сайтов на WordPress с темой GeneratePress. Используйте фильтр для разрешения загрузки, выводите картинки через тег <picture> с поддержкой WebP и fallback, применяйте lazy load для повышения скорости. Для удобства автоматизируйте процесс с помощью плагинов Imagify, WebP Express или Smush, а также оптимизируйте подключение скриптов и стилей.
Такой подход позволит сохранить легкость и скорость GeneratePress и улучшить пользовательский опыт и SEO вашего сайта.
Подробнее о плагинах можно узнать на wpshop.ru.