Оптимизация картинок на сервере.

GooglePageSpeed - требует уменьшения размер картинок, притом достаточно настойчиво.
Так же это действительно помогает снизить нагрузку на сайт и у увеличить скорость его загрузки.

Для этого нам понадобится  две утилиты jpegoptim  - она будет оптимизировать jpg ну и png  займется optipng

Для начала установим их 
sudo apt-get install jpegoptim optipng -y 

Теперь нам остается только сжать картинки до приемлемого качества.
find /home/bitrix/ext_www/shop.wildorchid.ru/{upload/resize_cache,upload/iblock/,local}/ -type f -regex ".*\(jpg\|jpeg\|JPG\|JPEG\)" -exec jpegoptim --preserve --preserve-perms --max=85 {} \;  > /dev/null 2>&1 
И повторяем с png
find /home/bitrix/ext_www/shop.wildorchid.ru/{upload/resize_cache,upload/iblock/,local}/ -type f -regex ".*\(png\|PNG\)" -print -exec optipng -o5 -quiet -keep -preserve {} \;
Для того чтоб проверить что у нас получилось, я взял верстку одного из проектов и прогнал всю папку верстки с изменением в 5 пунктов от 70% до 100. Так же я не буду показывать все картинки на сайте, поскольку динамика была на лицо. Да и отобразить их на сайте в размере 100% оказалось трудно. Заострю внимание лишь на явных изменениях при использование 100% 85% и 70%



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

Исходные данные:


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

Посмотрим что у нас получилось: Давайте посмотрим как изменилась скорость загрузки страницы после конвертации всех изображений, запускаем сессии в режиме инкогнито без кеширования, первый хит.
Реальный контент, единственное на что стоит обратить внимание, так это верстка совсем сырая и картинки не 1:1 ужаты средствами html а следовательно для более качественного сравнение открыть их нужно в 100% размере, однако не стал переделывать, поскольку программно сжатые картинки тоже встречаются и достаточно часто.

Пример верстки 70%   Пример верстки 75%   Пример верстки 80%  
Пример верстки 85%   Пример верстки 90%   Исходное качество  100%



Итог:

85% Отличное соотношение цена-качество, уменьшение размера картинок более чем на 100%, уменьшение скорости загрузки сайта несколько раз!
При этом потеря качества настолько не очевидна, что даже для притязательного зрителя остается в приделах нормы. Идеальный вариант, мы уже уменьшаем размер контента, притом значительно но все еще уверены в качестве. При 80% соотношение размера еще лучше, но артефакты уже начинают появляться.

75% Собственно тут бы оно казалось золотая середина, но нет, артефакты уже явно заметны и на контенте хорошего качества будут видны, что не дает нам прогонять любой сайт с полной уверенностью через оптимизатор.
А вот размер относительно 85% уменьшается незначительно, что конечно даст нам протиста скорости но убавит уверенности что эти действия останутся незаметны на сайте.

70% Уже явно выражены артефакты на сложном контенте, далее я покажу что на большинстве картинок их все-же не заметно но факт того что за контентом нужно будет следить уже остается. А мы собирались прогнать весь сайт сразу, в таком же случае нам придется обходить самые вкусные баннеры.
Данный режим хоть и дал лучшую производительность и объем данных, но цена качество оказался не лучшим. Оy идеально подойдет к не требовательным к качеству контента сайтам, шин монтаж, юристы и тд.

А ведь мы еще не затронули такую тему как exif , ведь удалив мета данные можно тоже немного выжать из размера, да и тот же googlepagespeed его рекомендует удалять.
Дя тек же кто  не рискнул пережать весь сайт, можно с легкостью сжимать только resize_cache, вот уж его то точно можно обжимать  сколько вам вздумается.  Да и вообще закинуть задачу на cron


Оставить комментарий