Главная » Создание сайта на Wordpress, раскрутка сайта, поисковое продвижение и сопровождение

Как включить сжатие gzip на сайте?

сжатие gzip сайта

Как включить сжатие gzip на сайте WordPress?

Быстрая загрузка сайта — одно из составляющих успешного сайта. Если Ваш сайт загружается достаточно долго, это будет немалым минусом в поисковой оптимизации. Поисковые роботы прибавят минус в карму сайта, а пользователи просто-напросто могут не дождаться открытия сайта. Последнее в свою очередь называется «отказом». А при высоком проценте отказов в карму сайта добавится ещё один минус. И тогда не светит Вам никакой ТОП выдачи поисковых систем. Чтобы решить этот вопрос, мы включим сжатие gzip передаваемых данных нашего сайта на CMS WordPress.

Как проверить скорость загрузки сайта?

Перед тем как включить сжатие gzip, Вы можете предварительно проверить скорость загрузки своего сайта. Для проверки скорости загрузки сайта я рекомендую воспользоваться специальным онлайн-сервисом PageSpeed Insights от Google, который находится по адресу:

http://developers.google.com/speed/pagespeed/insights

Данный инструмент протестирует сайт и выведет результат загрузки отдельно для мобильных телефонов и отдельно для компьютеров. Результат указывается в виде баллов, при максимальном балле — 100. Кроме тестирования скорости загрузки страницы, инструмент выведет подсказки, которые укажут на проблемы сайта. Кроме этого, PageSpeed выведет некоторый мануал по решению данных проблем.

Динамическое сжатие gzip передаваемых данных на сайте WordPress

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

Чтобы включить динамическое сжатие передаваемых данных, необходимо в файл .htaccess, который находится в корневом каталоге сайта, добавить некоторую директорию. На просторах Глобальной сети есть достаточно много сайтов, которые с пеной на губах доказывают, что именно этот код, приведенный на их сайте, является правильным и рабочим. Среди всех перепробованных я не нашел тот, который бы заработал. Плюнув на это дело, я воспользовался услугами плагина под названием Hyper Cache. В настройках данного плагина необходимо выставить галочку напротив пункта On-the-Fly compression, которая и отвечает за динамическое gzip сжатие передаваемых данных.

 как включить сжатие gzip

Остальные настройки изменяйте в зависимости от своих пожеланий. Чтобы проверить, появилось ли сжатие данных или нет, используйте данный сервис на странице

http://www.whatsmyip.org/http-compression-test/

Он покажет Вам реальный вес страницы и вес заархивированной страницы.

Статистическое сжатие gzip сайта на WordPress

Динамическое сжатие gzip подразумевает то, что web-сервер сам архивирует и отправляет данные конечному пользователю. Необходимость сжатия передаваемых данных web-сервером можно убрать, если архивировать файлы вручную. Поэтому мы будем сжимать некоторые файлы формата .js и .css(скрипты java и css-стили). Какие файлы сжимать — это Ваш выбор. Я же посоветую как минимум сжать те файлы, которые указаны в PageSpeed Insights в соответствующем узле. Там же кстати указаны и адреса этих файлов на web-сервере. Ну а как максимум, Вы можете сжать абсолютно все файлы .js и .css. Стоит отметить, что тут говорится только про архивирование статических файлов. Кроме этого, для улучшения быстродействия сайта, Вы можете сократить JavaScriptи сократить css-стили, удалив из них ненужные элементы и закодировав их.

Первым делом нам надо внести некоторые корректировки в файл .htaccess, который лежит в корневом каталоге сайта. Возможно, Вы не найдете такого файла через встроенный менеджер вашего хостинга. В таком случае лучше воспользоваться программой Total Commander или аналогичным файл-менеджером. Соединившись с FTP-сервером, скачайте файл .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>

Данный код должен быть размещен до строки

# END WordPress

Данная директива разрешает передачу сжатых gizp файлов. Теперь же нам остается только создать эти сжатые файлы. Для этого скачиваем на компьютер потенциальную жертву(скрипт или стиль). Советую начать с файла style.css, который находится в папке public_html/wp_content/themes/Ваша_тема/. Скачав на компьютер данный файл, Вам нужно будет заархивировать его с использованием программы 7-Zip. Перед добавлением к архиву необходимо убедиться в том, что у Вас выставлены следующие настройки:

сжатие сайта gzip

Убедившись в этом, создайте архив. После этого у Вас будут два файла: style.css и style.css.gs. Вам необходимо изменить название файла style.css на style.nogzip.css. А вот с названия файла style.css.gs необходимо стереть последние три символа .gs, чтобы получился файл style.css. В ходе таких несложных манипуляций мы получили файл style.css, который на самом деле является архивом, и файл style.nogzip.css, который является оригинальным файлом style.css. Весь этот маскарад нужен для того, чтобы браузер пользователя, который поддерживает разархивирование файлов, скачал архив style.css, который весит меньше оригинала. Ну а пользователи, у которых браузер не поддерживает архивацию, получат оригинальный файл style.nogzip.css, который весит больше архива. Ну, а так как большинство современных браузеров поддерживают архивацию, то на деле мы получим более быструю передачу файла конечному пользователю — то, чего мы и добиваемся. Таким же способом Вы можете заархивировать все файлы .js и .css, что убьет необходимость их архивации web-сервером.

UPDATE: Уже после написания данной статьи, я нашел код, с помощью которого можно немного облегчить процесс статического gzip сжатия скриптов и стилей. Для этого Вам необходимо всё в тот же файл .htaccess добавить следующий код:

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

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

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

3 комментариев к записи “Как включить сжатие gzip на сайте?
  1. Михаил в cказал :

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

    Internal Server Error

    The server encountered an internal error or misconfiguration and was unable to complete your request.

    Please contact the server administrator, webmaster @cp202561.cpanel.tech-logol.ru and inform them of the time the error occurred, and anything you might have done that may have caused the error.

    More information about this error may be available in the server error log.

    Additionally, a 500 Internal Server Error error was encountered while trying to use an ErrorDocument to handle the request.

    Apache/2.2.27 (Unix) mod_ssl/2.2.27 OpenSSL/1.0.1e-fips mod_bwlimited/1.4 Server at pebblebuy.ru Port 80

    В чём может быть проблема?

    • admin в cказал :

      Приветствую! Я никак не обновлю данную статью. Изначально я использовал именно данный код в .htaccess для сжатия стилей и скриптов, но в один момент мой сайт так же влетел на данную ошибку. Если не ошибаюсь, он тогда ругался на какие-то дополнительные директории в данном файле. Разобраться я в общем не смог…

      После этого я перепробовал многие коды для статического сжатия и остановился на этом:
      ### 1. Обработка js-файлов

      ForceType text/javascript
      Header set Content-Encoding: gzip
      Header append Vary: Accept-Encoding


      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

      ### 2. Обработка css-файлов

      ForceType text/css
      Header set Content-Encoding: gzip
      Header append Vary: Accept-Encoding


      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

      Данный код безотказно справляется со своей задачей и не требует дополнительных переименований сжатых файлов. Сжимаете стили и скрипты в формате gzip и кладете рядом с оригиналом.

  2. Виталий в cказал :

    Спасибо большое! Статья очень помогла :)

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

Ваш комментарий появится после модерации.