100% оптимизация изображений под Google Pagespeed бесплатно

Здравствуйте, друзья! В 2017 году на Google пришлось около 75% всех поисковых запросов в мире. Доли Bing 8%, Yahoo 6%. Поэтому SEO сейчас — это в первую очередь подстройка сайта под Google. Последним временем в SEO особым вниманием пользуется Google PageSpeed Insights. Это механизм оценки скорости загрузки страницы. Чем быстрее грузится страница — тем выше у нее рейтинг в результатах поиска Google. Одним из ключевых моментов улучшения показателя в PageSpeed Insights является оптимизация изображений. За не оптимизированные изображения Google снимает много баллов.

Opti MozJpeg Guetzli WebP
Оптимизация изображений. Значок плагина Opti MozJpeg Guetzli WebP

Сегодня, дамы и господа, я представлю слово в своём блоге автору совершенно бесплатного WordPress плагина Opti MozJpeg Guetzli WebP для 100% оптимизации изображений под Google Pagespeed - Игорю.

 Осенью 2017 года мне поступило несколько заказов на PageSpeed SEO для сайтов. Возникла необходимость оптимизации изображений на них. Сначала я купил платный плагин EWWW Image optimizer. Закинул в него $50, посчитал что должно хватить с запасом. Включил оптимизацию. Процесс дошел на первом сайте до 40% и остановился. Я начал разбираться, оказывается деньги закончились. Плагин берет деньги за оптимизацию каждого thumbnail. А там их было по десять штук на одно изображения.

Решил поставить WP Smush, бесплатную версию. Оптимизирует бесплатно 50 изображений, а потом нужно нажать кнопку в админке. Оптимизировал часть изображений. Протестировал в Google Pagespeed, а он все равно показывает, что изображения не оптимизированы. Если до этого было на 30-40% больше нормы, то после применения бесплатной версии WP Smush на 10-15%.

Решил я все изображения загрузить по ftp и оптимизировать с помощью самого оптимального на сегодняшний день Jpeg энкодера, Mozilla MozJpeg. Пробовал несколько раз, пока не добился того что Google Pagespeed снял претензии к изображениям. Но качество изображений стало очень плохое. Попытка оптимизировать изображения с помощью нового Jpeg энкодера Google Guetzli тоже провалилась. Изображения были большими, чем требовал Google Pagespeed. Я начал изучать проблему и нашел причину. Оказалось что с осени 2017 года Google изменил правила определения оптимизированости изображений. И теперь требует, чтобы изображения были меньше чем WebP с качеством 75 + 10% запас.

Google WebP - это открытый стандарт сжатия изображений, работающий на более современных алгоритмах, чем Jpeg. В отличие от Jpeg, WebP поддерживает альфа канал и анимацию. В среднем WebP сжимает изображения на 40% лучше любого Jpeg энкодера, поэтому создать оптимизированные изображения под Google без использования WebP не получится.

Вот тут и возникла идея создать свой плагин для оптимизации изображений. Идея выглядела достаточно простой. Зачем использовать платные плагины оптимизации, вся работа которых заключается в выгрузке изображений на облако, и оптимизации их там тем же Mozilla MozJpeg и Google WebP. Ведь эти энкодеры доступны в сети и их можно использовать бесплатно.

Так я начал создавать свой плагин для оптимизации изображений. Назвал его «Opti MozJpeg Guetzli WebP» (линк на https://wordpress.org/plugins/opti-mozjpeg-guetzli-webp/), от имени энкодеров, которые он использует. Но, как всегда, от идеи до практически готового плагина нужно было много работать. На сегодняшний день я потратил около 250 часов на работы связанные с плагином. И я планирую продолжать работать над ним. Пусть это будет моим вкладом в мир Свободного ПО.

Главная проблема, которую нужно было решить при создании плагина - большинство хостингов не позволяют устанавливать дополнительное ПО. Поэтому установить на них энокдеры не получится. Но ведь можно установить энкодеры на своем декстопе, и быть самим для себя облаком 🙂 но бесплатно. Я нашел на github прекрасную разработку: библиотеку phpseclib (линк на https://github.com/phpseclib/) Это Ssh клиент, полностью написанный на php. Эта библиотека стала основой для моего плагина. Посредством phpseclib плагин может через Ssh подключиться к любому Linux и удаленно использовать энкодеры с него.

Для тех, кто работает на Windows десктоп, я создал виртуальную машину под Oracle VirtualBox. VirtualBox - это бесплатный эмулятор виртуального компьютера. В виртуальной машине установлен Linux, Ssh Сервер и энкодеры Mozilla MozJpeg, Google Guetzli и Google WebP. Скачать и установить VirtualBox и виртуальную машину занимает несколько минут. Дальше подключаем плагин на сайте к виртуальной машине через Ssh, и все готово к оптимизации.

Итак как же добиться 100% оптимизации изображений под Google PageSpeed. Как я уже говорил, сейчас без использования WebP достигнуть нормального результата не возможно. Все было бы хорошо, но на данный момент WebP встроен только в Chrome и Opera. Firefox, Edge и Safari его не понимают. Поэтому просто перегнать все изображения в WebP не получится. Решение нашлось давно и используется всеми платными плагинамы: для каждого thumbnail содержится два изображения. Универсальное (Jpeg, Png или Gif) и WebP дубликат. Дальше в файле .htaccess настраивается переключение между WebP/не WebP, в зависимости от браузера клиента. Точно также реализовано и в моем плагине. Оптимизация проводится в два этапа: сначала оптимизируются универсальные изображения. Потом создаются WebP дубликаты.

В ходе оптимизации плагин автоматически архивирует первичные изображения. Поэтому можно запускать оптимизацию много раз, экспериментировать с настройками. И каждый раз будут как источник браться первичные изображения. То есть деградации качества не будет. Также это дает возможность в будущем переоптимизировать изображения каким то новым энкодером, которого сейчас еще не существует.

Плагин автоматически конвертирует Png изображения без альфа канала в Jpeg. Создает thumbnails и удаляет не используемые thumbnails. Также в плагине есть функция «Вернуть все». С ее помощью можно вернуть все изображения к первичному состоянию, как они были до использования плагина.

Для проведения оптимизации прежде всего нужно установить сам плагин. Стабильная версия находится в каталоге плагинов WordPress. Установить модуль можно стандартным методом, через админпанель.

Если Вы работаете на Linux десктоп - то лучше установить необходимые энкодеры на него. Детально процесс установки энкодеров под Linux описан на странице Часто Задаваемых Вопросов по плагину.

Если Вы работаете на Windows десктоп - то Вам нужно установить Oracle VirtualBox [ссылка на www.virtualbox.org] И мою виртуальную машину для VirtualBox [ссылка на https://drive.google.com/drive/folders/1JqmGgv6VGGyiJVHZ3liV8b2CwfB1QHB6]. В ней содержится Linux, Ssh сервер и энкодеры.

VirtualBox
Загрузите виртуальную машину для VirtualBox

Откройте эту виртуальную машину в VirtualBox. Перейдите в Машина → Настроить → Сеть → Дополнительно → Проброс портов. Укажите IP адрес Вашего компьютера в окне «Правила проброса портов».

ip адрес Вашего компьютера
Укажите ip адрес Вашего компьютера в окне

Если Вы планируете использовать энкодер Google Guetzli, то увеличьте размер оперативной памяти виртуальной машины до 2 гигабайт. (Машина → Настроить → Система → Основная память). Запустите виртуальную машину.

Теперь перейдите в панель администрирования Вашего WordPress сайта. Откройте Media → Opti MozJpeg Guetzli WebP → Settings (не забудьте перед этим установить сам плагин):

Opti MozJpeg Guetzli WebP
Настройки плагина Opti MozJpeg Guetzli WebP

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

Mode = Mozilla MozJpeg

Default quality = 80

Minimal benefit from jpeg compression = 10

Jpeg encoder location = remote

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

Сохраните настройки и перейдите во вкладку "Batch optimization". Нажмите "Run batch optimization".

Кнопка Run batch optimization
Нажмите Run batch optimization

Следите за консолью. Процесс оптимизации должен пройти без ошибок.

После первого этапа все изображения на сайте будут оптимизированы. Вторым этапом будет "Webp duplicates generation". Опять переходим в вкладку "Settings". И настраиваем:

Mode = Google WebP (duplicates generation)

Default quality = 75

Minimal benefit from lossy compression = 5

Нажимаем "Save Changes". Возвращаемся во вкладку "Batch optimization" и запускаем оптимизацию второй раз.

Если Вы откроете папку uploads после завершения второго этапа оптимизации, то увидите пары файлов для каждого thumbnail.

Файлы изображений
Оптимизированные изображения

Последние, что нужно сделать — настроить Apache так, чтобы он выдавал webp файлы браузерам с поддержкой WebP. Добавьте следующее в файл .htaccess:

Если Вы откроете Ваш сайт в браузере Google Chrome, то увидите, что адреса изображений не изменились. Но на самом деле они содержат данные в формате WebP.

Адреса изображений
Адреса изображений не изменились

Ну вот, теперь все готово. Тестируйте Ваш сайт в Google Pagespeed Insights! Замечаний касательно оптимизации изображений быть не должно. При этом качество изображений останется практически таким же, как и на изначальных изображениях. И это все полностью бесплатно.

Желаю приятной работы с плагином. Удачи!

С уважением, автор плагина «Opti MozJpeg Guetzli WebP»

Игорь Слива

P.S. Если у Вас возникают трудности с использованием виртуальной машины на Вашем компьютере, тогда попробуйте воспользоваться бесплатным онлайн сервером от автора плагина. Параметры доступа к серверу:

SSH Server: wpmjgu-free-server.ihorsl.com
SSH Port: 22
SSH Username: z
SSH Password: 55555
Working directory at SSH server: /home/z/wpmjgu

 

Сервер имеет некоторые ограничения:

  • Google Guetzli не поддерживается
  • «Intensive resources consumption mode» не поддерживается, с одного IP адреса разрешено только одно ssh соединение

Нормальная продуктивность сервера в среднем 1000 изображений в час с одного IP адреса (каждый thumbnail — это отдельное изображение). Если продуктивность сервера заметно ниже — то значит он интенсивно используется другими пользователями. Google Guetzli не поддерживается в бесплатном сервере, потому что этот энкодер потребляет очень много ресурсов: один Guetzli процесс может потреблять свыше 1ГБ оперативной памяти.



Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *