Table of Contents
1 Предисловие
В статьях по поисковой оптимизации постоянно пишут, что нужно писать тексты для людей, грамотно расставлять теги и правильным оформлять ссылки. Но почему-то мало где пишут об сжатии изображений. А ведь именно размер графических файлов, которые подгружаются вместе с текстом, влияют на скорость загрузки страницы! Да, есть файлы с JavaScript и стили CSS, а также шрифты, видео, звуки и много чего ещё, но именно графика встречается всегда, именно эти файлы стоит оптимизировать в первую очередь.
Если вы ответственный владелец сайта и не хотите, чтобы он сдал позиции, то вопрос сжатия графики и прочих файлов придётся решить до июля 2018 года. Недавно Гугл объявил в своём блоге (Using page speed in mobile search ranking), что в июле скорость загрузки страницы начнёт влияет на поисковую выдачу для мобильных пользователей. Конечно, на скорость загрузки влияет далеко не только размер файлов, но и задержка при ответе веб-сервера на запрос, UX и качество кода, поэтому нужно оптимизировать много чего ещё, но начать можно с файлов графики.
Кстати, инструмент анализа сайтов Google PageSpeed Insights любит советовать оптимизировать изображения, прислушайтесь к его предложениям по оптимизации:
О мобильных пользователях, тех бедолагах, что сидят через 3G или, упаси Боже, EDGE и GPRS, беспокоиться нужно, так как это значительная часть аудитории. Во многих странах пользователей, пользующихся интернетом с мобильных устройств, больше, чем с настольных ПК. Например, в России в конце 2017 года таких стало 56 процентов. То есть большинство с небольшим перевесом. Дальше будет больше.
Владельцы сайтов должны понимать, что нужно делать страницы как можно более компактными. Чем быстрее сервер отдаст страницу, тем больше людей её прочтёт. С каждой секундой, пока сайт открывается, растёт шанс того, что пользователь уйдёт, не дождавшись появления контента.
Существует уйма способов оптимизировать изображения.
- Оптимизировать графику до загрузки на сайт различными утилитами. Такой способ — полумера, потому что многие сайты генерируют уменьшенные размеры изображений, никак не оптимизируя их. Толку от того, что только одна из пяти фотографий оптимизирована?
- Прикрутить к веб-серверу Mod_Pagespeed, который не только сожмёт графику, но и сократит содержимое файлов CSS, JavaScript и некоторых других. Сжатие произойдет в момент запроса файлов и сохранится в кеше. К сожалению, сервер должен быть производительным, иначе между запросом и отдачей пройдёт слишком много времени. А отклик сервера тоже важен, его нельзя увеличивать.
- Если сайт использует популярную CMS, например, WordPress, можно сжимать графику сразу после загрузки файла с помощью различных сторонних сервисов. Правда, бесплатно много фотографий не сожмешь, в ограничения впишутся разве что владельцы нечасто обновляемых блогов.
- Сжимать графику и на стороне сервера с помощью плагина WordPress CW Optimizer. К сожалению, плагин давно не обновлялся, да и привязан только с популярной CMS. Владельцам самописных и менее популярных систем управления контентом придётся пилить что-то своё.
- Воспользоваться сервисом PageSpeed Insights, который не только сообщает о проблемах с оптимизацией сайта, но и создаёт архив сжатых изображений. К сожалению, имена оптимизированных файлов могут отличаться от используемых на сайте, поэтому просто так скачать архив и заменить фотографии не получится.
- Сжимать графику на сервере сторонним софтом, не зависящим от CMS. Не важно, на чём там крутится сайт, можно напрямую оптимизировать лежащие на жёстком диске сервера изображения. Об этом и будет далее.
2 Скрипт zImageOptimizer
Предлагаю использовать скрипт оптимизации zImageOptimizer. С его помощью можно периодически запускать оптимизацию графических файлов форматов JPEG, PNG, GIF в указанной папке, причем сжатию подвергнутся только новые файлы. Последнее особенно важно, потому что повторное сжатие может ухудшить качество картинки, а существенного результата не принесёт.
Это нормально работающий продукт, который можно использовать на работающем сервере или ПК.
На shared-хостинге такой способ не прокатит. Там нельзя ни ставить софт, ни запускать скрипты (за редким исключением). Если нужен полный контроль над сайтом или сторонние платные сервисы оптимизации вас не устраивают, задумайтесь о покупке виртуального сервера. Это не так дорого, как отдельный сервер. Подробности смотрите в заметке «Как выбрать VPS хостинг — несколько советов».
Автор Александр «zEvilz» Емшанов над скриптом работает давно. Надеюсь, его запал не иссякнет, ведь получившийся инструмент, ИМХО, лучший из подобных. Но он станет ещё лучше, ведь в планах у автора дополнительные настройки, логирование и другие фичи.
Особенности скрипта:
- Сжимает без потерь (losless оптимизация).
- Оптимизирует файлы формата JPEG, GIF и PNG.
- Поддерживает вложенные каталоги.
- Проверяет, установлены ли утилиты оптимизации и устанавливает их.
- Показывает информацию о том, насколько сжались файлы.
- Может оптимизировать только новые файлы.
- Никаких ограничений по именам файлов (может работать с кириллицей), их размеру и количеству.
Скрипт совместим со многими популярными дистрибутивами Linux:
- DEB-based (i686/amd64)
Debian 7+
Ubuntu 14.04+ - RPM-based (i686/x86_64)
RHEL 6+
CentOS 6+
Fedora 24+
FreeBSD 10.3 / 10.4 / 11.1 (i686/amd64)
Все параметры командной строки и подробности вы узнаете на домашней странице. А я расскажу о том, как на практике использовать этот скрипт.
3 Как установить
Вся установка сводится к простому скачиванию скрипта в домашнюю папку, чтобы для его запуска не требовалось указывать полный путь.
Допустим, вы сидите под пользователем admin. Для загрузки я использую wget, вы можете воспользоваться curl или другой аналогичной утилитой:
wget https://raw.githubusercontent.com/zevilz/zImageOptimizer/master/zImageOptimizer.sh -O /home/admin/zImageOptimizer.sh
Затем нужно установить софт, который, собственно, сжимает изображения по команде скрипта.
sudo bash zImageOptimizer.sh -c
Напомню ещё раз: если скрипт хранится в отдельном каталоге (не в папке пользователя или некоторых других системных директориях), zImageOptimizer.sh запустится только с указанием полного пути: /home/admin/zImageOptimizer.sh.
Параметр «-c» означает, что скрипт покажет установленный софт и спросит об установке отсутствующих пакетов. Нажмите 1 и Enter, чтобы выбрать вариант «1. Install dependences and exit», установка запустится.
Обратите внимание, что только на этом этапе скрипт нужно запускать с командой sudo или из-под пользователя с правами root. Без них установка зависимого софта завершится неудачно. В остальных случаях запускать под рутом нельзя, потому что преобразованные файлы изображений могут оказаться недоступны веб-серверу из-за нарушенных прав доступа.
Повторный ввод команды «bash zImageOptimizer.sh -c», если все пакеты в репозиториях нашлись, покажет, что всё «FOUND», т.е. найдено.
Вариант 1: оптимизация всей графики в папке
Это самый простой вариант. Оптимизируется всё — и ранее оптимизированное, и не оптимизированное:
bash zImageOptimizer.sh -p /путь/до/каталога/
Скрипт пропустит через несколько утилит оптимизации все файлы JPEG, PNG и GIF в указанном и вложенных каталогах. Для разовой оптимизации подходит, но не более того. Повторно сжимать графику нет смысла, потому что сжатия не будет.
Вариант 2: использование метки времени
Самый лучший способ сжатия изображений — запустить оптимизацию, учитывающую метку времени.
При запуске скрипт посмотрит время файла-метки и оптимизирует только те графические файлы, которые были созданы после предыдущей оптимизации. Старые, уже оптимизированные изображения проигнорируются.
Чтобы оптимизировать директорию (включая вложенные), запустите команду:
bash zImageOptimizer.sh -p /путь/до/каталога/ -n
Скрипт создаст файл метки в этом каталоге и при повторном запуске будут оптимизированы только новые файлы. Учтите: когда вы укажете каталог уровнем выше, скрипт снова обработает старые файлы, потому что файл метки, будучи в другом месте, не будет найден. Что же делать? Укажите файл метки вручную.
bash zImageOptimizer.sh -p /путь/до/каталога/ -n -m /home/admin/.timemarker
Вариант 3: оптимизация файлов, созданных за определённый промежуток времени
Можно ориентироваться на время создания файлов без учёта метки времени. Например, эта команда сожмёт появившуюся за сутки графику:
bash /home/admin/zImageOptimizer.sh -p /путь/до/каталога/ -t 1d
Поддерживаемые параметры:
- Дни (1d, 2d, 3d и так далее)
- Часы (1h. 2h, 10h…)
- Минуты (1m, 15m, 50m…)
Изначально я этого не написал, но автор скрипта мне напомнил: для регулярной оптимизации такой способ не подходит. Допустим, если запускать оптимизацию раз в сутки, то новые файлы окажутся свежее суточной давности и в при следующем суточном запуске они начнут оптимизироваться снова. Для сжатия по расписанию используйте только вариант со временными метками.
4 Как избежать прерывания долгого выполнения скрипта
Первая оптимизация может затянуться надолго (мои 2 Гб изображений сжимались двое суток), поэтому используйте утилиту screen, которая не даст скрипту завершиться после отключения от сервера по ssh.
Установка screen и запуск:
apt install screen screen
Команда apt работает только в Убунте, у вас может быть иначе.
После команды screen откроется новый сеанс в виртуальном терминале, который не закроется и не прервёт выполнение скрипта при потере сети или дисконнекте. Чтобы «свернуть» screen и вернуться к обычному терминалу, нужно нажать Ctrl+A, затем D. Команда screen -r восстановит экран программы обратно. Подробнее о этой замечательной утилите написано в документации.
5 Можно использовать запуск по расписанию через cron
Скрипт можно запускать не только вручную, но и автоматически через cron. Например, раз в сутки ночью в 2.00, оптимизируя графику на основе временной метки:
0 2 * * * bash /home/admin/zImageOptimizer.sh -p /путь/до/каталога/ -n
В этом моменте спасибо zEvilz за поправку: изначально мой совет был некорректным, я советовал использовать неподходящую опцию скрипта.
Будьте внимательны при выборе каталога: не всегда можно/нужно оптимизировать все JPEG, PNG и GIF файлы. Нежелательно натравливать скрипт на всю директорию сайта, потому что в подкаталоге с кешем могут оказаться графические файлы, которые просуществуют, возможно, несколько минут. Тратить время скрипта на это — расточительство ресурсов и времени. Указывайте только директорию, где хранятся загруженные вами и вашими посетителями файлы.
Небольшой лайфхак: чтобы знать, проводилась ли оптимизация, не обязательно смотреть логи. Достаточно хранить временные метки в каталоге пользователя и смотреть их дату с помощью показа списка файлов командой ls или запуская менеджер файлов Mignight Commander. Например, хранение метки в каталоге пользователя admin:
bash /home/admin/zImageOptimizer.sh -p /путь/до/каталога/ -n -m /home/admin/.timemarker
6 Как сжать изображения ещё сильнее
До того, как я стал использовать zImageOptimizer на своём сервере, пробовал оптимизировать JPEG с помощью алгоритма Guetzli, разработанной сотрудниками Гугла. Самый удачный скрипт автоматизации, использующих Guetzli — это Guetzling. Алгоритм гарантированно сделает файлы JPEG и PNG меньше, но использовать его можно только на локальной машине или очень быстром многоядерном сервере. К сожалению, мой VPS — один из самых дешёвых в мире, и это как раз та задача, которая оказалась явно ему не по зубам. Оптимизация одного изображения занимала в лучшем случае минут 15 и полностью подвешивала на это время систему. Но вы можете попробовать.
