Как сжимать для сайтов


Как сжимать для сайтов

Как сжимать для сайтов

Как сжимать для сайтов



Всем привет! Сегодня на я продолжу свое повествование о том, как ускорить сайт и расскажу как включить 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 сжатии, сервер сжимает запрашиваемые файлы непосредственно перед их отправкой в браузер пользователя, что существенно уменьшает их вес и ускоряет процесс передачи.

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

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

Должен сказать, что у динамического 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$ \.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$ \.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

Надеюсь у Вас все получится!

До встречи!

С уважением, Виталий Кириллов





Источник: http://seo-mayak.com/sozdanie-bloga/skorost-zagruzki/kak-vklyuchit-gzip-szhatie-i-uskorit-sajt.html



Как сжимать для сайтов фото



Как сжимать для сайтов

Как сжимать для сайтов

Как сжимать для сайтов

Как сжимать для сайтов

Как сжимать для сайтов

Как сжимать для сайтов

Как сжимать для сайтов

Как сжимать для сайтов

Как сжимать для сайтов