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?

Проверить можно онлайн серсивом здесь. Этот сервис детально показыаает используется сжатие на сайте или нет.

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

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

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

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

Теги: Apache2 и сервер Linux

Комментарии

crazy, 29 июня 2012 г. 22:47 #

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

Mut@NT, 30 июня 2012 г. 11:05 #

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

danc1r0k, 27 ноября 2012 г. 19:58 #

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

Евгений, 11 декабря 2012 г. 20:17 #

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

magic7tyle, 16 декабря 2012 г. 02:10 #

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

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

fiska, 13 июня 2013 г. 22:39 #

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

vismuth, 18 июня 2013 г. 05:07 #

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

Mut@NT, 19 июня 2013 г. 07:04 #

С Joomla не работал

plutovp://plutov.by, 30 ноября 2013 г. 13:54 #

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

Алекс, 19 июля 2015 г. 22:34 #

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