GZip сжатие CSS и JS файлов без дополнительной нагрузки на хостинг на Apache2

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

Но не смотря на то, что div`ная верстка позволила уменьшить «тяжесть» сайтов, грузиться быстрее они не стали. В чем же причина?

С ростом скоростей интернета у конечных пользователей, большинство вебмастеров начали обвешивать свои сайты разными JS-красивостями: Greygox, Fancybox, красивыми галереями и другими вещами. Это все круто и красиво, но это существенно уменьшает скорость загрузки сайта, делая его тяжелее.

GZip-сжатие js-файлов – это та золотая середина, которая может облегчить страдания вашего посетителя.

Зачем нужно GZip сжатие CSS и JS файлов?

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

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

К примеру, всем известная библиотека jQuery, подключаемая практически на каждом сайте, весит примерно 90 Кб. Сжатая GZip`ом она будет занимать порядка 30 Кб. Согласитесь, что это не мало. Если учесть, что помимо jQuery у Вас подключены еще несколько сторонних JS-файлов, то это точно занимает половину всего веса загружаемой страницы. А в некоторых случаях и того больше. Можете проверить работоспособность этого метода на денвере. Я уверен, что Вы почувствуете даже на нем разницу в скорости работы.

Как это работает?

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

В интернете я находил, очень много способов, которые позволяли использовать GZip сжатие, но почему-то делали это как-то извращенно. Распространенным методом является сжатие JS файлов при обращении пользователя. Допустим зашел я на ваш сайт, запросил мой браузер файл jquery.js с вашего хостинга, и сервер хостинга сжал GZip`ом мне его и отправил. Для меня это хорошо, но если таких пользователей как я зайдет 100 человек, которым потребуется интерактивно заархивировать этот файл, то сервер просто ляжет. Ну или хостер просто вырубит ваш аккаунт из-за превышения допустимой нагрузки.

В методе описанном здесь, предлагается создать 2 версии JS-файла: .js и .js.gz. К примеру, для jquery.js эти 2 файла будут jquery.js и jquery.js.gz. После того как мой браузер запросит jquery.js, ваш сервер выдаст ему jquery.js.gz. То же самое делаем и для CSS.

Это легко реализовать такой замечательной штукой как htaccess.

Организовываем GZip сжатие CSS и JS файлов

Для того, чтобы внедрить у себя на сайте эту «технологию», необходимо:

  1. создать в той же директории, где лежит js-скрипт и css-файл заархивированную копию методом GZip. Этим методом архивирует практически любой современный архиватор. Самое главное, чтобы расширение файлов стало .js.gz и .css.gz соответственно.
  2. добавляем в конец файла .htaccess перенаправление на сжатые версии. Этот файл всегда лежит в корне вашего сайта. Если у Вас нет этого файла, то просто создайте новый текстовый файл с именем .htaccess и добавьте в него этот код:
AddEncoding gzip .gz
<FilesMatch "\.js.gz$">
  ForceType text/javascript  
  Header set Content-Encoding: gzip
</FilesMatch>
<FilesMatch "\.js$">
  RewriteEngine On
  RewriteCond %{HTTP_USER_AGENT} !".*Safari.*"
  RewriteCond %{HTTP:Accept-Encoding} gzip
  RewriteCond %{REQUEST_FILENAME}.gz -f
  RewriteRule (.*)\.js$ &#036;1\.js.gz [L]
  ForceType text/javascript
</FilesMatch> 
<FilesMatch "\.css.gz$">
  ForceType text/css
  Header set Content-Encoding: gzip
</FilesMatch>
<FilesMatch "\.css$">
  RewriteEngine On
  RewriteCond %{HTTP_USER_AGENT} !".*Safari.*"
  RewriteCond %{HTTP:Accept-Encoding} gzip
  RewriteCond %{REQUEST_FILENAME}.gz -f
  RewriteRule (.*)\.css$ &#036;1\.css.gz [L]
  ForceType text/css
</FilesMatch>

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

Как проверить работоспособность сжатия CSS и JS?

Проверить можно плагином http-header-live для Firefox. Открываем окно плагина Live HTTP Headers и переходим на подопытный сайт.

Если в ответах сервера на запросы JS- и CSS-файлы мы видим фразу Content-Encoding: gzip, то это означает, что все работает так как нам этого нужно. Думаю, что подробнее на проверке не стоит останавливаться, так как там и так все понятно.

Несомненных плюса у этого метода два:

  1. Первый – это сокращает почти в 2 раза вес каждой страницы вашего сайта.
  2. Второе – это ни коем образом не отбирает производительности у вашего хостинга, так как не происходит никакого сжатия налету.

Из минусов можно выделить только сложность того, что необходимо после каждого изменения в CSS-коде и JS создавать архивированную версию. Это не сложно, но есть риск просто забыть это сделать.

Теги: и

Комментарии

crazy, 29.06.2012 22:47 #

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

Mut@NT, 30.06.2012 11:05 #

Все зависит от посещаемости

danc1r0k, 27.11.2012 19:58 #

У меня странная ситуация наблюдается с этим gzip сжатием. Онлайн сервисы проверки на сжатие показывают, что оно работает, но когда проверяю с помощью http://pagespeed.googlelabs.com/pagespeed/ и различных аддонов для браузеров, то четко видно, что некоторые файлы (не все) не сжимаются…

Евгений, 11.12.2012 20:17 #

На пробу зазиповал Мутулз, и template.CCS, с ccs страница отображается голая, удалил gzip, все встало, мутулз сжался очень
хорошо, загрузка увеличилась, но firebug выдал 400 ошибку на мутулз, но самое главное в админке редактор показывает только html код. Жаль, но придется видно возвращаться к старому.(( У кого мысли есть?

magic7tyle, 16.12.2012 02:10 #

danc1r0k: некоторые файлы (не все) не сжимаются…

Всё верно, для файлов менее 5кб сжатие не применяется
& for

fiska, 13.06.2013 22:39 #

Подскажите мне пожалуйста, а можно использовать зжатие для PHP страниц?

vismuth, 18.06.2013 05:07 #

доброе время суток!
А как это можно организовать в joomla 2.5?
А то у меня выдает ошибку 500

Mut@NT, 19.06.2013 07:04 #

С Joomla не работал

plutovp://plutov.by, 30.11.2013 13:54 #

Спасибо, интересно. А мне вот такое решение в голову пришло недавно – http://plutov.by/post/js_css_auto_compress

Алекс, 19.07.2015 22:34 #

Хотел бы тему вкусностей, которые хочется добавить на сайт….добавить к ним некоторые js сервисы …. которые бывает необходимо повестить …. например яндекс метрика или google adsense …. и как быть в этом случае? особенно, если учесть что они могут сильно нагружать на стороне клиента …. если их много ….






Интересное
Важное событие IT
Создание Cisco
Создание Cisco
Узнать подробнее
Оглавление
  1. Зачем нужно GZip сжатие CSS и JS файлов?
  2. Как это работает?
  3. Организовываем GZip сжатие CSS и JS файлов
  4. Как проверить работоспособность сжатия CSS и JS?