Как оптимизировать изображения сайта

В статьях по поисковой оптимизации постоянно пишут, что нужно писать тексты для людей, грамотно расставлять теги и правильным оформлять ссылки. Но почему-то мало где пишут об сжатии изображений. А ведь именно размер графических файлов, которые подгружаются вместе с текстом, влияют на скорость загрузки страницы! Да, есть файлы с JavaScript и стили CSS, а также шрифты, видео, звуки и много чего ещё, но именно графика встречается всегда, именно эти файлы стоит оптимизировать в первую очередь.

Если вы ответственный владелец сайта и не хотите, чтобы он сдал позиции, то вопрос сжатия графики и прочих файлов придётся решить до июля 2018 года. Недавно Гугл объявил в своём блоге(Using page speed in mobile search ranking), что в июле скорость загрузки страницы начнёт влияет на поисковую выдачу для мобильных пользователей. Конечно, на скорость загрузки влияет далеко не только размер файлов, но и задержка при ответе веб-сервера на запрос, UX и качество кода, поэтому нужно оптимизировать много чего ещё, но начать можно с файлов графики.

Кстати, инструмент анализа сайтов Google PageSpeed Insights любит советовать оптимизировать изображения, прислушайтесь к его предложениям по оптимизации:

Оптимизация изображений на VPS 1

О мобильных пользователях, тех бедолагах, что сидят через 3G или, упаси Боже, EDGE и GPRS, беспокоиться нужно, так как это значительная часть аудитории. Во многих странах пользователей, пользующихся интернетом с мобильных устройств, больше, чем с настольных ПК. Например, в России в конце 2017 года таких стало 56 процентов. То есть большинство с небольшим перевесом. Дальше будет больше.

Оптимизация изображений на VPS
Источник: исследование GfK

Владельцы сайтов должны понимать, что нужно делать страницы как можно более компактными. Чем быстрее сервер отдаст страницу, тем больше людей её прочтёт. С каждой секундой, пока сайт открывается, растёт шанс того, что пользователь уйдёт, не дождавшись появления контента.

Существует уйма способов оптимизировать изображения. 

  • Оптимизировать графику до загрузки на сайт различными утилитами. Такой способ – полумера, потому что многие сайты генерируют уменьшенные размеры изображений, никак не оптимизируя их. Толку от того, что только одна из пяти фотографий оптимизирована?
  • Прикрутить к веб-серверуMod_Pagespeed, который не только сожмёт графику, но и сократит содержимое файлов CSS, JavaScript и некоторых других. Сжатие произойдет в момент запроса файлов и сохранится в кеше. К сожалению, сервер должен быть производительным, иначе между запросом и отдачей пройдёт слишком много времени. А отклик сервера тоже важен, его нельзя увеличивать.
  • Если сайт использует популярную CMS, например, WordPress, можно сжимать графику сразу после загрузки файла с помощью различных сторонних сервисов. Правда, бесплатно много фотографий не сожмешь, в ограничения впишутся разве что владельцы нечасто обновляемых блогов.
  • Сжимать графику и на стороне сервера с помощью плагина WordPress CW Optimizer. К сожалению, плагин давно не обновлялся, да и привязан только с популярной CMS. Владельцам самописных и менее популярных систем управления контентом придётся пилить что-то своё.
  • Воспользоваться сервисом PageSpeed Insights, который не только сообщает о проблемах с оптимизацией сайта, но и создаёт архив сжатых изображений. К сожалению, имена оптимизированных файлов могут отличаться от используемых на сайте, поэтому просто так скачать архив и заменить фотографии не получится.
  • Сжимать графику на сервере сторонним софтом, не зависящим от CMS. Не важно, на чём там крутится сайт, можно напрямую оптимизировать лежащие на жёстком диске сервера изображения. Об этом и будет далее.

Скрипт zImageOptimizer

Предлагаю использовать скрипт оптимизации zImageOptimizer. С его помощью можно периодически запускать оптимизацию графических файлов форматов JPEG, PNG, GIF и SVG в указанной папке, причем сжатию подвергнутся только новые файлы. Последнее особенно важно, потому что повторное сжатие может ухудшить качество картинки, а существенного результата не принесёт.

Это нормально работающий продукт, который можно использовать на работающем сервере или ПК.

На shared-хостинге такой способ не прокатит. Там нельзя ни ставить софт, ни запускать скрипты (за редким исключением). Если нужен полный контроль над сайтом или сторонние платные сервисы оптимизации вас не устраивают, задумайтесь о покупке виртуального сервера. Это не так дорого, как отдельный сервер. Подробности смотрите в заметке «Как выбрать VPS хостинг – несколько советов».

Автор Александр «zEvilz» Емшанов над скриптом работает давно. Надеюсь, его запал не иссякнет, ведь получившийся инструмент, ИМХО, лучший из подобных. Но он станет ещё лучше, ведь в планах у автора добавление поддержки формата SVG, дополнительные настройки, логирование и другие фичи.

Особенности скрипта:

  • Сжимает без потерь (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)

Все параметры командной строки и подробности вы узнаете на домашней странице. А я расскажу о том, как, по моему мнению, использовать этот скрипт.

Как установить скрипт

Установка – это скачивание в домашнюю папку, чтобы при запуске скрипта не нужно было указывать полный путь. Допустим, вы сидите под пользователем «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 запустится только с указанием полного пути.

sudo bash /home/admin/zImageOptimizer.sh -c

Параметр «-c» означает, что скрипт покажет установленный софт и спросит об установке отсутствующих пакетов. Нажмите 1 и Enter, чтобы выбрать вариант «1. Install dependences and exit», установка запустится. Обратите внимание, что только на этом этапе скрипт нужно запускать с командой sudo или из-под рута. В остальных случаях рут вреден, потому что преобразованные файлы изображений могут оказаться недоступны веб-серверу из-за нарушенных прав доступа.

Повторный ввод команды «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...)

В принципе, если запускать задачу исключительно через фиксированный интервал времени, способ тоже подходит.

Как избежать прерывания долгого выполнения скрипта

Первая оптимизация может затянуться надолго (мои 2 Гб изображений сжимались двое суток), поэтому используйте утилиту screen, которая не даст скрипту завершиться после отключения от сервера по ssh.

Установка screen и запуск:

apt install screen
screen

Команда apt работает только в Убунте, у вас может быть иначе.

После команды screen откроется новый сеанс в виртуальном терминале, который не закроется и не прервёт выполнение скрипта при потере сети или дисконнекте. Чтобы «свернуть» screen и вернуться к обычному терминалу, нужно нажать Ctrl+A, затем D. Команда screen -r восстановит экран программы обратно. Подробнее о этой замечательной утилите написано в документации.

Можно использовать запуск по расписанию через cron

Скрипт можно запускать не только вручную, но и автоматически через cron. Например, раз в сутки ночью в 2.00, оптимизируя загруженную за последние 24 часа графику:

0 2 * * * bash /home/admin/zImageOptimizer.sh -p /путь/до/каталога/ -t 1d -q

Будьте внимательны при выборе каталога: не всегда можно/нужно оптимизировать все JPEG, PNG и GIF файлы. Например, нежелательно натравливать скрипт на всю папку сайта на WordPress, потому что в папке кеша могут оказаться графические файлы, которые просуществуют, возможно, несколько минут. Тратить время скрипта на это – расточительство ресурсов.

Лично мне удобнее использовать файлы меток, хранимые в домашнем каталоге: так я вижу, когда проводилась последняя оптимизация, не нужно создавать логи.

bash /home/admin/zImageOptimizer.sh -p /путь/до/каталога/ -n -m /home/admin/.timemarker

Как сжать изображения ещё сильнее

До того, как я стал использовать zImageOptimizer на своём сервере, пробовал оптимизировать JPEG с помощью алгоритма Guetzli, разработанной сотрудниками Гугла. Самый удачный скрипт автоматизации, использующих Guetzli – это Guetzling. Алгоритм гарантированно сделает файлы JPEG и PNG меньше, но использовать его можно только на локальной машине или мощном многоядерном сервере. К сожалению, мой VPS – один из самых дешёвых в мире, и это была как раз та задача, которая оказалась явно не по зубам виртуальному железу. Оптимизация одного изображения занимала в лучшем случае минут 15 и полностью подвешивала на это время систему. Но вы можете попробовать.

Понравилось? Поделись с друзьями:
Комментарии
Правила комментирования

1. Обсуждение пиратских версий программ запрещено.

2. Никакого мата и оскорблений.

3. Комментарии, содержимое которых нарушает законы РФ и/или ЕС, удаляются, их авторы - банятся.

4. Комментарии с ссылками видны только после проверки модератором.

  • Без регистрации
  • Через Вконтакте

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

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