Gzip сжатие js / css / html ускорение сайта — как включить в .htaccess

Прослушать эту статью

Приветствую Вас, дорогие читатели! Сегодня мы поговорим про Gzip сжатие js | css | html, для ускорения загрузки сайта. О том, как включить его с помощью файла .htaccess. Также я расскажу Вам, зачем вообще необходимо включать сжатие файлов на стороне сервера.

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

Содержание статьи:

• Для чего нужно включение Gzip сжатия файлов в .htaccess?
• Gzip сжатие — для каких фалов приемлемо? На каких серверах работает?
• Как включить Gzip сжатие в файле  .htaccess
• Проверка скорости загрузки сайта и сжатия Gzip
• Плагины GZIP compression для WordPress

Для чего нужно включение Gzip сжатия файлов в .htaccess?

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

GZIP compression – обеспечивает бесперебойную архивацию передаваемых файлов. Таким образом мы получаем сжатие без потерь качества исходника. Все данные приходят в исходное состояние после распаковки уже в браузере пользователя. Сама реализация происходит благодаря нескольким алгоритмам работы. К ним относятся основной DEFLATE с использованием LZ77 и Хаффмана.

Конечно такой вид компрессии (сжатия) не является идеальным решением. Но реализация  Gzip приводит нас к равновесию между скоростью и степенью сжатия. Этот метод является наиболее востребованным на фоне прочих способов ускорения сайта. Тем более, внедрение более глобального метода на сервер, займет уйму времени и тестирования. И может не дать нужного результата!!! Gzip сжатие в этом плане, самый надежный способ ускорения загрузки файлов.

Gzip сжатие — для каких фалов приемлемо? На каких серверах работает?

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

К основным относятся:

• text/plain text/html;
• text/xml application/xml application/xhtml+xml application/xml-dtd;
• application/rdf+xml application/rss+xml application/atom+xml image/svg+xml;
• text/css text/javascript application/javascript application/x-javascript;
• font/opentype application/font-otf application/x-font-otf;
• font/truetype application/font-ttf application/x-font-ttf.

Gzip сжатие файлов используется на основных серверах Apache и Nginx. При наличии допустимых модулей работы и возможностей сервера.

Например: Nginx – используется для статики. Хорошо сжимает и обрабатывает статичные файлы. Сжатие происходит благодаря модулям ngx_http_gzip_module и ngx_http_gzip_static_module. Осуществляется бесперебойное сжатие на лету с подменой основного расширения на “.gz”.

Пример стандартной конфигурации:

gzip on;
gzip_min_length 1000;
gzip_types text/plain application/xml;

Apache – самый востребованный сервер. Конечно и сжатие на нем будет более масштабным и настраиваемым.  Gzip сжатие на этом сервере осуществляется с помощью модуля mod_deflate. Обеспечивая сжатие на лету перед отправкой в браузер пользователя.

Пример стандартной конфигурации:

# Enable GZIP - включение сжатия
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

Сжатие медленным алгоритмом, для уменьшения нагрузки на сервер:

RewriteEngine On
AddEncoding gzip .gz
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*)$ $1.gz [QSA,L]

PHP – менее востребованный вариант. Но также имеет возможность организации сжатия с помощью модуля zlib. Этот метод не рекомендуется, так как является крайне медленным.

Пример стандартной конфигурации:

$originalFile = __DIR__ . '/jquery-1.11.0.min.js';
$gzipFile = __DIR__ . '/jquery-1.11.0.min.js.gz';

$originalData = file_get_contents($originalFile);

$gzipData = gzencode($originalData, 9);
file_put_contents($gzipFile, $gzipData);

var_dump(filesize($originalFile)); // int(96380)
var_dump(filesize($gzipFile)); // int(33305)

Конечно использование серверов Apache+Nginx+PHP возможно и вместе. Таким образом будет обеспечено определенное распределение нагрузки между серверами. Но это очень сложная задача, которой не стоит заниматься простым пользователям.

Свой сервер я настраивал сам, используя все основные преимущества Apache/Nginx/PHP. Таким образом Nginx обрабатывает статику, остальным занимается Apache с PHP. Результат получился очень положительный. Но времени на организацию этого метода было затрачено немало.

Как включить Gzip сжатие в файле  .htaccess

На самом деле, сделать это не сложно. Тем более я уже рассказывал об этом файле.

Основные правила остаются прежними:

1. Обязательно сохраняйте оригинал  .htaccess файла перед редактированием. В случае ошибки 500, будет чем восстановить.
2. Не должно быть пропусков между строк.
3. Все комментарии пишем после знака #.
4. Обязательно проверяем код на целостность после вставки.

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

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

Для основной аудитории инструкция к применению:

1. Заходим на сервер любым популярным ftp клиентом;
2. Переходим в корень сайта (директорию);
3. Файл .htaccess находится в основной директории сайта;
4. Открываем его текстовым редактором, вообще лучше Sublime Text 3;
5. Далее в самом конце файла вставляем код, который будет показан ниже.
6. Убедительная просьба проверять код, так как на сайте присутствует защита от копирования ( в конце кода может быть ссылка на сайт).

# Enable GZIP
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/text
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE image/gif
AddOutputFilterByType DEFLATE image/jpeg
AddOutputFilterByType DEFLATE image/jpg
AddOutputFilterByType DEFLATE image/png
AddOutputFilterByType DEFLATE image/gif
AddOutputFilterByType DEFLATE image/flv
AddOutputFilterByType DEFLATE image/ico
AddOutputFilterByType DEFLATE image/swf
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/json
AddOutputFilterByType DEFLATE video/3gpp
AddOutputFilterByType DEFLATE video/3gpp2
AddOutputFilterByType DEFLATE video/x-flv
AddOutputFilterByType DEFLATE video/jpm
AddOutputFilterByType DEFLATE video/jpeg
AddOutputFilterByType DEFLATE video/x-m4v
AddOutputFilterByType DEFLATE video/mp4
AddOutputFilterByType DEFLATE video/ogg
AddOutputFilterByType DEFLATE video/webm
AddOutputFilterByType DEFLATE video/quicktime
AddOutputFilterByType DEFLATE audio/x-mpegurl
AddOutputFilterByType DEFLATE audio/midi
AddOutputFilterByType DEFLATE audio/mp3
AddOutputFilterByType DEFLATE audio/mp4
AddOutputFilterByType DEFLATE audio/mpeg
AddOutputFilterByType DEFLATE audio/webm
AddOutputFilterByType DEFLATE audio/basic
AddOutputFilterByType DEFLATE audio/x-wav
AddOutputFilterByType DEFLATE audio/wav
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>

Если не заключить обязательные элементы в скобки получите ошибку. Ваш сайт просто перестанет работать и выдаст ошибку 500 internal server error. Текст “обязательно заключаем в скобки “<>””, также нужно удалить из кода. После этого файл .htaccess нужно сохранить.

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

Проверка скорости загрузки сайта и сжатия Gzip

После того, как мы включили сжатие на стороне сервера. Можно проверить успех проделанной работы! Сделать это, можно несколькими популярными онлайн инструментами. Давайте рассмотрим их:

PageSpeed Insights – основной и самый популярный онлайн инструмент для проверки сайта. После последних изменений в 2018 году компанией Google. Предоставляет обширный перечень данных, для детального анализа сайта.

Что может:

1. Общая оценка скорости сайта;
2. Указывает время загрузки контента;
3. Общий индекс скорости и время до взаимодействия;
4. Дает рекомендации по оптимизации;
5. Показывает подробную информацию о производительности;
6. Указывает на наличие или отсутствие включенного Gzip сжатия;
7. Указывает на наличие или отсутствие включенного хеширования;
8. Предоставляет большой объем информации для исправления ошибок.

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

Pingdom Tools – также один из популярных онлайн инструментов анализа сайта. Дает достаточно подробную информацию по множеству критериев оценки сайта. Можно легко обнаружить, что именно замедляет загрузку.

Что даст Вам:

1. Оценку общей производительности сайта;
2. Количество запросов к базе данных сайта;
3. Скорость загрузки страницы;
4. Размер содержимого по типу контента;
5. Ответы сервера 200/301/302/404/503 и прочие;
6. Общие запросы по доменам;
7. Графическое представление ситуации и прочее;

Выдает массу информации по скорости сайта. Но не дает подробных инструкций как Google.

Плагины GZIP compression для WordPress

Как не странно, но обладателям сайтов на CMS WordPress особо заморачиваться не нужно. Причина этому, разнообразие плагинов для включения компрессии на сайте. Все что необходимо сделать, это установить понравившийся плагин. Затем активировать и включить в настройке плагина сжатие. Далее он сам сделает всю работу за вас. Я опишу пару самых популярных.

PageSpeed Ninja — это наилучший плагин производительности для WordPress. Вы сможете сделать свои сайты быстрыми на десктопах и мобильных устройствах, в один клик исправив проблемы найденные Google PageSpeed Insights. Позволяет быстро включить сжатие на сайте.

WP Fastest Cache — также один из популярнейших плагинов хеширования. Имеет огромное количество сгруппированных настроек, одна из которых включает сжатие.

Comet Cache — этим плагином я сам пользуюсь. Так как в совокупности с остальными плагинами, он дает отличный результат. Также одна из его настоек включает gzip сжатие.

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

В заключение скажу следующее: обязательно включайте сжатие. Это очень хорошо повлияет на производительность и поднимет сайт в поиске. Надеюсь эта статья поможет Вам в этом.

С этой статьей читают:

• Оптимизация HTML кода сайта — чистка, сжатие, исправление ошибок
• Sitemap XML — как добавить карту сайта в Google и Yandex Вебмастер

Спасибо, что читаешь: SEO HELPER | NICOLA.TOP