Gzip сжатие для ускорения загрузки сайта — как его включить для Js, Html и Css с помощью файла .htaccess
Здравствуйте, уважаемые читатели блога 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, для снижения его нагрузки:
- Оптимизация темы (шаблона) WordPress, плагин WP Tuner и число запросов к БД
- Hyper Cache — включаем плагин кэширования в Вордпресс
- Плагин 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
Комментарии и отзывы (52)
Gzip сейчас во всех браузерах поддерживается и во многих движках включить его не составляет труда. А статья очень даже полезная, спасибо.
где в файле .htaccess вставить код я вставил оба в конце страницы-при проверке сжатия не произошло?И на джумле включил функцию Gzip подскажите что нетак?
Если я правильно понимаю, то сжатие нужно если к примеру на странице расположено много изображений, а для загрузки текста сжатие не нужно.
В самом деле работает, Дмитрий ваш сайт летает!
Пишите еще, очень интересно, на эту тему никто больше вразумительно не пишет.
Спасибо, статья очень информативная и полезная. Только не совсем понял эти строчки кода:
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 "access plus 1 month"
А здесь не надо закрыть /ifmodule?
Пробовал все варианты кода но сжатия как не было так и нет, во всяком случае так выдает 500 ошибку.
При использовании кода выдает ошибку 500. Полностью очищал .htaccess, все равно выдает ошибку. Что делать?
При первом варианте не работает, а при втором тоже выдает ошибку 500. Позвонил хостеру, просил увеличить ресурс для сервера, а мне сказали, что mod_deflate у них не поддерживается(хостинг RU-CENTER). И что же делать?
ППЦ! Установил код в файл .htaccess для gzip-сжатия на лету и... сайт вообще лег 🙁 Ни грузится вообще... браузер пишет, что проблемы с соединением...
Подскажите, в чем проблема? Наверное все из-за моего хостера omp9.com
Aleks говорит, что:
При первом варианте не работает, а при втором тоже выдает ошибку 500. Позвонил хостеру, просил увеличить ресурс для сервера, а мне сказали, что mod_deflate у них не поддерживается(хостинг RU-CENTER). И что же делать?
Проблема решена, все ок! Для тех у кого хостинг RU-CENTER через .htaccess сделать не получиться. Придется создавать mod_gzip.conf и действовать через него. Вот здесь описана суть проблемы: http://forum.nic.ru/showthread.php?t=2389
На данный момент: Page Speed Score: 77/100
Сервер Apache/2.2.15 и нет mod_deflate.
Что делать в этом случае? Все вруках провайдера? Или можно что-то сделать самим?
Вам везет. У вас все работает))))
Ставил кучи всяких зиперов для css и js — наблюдались только ухудшения( Помогите разобраться с вашим .htaccess-методом сжатия, пожалуйста!
Проверяю ваш сайт в Chrome с помощью Yslow, js и css файл у вас сжимаются.
Спасибо большое, код заработал, скрипты и цсс сжимаються)
Попробовал сделать как описано в статье, спасибо все работает, кэширование дает хороший результат, но вот с сжатием 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 файлы лучше отдавать как есть, в непожатом виде.
Установила код для gzip-сжатия, по вашей инструкции, но сжатия так и нет. В чем может быть проблема? в джумле оно включено, хостинг джино.
Присоединяюсь к последнему посту. Добавил в ктацесс первых два кода — скорость загрузки увеличилась. Поставил вместо второго третий — сайт лег.
С первым — вторым куском кода css и js не сжимает. Движок джумла, хостинг — мастерхост
а кому верить page speed на гугл хром или page speed на мозилле? Потому как результаты разные. К примеру мозилла говорит , что у меня почти все норм ,показывает 95 из 100 а хром всего 70 из 100?
Странно, а почему у меня включено гзип сжатие и для доков, и для стилей, а Пейдж спид все равно ругается именно на сжатие?
Классная статья, но куда вставлять эти строки? Самое важное вы упустили!
Странно, у меня ошибка 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...
...а на виртуальном инфобокс сжатие разрешал?
Такой вопрос — сейчас сайт оптимизировал как мог, page speed показывает 88, красным горит только gzip, который работает только для html (хостинг не разрешает css и js сжимать).
Тормозов не заметно, если перенести сайт на VPS и включить всё таки этот gzip («уменьшить на 149.7Кб 68%» — заманчиво как никак звучит). Даст ли это какой-то эффект для продвижения или это паранойя уже?))
Попробовал оба варианта кода и в обоих случаях Gzip работает только для HTML. Может есть еще какой-то вариант включения Gzip для CSS и JS?
Андрей, это провайдер запрещает. У меня такая же фигня была на r01.
Ребята. у меня беда случилась. Сайт более менее загружался. А после того как я начал писать все эти коды в .htaccess У меня вообще всё стало ОЧЕНЬ медленно грузиться. Написал саппортам пока ничего не отвечают. Этот сервер на nginx ЧТо делать? помогите
Всё решил проблему. Перезагрузил сервер и всё стало нормально.
Код помог, обрадовалась как шальная...но...не тут то было, этот проклятый таймвеб походу наложил запрет на этот код, и теперь снова всё красным горит
Подскажите, где у вас правильно:
в первом куске кода у вас такая строчка
BrowserMatch ^Mozilla/4\.0[678] no-gzip
во втором куске кода у вас такая строчка
BrowserMatch ^Mozilla/4.0[678] no-gzip
Водном есть экранирующий слеш, а в другом нет...
Где допущена ошибка?
А также можно сжимать автоматически при помощи YUI — http://plutov.by/post/js_css_auto_compress
Сейчас все хостинг компании для отдачи статики используют nginx — поэтому все эти шаманства с .htaccess бесполезны
Попробовал ваши варианты, но к сожалению все директивы внесенные в htacces приводят к ошибке 500. Вот глядите webprofit.kz он работает на nginx. Что предложите мне?
Стоит ли использовать совместно с включенным плагином System — JCH Optimize Pro
Спасибо огромное! Из множества вариантов только вы помогли!
Огромное спасибо, Ваша статья очень помогла! Хостер морозится, на просьбы включить gzip-сжатие. Была очень низкая скорость сайтов. Теперь все отлично работает. Мое почтение и уважение за такую полезную статью!
Спасибо ооо-громное. Все получилось. Только наоборот, первый код жмет у меня жмет все, который у тебя Css сжал, а второй только CSS. Но не суть. Суть что скорость подлетела значительно.
Твитнул, законтачил, загуглил и зафейсбучил 🙂
Уважаемый автор, корректируйте или удаляйте ваши статьи, если они не несут сегодня полезной информации. То что работало, не означает что будет всегда работать!
А у меня проблема с оптимизацией изображения пишит сожмите но сжимать уже не куда в чем проблема?
<<<<<>>>>>
Сохраните файл в кодировке UTF8 без BOM и все будет ОК
Автору огромное спасибо за код и добавьте плз в инструкцию — что файл нужно сохранять в кодировке UTF8 без BOM.
да как вопрос то задать? уже 5 раз нажал отправить — в отдельном окне просто открывает опять эту статью и все. а вопрос не отправляется( имя написал, емейл написал, сайт не работает у вас, Дмитрий... или работает не корретно, он должен по идее писать — ваше сообщение принято или не принято, а он в новом окне открывает эту же статью и в чем прикол?( я пытался сказать что ресурс указанный вами почему то не жрет мой сайт, другие принимает. а мой нет, может быть вы бы могли подсказать почему та...