Как одним махом ускорить свой сайт?
В основном ускорение сайта сводится к уменьшению объёма и количества загружаемых файлов.
Это CSS, JS, HTML файлы и конечно картинки.
Картинки порой составляют до 80% объёма всех файлов.
И речь в этой заметке пойдёт именно про оптимизацию изображений без потери качества.
Итак, есть сайт, к примеру 300 изображений по 300 Кб, это уже ~ 90Мб
Оптимизировать 300 и более изображений вручную, через сервисы типа TinyPng - это очень долго и муторно.
Да, можно использовать специальные компьютерные программы для сжатия картинок.
Я потестировал несколько таких.
Первая работала только с png, вторая не установилась, третья (самая популярная) сжимала всего на 1-2 %.
В итоге я бросил эту затею и подумал про своё серверное решение. И недавно мы его запустили.
Теперь не нужно оптимизировать картинки по одной или пытаться запустить виндосовские утилиты.
Сейчас есть более изящное решение для пакетной оптимизации картинок.
Оно состоит из 3-х шагов.
- На хостинге запаковываете папку images в zip-архив и скачиваете её к себе на компьютер.
- Идёте в сервис imgpack.ru и загружаете туда zip-архив с картинками.
- Через пару минут получаете оптимизированные картинки в таком же zip-архиве.
Вам остаётся загрузить оптимизированный zip архив обратно на хостинг и там распаковать с заменой файлов.
После этого все изображения вашего сайта будут уменьшены.
И Google Page Speed будет показывать лучшие результаты, это проверено уже неоднократно.
Вот недавний скриншот двух архивов (до и после оптимизации сервисом)
Облегчение на 70Мб, это почти на четверть.
Всего за 5 минут.
Сколько стоит сервис?
Сервис стоит копейки.
Если точно, то 20 копеек за изображение, если сжимать архивом в автоматическом режиме.
Если сжимать вручную по одной, то бесплатно.
Что ещё может сервис?
Ещё он может уменьшать изображения по одной из сторон.
К примеру, вы знаете что на вашем сайте картинки больше чем 800px не нужны.
Тогда в настройках сервиса можно включить эту опцию, это ещё немного уменьшит объём картинок.
А ещё можно наложить водянные знаки на ваши изображения. Это тоже можно сделать пачкой.
Подробнее смотрите в видеообзоре:
Спасибо за внимание!
Пользуйтесь.