Включаем GZIP сжатие в WordPress

Чтобы добиться высокой скорости загрузки вашего WordPress-сайта, важно снизить размер его страниц. Есть ощутимая разница между сайтом, загружающимся в пределах одной секунды, и сайтом, который грузится «со скрежетом», еле-еле. Включение GZIP-сжатия позволяет снизить размер ваших веб-страниц, что отражается на времени загрузки всего ресурса в целом, ускоряет процесс передачи данных клиенту, а также помогает улучшить время до первого рендеринга страниц. Все современные браузеры поддерживают и автоматически согласовывают GZIP-сжатие для всех HTTP-запросов. Сегодня мы расскажем вам, как проверить и включить GZIP-сжатие на вашем веб-сервере.

Что представляет собой GZIP-сжатие?

GZIP – файловый формат, а также программное приложение, используемое для сжатия и декомпрессии файлов. Сжатие GZIP включается на стороне сервера и позволяет дополнительно снизить размер вашего HTML-кода, таблиц стилей и JavaScript-файлов. Оно не работает с изображениями, поскольку они уже сжаты несколько иным способом. Сжатие позволяет добиться снижения размера страниц вплоть до 70%, что подтверждается практическими примерами. Это, вероятно, одна из самых простых оптимизаций, которую вы можете сделать в WordPress.

Когда веб-браузер посещает сайт, он проверяет, включено ли на веб-сервере GZIP-сжатие. Делается это с помощью заголовка ответа «content-encoding: gzip». Если заголовок существует, то в таком случае браузеру передаются сжатые файлы меньшего размера. Если нет, то тогда браузер получает несжатые файлы. Если у вас нет включенного GZIP, то в таком случае вы, скорее всего, увидите предупреждения и ошибки в таких инструментах тестирования скорости, как Google PageSpeed Insights и GTmetrix.

Предупреждение GZIP в Google PageSpeed Insights

Как вы можете видеть, Google указывает на то, что сжатие ресурсов с помощью GZIP или Deflate позволяет снизить количество передаваемых по сети байтов.

Предупреждения GZIP в GTmetrix

GTmetrix также дает рекомендации по включению GZIP-компрессии для снижения передаваемого размера статичных ресурсов.

Как проверить, включено ли сжатие GZIP

GZIP в настоящее время очень распространен. Вам не нужно беспокоиться о браузерной поддержке, поскольку многие браузеры поддерживают его вот уже в течение 17 лет. Ниже представлен список браузеров, которые способны обрабатывать HTTP-заголовок «content-encoding: gzip»:

• Internet Explorer 5.5+ (июль 2000)
• Opera 5+ (июнь 2000)
• Firefox 0.9.5+ (октябрь 2001)
• Chrome (сразу после запуска в 2008)
• Safari (сразу после запуска в 2003)

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

1. Проверка с помощью GZIP Compression Tool

Первый и самый быстрый способ проверки наличия GZIP-сжатия – это использование бесплатной утилиты Check GZIP compression. Просто укажите адрес вашего сайта и нажмите Search. Вы получите общий процент сжатия страницы сайта с помощью GZIP. Либо вы столкнетесь с ошибкой, указывающей на то, что GZIP не включен.  Как вы можете видеть из изображения, мы смогли сохранить 66,9% с помощью подключения компрессии.

Помните о том, что GZIP также применим и к вашим статическим ресурсам. Если вы получаете ресурсы из CDN, то в таком случае вам нужно убедиться, что провайдер CDN также поддерживает сжатие GZIP. Все современные провайдеры CDN поддерживают GZIP-компрессию — Cloudflare, KeyCDN, CloudFront и др. Вы можете также протестировать наличие GZIP, запустив один из ваших CSS или JavaScript-файлов в CDN с помощью инструмента.

2. Заголовок ответа GZIP

Второй способ проверки – убедиться в том, что заголовок ответа «content-encoding: gzip» активен на вашем сайте. Именно его пытается найти браузер при отправке запроса серверу. Вы можете открыть Chrome Devtools и посмотреть первый заголовок ответа в разделе Network.

Также вы можете выбрать опцию «view large requests», и она покажет вам исходный и сжатый размер страницы. Вы можете видеть на скриншоте, что исходная страница имеет размер 51.6 KB, а сжатая с помощью GZIP страница – уже 17.7 KB.

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

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

Включаем GZIP с помощью плагина WordPress

Первый и самый простой способ – использовать плагин кэширования, который поддерживает GZIP. Плагин WP Rocket, к примеру, добавляет правила GZIP-компрессии в ваш файл .htaccess автоматически с помощью модуля mod_deflate. В W3 Total Cache также есть способ включения сжатия в разделе Performance. Плагины требуют разрешения для изменения файлов на вашем веб-сервере. Если у плагина кэширования нет такого разрешения, то вам нужно обратиться к вашему хостеру или использовать фрагмент кода, представленный ниже.

Включаем GZIP на Apache

Второй способ включения GZIP-сжатия – это редактирование файла .htaccess. Большинство виртуальных хостеров используют Apache. Вы можете просто добавить код ниже в файл .htaccess, который хранится в корневой папке вашего WP-сайта.

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

Убедитесь в том, что вы добавили этот код ниже существующего контента вашего .htaccess файла. Пример ниже:

Включаем сжатие GZIP в NGINX

Если вы работаете с NGINX, то в таком случае добавьте следующий код в файл nginx.conf:

gzip on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
gzip_vary on;
gzip_types text/plain text/css text/javascript application/javascript application/x-javascript;

Включаем сжатие GZIP в IIS

Если вы работаете с IIS, то в таком случае вы можете использовать два вида сжатия: статичное и динамическое. Мы рекомендуем в этом случае ознакомиться с руководством от Microsoft.

Источник: kinsta.com