Webmaster →

Три способа ускорить загрузку вашего сайта

Оглавление
Зачем оптимизировать загрузку сайта, думаю понятно. Посетители будут меньше ждать, а вы сэкономите трафик. Сегодня я расскажу про три простых способа ускорить загрузку вашего сайта, если вы используете 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 можно натравливать на папку с изображением. Работает она достаточно долго, поэтому рекомендую запускать ее только для новых изображений.

trimage -f _images

Заключение

Вы можете добавить эти команды в 1 скрипт (пример) и прогонять его каждый раз когда загружаете сайт на хостинг. С использованием данных утилит, этот блог стал грузиться примерно на 20% быстрее.

PS: Так-же значительно ускорить загрузку сайта поможет Cloudflare CDN.

PS: И еще важный совет по оптимизации загрузки сайта: не забудьте асинхронно загружать кнопки социальных сетей. Я из за этого особенно страдаю - на работе не грузиться кнопка Google Plus, а вместе с ней куча сайтов, где вебмастеры добавляют ее установку в <header>.

Оцените статью
Метки: идиотизм минимализм ubuntu
« Универсальные кнопки для оценки статей на сайте III
Новая жизнь игр от Id Software »
  • Anton Furs

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

  • Gans NATO

    Такое себе. Эти советы здорово устарели. Рекомендую какой-то современный софт на базе zopfli png компрессора. Сам жму утилитой ( Color Quantizer http://kherson.myftp.biz/cq/ ) там и процесс контролировать можно, и переключатели цветовых пространств есть.

  • Polisvetl

    Спасибо за статью, лично я только изображения уменьшаю

  • ivano

    имхо. сейчас в этом уже нет необходимости. интернет у всех скоростной. нужно качество.

  • Denis Katrichenko

    Причем тут интернет, есть понятия скорости обработки сервером. И хоть какой у вас скоростной интернет пока сервер не выдаст результат ответ вы не получите.

  • Юрий Йосифович

    А если нужно оптимизировать блог на BLOGGER (например http://blog.yosyfovych.te.ua ) - то каким образом это можно сделать - а то уже много вариантов перепробовал - и не получается, блог грузится на моем десятимегабитном интернете около минуты - хотя изображений и дизайн упрощенный по максимуму...?

  • Иван

    Автор, а как же кирилические УРЛы в названиях? Почему именно такие используете?
    Информацию собираю для своего сайта http://turboseo.com.ua/blogue....

  • Дима

    Я не люблю транслит, поэтому когда экспериментальным образом узнал что русские буквы в url нормально воспринимаються гуглом и яндексом, а также отображаються современными браузерами - сделал все url на блоге кириллицей - все равно руками адресс статьи набирать не буде, все как правило кликают по ссылкам.

    Для меня так просто приятнее выглядит :)

    Единственная проблема что если неправильно скопировать url, она вместо аккуратной:

    `[1]//thexnews.com/три-способ... `

    Может получиться вот такая фигня: [2]`//thexnews.com/%D1%82%D1%... BE%D0%B1%D0%B0-%D1%83%D1%81%D0%BA%D0%BE%D1%80%D0%B8%D1%82%D1%8C-%D0%B7% D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D1%83-%D0%B2%D0%B0%D1%88%D0%B5%D0%B 3%D0%BE-%D1%81%D0%B0%D0%B9%D1%82%D0%B0.html`

    И при копировании такая ссылка может побиться.

    Поэтому чтобы можно было посылать и шарить ссылки, я сделал упрощенные url типа `[3]//thexnews.com/p/1150` которые можно скопировать по нажатии на цепочку (под кнопками соцсетей слева) для каждой статьи.