Включаем 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 с помощью инструмента.

  1. Заголовок ответа 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

Блог про WordPress
Комментарии: 26
  1. Александр

    Когда я пытался включить сжатие, ни плагины, ни код в htaccess — ничего не помогало. Оказалось просто — в панели хостинга выбираешь свой домен, жмешь изменить и листаешь до конца. Там ставишь сжатие с 1 до 9 на выбор и все) правда это только для тех у кого isp manager)

  2. Айти-Юг Краснодар

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

  3. Анатолий

    Спасибо, все это поставил. Но теперь google pagespeed говорит что саму страницу тоже неплохо бы сжимать.
    Почему ничего в примерах не указано о сжатии php?

  4. alex alex

    Спасибо, помог. Коммент не купленный, если что :)

    1. Дмитрий (автор)

      У нас нет купленных комментов :)

  5. Айк

    Спасибо!

  6. infantil

    Спасибо, помогло!

  7. Олег

    А где взять этот плагин WP Rocket? В официальном каталоге WordPress.org его нет… Установил WP Fastest Cache, включил в настройках GZip-сжатие, но при проверке пишет, что Gzip на сайте не выключен.

    1. Дмитрий (автор)

      WP-Rocket — это премиум-плагин.

  8. Олег

    Лайк, помогли решить проблему!

  9. Дмитрий (автор)

    Если хотите поддержать блог, сбоку есть форма доната. Спасибо !

  10. Елена

    Спасибо! Очень помогли!

  11. cyberpunk2077

    благодарен за подсказку к сайту своему

  12. Юрий

    Добрый день! Пытаюсь включить сжатие, добавил код в .htaccess, но по ходу не включается. По крайней мере ресурс http://www.gidnetwork.com/tools/gzip-test.php показывает, что сжатие не включено.
    Подскажите пожалуйста в чем может быть причина?

    1. Дмитрий (автор)

      Здравствуйте! Попробуйте плагины для сжатия, возможно, лучше справятся.

  13. Денис

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

    1. Дмитрий (автор)

      Не уверен, что на всех и автоматом.

  14. Денис

    Назовите, пожалуйста, известный хостинг, который на стороне хостинга автоматом не включает сжатие

    1. Дмитрий (автор)

      По умолчанию эта опция всегда выключена. Только на единичных хостингах бывает включена по умолчанию (и то это специфичные хостинги приложений по типу Firebase Hosting).

      Пример: хостинг Siteground и многие другие. https://www.siteground.com/kb/how_to_enable_gzip_compression_for_your_pages/

      Везде есть инструкции, как включать через cPanel и с помощью других методов.

  15. Дарья

    Спасибо! Добавление в файл кода .htaccess помогло

    1. ЗОНК

      Дарья, а как вы поняли, что помогло? Я вот в Google PageSpeed Insights вообще изменений не заметил после добавления кода в htaccess(

      Файл актуален для 2020 года (точнее сам код)? Или может видоизменился уже как-то? Спасибо.

  16. Альберт

    ЛАЙК!
    По google page speed сразу +8%
    Делал через .htaccess

    1. Дмитрий (автор)

      Шикардос)

  17. Денис

    Вам, статья просто супер! Очень хорошо помогаете людям! Сразу чувствуется профессиональный подход!

    1. Дмитрий (автор)

      Спасибо!

  18. Максим

    Спасибо вам ! Реально пару движений нужно сделать и сайт ускоряет! Спасибо тебе добрый человек!

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

Получать новые комментарии по электронной почте.