Введение
Ускорить сайт, работающий на WordPress, — задача, которая всегда актуальна для веб-разработчика. Особенно, когда речь идёт о сжатии и оптимизации изображений. Плохая оптимизация графики может привести к замедленной загрузке страниц и, как следствие, к недовольству посетителей и снижению позиций в поисковой выдаче. Поэтому давайте разберёмся, как оптимизировать изображения для WordPress с помощью команд Linux, автоматизировать процесс сжатия через cron, и заодно настроим поддержку WebP, чтобы ускорить загрузку и улучшить SEO.
Установим необходимые утилиты для Linux
Для начала установим набор утилит, который понадобится нам для сжатия изображений:
sudo apt update sudo apt install jpegoptim optipng gifsicle webp -y
- jpegoptim — сжатие JPEG.
- optipng — сжатие PNG без потерь.
- gifsicle — сжатие GIF.
- webp — конвертация в WebP, более современный и эффективный формат.
Сжатие и оптимизация изображений
1. Оптимизация JPEG с помощью jpegoptim
JPEG — популярный формат для фотографий, поэтому начнем с его оптимизации:
jpegoptim --max=85 --strip-all image.jpg
--max=85— устанавливаем качество на 85%.--strip-all— удаляет ненужные метаданные (EXIF и т.д.).
Автоматизация для всех JPEG файлов в WordPress директории:
find /var/www/html/wp-content/uploads -iname '*.jpg' -exec jpegoptim --max=85 --strip-all {} \;
2. Сжатие PNG с помощью optipng
Для PNG, которые часто используются для логотипов и иконок:
optipng -o7 image.png
-o7— максимальное сжатие без потерь.
Оптимизируем все PNG файлы в загрузках WordPress:
find /var/www/html/wp-content/uploads -iname '*.png' -exec optipng -o7 {} \;
3. Сжатие GIF с помощью gifsicle
Если у вас на сайте есть анимационные GIF:
gifsicle -O3 image.gif -o image-optimized.gif
-O3— максимальная оптимизация.
Конвертация изображений в WebP
Формат WebP от Google обеспечивает высокое качество при меньшем размере файлов:
cwebp -q 80 image.jpg -o image.webp
-q 80— качество сжатия 80%.
Конвертируем все JPEG и PNG в WebP:
find /var/www/html/wp-content/uploads \( -iname '*.jpg' -o -iname '*.png' \) -exec sh -c 'cwebp -q 80 "$1" -o "${1%.*}.webp"' _ {} \;
Проблема: Ссылки на JPEG и PNG в базе данных WordPress
После конвертации файлов в WebP возникает вопрос: как заставить WordPress автоматически использовать WebP, если браузер поддерживает этот формат? Просто заменить ссылки в базе данных нельзя, так как это нарушит работу сайта.
Для решения этой проблемы у нас есть несколько вариантов:
Решение 1: Подмена через .htaccess для Apache
Если ваш сервер работает на Apache, добавьте в файл .htaccess:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.+)\.(jpe?g|png)$
RewriteCond %{DOCUMENT_ROOT}/\.webp -f
RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:image/webp,L]
</IfModule>
Как это работает:
- Сервер проверяет, поддерживает ли браузер WebP (
HTTP_ACCEPT image/webp). - Если запрашиваемый файл — JPEG или PNG, и существует WebP версия, сервер автоматически подставляет её.
Решение 2: Использование PHP-фильтров для WordPress
Если вы используете Nginx или хотите управлять подменой изображений на уровне WordPress, можно добавить PHP-код в файл functions.php вашей темы:
function serve_webp_if_available($content) {
if (strpos($_SERVER['HTTP_ACCEPT'], 'image/webp') !== false) {
$content = preg_replace_callback('/<img[^>]+src=["\']([^"\']+)\.(jpg|jpeg|png)["\']/', function ($matches) {
$webp_url = $matches[1] . '.webp';
if (file_exists(get_home_path() . str_replace(site_url() . '/', '', $webp_url))) {
return str_replace($matches[0], str_replace($matches[2], 'webp', $matches[0]), $matches[0]);
}
return $matches[0];
}, $content);
}
return $content;
}
add_filter('the_content', 'serve_webp_if_available');
Как это работает:
- Фильтр
the_contentпроверяет все изображения на странице. - Если браузер поддерживает WebP и такой файл существует, он автоматически подставляется.
Автоматизация с помощью cron
Чтобы ваш сервер автоматически сжимал и конвертировал изображения, настройте cron:
crontab -e
Добавьте:
# Сжимаем JPEG и PNG каждую ночь
0 2 * * * find /var/www/html/wp-content/uploads -iname '*.jpg' -exec jpegoptim --max=85 --strip-all {} \;
0 2 * * * find /var/www/html/wp-content/uploads -iname '*.png' -exec optipng -o7 {} \;
# Конвертация в WebP
0 3 * * * find /var/www/html/wp-content/uploads \( -iname '*.jpg' -o -iname '*.png' \) -exec sh -c 'cwebp -q 80 "$1" -o "${1%.*}.webp"' _ {} \;
Если вы используете Nginx и хотите настроить автоматическую подгрузку WebP изображений вместо JPEG или PNG, это тоже можно сделать с помощью правил rewrite. В отличие от Apache, Nginx не поддерживает .htaccess, но мы можем настроить всё прямо в конфигурации сервера.
Решение: Nginx rewrite для WebP
Добавим правила в ваш файл конфигурации Nginx (например, /etc/nginx/sites-available/your-site):
server {
listen 80;
server_name your-domain.com;
# Корневая директория сайта
root /var/www/html;
location ~* \.(jpe?g|png)$ {
# Проверка, поддерживает ли браузер WebP
set $webp_suffix "";
if ($http_accept ~* "image/webp") {
set $webp_suffix ".webp";
}
# Если файл .webp существует, используем его
if (-f $request_filename$webp_suffix) {
rewrite ^(.+)\.(jpe?g|png)$ $1$webp_suffix break;
}
# Обслуживаем оригинальный файл, если WebP версия отсутствует
try_files $uri =404;
}
}
Как это работает:
- Проверка поддержки WebP: Если браузер отправляет заголовок
Accept: image/webp, мы устанавливаем суффикс.webp. - Проверка наличия файла: Если WebP версия изображения существует, сервер использует её.
- Обычный файл: Если WebP версия не найдена, используется оригинальное изображение (JPEG или PNG).
Перезагрузка Nginx для применения изменений
После редактирования конфигурации перезагрузите Nginx:
sudo nginx -t sudo systemctl reload nginx
Проверка
- Откройте ваш сайт в браузере, который поддерживает WebP (например, Google Chrome).
- Проверьте загруженные изображения с помощью DevTools (F12 → Network), чтобы убедиться, что браузер подгружает
.webpверсии файлов.
Автоматизация конвертации через cron
Если вы уже настроили автоматическое создание WebP версий через cron, как описано ранее, теперь ваш Nginx сервер будет автоматически подгружать оптимизированные файлы без необходимости менять ссылки в базе данных WordPress.
Дополнительные советы
Если вы используете кеширование, не забудьте очистить кеш после изменения конфигурации. Это особенно важно для Nginx с FastCGI Cache или других методов кеширования, чтобы новые правила начали применяться.
Теперь ваш сайт автоматически будет использовать WebP, ускоряя загрузку страниц и улучшая SEO, не требуя ручного изменения ссылок в базе данных WordPress.
Заключение
Теперь ваш WordPress-сайт готов использовать WebP и оптимизированные версии изображений. Это значительно ускорит загрузку страниц и повысит ваш PageSpeed Score, что в свою очередь, улучшит SEO.
Используйте решение, которое подходит именно вам: .htaccess, PHP-фильтры или плагины. А если у вас уже настроены cron задачи — можно расслабиться и больше не беспокоиться о размерах изображений.
P.S. Как говорят опытные WordPress разработчики: «Если можно автоматизировать — автоматизируй». А пока ваша система оптимизирует изображения каждую ночь, можно налить себе кофе и не волноваться о скорости загрузки сайта.
