оптимизация изображений page speed insights

Оптимизация изображений Page Speed Insights

Недавно встала задача оптимизации веб сайтов. Инструмент Google Page Speed Insights рекомендует сжать изображения без потерь, для ускорения загрузки сайтов путем оптимизации трафика.

Сначала выбор пал на сервис TinyPNG. Он хорошо себя показал при работе с небольшой группой файлов. Для чего, на коленке, было написано пару классов для оптимизации изображений на PHP с использованием tinyfy из официального репозитория. Для использования достаточно поместить папку в любое место вашего сайта. В файле index.php показан пример использования, но можно и в нем просто указать путь до папки которую нужно сканировать.

Примечание: на некоторых хостинг площадках может возникать ошибка opendir, если вы уверены, что путь до папки верный, то в таких случаях обычно помогает выставление относительных путей от папки со скриптом. Т.е. следует убрать использование DOCROOT константы.

В целом на боевом проекте, скрипт показал, что еще очень сырой и требует доработки визуального интерфейса, для более комфортной работы «из коробки».

Позже я погуглил доступные алгоритмы сжатия изображений и нашел пару библиотек для оптимизации изобращений. Их же и рекомендует гугл. Это jpegtran, optipng и pngout. У них есть версии как для linux, так и для windows систем. Не долго думая, в голову пришла идея написать свой bat файл, позволяющий оптимизировать все изображения сайта. Для этого, конечно же, потребуется их предварительно скачать к себе на компьютер, с сохранением требуемой структуры, что позволит без проблем вернуть всё назад, только уже оптимизированное.

Оптимизация изображений в Windows — простой bat файл, собранный из доступной информации в интернете и подогнанный под мои нужды. Я убрал не нужное дублирование структуры с разделением на jpg/png. Добавил .jpeg файлы, совместил все в одну папку и проставил директивы перезаписи файлов, что бы не возникало лишних предупреждений при перезаписи существующих.

Логика работы следующая:

  1. распаковываем файлы в любую директорию вашего компьютера
  2. в папку /images копируем все папки содержащие изображения которые следует оптимизировать. Например: /galleries, /photos/ и т.д.
  3. запускаем opt.bat и ждем завершения работы скрипта

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

В дальнейшем, по мере свободного времени, планируется:

  1. оптимизация скрипта и избавление от лишних циклов
  2. сбор тестовых скриптов с различными вариантами алгоритмов и их последовательностью, для поиска оптимального варианта для оптимизации.
  3. Написание GUI, например, на Delphi. Для того, что бы было удобнее работать с папками и файлами на локальном компьютере. Выбирать фильтры, алгоритмы и их последовательность для файлов.  А так же возможность обрабатывать файлы в несколько потоков, что позволит увеличить производительность в 4 и более раз. В зависимости от тактовой частоты процессора и количества потоков.

На этом, думаю, можно завершить мой пост. На интересующие вопросы с радостью отвечу в комментариях. Спасибо, что читаете. Надеюсь кому-то помог с оптимизацией изображений для Page Speed Insights

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