Здравствуйте, друзья! Оптимизация изображений для Google Pagespeed со 100% результатом. Так, по крайней мере, заявляет автор данной статьи, читайте и действуйте.
В 2017 году на Google пришлось около 75% всех поисковых запросов в мире. Доли Bing 8%, Yahoo 6%. Поэтому SEO сейчас — это в первую очередь подстройка сайта под Google. Последним временем в SEO особым вниманием пользуется Google PageSpeed Insights. Это механизм оценки скорости загрузки страницы. Чем быстрее грузится страница — тем выше у нее рейтинг в результатах поиска Google.
Одним из ключевых моментов улучшения показателя в PageSpeed Insights является оптимизация изображений. За не оптимизированные изображения Google снимает много баллов.
Сегодня, дамы и господа, я представлю слово в своём блоге автору совершенно бесплатного WordPress плагина Opti MozJpeg Guetzli WebP для 100% оптимизации изображений под Google Pagespeed - Игорю. Он web программист с пятнадцатилетним стажем.
Осенью 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 не получится.
Вот тут и возникла идея создать свой плагин для оптимизации изображений WordPress (вордпресс). Идея выглядела достаточно простой. Зачем использовать платные плагины оптимизации, вся работа которых заключается в выгрузке изображений на облако, и оптимизации их там тем же Mozilla MozJpeg и Google WebP. Ведь эти энкодеры доступны в сети и их можно использовать бесплатно.
Так я начал создавать свой плагин для оптимизации изображений. Назвал его Opti MozJpeg Guetzli WebP (линк на https://wordpress.org/plugins/opti-mozjpeg-guetzli-webp/), от имени энкодеров, которые он использует. В отличие от других плагинов WordPress для сжатия картинок, мой жмёт webp с заданным коэффициентом.
Оптимизация изображений с 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. Перейдите в Машина → Настроить → Сеть → Дополнительно → Проброс портов. Укажите IP адрес Вашего компьютера в окне Правила проброса портов.
Если Вы планируете использовать энкодер Google Guetzli, то увеличьте размер оперативной памяти виртуальной машины до 2 гигабайт. (Машина → Настроить → Система → Основная память). Запустите виртуальную машину.
Теперь перейдите в панель администрирования Вашего WordPress сайта. Откройте Media → Opti MozJpeg Guetzli WebP → Settings (не забудьте перед этим установить сам плагин):
Для первого этапа оптимизации укажите следующие настройки:
Mode = Mozilla MozJpeg
Default quality = 80
Minimal benefit from jpeg compression = 10
Jpeg encoder location = remote
Сохраните настройки и перейдите во вкладку "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:
### # BEGIN Opti MozJpeg Guetzli WebP ### <IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP_ACCEPT} image/webp RewriteCond %{REQUEST_URI} .*(jpe?g|png|gif)$ RewriteCond %{REQUEST_FILENAME}\.webp -f RewriteRule (.*) %{REQUEST_FILENAME}\.webp [T=image/webp,E=accept:1] </IfModule> <IfModule mod_headers.c> Header append Vary Accept env=REDIRECT_accept </IfModule> AddType image/webp .webp ### # END Opti MozJpeg Guetzli WebP ###
Если Вы откроете Ваш сайт в браузере 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 ГБ оперативной памяти.
Не знаю, кто как, но я уже столько намучился с этой оптимизацией, вроде бы все уже сделал загружаеш заново, а оно все равно ругается, жесть короче 🙂 Спасибо, за ваш способ обязательно попробую им воспользоваться да, надеюсь мне удастся все таки справится с этим пунктом в Google Pagespeed
SSH Username и Password в консоли вордпресс нужно вводить только в случае использования онлайн сервера автора плагина?
Да. 🙂
После того как виртуальная машина запущена, она готова к роботе. В нее входить не обязательно. В панели настроек плагина введите
Логин:z
Пароль: 55555
Если очень нужно войти в саму виртуальную машину то пароли есть тут:
http://joxi.ru/V2V33EoixV7Z3A
Кто уже испытал, стоит данный плагин мучений?)
wpmjgu login что вводить?
Логин@пароль всегда z@55555
И для онлайн сервера и для виртуальной машины
Привет, на втором этапе при генерации WebP возникает такая ошибка
ERROR: Can`t connect to ssh server or bad login
Что делать, использовал предоставленный автором сервер.
Привет, Роман! Передал ваш вопрос автору плагина. Должен сам ответить вам. 🙂
Здравствуйте, Роман. Бесплатный сервер работает на бесплатном виртуальном сервере Amazon AWS. Amazon AWS имеет суточное ограничение операций. Похоже что Вы попали на такое ограничение. Попробуйте на следующий день снова. Хотя я бы все таки рекомендовал иметь свой сервер. Если Вы на ты с Linux, то соберите себе энкодеры сами. В инструкции на сайте плагина есть подробное описание
Самое интересное потом делается на хостинге, когда твой хостинг провайдер например reg.ru
Ответ техподдержки:
на услугах виртуального хостинга конструкция указанная в .htaccess не сработает. Вы можете произвести произвести тонкую настройку веб-сервера на VPS и Dedicated серверах, т.к. вам будет предоставлен полный root-доступ к серверу.
Здравствуйте. На этапе Batch Optimization в плагине выдает «ERROR: Can`t connect to ssh server or bad login», при этом на виртуальной машине вручную невозможно ввести password (нет реакции ни на буквы, ни на числа), но при этом login вводится без проблем.
Привет, Арсен! Передал ваш вопрос автору плагина.
Бесплатный сервер работает на бесплатном виртуальном сервере от Amazon. И имеет ограничение по трафику. Поэтому если он не отвечает — значит закончился суточный лимит
Если вы используете виртуальную машину у себя на компьютере то иногда она может зависнуть из за проблем в самом Virtual Box. У меня так часто бывает если мой компьютер перешел в режим сна с включенной виртуальной машиной. Просто перезапустите виртуальную машину заново и подождите пока Линукс в ней загрузится
А, вспомнил. Debian Linux не отображает звездочки при вводе пароля.