Оптимизация изображений в Wordpress
Когда вашему WordPress сайту более 5 лет, изображения становятся настоящей головной болью. К примеру, наш магазин на 1500 товаров весит около 2 гигабайт! Как вы думаете, сколько процентов занимает мусор, который можно смело удалить?
Сжатие изображений — неотъемлемая часть общей оптимизации сайта. Можно выполнить все пункты Google PageSpeed Insights, но увидеть нечто подобное:
Сразу возникает вопрос: почему они не оптимизированы, если я их обрабатывал в Photoshop? Ответ прост — оригиналы изображений, возможно, оптимизированы. А вот автоматически созданные миниатюры — нет. Это головная боль WordPress.
Поэтому, оптимизируем изображения вручную.
Шаг 1: Отключаем лишнее
Перед началом оптимизации нужно унифицировать размеры миниатюр. Говоря простым языком — уменьшить количество автоматически генерируемых изображений.
Создатели Wordpress и WooCommerce считают, чем больше различных миниатюр создается, тем это лучше для сайта.
Я с этим не согласен, поэтому для себя выделил три вида изображений: маленькая миниатюра (200х200 пикселей), средняя миниатюра (400х400 пикселей) и оригинал (1000х1000 пикселей).
Маленькие изображения используются в архивах, например, в категориях товаров или списке записей блога. Средние в карточке товара или в записях блога. Оригиналы используются редко, например при нажатии на миниатюру.
Размеры миниатюр индивидуальны для каждого сайта и, в основном, зависят от шаблона сайта. К примеру, для четырёх колонок с товарами, миниатюры размером 200х200 предостаточно:
Неправильно настроенный сайт WordPress генерирует множество ненужных миниатюр. Поэтому, перейдем к настройке.
- Миниатюры для блога настраиваются в меню Настройки › Медиафайлы:
2. Изображения товаров настраиваются в меню WooCommerce › Настройки › Товары › Отображение:
Как вы заметили, мы всюду установили одинаковые размеры. Итого у нас генерируется три вида изображений: маленькое, среднее и оригинал. Так ли это? Оказывается, нет.
В папке с изображениями находим миниатюры размером 768х768 пикселей. О том, что они сгенерированы системой говорит их название, например big-sale-768x768.jpg
Так как мы таких размеров явно не задавали, подозрение падает на плагины и тему.
В WordPress есть функция add_image_size() для создания миниатюр:
add_image_size( 'custom-size', 768, 768, true );
В каком-то из файлов php прописан похожий код. С помощью программы Folder Find Text ищем текст add_image_size( и изучаем найденные файлы с помощью Notepad++.
В нашем случае виновником оказалась тема сайта, хотя создавать миниатюры могут и плагины. Ваша задача либо изменить размеры в функции (те самые 768, 768), либо полностью удалить её (от того, что вы удалите эту строчку сайт не пострадает).
Шаг 2: Очищаем сайт от мусора
После задания новых размеров миниатюр нам нужно пересоздать их. Этот процесс называется regenerate thumbnails.
Для этого нам понадобиться установить плагин Force Regenerate Thumbnails. Он удалит старые изображения и создаст новые, к сожалению, не оптимизированные.
Не лишним будет вручную выкачать файлы из папки /wp-content/uploads на компьютер и удалить лишние.
К примеру, у нас почему-то остались изображения размером 140х140 пикселей, смело удаляем их:
Не квадратные изображения, например с размерами 200х180, лучше не трогать. Вообще, с очисткой нужно быть особо осторожным, чтобы случайно не удалить нужные фото.
Еще один способ найти неиспользуемые изображения — перейти в панели управления сайтом в раздел Медиафайлы > Библиотека и выбрать из выпадающего списка пункт Неприкрепленные:
Понять, какие из этих изображений действительно не нужны сможете только Вы. Для системы прикрепленными (неиспользуемыми) изображениями считается всё, что не вставлено на странице, в товаре или записе в блоге.
Шаг 3: Оптимизируем изображения
Наконец-то финальный этап — это сжатие изображений без потери качества. То есть, уменьшения их размера.
Вариант 1: Оптимизировать на сервере (долго)
Плагинов для оптимизации (сжатия) изображений предостаточно. К примеру, в статье The 6 Best WordPress Image Optimization Plugins Compared рассмотрены шесть самых лучших. Я бы посоветовал плагин WP Smush из-за красивого интерфейса.
Обычно такие плагины поддерживают JPEG, PNG, GIF изображения. Вся оптимизация происходит в облаке, но на слабых хостингах может быть заблокирована из-за высокой нагрузки на сервер.
Вариант 2: Оптимизировать на компьютере (быстро)
Более быстрым будет пакетная обработка изображений на компьютере, особенно если он у вас мощный. Для этого нам понадобится программа JPEGmini, к сожалению работающая только с JPEG изображениями. Просто закидываете в неё папку uploads и она сжимает в ней все изображения, пропуская другие типы файлов. По окончании будет сказано, сколько мегабайт удалось выиграть.
Теперь все оптимизированные файлы загружаем обратно на сервер и проверяем показатели Google Pagespeed Insights.
Минус этого решения — каждый раз загружая новые изображения, нам нужно выкачивать их и оптимизировать. Разумеется, решение с плагином будет намного умнее.
Вариант 3: Оптимизация на лету
Установить плагин Jetpack от WordPress.com, который использует CND для изображений. Данная функция называется “Производительность с изображениями”. К сожалению, у данного плагина есть и один большой недостаток — он очень грузит сайт.
Пожалуй это всё, если возникли вопросы, задавайте их в комментариях.
