Красивый — значит быстрый!

Зачастую дизайнеры вынашивают грандиозные идеи, при реализации которых, интернет-ресурсы становятся очень тяжелыми под весом подключаемых библиотек и изображений. Конечно можно установить показатель загрузки “лоадер”, но что делать, если хочется скорости?

Для начала нужно проанализировать сайт, чтобы выявить слабые моменты.

Проверить текущее состояние вашего сайта можно, воспользовавшись бесплатным он-лайн сервисом tools.pingdom.com/fpt или его аналогом, а также непосредственно браузером. Например для Mozilla существует плагин YSlow, а в Chrome достаточно проделать нехитрые манипуляции (нажать F12, в появившемся окне выбрать вкладку Network и нажать F5) на вкладке с интересующим вас сайтом. Мы увидим все подключения к серверу и их скорость.

После того как стало понятно, что же мешает быстрой загрузке сайта, можно приступить к оптимизации.

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

  • Оптимизировать изображения;
  • Оптимизировать количество HTTP-запросов;
  • Поместить CSS файлы в начало страницы;
  • Поместить javascript в конец страницы;
  • Минимизировать css и javascript;
  • Использовать кэш браузера;
  • Использовать CDN для загрузки популярных JavaScript библиотек;
  • Не масштабировать изображения;
  • Использовать Gzip- сжатие;
  • Использовать поддомены для параллельного скачивания.

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

Пример

При диагностике сайта stangemes.com выяснилось, что текущий хостинг, хоть и работает на мощном сервере и имеет хорошее программное обеспечение (включая веб-сервер nginx), но: во-первых, расположен в Нью-Йорке (информация хоть и рапространяется  со скоростью близкой  к 300 000 км/сек. по оптоволоконным магистралям, но на маршрутизаторах, соединяющих кабели, эта скорость заметно падает, и чем больше расстояние от сервера до конечного Пользователя, тем медленне скорость); а во-вторых, это не выделенный сервер, который можно настроить под свои нужды и, например, подключить gzip-сжатие.

Мы провели такие работы:

  • Оптимизировали изображения. При этом размер главной страницы сайта, уменьшился с  18.5 МБ до 5 МБ (95% из них — это как раз изображения);
  • Объединили и оптимизировали css-стили. Это дало нам уменьшение количества обращений к серверу и уменьшение объема подключаемых файлов;
  • Перенесли сайт на европейский хостинг с установленным nginx и Gzip-сжатием;
  • Подключили и настроили для сайта кеширование на стороне сервера. В результате чего страница не генерируется по запросу Пользователя, а уже лежит сгенерированная на сервере, существенно сокращая скорость загрузки.

Если до проведенных нами работ полная загрузка главной страницы составляла 8.26 секунд, то после сократилась до 2-х секунд. С учетом того, что объем страницы составляет 5 мегабайт, а всего происходит подгрузка 126 файлов, результат очень хороший.