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

Главная » Создание блога » Скорость загрузки » Как включить gzip сжатие и кратно ускорить сайт

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

2014-03-29 автор: Виталий Кириллов

Всем привет! Сегодня на seo-mayak.com я продолжу свое повествование о том, как ускорить сайт и расскажу как включить gzip сжатие на сервере.

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

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

Google уже давно не двусмысленно об этом заявил, да и Яндекс играя в молчанку все равно следует мировым тенденциям.

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

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

Но мало того, в интернете, впрочем как и в реальной жизни, работает понятие «Время — деньги». Слышал, что компания Amazon потеряла 1% своего дохода из-за замедления скорости загрузки ресурса всего лишь на 100 миллисекунд. Учитывая обороты компании, сумма получается весьма внушительная. Так что делаем своевременные выводы.

В прошлой статье, посвященной PageSpeed, мы прошлись по двум очень важным пунктам, касающихся оптимизации изображений и теперь пришла очередь не менее важной рекомендации — «Включить сжатие».

gzip szhatie

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

Что значит «Включить сжатие»

Допустим, пользователь открыл страницу и запустил процессы передачи данных с сервера. В браузер пользователя отправляются изображения и текстовые файлы с расширениями: .html, .css, .js и т.д.

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

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

Все современные браузеры, в том числе и мобильные, прекрасно умеют обрабатывать файлы с расширением .gz. Т.е, если браузеру оправить сжатые файлы, то он их распакует и отобразит содержимое.

Но как включить это gzip сжатие? Давайте обо всем по порядку. Реализовать gzip сжатие файлов на сервере можно двумя способами — динамическим или статическим.

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

Вписываем в поле свой домен и нажимаем кнопочку «Check»:

gzip szhatie5

Если результат проверки будет примерно следующим:

gzip szhatie1.1

Это значит, что динамическое gzip сжатие на сервере не включено.

Как включить динамическое gzip сжатие и стоит ли это делать

Динамическое gzip сжатие включить очень просто, достаточно добавить в файл .htaccess следующий код:

# сжатие text, html, javascript, css, xml:
<ifModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript
</ifModule>

Теперь давайте проверим, как работает сжатие. Снова заходим на сервис, ссылку на который я дал выше и производим повторную проверку:

gzip szhatie2

В моем случаи исходный размер файлов составил 39,533 байт, после сжатия их вес уменьшился до 9,792 байт. В общей сложности вес снизился на 75,2%. Впечатляет!

Для полной уверенности в действенности данного метода, проведем тест. Отключив кэширование, я взял самую тяжелую статью с блога и проверил ее на скорость загрузки, с помощью сервиса pr-cy.ru.

Без динамического gzip сжатия:

gzip szhatie3

С включенным gzip сжатием:

gzip szhatie4

Впечатляет еще больше!

Но так ли все радужно? Обязан Вас предупредить, что у сего метода есть обратная сторона медали.

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

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

Это что же получается, одно лечим — другое калечим? Выходит так! Но как я уже сказал, многое зависит от хостинга, а также от количества сжимаемых файлов и от общей оптимизации WordPress. Попробуйте, и если последствий не возникнет, то в принципе можно использовать данный метод.

Должен сказать, что у динамического gzip сжатия есть еще один минус — сервер тратит драгоценные миллисекунды на сам процесс сжатия.

Самое время рассказать про второй вариант.

Статическое gzip сжатие

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

Процедура выглядит следующим образом. Скачиваем с сервера файлы с расширениями .css и .js, затем открываем архиватор 7-Zip и ищем в окне программы скаченные файлы.

gzip szhatie6

Нажимаем кнопку «Добавить» и устанавливаем следующие параметры сжатия:

gzip szhatie7

Нажимаем «ОК» и смотрим насколько похудел файл:

gzip szhatie8

Аналогичным образом сжимаем все файлы шаблона, с расширениями .css, .js и заливаем сжатые копии обратно на сервер.

Теперь в файл .htaccess вставляем следующий код:

# Перенаправление на gzip файлы
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>

Проверить работу статического gzip сжатия можно с помощью сервиса whatsmyip.orgwww.whatsmyip.org:

gzip szhatie11

Или для пущей уверенности можно проверить с помощью расширения для Mozilla Firefox, которое называется Live HTTP Headers.

Устанавливаем расширение, выбираем вкладку «Инструменты» и в ней ищем пункт «Просмотр HTTP заголовков»:

gzip szhatie10

Если в ответах сервера есть такая фраза:

gzip szhatie9

Это значит что статическое gzip сжатие работает как надо.

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

И еще, прежде чем делать gzip копии файлов .css и .js необходимо выполнить еще две рекомендации PageSpeed, а именно «Сократите JavaScript» и «Сократите CSS». Как выполнить данные рекомендации, читайте в ближайших статьях и подписывайтесь на обновления блога, чтобы ничего не пропустить.

Не важно, какой Вы выбрали способ сжатия, дабы ускорить свой сайт, но после всех проделанных манипуляций, в анализе PageSpeed, пункт «Включить сжатие» должен оказаться в зеленой зоне:

gzip szhatie12