Gzip сжатие — как включить gzip для файлов CSS, JS, HTML

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com! С сегодняшнего дня начинаю цикл статей о практических шагах по увеличению скорости загрузки сайта и начнем, пожалуй, с осуществления gzip сжатия css, js и html файлов, что обеспечит уменьшение времени загрузки вебстраниц сайта.

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

Ну и нельзя забывать о своих читателях, которым явно не понравится, что web-страницы вашего сайта загружаются несколько десятков секунд. К тому же влияние поведенческих факторов на ранжирование сайтов в поисковой выдаче никто не отменял, а медленный сайт никак не способствует их улучшению. Вообще для оптимизации вебстраниц ресурса очень удобно использовать дополнение PageSpeed от Google, где вы получите необходимые рекомендации по увеличению скорости загрузки сайта, причем в порядке убывания их важности:

Здесь красным цветом отмечена как раз необходимость gzip сжатия, что явилось самым приоритетным для моего блога. А теперь полезно сказать несколько слов о том, что же представляет собой процесс gzip сжатия файлов. Сразу необходимо отметить, что наиболее эффективно сжимаются именно текстовые файлы, поэтому участвуют в данном процессе только скрипты (JavaScript, jQuery), документы CSS и HTML.

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

Большинство современных браузеров (здесь - что такое browser и их сравнительный обзор) поддерживают gzip сжатие, поэтому с этой стороны никаких проблем нет. Ниже рассмотрим два варианта того, как можно включить gzip сжатие для js, css и html, причем каждый из этих методов имеет свои плюсы и минусы. Внимание! Перед тем, как вносить изменения, описанные ниже, обязательно сделайте резервную копию файлов вашего сайта или сохраните копии текущих документов, которые будут подвергнуты редактированию, дабы не усложнить себе жизнь и в случае ошибки вернуться к исходному варианту.

Динамическое gzip сжатие для ускорения сайта

Сразу отмечу, что динамическое сжатие файлов скриптов JS, стилей CSS и документов HTML имеет свой недостаток - при его реализации увеличивается нагрузка на сервер хостинг провайдера (рекомендации: как ускорить WordPress сайт и снизить нагрузку на сервер хостинга). Идея заключается в архивировании файлов “на лету” силами web-сервера и последующее их разархивирование в браузерах пользователей. Тем самым сокращается объем передаваемой информации, что является залогом ускорения загрузки страниц ресурса.

Как я уже отметил выше, сжатие “на лету” оказывает дополнительную нагрузку, поскольку заставляет задействовать средства сервера. Поэтому тщательно взвесьте, подходит ли это вам. В том смысле, что, возможно, придется перейти на более дорогой тарифный план, чтобы уложиться в границах использования ресурсов хоста. Для того, чтобы включить динамическое сжатие основных документов (html), документов стилей (css), скриптов (js), нужно в файле .htaccess, который обычно расположен в корневой папке на вашем хостинге, прописать следующую директиву:

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

Если вы вдруг не обнаружите htaccess (а такое вполне может быть), то просто создайте новый файл с помощью лучшего php, html и css редактора, назовите его «.htaccess» и загрузите на хостинг в корневую папку (обычно она носит название вашего ресурса). Затем вставьте туда выше предложенный код. После этой процедуры следует проверить, происходит ли на сервере вашего хостинг провайдера gzip сжатие html, css и js. Для этого существует множество онлайн сервисов, тут один из них. Введите url своего сайта и нажмите синюю кнопку «Check».

Как видно из этого скриншота, zgip сжатие файлов для моего блога включено и работает. С помощью средств сервера nginx удалось сжать содержимое более, чем в 4 раза, что является неплохим результатом. Однако, может случиться такое, что выше приведенный код для htaccess не сработает. Подробно на причинах я сейчас останавливаться не буду, потому как на эту тему последует отдельный мануал.

Скажу лишь, что приведенные в данной статье методы gzip сжатия справедливы только для серверов под управлением Apache (коих 95%, если не больше). Так что, возможно, вам не повезло. Кроме всего прочего, многое зависит от конфигурации сервера, в любом случае, можно попробовать другой вариант:

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html
  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>

Или, например, такой:

<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>

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

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

Проблема, на которую указывал Пэйдж Спид, а именно необходимость сжатия скриптов, документов css и html, успешно решена. Строчка с указанием этой рекомендации переместилась из красной зоны в зеленую и, соответственно, возросло количество баллов (92 из 100). Можно убедиться в этом, более детально просмотрев информацию. Для этого надо перейти во вкладку «Resources» (для браузера Мазила Фаерфокс):

В левой части можете лицезреть url всех элементов исследуемой страницы. Правее расположены колонки, где отмечены расширения файлов, а также их размеры до и после сжатия (File Size и Transfer Size):

Как видите, все необходимые файлы, загружаемые на данной вебстранице блога, а именно скрипты (js), документ со стилями css и html документ, определяющий отображение web-страницы в браузере, подверглись сжатию, что и требовалось доказать.

А теперь кусочек текста для тех, кто использует плагин кэширования Hyper Cache для WordPress. Я изучил последнюю обновленную версию и обнаружил, что в разделе «Сжатие» появилась опция, позволяющая включить сжатие “на лету”.

Ставите галочку и вуаля, задача решена. Теперь, после включения gzip сжатия с помощью настроек Hyper Cashe настроение явно лучше. Правда, если я правильно понял, сжатие “на лету” генерируемых в браузере html страниц подходит не для всех ресурсов. Страница, на которой мало текста и много изображений (например, фотоблог), может отображаться некорректно. В этом случае лучше отказаться от этой возможности повысить скорость загрузки вебсайта.

Статическое gzip сжатие скриптов и css файлов

Теперь перейдем ко второму варианту осуществления gzip сжатия, который потребует немного больше усилий, зато с его помощью вы можете избежать нагрузки на сервер. Это особенно актуально для тех, кто не горит желанием переходить на более дорогой тариф. Идея данного метода заключается в создании сжатых копий файлов скриптов и документов css и последующее их размещение в корневой папке вместе с несжатыми версиями. Теперь при необходимости в ответ на запрос в браузер будут передаваться уже сжатые файлы css и js; серверу уже нет нужды использовать свои ресурсы для gzip сжатия “на лету”.

Правда, если вы заметили, я ничего не сказал об основном документе html страницы. Но ведь мы пользуемся услугами движка WordPress (Устройство темы WordPress, действия Вордпресс с файлами), тема в его составе представлена php файлами, после взаимодействия с которыми происходит генерирование HTML документа в браузере, в результате мы наблюдаем web-страницу. Поэтому мы не можем составить сжатую версию html в корневой папке, так что остаются только скрипты и css файлы. И снова напоминаю, что перед редактированием любых файлов необходимо сохранить их копии, чтобы в случае какого-либо форс-мажора можно было бы вернуться в первоначальное состояние.

Итак, чтобы осуществить статическое gzip сжатие файлов JS и CSS, предварительно необходимо скачать их на компьютер. Для их архивирования можно воспользоваться бесплатной программой архиватором 7-zip. Скачайте ее и установите обычным образом, никаких сложностей с инсталляцией нет. Кстати, может быть, кто-то предложит альтернативные варианты архиваторов в комментариях? Буду только рад, это и другим читателям полезно.

Итак, после установки открываете программу и правой кнопкой мыши кликаете по предназначенному для сжатия файлу и из контекстного меню выбираете «7-zip»→«Добавить к архиву»:

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

После этого произойдет упаковка (в данном случае CSS) и мы получим 2 файла: один оригинальный несжатый, другой в формате gzip архива с расширением gz.

А теперь будьте внимательны, чтобы ничего не напутать. Некоторые браузеры не воспринимают файлы с расширением gz, поэтому мы удаляем окончание .gz, воспользовавшись опцией переименования файла. Получаем просто style.css, однако по факту он будет архивом gzip. Далее. Старые версии браузеров не поддерживают gzip сжатие, однако некоторые пользователи еще используют их. Поэтому к оригинальному несжатому файлу дописываем nogzip и получаем: style.nogzip.css, его мы отдадим браузерам, которые не поддерживают сжатие. В сумме всех действий получаем два файла стилей CSS в корневой папке:

Итак, файл style.css (сжатый) будет отдаваться браузерам, которые поддерживают gzip сжатие, а style.nogzip.css (несжатый оригинальный) - старым версиям браузеров, не поддерживающим архивирование. Теперь подобную операцию необходимо проделать для всех JS или CSS файлов, которые подгружаются вместе с web-страницами сайта. Для того, чтобы статическое gzip сжатие заработало, необходимо вставить следующий код в упомянутый уже неоднократно файл .htaccess:

<IfModule mod_rewrite.c>
        RewriteEngine On
        RewriteCond %{HTTP:Accept-encoding} !gzip [OR]
        RewriteCond %{HTTP_USER_AGENT} Konqueror
        RewriteRule ^(.*)\.(css|js)$ $1.nogzip.$2 [QSA,L]
</IfModule>
<IfModule mod_headers.c>
        Header append Vary User-Agent
        <FilesMatch .*\.(js|css)$>
               Header set Content-Encoding: gzip
               Header set Cache-control: private
        </FilesMatch>
        <FilesMatch .*\.nogzip\.(js|css)$>
               Header unset Content-Encoding
        </FilesMatch>
</IfModule>

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

Еще статьи по данной теме:
Самые интересные публикации из рубрики: SEO и SEM продвижение сайта

36 отзывов

  1. Андрей

    Игорь статья классная и очень полезная. Сам столкнулся с этой проблемой. Хостинг сжатие не поддерживает. Решил попробовать второй вариант, но столкнулся с вопросом. Сжимать CSS только темы или все файлы CSS которые я нашёл. Скриптов практически не нашёл. Если можно уточни какими конкретно файлами работать.

  2. Игорь

    Андрей, я так понимаю, Вы имеете ввиду статическое сжатие? Сжимайте те файлы CSS, которые находятся в корневой папке (например, style.css текущей темы Вордпресс). Ну, и конечно, сжимать совсем маленькие файлы смысла нет, игра не стоит свеч.

  3. Николай

    Класс,Супер,получилось!
    Спасибо большое за статью,очень помогла!
    Пригодилась заключительная часть!
    Буду двигаться дальше,к следующей статье!

  4. Аркадий

    спасибо за информацию.

  5. Владимир

    А как редактировать файл .htaccess?
    открываю блокнотом, почти все строки начинаются c #
    Вставлять так просто? вставляю, ничего не происходит, либо вылетает ошибка у хостинга..

  6. Игорь

    Владимир, у Вас есть завершающая строчка: #END WordPress? Если существует, то вставьте код между этой строкой и выше стоящей (которая, скорее всего содержит тег закрытия /IfModule). Если сжатие не заработает, все вопросы к хостер провайдеру. У меня, например, все работает.

  7. Vladimir

    Очень объемная и полезная статья. Пробую и так и эдак и ничего не получается.Видно дело в хостере.Но все равно спасибо.

  8. Владимир

    Хостинг на руцентре Так просто не бывает всё)
    нашел решение, у кого такая же проблема http://forum.nic.ru/showthread.php?t=2389

  9. Игорь

    Да, Владимир, к сожалению не все хостинги поддерживают gzip сжатие в таком формате, в этом недостаток этого метода.

  10. салат

    Можно сжать все css в один и затолкать в base62.
    Вот от этого реально будет толк.

  11. Ирина

    ОК! Спасибо!
    Помог код:

     AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE text/css
    
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  12. Илья

    Класс! Класс! Класс!!!
    Благодарю. Сработал сразу первый вариант.
    Просто поражаюсь - как можно писать такие глубокие статьи? Меня бы не хватило =)))

  13. Юрий

    БЛАГОДАРЮ !
    Сработало на обоих сайтах.
    Сервант Apache , движок instantcms
    Скорость загрузки до 0,07 стала 0,04.PageSpeed Insights : было 43\100, стало 69\100
    Вставил первый код. Остальные тоже работают.
    В условиях предоставления хостинга не прописано, что эта ф-ция есть.
    Еще раз спасибо

  14. Игорь

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

  15. Stijit

    Спасибо за информацию. А можно сделать то же, но плагином?

  16. Игорь

    Думаю, можно, но не тестировал ни один. Такие вещи стараюсь делать при помощи кодов.

  17. Владимир

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

  18. Игорь Горнов

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

  19. Никита

    Скажите, а что делать если файлы JS и CSS находятся не в корневой папке?

    У меня сжатие настроено и во всех онлайн сервисах написано, что gzip включено, но при проверке в PageSpeed Insights сказано, что сжатие некоторых файлов (которые находятся в папках) не выполнено.

    Как быть?

  20. Игорь Горнов

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

  21. Яна

    К сожалению хостеры никаких адекватных ответов не дают.

  22. Яна

    На указаном вами сервисе сжатие происходит, все нормально, а вот в PageSpeed Insights всеравно написано, что необходимо сжатие главной страници

  23. Игорь Горнов

    Яна, тут уж я бессилен.

  24. Юрий

    Игорь, доброго времени суток - попав на сайт port80software.com я не смог найти куда вставлять адрес своей страницы для проверки (может я не владею английским - поэтому), реально ли уточнить - где это находится?

  25. Игорь Горнов

    Да, Юрий, действительно там несколько изменен интерфейс, правильно, что обратили внимание. Уточняю ссылку на проверочную страницу:

    http://www.port80software.com/support/p80tools

    Там вводите URL своего ресурса в самое верхнее поле «Compression Check» и нажимаете кнопку справа «Check».

  26. Юрий

    Весьма признателен за подсказку, и ещё есть вопрос - вышеперечисленные способы сжатия применимы к обычным HTML сайтам ???, - или только к опирающимся на WordPress, (перепробовал все наполнения для .htaccess - не работает - вот думаю - стоит ли замарачиваться с созданием архивов)

  27. Игорь Горнов

    Да, хотя, думаю, простенький HTML сайт и так должен быстро грузиться. Что касается того, стоит ли применять статическое сжатие, все зависит от состояния Вашего ресурса и степени его "давления" на сервер хостинга.

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

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

  28. Александр

    Добрый день!
    Решил осуществить статическое gzip сжатие файлов JS и CSS согласно вашей инструкции. Но столкнулся с проблемой. Если я не удаляю у сжатого файла расширение .gz, то стили подгружаются нормально, но как только я удаляю расширение, стили не подгружаются. Подскажите, что я делаю не так?

  29. Игорь Горнов

    Александр, проверьте еще раз, все ли Вы сделали по инструкции.

  30. Александр

    Здравствуйте Игорь! Вышел из положения использовав следующий код:

     
    ### 1. Обработка js-файлов
    <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>
    
    ### 2. Обработка css-файлов
    <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>
    

    Данный код позволяет не переименовывать архив. В результате в папке два файла со стилями: style.css и style.css.gz

  31. Игорь Горнов

    Александр, но Вы просто молодец! Честно говоря, я уже готовился вникнуть в Вашу проблему. Однако, огромное спасибо Вам за то, что поделились решением данного вопроса. Теперь уже есть готовый ответ тем читателям, у которых возникнут похожие проблемы. Еще раз благодарю!

  32. Александр

    Игорь, в первую очередь, спасибо Вам, за познавательную и подробную статью!

  33. Иван

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

  34. Егор

    Первый вариант вызвал ошибку 500, другие не сработали. Наверное, на сервере нет такой возможности?

  35. Игорь Горнов

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

  36. Vad

    Спасибо! первый код помог!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Чтобы ввести любой код, вставьте его между [php] и [/php]. Ссылка (URL), помещенная в текст комментария, не будет активной. C целью ее выделения и более удобного копирования можно заключить ее между тегами <pre> и </pre>.