Ускорение Shop-Script - проверенные решения. Скрипт для сайта оптимизация
Скрипт для оптимизации всех изображений под Google Pagespeed Insights
Как оптимизировать картинки на сайте или сервере? Все. Разом.
Прямо на сервере. Если вы слышали о Google Pagespeed Insights, то, скорей всего, тема для вас может быть очень актуальной. Google проверяет все изображения которые используются на страницах вашего сайта и показывает те файлы, которые можно сжать без потери качества с помощью особых алгоритмов.
Зачем нужно оптимизировать картинки?
Зачем ему это нужно? Засчёт этого уменьшается объём передаваемых данных, соответственно, загрузка страницы происходит быстрее.
Это лишь один из шагов по оптимизации сайтов под Pagespeed, но, по мнению Google, очень важный. Он позволяет увеличить оценку в Pagespeed Instights на 2-10 баллов.
Чем оптимизировать? Скриптом
Ставим софт:
#deb-based apt-get install -y jpegoptim optipng #rpm-based yum install -y jpegoptim optipngЗапускаем:
./optimages.sh /var/www/user/site.comПредварительно на всякий случай рекомендуется сделать бэкап всех изображений:(каждый символ в команде очень важен!)
rsync -avh --include '*/' --include '*.jpg' --include '*.png' --exclude '*' /var/www/user/site.com/ /var/backup/site-com-images/Если вдруг понадобится откатить:(ни в коем случае не терять завершающий слеш в путях!)
rsync -a /var/backup/site-com-images/ /var/www/user/site.com/Если вдруг хочется запускать процедуру регулярно по расписанию для всех новых изображений, появившихся за последние пару часов, скрипт станет таким:
#!/bin/bash /usr/bin/find $1 -type f -iname '*.jpg' -mmin -120 -exec /usr/bin/jpegoptim -q -f -o --strip-all {} \; >/dev/null 2>&1 /usr/bin/find $1 -type f -iname '*.png' -mmin -120 -exec /usr/bin/optipng -quiet -o7 {} \; >/dev/null 2>&1Если вдруг хочется залоггировать всё что сделал скрипт:
#!/bin/bash /usr/bin/find $1 -type f -iname '*.jpg' -mmin -120 -exec /usr/bin/jpegoptim -f -o --strip-all {} \; >>/var/www/user/optimages.log 2>&1 /usr/bin/find $1 -type f -iname '*.png' -mmin -120 -exec /usr/bin/optipng -o7 {} \; >>/var/www/user/optimages.log 2>&1Возможные проблемы с картинками и оценкой гугла
Инструмент этот Pagespeed Insights на самом деле ебанутый. (Что признают и сами гугловцы, sic! ) По крайней мере во всём, что касается изображений он точно гонит. Вот этот метод работает согласно справке самого гугла. И после оптимизации таким образом, он один хуй будет показывать что картинки можно оптимизировать ещё.
Тем более он не поможет, если у вас там изображения слишком большие, и подогнаны атрибутами width и height или еще каким-то html способом. Типа сам файл можно уменьшить, а атрибуты убрать. Это тоже можно кстати сделать аналогичным скриптом, только использовать надо resize из пакета imagemagick
Бонусы — скрипт для обрезки, зеркалирования, и поворота всех изображений в папке/на сайте/на сервере
Я сегодня добрый, держите, выложу как на духу.
Предварительно нужно поставить imagemagick, но скорей всего он у тебя уже и так стоит на VPS
apt-get install imagemagick yum install imagemagickВот таким способом я выпиливаю ватермарк по краю:
find /var/www/user/site.com -type f -name '*.png' -o -name '*.jpg' -exec convert {} -crop +0-23 ./{} \;Это срежет нижнюю часть всех изображений — 23 пикселя. Если тебе нужно выпилить ватермарк с другой стороны — играйся с этими цифрами. Только забэкапь бля! Или вообще лучше играйся на тестовой копии папки со всей своей трехомудией.
Вот этим можно массово зеркалить картинки (привет уникализаторам, ага):
for file in `find /var/www/user/site.com -type f -name '*.png' -o -name '*.jpg'`; do convert "$file" -flop "$file"&& echo $file >> /root/flop-images.log; done & #c логгированием, понял?! можно по логу прогресс отслеживатьА если надо влево — то -90 нужно указать.
Тут и до ресайза чуток осталось, но мне лень гуглить. Как-нибудь в другой раз.
This is the magick.
vpsadm.ru
Ускорение Shop-Script просто и эффективно
Скорость загрузки сайта на Shop-Script - важный критерий успешности сайта. В первую очередь ускорение сайта автоматически увеличивает конверсию. А это прямым образом помогает улучшить главные бизнес-задачи сайта - генерировать больше лидов и больше продаж.
Ускорьте Shop-Script и увеличьте конверсию до 30%
Проведенные исследования показывают, что при ускорении сайта всего лишь на 100 миллисекунд уровень конверсии увеличивается на 5%. На десктопных устройствах - на 2,4%, а на мобильных устройствах – на 7,1%.
Ускорение на 1 секунду увеличивает конверсию на 20%.
Ускорение на 2 секунды увеличивает конверсию на 30%.
Улучшите позиции в ТОП-е за счет ускорения Shop-Script
Кроме того, есть и дополнительное преимущество. Скорость Shop-Script напрямую связана с поведенческими факторами, которые сильно влияют на ранжирование сайта в поисковой выдаче.
Если увеличить скорость загрузки Shop-Script, это уменьшит вероятность отказа, посетители будут воспринимать работу с сайтом более позитивно, будут больше проводить на вашем сайте. Все это в целом будет восприниматься поисковыми системами крайне позитивно.
Оптимизация изображений - наиболее простой и эффективный способ ускорить Shop-Script
За счет оптимизации изображений можно значительно уменьшить суммарный объем данных (в байтах), загружаемых на странице. К примеру, вместо 20 МБ суммарный размер страницы уменьшается до 2 МБ. Страница объемом 2 МБ загрузятся гораздо быстрее, чем прежняя версия страницы объемом 20 МБ. За счет этого и происходит ускорение загрузки Shop-Script.
OptiPic.io - самым простой способ оптимизировать изображения в Shop-Script
Наш сервис позволяет автоматизировать рутинную и трудоемкую задачу по сжатию и оптимизации изображений. Подключение к сайту займет буквально 2 минуты. И все работае тавтоматически - вам лишь нужно настроить один раз настройки сжатия.
Пожалуйста, подождите. Выполняется анализ сайта.
Скоро вы будете перенаправлены на страницу с результатами проверки.
optipic.io
Скрипт оптимизации картинок для публикации их в интернете на Ubuntu Linux (Оптимизируем картинки для публикации на сайт)
Как оптимизировать картинки или фотографии для публикации их в интернет? Этот вопрос часто задают себе люди увлекающиеся фотографиями или контент менеджеры, выкладывающие изображения в интернет магазины и прочие интернет ресурсы. Вы конечно же скажете, что можно открыть свой любимый редактор GIMP, Photoshop, Paint или любой другой и просто изменить размер и качество изображения. Все бы ничего, но есть одно маленькое НО. Когда в вашем арсенале находится не одна две картинки, а сотни или даже тысячи, то такой подход ручного подгона фото окажется весьма долгим и трудоемким процессом. И здесь нам на помощь приходит консольная программа convert или mogrify входящие в состав пакета imagemagick. ImageMagick обладает весьма мощным функционалом, рассмотреть который в рамках коротенькой статьи увы не получится. Я затрону лишь несколько параметров утилиты mogrify, необходимых нам для наших целей.
Для чего нужно обрабатывать фотографии перед публикацией их на сайт? Здесь все очень просто. Обычно фотографии, сделанные фотоаппаратом или даже современным телефоном, имеют достаточно большой размер, как самого изображения так и соответственно размер файла.
Чем это все грозит? Публикация в сеть изображений, размер файла которых достаточно большой, может замедлить работу сайта, особенно пользователям, которые имеют медленный интернет или пользуются мобильным интернетом при просмотре сайта с телефона или планшета. Да и зачем пользователю фото огромного размера, когда он все равно не увидит его?
Есть и еще одна причина по которой вам следует сжимать ваши фотографии в размере. Если вы, например, занимаетесь фото и зарабатываете на этом себе на хлеб. То в целях рекламы и показа своего портфолио, вы публикуете свои работы в сети, но при этом вам не хотелось бы, чтобы вашими изображениями пользовались люди в коммерческих целях и уж тем более выдавали их за свои. Для избежания подобных ситуаций фото достаточно сжать до размера, когда ширина или высота не превышает 900 пикселей, а урезка качества всего на 10%, позволит сократить объем данных файла изображения. Здесь на помощь нам приходит инструмент под названием convert из пакета ImageMagick или его брат mogrify. Второй отличается лишь тем, что он изменяет само изображение, то есть переписывает файл изображения внося в указанные вами изменения. А convert создает измененную копию оригинального файла. Синтаксис у них одинаковый. Лично меня больше устраивает mogrify, так как логично перед публикацией отобрать подходящие фотки, скопировав их в отдельную папку.
Первое, что необходимо сделать - это установить пакет ImageMagick:
sudo apt-get install imagemagickОписание основных возможностей я сделаю чуть позже, когда найду немного свободного времени. Сейчас я представлю вам скрипт, который можно скачать с моего github отсюда. И опишу в двух словах как им пользоваться. Скрипт довольно простой и содержит в себе всего несколько строк кода.
Скачав архив в нем вы найдете файл iwo.sh, который нужно будет скопировать в папку, куда вы скопировали изображения для своего сайта. Скрипт поддерживает несколько простых настроек, которые вы, при желании можете изменить под свои нужды. Настройки находятся между комментариями Script settings и End Script settings.
По умолчанию параметры выставлены в:
# Script settings ============= FILE_FORMAT='jpg' IMG_MAX_WIDTH=900 IMG_MAX_HEIGHT=900 QUALITY=90 ROTATE_DEG=0 WATERMARK= WATERMARK_FONT_SIZE=20 # End Script settings =========В дальнейшем я планирую добавить возможность добавления водяных знаков на фото и еще несколько функций.
Описание параметров: FILE_FORMAT - Задает тип изображений по расширению (jpg, png и прочие). IMG_MAX_WIDTH и IMG_MAX_HEIGHT - задают размер (ширину и высоту) изображения. Если картинка имеет большую ширину или высоту, чем заданную, она будет уменьшена до указанного размера сохраняя пропорции изображения. QUALITY - задает качество (степень сжатия) изображения в процентах от оригинала (100%) 100 - 100% качества. 90 - 90% качества и так далее. ROTATE_DEG - задает на сколько градусов нужно повернуть изображения от 0 до 360 - поворот по часовой от 0 до -360 - поворот против часовой WATERMARK - Текст который будет наложен в виде водяного знака WATERMARK_FONT_SIZE - Размер шрифта водяного знака#!/bin/bash # Script settings ================================================================================== FILE_FORMAT='jpg' IMG_MAX_WIDTH=900 IMG_MAX_HEIGHT=900 QUALITY=90 ROTATE_DEG=0 WATERMARK= WATERMARK_FONT_SIZE=20 # End Script settings ============================================================================== for img in `ls *.$FILE_FORMAT` do # Change the QUALITY, if specified if [[ $QUALITY -gt 0 ]]; then `mogrify -quality $QUALITY $img` fi # Add the watermark, if specified if [[ -n $WATERMARK ]]; then `mogrify -fill white -box '#00770080' -gravity South \ -pointsize $WATERMARK_FONT_SIZE -annotate +0+5 " $WATERMARK " $img` fi # Rotate image, if specified if [[ $ROTATE_DEG -ne 0 ]]; then `mogrify -rotate $ROTATE_DEG $img` fi # Width if [[ `identify -format "%w" $img` -gt $IMG_MAX_WIDTH ]]; then `mogrify -resize $IMG_MAX_WIDTH $img` fi # Height if [[ `identify -format "%h" $img` -gt $IMG_MAX_HEIGHT ]]; then `mogrify -resize x$IMG_MAX_HEIGHT $img` fi done
tauweb.ru
