Gzip сжатие для ускорения загрузки сайта — как его включить для Js, Html и Css с помощью файла .htaccess

5 Январь, 2011

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Продолжаем начатую в двух предыдущих статьях тему повышения скорости загрузки сайта (не путайте со скоростью работы интернета). Сегодня мы будет говорить про Gzip сжатие. В принципе, как оказалось, ответов на вопрос «как ускорить сайт?» довольно много.

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

Стоит ли включать Gzip для ускорения сайта


Существенный вклад в увеличение скорости внесло сжатие CSS через Page Speed, кэширование статических объектов (картинок, скриптов, CSS файлов) на стороне клиента (в браузерах посетителей), а так же очень эффективным оказалось включение Gzip сжатия на WEB сервере хостинга.

Но сразу хочу предупредить, что последнее действо имеет и негативную составляющую — увеличивается нагрузка вашего ресурса на сервер (где-то прибавилось, а где-то убавилось).

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

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

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

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

FileETag MTime Size
<ifmodule mod_expires.c>
<filesmatch ".(jpg|jpeg|gif|png|ico|css|js)$">
ExpiresActive on
ExpiresDefault "access plus 1 month"
</filesmatch>
</ifmodule>

Теперь в Page Speed в строке «Leverage browser caching» нет замечаний по поводу того, что кэширования скриптов в браузерах не происходит. Этот плагин ругается теперь только на скрипты Яндекса, на которые я, при всем желании, воздействовать не могу, ибо они подгружаются с серверов зеркала рунета вместе с объявлениями контекстной рекламы:

В общем, в плане Browser caching я сделал все, для того чтобы по максимуму увеличить скорость подгрузки страниц. Теперь пора переходить еще к одному очень эффективному и относительно простому способу ускорения — Gzip сжатию.

Вам потребуется лишь прописать маленький кусочек кода в .htaccess и случится чудо — резко уменьшится общий размер данных, передаваемых Web сервером хостинга, где размещен ваш проект в браузеры посетителей.

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

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

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

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

Я уже писал довольно подробно о некоторых способах оптимизации WordPress, для снижения его нагрузки:

  1. Оптимизация темы (шаблона) WordPress, плагин WP Tuner и число запросов к БД
  2. Hyper Cache — включаем плагин кэширования в Вордпресс
  3. Плагин WPLANG Lite для подмены файла локализации

На моем хостинге был уже включен Gzip, но, к сожалению, не для всех объектов, которые хорошо поддаются сжатию, а включено было только для документов (html файлов). В то время, как CSS и скрипты передавались с web сервера в браузеры пользователей не сжатыми, хотя они очень эффективно архивируются (в несколько раз уменьшая свой вес).

Как проверить работу сжатия на лету в Page Speed


В принципе, все детали Gzip можно очень четко отследить в Page Speed, но так же есть онлайн сервисы, которые способны дать вам информацию о том, включена ли эта архивация или нет. Например, можете воспользоваться этим или этим онлайн сервисом для проверки включения сжатия на вашем сервере.

Работать с ними просто — введите Урл вашего проекта в приведенную форму и нажмите Enter.

Как видите, серверу nginx моего хостинга удалось с помощью Compressed (gzip) уменьшить размер основного загружаемого в браузеры пользователей документа (Html) в пять раз. Здорово, не правда ли? Это существенно способно увеличить общую скорость загрузки сайта.

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

Итак, активируем уже хорошо знакомый нам ускоритель Пейдж Спид, открываем в обозревателе любую страницу своего ресурса и переходим на вкладку «Resources»:

Здесь вы увидите список всех файлов, которые подгружаются в браузер с сервера с указанием их Урлов (самым первым идет Html). Вы, наверное, помните, что несмотря на то, что многие CMS (движки сайтов) работают на PHP, в браузер пользователей все равно отдается сгенерированная версия страницы в формате Html.

Но главное не это, а то, что расположено в этом окне справа от списка загружаемых с сервера объектов. Там, в двух последних столбцах под названием «File Size» (реальный размер на сервере) и «Transfer Size» (размер объекта, передаваемого в браузер), приведены веса этих загружаемых с сервера в браузер объектов.

Посмотрите на первую строку вкладки «Resources», напротив которой в столбце «Type» стоит «doc» (на приведенном ниже скриншоте выделено синим). Если в столбце «Transfer Size» для первой строчки (основного документа) размер будет меньше, чем в столбце «File Size», то значит Gzip на вашем вебсервере включено и успешно работает.

Обратите внимание, что размер сжатого объекта будет существенно меньше размера оригинала.

Но это еще не все. Ведь кроме основного документа в браузер посетителей подгружается еще куча объектов, некоторые из которых можно очень даже эффективно сжать. Я говорю про CSS и скрипты (JavaScript, jQuery). Найдите в столбце «Type» такие типы объектов и посмотрите, включен ли для них Gzip.

Если не включен для js и ccs, то размеры для них в столбцах «File Size» и «Transfer Size» будут одинаковы. Если включен, то в столбце «Transfer Size» размер файла будет существенно меньше. Ну, как вам, повезло? У меня размеры js и ccs были одинаковыми (приведенный выше скриншот был сделан уже после включения сжатия для них).

Как включить Gzip сжатие для Js, Html и Css через .htaccess


Поэтому мне пришлось еще раз вносить изменения в .htaccess для того, чтобы Gzip сжатие было включено для js и ccs объектов. Правда поначалу, используемый мною код позволил решить только половину проблемы — Gzip включилось для Css, но для скриптов сжатие по прежнему не применялось на сервере.

Вот вариант того кода:

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/css
  <IfModule mod_setenvif.c>
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  </IfModule>
</IfModule>

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

AddOutputFilterByType DEFLATE text/html

У вас заработало? Если да, то поздравляю с существенным увеличением скорости загрузки сайта, а если нет, то попробуйте такой вариант, который помог мне добиться приведенной выше картинки в окне Page Speed:

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
<ifmodule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_item_include file \.js$
mod_gzip_item_include file \.css$ </ifmodule>
</IfModule>

Теперь практически все, что можно сжать, будет архивировано на самом сервере, прежде чем быть отправленными в браузеры посетителей. Этим вы существенно увеличите скорость подгрузки страниц, но в то же время существенно нагрузите сервер вашего хостинга (у меня произошло увеличение процентов на 50).

Если ваши ресурсы позволяют пойти на такие жертвы, то обязательно включайте Gzip для ускорения сайта, тем более, что сделать очень просто. В следующей статье мы будет рассматривать CSS спрайты (sprites).

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Еще:

Рубрики :Полезные программы ¦ Скорость загрузки сайта

Комментарии и отзывы

Алексей

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

олег

где в файле .htaccess вставить код я вставил оба в конце страницы-при проверке сжатия не произошло?И на джумле включил функцию Gzip подскажите что нетак?

mixac

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

Дмитрий

В самом деле работает, Дмитрий ваш сайт летает!

Пишите еще, очень интересно, на эту тему никто больше вразумительно не пишет.

Дмитрий

mixac: как раз наоборот, Gzip сжатие используется только для текстовых файлов (Html, Css, js), которые хорошо поддаются сжатию, а вот для изображений использовать Gzip бесполезно, ибо эффекта не будет.

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

akkadites

Спасибо, статья очень информативная и полезная. Только не совсем понял эти строчки кода:

BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html

Это только для FF включает или как?

И ещё один вопрос. Как отключить GZIP-сжатие, если оно по умолчанию включено? Ну допустим, нужно снизить нагрузку на сервер жертвуя трафиком. Ситуация противоположная той, которую Вы описали.

Буду весьма благодарен, если кто подскажет.

В первом коде

ExpiresActive on
ExpiresDefault &quot;access plus 1 month&quot;

А здесь не надо закрыть /ifmodule?

Дмитрий

akkadites: да, спасибо за замечание, действительно не хватало /ifmodule в приведенном в начале статьи коде оптимизации кеширования в браузерах. По поводу первой части вашего вопроса — приведенные вами строки кода для .htaccess позволяют настроить корректную работу GZIP-сжатия в старых версиях браузеров, как я это понимаю.

Igor

Пробовал все варианты кода но сжатия как не было так и нет, во всяком случае так выдает 500 ошибку.

Дмитрий

Igor: откатитесь на предыдущий вариант вашего файла .htaccess для решения проблемы с 500 ошибкой (очистите его, в конце концов, от всего кода). Причин возникновения может быть много, но чаще всего это не правильное место вставки данного куска кода или же не полное его копирование в .htaccess. Но возможно, что ваш сервер имеет какую-либо специфику, хотя во всех правилах идет проверка на наличие нужного модуля на web сервере.

SubonAir

При использовании кода выдает ошибку 500. Полностью очищал .htaccess, все равно выдает ошибку. Что делать?

Aleks

При первом варианте не работает, а при втором тоже выдает ошибку 500. Позвонил хостеру, просил увеличить ресурс для сервера, а мне сказали, что mod_deflate у них не поддерживается(хостинг RU-CENTER). И что же делать?

Новости сегодня

ППЦ! Установил код в файл .htaccess для gzip-сжатия на лету и... сайт вообще лег 🙁 Ни грузится вообще... браузер пишет, что проблемы с соединением...

Подскажите, в чем проблема? Наверное все из-за моего хостера omp9.com

Alex

Aleks говорит, что:

При первом варианте не работает, а при втором тоже выдает ошибку 500. Позвонил хостеру, просил увеличить ресурс для сервера, а мне сказали, что mod_deflate у них не поддерживается(хостинг RU-CENTER). И что же делать?

Проблема решена, все ок! Для тех у кого хостинг RU-CENTER через .htaccess сделать не получиться. Придется создавать mod_gzip.conf и действовать через него. Вот здесь описана суть проблемы: http://forum.nic.ru/showthread.php?t=2389

Olga

На данный момент: Page Speed Score: 77/100

Сервер Apache/2.2.15 и нет mod_deflate.

Что делать в этом случае? Все вруках провайдера? Или можно что-то сделать самим?

Антон

Вам везет. У вас все работает))))

Active-buy

Ставил кучи всяких зиперов для css и js — наблюдались только ухудшения( Помогите разобраться с вашим .htaccess-методом сжатия, пожалуйста!

Антон

Проверяю ваш сайт в Chrome с помощью Yslow, js и css файл у вас сжимаются.

Дмитрий

Active-buy: вынужден только извиниться, ибо не сведущ во всех этих тонкостях настолько, чтобы давать советы. То что сделал у себя — я подробно описал, а все остальное для меня темный лес. Извините.

Active-buy to Johny Kort

Спасибо большое, код заработал, скрипты и цсс сжимаються)

Владимир

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

Владимир

Вот что мне ответили в тех. поддержке таймвеба: «На наших серверах работает связка nginx+apache. Через nginx отдаются статические файлы с расширениями: jpg,jpeg,gif,png,css,zip,tgz,gz,rar,bz2,doc,xls,exe,pdf,ppt,txt,tar,mid,midi,wav,bmp,rtf,js,swf,f4v,flv,avi,wmv,mp3,mp4

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

будет передаваться web серверу apache, соответсвенно можно будет использовать директивы .htaccess для обработки этих запросов.

Проведенные нами тестирования выявили, что nginx отдает статичный контент быстрее, чем apache + gzip, поэтому в данном случае подобная настройка не рациональна.» Получается в моем случае css и js файлы лучше отдавать как есть, в непожатом виде.

Nika

Установила код для gzip-сжатия, по вашей инструкции, но сжатия так и нет. В чем может быть проблема? в джумле оно включено, хостинг джино.

Alex

Присоединяюсь к последнему посту. Добавил в ктацесс первых два кода — скорость загрузки увеличилась. Поставил вместо второго третий — сайт лег.

С первым — вторым куском кода css и js не сжимает. Движок джумла, хостинг — мастерхост

rasse1

а кому верить page speed на гугл хром или page speed на мозилле? Потому как результаты разные. К примеру мозилла говорит , что у меня почти все норм ,показывает 95 из 100 а хром всего 70 из 100?

Синтия

Странно, а почему у меня включено гзип сжатие и для доков, и для стилей, а Пейдж спид все равно ругается именно на сжатие?

Саша

Классная статья, но куда вставлять эти строки? Самое важное вы упустили!

Mr-Shar

Странно, у меня ошибка 500, хостинг Majordomo, в службе поддержки говорят что mod_deflate поддерживается, смотрю error_log там говорят что неверный синтаксис .htaccess, рунаются и на 1 и на 2 коды...

Дмитрий

Добавил код на сжатие gzip. А через сервисы приведенные выше все равно указывает что сжатия у меня нет — как это понять

Алексей

Подскажите хостинги которые поддерживают gzip сжатие. А то хостинги на которых мои сайты находятся его просто отключили.

Василий

Здравствуйте. Все проделал как здесь написано (все доступно и понятно — спасибо). Только сжатие gzip у меня так и не заработало. К стати у Вас тоже оно не работает проверял эту страницу в мозиле показывает: Page Speed Score: 67/100, во вкладке «Resources»: «Transfer Size» = «File Size»

Анастасия

Вдруг кому поможет. На хостинге Джино мне помог вот этот код

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
Header append Vary User-Agent
</IfModule>

То есть только , а кусок вообще не понадобился.

(Спасибо b2z с джумлофорума)

Даниил

...уважаемый авто,р а на каком хостинге/тарифе работает Ваш блог? (можно в личку).

Мой r01.ru отказывается задействовать gzip, ссылаясь на то, что статические css и js отдаёт ngix, а не apache. И что мол, в скорости выигрыша не будет, если отключить ngix и задействовать сжатие на apache...

Дмитрий

Даниил: Инфобокс — до недавнего был виртуальный хостинг на тарифе за четыре сотни рублей в месяц, ну, а сейчас — VPS за девять сотен.

Даниил

...а на виртуальном инфобокс сжатие разрешал?

Денис

Такой вопрос — сейчас сайт оптимизировал как мог, page speed показывает 88, красным горит только gzip, который работает только для html (хостинг не разрешает css и js сжимать).

Тормозов не заметно, если перенести сайт на VPS и включить всё таки этот gzip («уменьшить на 149.7Кб 68%» — заманчиво как никак звучит). Даст ли это какой-то эффект для продвижения или это паранойя уже?))

Андрей

Попробовал оба варианта кода и в обоих случаях Gzip работает только для HTML. Может есть еще какой-то вариант включения Gzip для CSS и JS?

Даниил

Андрей, это провайдер запрещает. У меня такая же фигня была на r01.

Артём

Ребята. у меня беда случилась. Сайт более менее загружался. А после того как я начал писать все эти коды в .htaccess У меня вообще всё стало ОЧЕНЬ медленно грузиться. Написал саппортам пока ничего не отвечают. Этот сервер на nginx ЧТо делать? помогите

Артём

Всё решил проблему. Перезагрузил сервер и всё стало нормально.

Олеся

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

artradix.com

Подскажите, где у вас правильно:

в первом куске кода у вас такая строчка

BrowserMatch ^Mozilla/4\.0[678] no-gzip

во втором куске кода у вас такая строчка

BrowserMatch ^Mozilla/4.0[678] no-gzip

Водном есть экранирующий слеш, а в другом нет...

Где допущена ошибка?

plutov

А также можно сжимать автоматически при помощи YUI — http://plutov.by/post/js_css_auto_compress

Алексей

Сейчас все хостинг компании для отдачи статики используют nginx — поэтому все эти шаманства с .htaccess бесполезны

Vladimir

Попробовал ваши варианты, но к сожалению все директивы внесенные в htacces приводят к ошибке 500. Вот глядите webprofit.kz он работает на nginx. Что предложите мне?

Denis

Стоит ли использовать совместно с включенным плагином System — JCH Optimize Pro

Oleg

Спасибо огромное! Из множества вариантов только вы помогли!

Yuliya

Огромное спасибо, Ваша статья очень помогла! Хостер морозится, на просьбы включить gzip-сжатие. Была очень низкая скорость сайтов. Теперь все отлично работает. Мое почтение и уважение за такую полезную статью!

Егор

Спасибо ооо-громное. Все получилось. Только наоборот, первый код жмет у меня жмет все, который у тебя Css сжал, а второй только CSS. Но не суть. Суть что скорость подлетела значительно.

Твитнул, законтачил, загуглил и зафейсбучил 🙂

Google

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

witos1

А у меня проблема с оптимизацией изображения пишит сожмите но сжимать уже не куда в чем проблема?

Александр

<<<<<>>>>>

Сохраните файл в кодировке UTF8 без BOM и все будет ОК

Автору огромное спасибо за код и добавьте плз в инструкцию — что файл нужно сохранять в кодировке UTF8 без BOM.

Подписаться не комментируя