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

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

Но не смотря на то, что 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$ $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$ $1\.css.gz [L]
  ForceType text/css
</FilesMatch>

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

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

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

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

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

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

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

Комментарии:

  1. crazy опубликовал комментарий 29 Июнь 2012, 22:47 #

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

    | Ответить
    • Mut@NT опубликовал комментарий 30 Июнь 2012, 11:05 #

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

      | Ответить
  2. danc1r0k опубликовал комментарий 27 Ноябрь 2012, 19:58 #

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

    | Ответить
  3. Евгений опубликовал комментарий 11 Декабрь 2012, 20:17 #

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

    | Ответить
  4. magic7tyle опубликовал комментарий 16 Декабрь 2012, 02:10 #

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

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

    | Ответить
  5. fiska опубликовал комментарий 13 Июнь 2013, 22:39 #

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

    | Ответить
  6. vismuth опубликовал комментарий 18 Июнь 2013, 05:07 #

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

    | Ответить
    • Mut@NT опубликовал комментарий 19 Июнь 2013, 07:04 #

      С Joomla не работал

      | Ответить
  7. plutovp://plutov.by опубликовал комментарий 30 Ноябрь 2013, 13:54 #

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

    | Ответить
  8. Алекс опубликовал комментарий 19 Июль 2015, 23:34 #

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

    | Ответить
Имя
e-mail
Сайт
Текст комментария: