Зачем оптимизировать загрузку сайта, думаю понятно. Посетители будут меньше ждать, а вы сэкономите трафик. Сегодня я расскажу про три простых способа ускорить загрузку вашего сайта,
если вы используете Linux для разработки. Теоретически данные утилиты можно запустить и под Windows.
Для проверки скорости загрузки сайта (что-бы сравнить результаты до и после) рекомендую использовать Pingdom Tools.
Чтобы автоматизировать оптимизацию, все будем делать через консоль. Для начала установим необходимые утилиты:
sudo apt-get install uglifyjs trimage
#cssoptimizer
wget --content-disposition http://mabblog.com/getfile.php?file=37
sudo tar -xvf cssoptimizer_linux.tgz -C /usr/bin ./cssoptimizer
Ну а теперь давайте разбираться что же мы только что установили :)
Uglifyjs - сжимаем JavaScript
Существует множество оптимизаторов и обсуфикаторов для JavaScript. По своему опыту меньше всего проблем с uglifyjs. Не разу не встречал чтобы оптимизированный им код перестал работать. Плюс он еще и проверяет код на случай если вы допустили синтаксическую ошибку. Удобно, если вы как я пишете JavaScript в текстовом редакторе а не IDE.
Когда вы пишете код, удобно разделять функционал по разным js файлам. А чтобы уменьшить количество запросов к сайту также рекомендуется склеить все файлы в один. Это делается стандартной Linux утилитой cat. После чего вывод перенаправляется в uglifyjs. Результат сохраняется в файл script.js. Например данная команда склеивает и оптимизирует все скриты из папки _js и сохраняет результат script.js в папке _output.
cat _js/*.js | uglifyjs -nc > _output/script.js
Если ваши скрипты зависят друг от друга - пронумеруйте их, например: 01_functions.js, 02_main.js. Склеивать в один файл фреймворки типа jQuery не рекомендуется, потому что все современные браузеры и так умеют их кешировать.
Cssoptimizer - сжимаем CSS
Cssoptimizer как очевидно из названия, позволяет сжимать css. Тут та же история что и с js - желательно склеить все CSS'ки в 1 файл. Для сохранения иерархии - пронумеруйте файлы, например: 01_base.css, 02_site.css.
cat _css/*.css | cssoptimizer -i -o > _output/style.css
Trimage - Оптимизируем png
Я часто слышу миф что png это looseless формат и уменьшить его размер без потери качества нельзя. Это таки миф, потому что замечательная програмка Trimage, позволяет облегчить PNG'шку в среднем на 30% сохраняя исходный внешний вид. Заодно программа оптимизирует и джипики JPEG'и.
Trimage можно натравливать на папку с изображением. Работает она достаточно долго, поэтому рекомендую запускать ее только для новых изображений.
Заключение
Вы можете добавить эти команды в 1 скрипт (пример) и прогонять его каждый раз когда загружаете сайт на хостинг. С использованием данных утилит, этот блог стал грузиться примерно на 20% быстрее.
PS: Так-же значительно ускорить загрузку сайта поможет Cloudflare CDN.
PS: И еще важный совет по оптимизации загрузки сайта: не забудьте асинхронно загружать кнопки социальных сетей. Я из за этого особенно страдаю - на работе не грузиться кнопка Google Plus, а вместе с ней куча сайтов, где вебмастеры добавляют ее установку в <header>.
. Так в вашем распоряжении будут все
ресурсы и память основного компьютера.
