Не в сети
Наверное, многие сталкивались из вас с тем, что сайт долго грузит, а всё из-за того, что изображения на сайте очень тяжёлые. Бывает, что даже на быстрых линиях - нужно подождать некоторое время. И за всё время, что я провёл в сети в поисках ответов на мой вопрос - я наткнулся на пару фич и программ, которые помогают мне и по сей день.
Чтобы проверить ваш сайт на загружаемость - переходим на сайт гугла: https://developers.google.com/speed/pagespeed/insights/
Для начала, скопируйте всю папку upload с сервера на ваш компьютер. (Лучше ту папку, где хранятся ваши изображения)
В моём случае - эта папка весит около 1.5 гигов.
Начнём.
Я покажу вам оптимизацию с серверной стороны (у кого есть рут доступ) и при помощи программок.
1.Программы
Пока папка качается, можно установить две программки: ImBatch и Shrink-O-Matic.
ImBatch: http://www.highmotionsoftware.com/ru/products/imbatch
Shrink-O-Matic: http://toki-woki.net/p/Shrink-O-Matic/
ImBatch
Программка интегрируется в меню (когда вы нажимаете правой кнопкой мыши [ПКМ] по файлу), что очень удобно. И всё, что нам нужно сделать - выбрать изображения и послать их в программку.
![1439342480_2015-08-12-03-19-39-screenshot[1].png 1439342480_2015-08-12-03-19-39-screenshot[1].png](https://devcraft.club/data/attachments/0/1-c0e156759d93c2d31b746ccb7bf3aab8.jpg)
Открывается окно. Жмём на "Добавить задачу"
![1439342996_2015-08-12-03-21-45-screenshot[1].png 1439342996_2015-08-12-03-21-45-screenshot[1].png](https://devcraft.club/data/attachments/0/2-e6f2f92e07da76a7524220402af7342e.jpg)
Настраиваем так, чтобы программа оптимизировала под веб.
![1439342985_2015-08-12-03-22-20-screenshot[1].png 1439342985_2015-08-12-03-22-20-screenshot[1].png](https://devcraft.club/data/attachments/0/3-b16c66af866f0ec4ccef390a50513813.jpg)
Настраиваем
![1439343010_2015-08-12-03-22-53-screenshot.png 1439343010_2015-08-12-03-22-53-screenshot.png](https://devcraft.club/data/attachments/0/9-7753bc3fd90300363dccd3016914c77e.jpg)
Запускаем.
![1439342924_2015-08-12-03-23-25-screenshot.png 1439342924_2015-08-12-03-23-25-screenshot.png](https://devcraft.club/data/attachments/0/10-195cb7938f171834e94fe368ebea4d36.jpg)
Будет говорить, что файлы будут перезаписаны. На что я отвечаю "ДА". и Жду окончания.
![1439342990_2015-08-12-03-23-59-screenshot.png 1439342990_2015-08-12-03-23-59-screenshot.png](https://devcraft.club/data/attachments/0/11-b2279cd996a3fad8a4bf7e77ac795819.jpg)
![1439342954_2015-08-12-03-24-26-screenshot.png 1439342954_2015-08-12-03-24-26-screenshot.png](https://devcraft.club/data/attachments/0/12-d254162d0f36cb04bdf9bd44b5c8a4e4.jpg)
![1439342977_2015-08-12-03-25-04-screenshot.png 1439342977_2015-08-12-03-25-04-screenshot.png](https://devcraft.club/data/attachments/0/13-d0fc9127ae6804126637e598fad621ce.jpg)
На этом всё.
Если у вас на сайте выводятся картинки одной величины или как у меня постеры, которым хватает быть всего-лишь одного размера, то делаем следующее:
Идём "Добавить задачу".
![1439342998_2015-08-12-03-26-00-screenshot.png 1439342998_2015-08-12-03-26-00-screenshot.png](https://devcraft.club/data/attachments/0/14-6fe96302b8f0ae92ed5181be14d4a006.jpg)
Настраиваем ресайз под себя.
![1439342931_2015-08-12-03-26-32-screenshot.png 1439342931_2015-08-12-03-26-32-screenshot.png](https://devcraft.club/data/attachments/0/15-246424574e0cd19c0605916cc393c9e8.jpg)
Не забываем выставить эту задачу ПЕРЕД оптимизацией. Запускаем. Вуаля!
![1439342973_2015-08-12-03-27-16-screenshot.png 1439342973_2015-08-12-03-27-16-screenshot.png](https://devcraft.club/data/attachments/0/16-58fa701c9e565b4b3524b3e29e1cff1c.jpg)
Плюсы программы:
Минусы:
Shrink-O-Matic
Программка устанавливается при помощи Adobe Air. Будет предложено установить её, если такой нет на компе. Иначе работать не будет.
Сразу плюсы:
Минусы:
Начнём. Открываем программку.
![1439344025_2015-08-12-03-42-38-screenshot.png 1439344025_2015-08-12-03-42-38-screenshot.png](https://devcraft.club/data/attachments/0/17-5afd9663ca051a3ac3afe5b60d7c4605.jpg)
![1439344028_2015-08-12-03-43-08-screenshot.png 1439344028_2015-08-12-03-43-08-screenshot.png](https://devcraft.club/data/attachments/0/18-90b70d2dc2d84e7d25f34f9bf38e74ee.jpg)
Настраиваем размеры:
1. По пикселям. ВАЖНО! Когда вы убираете галочку с ненужного параметра, то он не будет принят во внимание. Эти путает, так как другая галочка гаснет сразу же. Ресайз идёт автоматический, т.е. другая сторона подстраивается.
2. По процентам.
![1439344045_2015-08-12-03-44-08-screenshot.png 1439344045_2015-08-12-03-44-08-screenshot.png](https://devcraft.club/data/attachments/0/19-e6bb4c4edb26c43cb6f89becdf905a71.jpg)
Думаю - здесь всё понятно.
![1439344064_2015-08-12-03-44-40-screenshot.png 1439344064_2015-08-12-03-44-40-screenshot.png](https://devcraft.club/data/attachments/0/20-5e742ba801ce775918695d3638afb8eb.jpg)
1. как обрабатывать название
2. куда сохранять. если не указано, то на исходное место.
![1439344085_2015-08-12-03-45-12-screenshot.png 1439344085_2015-08-12-03-45-12-screenshot.png](https://devcraft.club/data/attachments/0/21-fa71cf9cf8364a2f1b72fbab4fad4d1e.jpg)
перетягиваем изображения и / или папку(и) сюда.
![1439344016_2015-08-12-03-45-42-screenshot.png 1439344016_2015-08-12-03-45-42-screenshot.png](https://devcraft.club/data/attachments/0/22-fabd2c9eee9214cfcbf9a2df1f656e6c.jpg)
Ждём! Всё!
Итог: Если у вас изображения не статического размера и не так много изображений, то ImBatch самое то. А для более объёмных работ - Shrink-O-Matic.
2. Через сервер
Это будет интересно тем, у кого есть root доступ к SSH сервера.
Заходим рутом в консоль (использую PuTTY).
![1439345017_2015-08-12-03-54-39-screenshot.png 1439345017_2015-08-12-03-54-39-screenshot.png](https://devcraft.club/data/attachments/0/23-6e80c6d2999628694e8e15da100b1d2c.jpg)
Задаём следующие параметры:
Затем задаём следующую команду:
Заменяем пути.
ЮЗЕР* - у меня на сервере два юзера, рут и тот пользователь, который управляет FTP. Его и ставьте.
Выполняем и ждём.
![1439344973_2015-08-12-04-00-30-screenshot.png 1439344973_2015-08-12-04-00-30-screenshot.png](https://devcraft.club/data/attachments/0/24-a7ec36c42133d47dfc724e27fca60f66.jpg)
2.1 всё в одном и по крону
Открываем консоль выполняем следующую команду:
Затем скидываем скрипт images.sh (ниже) в папку с изображениями. Идём в панель управления над сервером и переходим в пункт "Запланированные задания", он же "Крон", и прописываем следующее:
Скрипт будет запускаться каждый день в 23:59 по серверному времени.
![1481879200_148188296093_kiss.png 1481879200_148188296093_kiss.png](https://devcraft.club/data/attachments/0/25-30f08eae023b595b4bad1a75878c8e74.jpg)
![1481879585_148188327949_kiss.png 1481879585_148188327949_kiss.png](https://devcraft.club/data/attachments/0/26-195af88f76e727e6fb1169b8ea296d89.jpg)
![1481879534_148188334443_kiss.png 1481879534_148188334443_kiss.png](https://devcraft.club/data/attachments/0/27-5f60a28f71035ddf139006d3e974704e.jpg)
ВСЁ!
До:
![1439345049_2015-08-12-04-00-53-screenshot.png 1439345049_2015-08-12-04-00-53-screenshot.png](https://devcraft.club/data/attachments/0/28-3ce9b2773861c4fd7848e0946d1efae8.jpg)
После:
![1439361366_2015-08-12-08-30-10-screenshot.png 1439361366_2015-08-12-08-30-10-screenshot.png](https://devcraft.club/data/attachments/0/29-954cf6be20ad4c02d7eee390d62aa414.jpg)
Чтобы проверить ваш сайт на загружаемость - переходим на сайт гугла: https://developers.google.com/speed/pagespeed/insights/
Для начала, скопируйте всю папку upload с сервера на ваш компьютер. (Лучше ту папку, где хранятся ваши изображения)
В моём случае - эта папка весит около 1.5 гигов.
Начнём.
Я покажу вам оптимизацию с серверной стороны (у кого есть рут доступ) и при помощи программок.
1.Программы
Пока папка качается, можно установить две программки: ImBatch и Shrink-O-Matic.
ImBatch: http://www.highmotionsoftware.com/ru/products/imbatch
Shrink-O-Matic: http://toki-woki.net/p/Shrink-O-Matic/
ImBatch
Программка интегрируется в меню (когда вы нажимаете правой кнопкой мыши [ПКМ] по файлу), что очень удобно. И всё, что нам нужно сделать - выбрать изображения и послать их в программку.
![1439342480_2015-08-12-03-19-39-screenshot[1].png 1439342480_2015-08-12-03-19-39-screenshot[1].png](https://devcraft.club/data/attachments/0/1-c0e156759d93c2d31b746ccb7bf3aab8.jpg)
Открывается окно. Жмём на "Добавить задачу"
![1439342996_2015-08-12-03-21-45-screenshot[1].png 1439342996_2015-08-12-03-21-45-screenshot[1].png](https://devcraft.club/data/attachments/0/2-e6f2f92e07da76a7524220402af7342e.jpg)
Настраиваем так, чтобы программа оптимизировала под веб.
![1439342985_2015-08-12-03-22-20-screenshot[1].png 1439342985_2015-08-12-03-22-20-screenshot[1].png](https://devcraft.club/data/attachments/0/3-b16c66af866f0ec4ccef390a50513813.jpg)
Настраиваем
![1439343010_2015-08-12-03-22-53-screenshot.png 1439343010_2015-08-12-03-22-53-screenshot.png](https://devcraft.club/data/attachments/0/9-7753bc3fd90300363dccd3016914c77e.jpg)
Запускаем.
![1439342924_2015-08-12-03-23-25-screenshot.png 1439342924_2015-08-12-03-23-25-screenshot.png](https://devcraft.club/data/attachments/0/10-195cb7938f171834e94fe368ebea4d36.jpg)
Будет говорить, что файлы будут перезаписаны. На что я отвечаю "ДА". и Жду окончания.
![1439342990_2015-08-12-03-23-59-screenshot.png 1439342990_2015-08-12-03-23-59-screenshot.png](https://devcraft.club/data/attachments/0/11-b2279cd996a3fad8a4bf7e77ac795819.jpg)
![1439342954_2015-08-12-03-24-26-screenshot.png 1439342954_2015-08-12-03-24-26-screenshot.png](https://devcraft.club/data/attachments/0/12-d254162d0f36cb04bdf9bd44b5c8a4e4.jpg)
![1439342977_2015-08-12-03-25-04-screenshot.png 1439342977_2015-08-12-03-25-04-screenshot.png](https://devcraft.club/data/attachments/0/13-d0fc9127ae6804126637e598fad621ce.jpg)
На этом всё.
Если у вас на сайте выводятся картинки одной величины или как у меня постеры, которым хватает быть всего-лишь одного размера, то делаем следующее:
Идём "Добавить задачу".
![1439342998_2015-08-12-03-26-00-screenshot.png 1439342998_2015-08-12-03-26-00-screenshot.png](https://devcraft.club/data/attachments/0/14-6fe96302b8f0ae92ed5181be14d4a006.jpg)
Настраиваем ресайз под себя.
![1439342931_2015-08-12-03-26-32-screenshot.png 1439342931_2015-08-12-03-26-32-screenshot.png](https://devcraft.club/data/attachments/0/15-246424574e0cd19c0605916cc393c9e8.jpg)
Не забываем выставить эту задачу ПЕРЕД оптимизацией. Запускаем. Вуаля!
![1439342973_2015-08-12-03-27-16-screenshot.png 1439342973_2015-08-12-03-27-16-screenshot.png](https://devcraft.club/data/attachments/0/16-58fa701c9e565b4b3524b3e29e1cff1c.jpg)
Плюсы программы:
- Быстрая
- Встроена в меню
- Многофункциональна
- Есть русский язык (по некоторым причинам я переставил на английский)
- Даёт результат
Минусы:
- Не годна для огромных количеств
- Проблемы для иностранных компов в плане руссификации. У меня немецкая винда стоит и даже при российском уникоде, многие символы плохо отображаются
Shrink-O-Matic
Программка устанавливается при помощи Adobe Air. Будет предложено установить её, если такой нет на компе. Иначе работать не будет.
Сразу плюсы:
- Заточена под оптимизацию
- Лёгкая
- Может обработать огромный поток данных (проверенно)
Минусы:
- Не столь гибкая, как ImBatch
- Заточена для оптимизации
Начнём. Открываем программку.
![1439344025_2015-08-12-03-42-38-screenshot.png 1439344025_2015-08-12-03-42-38-screenshot.png](https://devcraft.club/data/attachments/0/17-5afd9663ca051a3ac3afe5b60d7c4605.jpg)
![1439344028_2015-08-12-03-43-08-screenshot.png 1439344028_2015-08-12-03-43-08-screenshot.png](https://devcraft.club/data/attachments/0/18-90b70d2dc2d84e7d25f34f9bf38e74ee.jpg)
Настраиваем размеры:
1. По пикселям. ВАЖНО! Когда вы убираете галочку с ненужного параметра, то он не будет принят во внимание. Эти путает, так как другая галочка гаснет сразу же. Ресайз идёт автоматический, т.е. другая сторона подстраивается.
2. По процентам.
![1439344045_2015-08-12-03-44-08-screenshot.png 1439344045_2015-08-12-03-44-08-screenshot.png](https://devcraft.club/data/attachments/0/19-e6bb4c4edb26c43cb6f89becdf905a71.jpg)
Думаю - здесь всё понятно.
![1439344064_2015-08-12-03-44-40-screenshot.png 1439344064_2015-08-12-03-44-40-screenshot.png](https://devcraft.club/data/attachments/0/20-5e742ba801ce775918695d3638afb8eb.jpg)
1. как обрабатывать название
2. куда сохранять. если не указано, то на исходное место.
![1439344085_2015-08-12-03-45-12-screenshot.png 1439344085_2015-08-12-03-45-12-screenshot.png](https://devcraft.club/data/attachments/0/21-fa71cf9cf8364a2f1b72fbab4fad4d1e.jpg)
перетягиваем изображения и / или папку(и) сюда.
![1439344016_2015-08-12-03-45-42-screenshot.png 1439344016_2015-08-12-03-45-42-screenshot.png](https://devcraft.club/data/attachments/0/22-fabd2c9eee9214cfcbf9a2df1f656e6c.jpg)
Ждём! Всё!
Итог: Если у вас изображения не статического размера и не так много изображений, то ImBatch самое то. А для более объёмных работ - Shrink-O-Matic.
2. Через сервер
Это будет интересно тем, у кого есть root доступ к SSH сервера.
Заходим рутом в консоль (использую PuTTY).
![1439345017_2015-08-12-03-54-39-screenshot.png 1439345017_2015-08-12-03-54-39-screenshot.png](https://devcraft.club/data/attachments/0/23-6e80c6d2999628694e8e15da100b1d2c.jpg)
Задаём следующие параметры:
Bash:
apt-get update && apt-get install jpegoptim optipng
Bash:
find /путь/до/папки/с/картинками/public_html/uploads/posts -name '*.jpg' | xargs jpegoptim -m85 --strip-all && find /путь/до/папки/с/картинками/public_html/uploads/posts '*.png' -print -exec optipng -o7 -quiet -keep -preserve {} \; && chmod -R 777 /путь/до/папки/с/картинками/public_html/uploads/posts && sudo chown -R admin /путь/до/папки/с/картинками/public_html/uploads/posts
ЮЗЕР* - у меня на сервере два юзера, рут и тот пользователь, который управляет FTP. Его и ставьте.
Выполняем и ждём.
![1439344973_2015-08-12-04-00-30-screenshot.png 1439344973_2015-08-12-04-00-30-screenshot.png](https://devcraft.club/data/attachments/0/24-a7ec36c42133d47dfc724e27fca60f66.jpg)
2.1 всё в одном и по крону
Открываем консоль выполняем следующую команду:
Bash:
apt-get update && apt-get install jpegoptim optipng advancecomp libjpeg-progs gifsicle
Bash:
59 23 * * * /путь/до/сайта/на/сервере/uploads/posts/images.sh
![1481879200_148188296093_kiss.png 1481879200_148188296093_kiss.png](https://devcraft.club/data/attachments/0/25-30f08eae023b595b4bad1a75878c8e74.jpg)
![1481879585_148188327949_kiss.png 1481879585_148188327949_kiss.png](https://devcraft.club/data/attachments/0/26-195af88f76e727e6fb1169b8ea296d89.jpg)
![1481879534_148188334443_kiss.png 1481879534_148188334443_kiss.png](https://devcraft.club/data/attachments/0/27-5f60a28f71035ddf139006d3e974704e.jpg)
ВСЁ!
До:
![1439345049_2015-08-12-04-00-53-screenshot.png 1439345049_2015-08-12-04-00-53-screenshot.png](https://devcraft.club/data/attachments/0/28-3ce9b2773861c4fd7848e0946d1efae8.jpg)
После:
![1439361366_2015-08-12-08-30-10-screenshot.png 1439361366_2015-08-12-08-30-10-screenshot.png](https://devcraft.club/data/attachments/0/29-954cf6be20ad4c02d7eee390d62aa414.jpg)
Вложения
- XF:Attachment[194] 1439342480_2015-08-12-03-19-39-screenshot[1].png148.5 KB · Просмотры: 19
- XF:Attachment[195] 1439342996_2015-08-12-03-21-45-screenshot[1].png109.4 KB · Просмотры: 11
- XF:Attachment[196] 1439342985_2015-08-12-03-22-20-screenshot[1].png38.8 KB · Просмотры: 13
- XF:Attachment[197] images.zip1.2 KB · Просмотры: 14
Последнее редактирование: