Gzip-сжатие в WordPress: что это, для чего нужно и как использовать
В статье вы узнаете, зачем сжимать данные на сайте, как включить сжатие gzip в WordPress и как проверить корректность его работы.
Наверняка вы хоть раз пользовались программами gzip или winRAR. Это архиваторы, которые позволяют сжимать данные (один файл или несколько) и упаковывать их в архив. В отличие от полноразмерных файлов, его можно быстро скачать или передать на другой носитель.
Рассмотрим, что это такое и как используется на сайтах.
Что такое gzip-сжатие и для чего нужно
Когда пользователь впервые попадает на сайт, его браузеру нужно загрузить все файлы, из которых состоит страница. Для этого браузер отправляет запрос на сервер, на котором расположен сайт. Сервер, в свою очередь, отдаёт в ответ запрошенные данные.
Если файлы слишком большие, пользователю приходится ждать загрузки. В этот момент он видит перед собой белую страницу или не целиком прогрузившийся контент.
Чем дольше он ждёт, тем ниже его лояльность. По исследованию Google, если страница загружается больше 3 секунд, каждый второй пользователь просто закроет страницу.
Чтобы этого избежать, владельцы сайтов используют gzip-сжатие. Это инструмент, который позволяет уменьшить размер файлов в тот момент, когда сервер отдаёт их браузеру пользователя. За счёт этого уменьшается вес страницы и увеличивается скорость загрузки.
Как работает сжатие gzip
Даже если ваш сайт написан не вручную, а создан с помощью CMS, в его составе есть HTML и CSS-коды. Именно их в совокупности с картинками и другими файлами сервер передаёт пользователям.
В структуре HTML и CSS-кода есть повторяющиеся или лишние элементы: строки со свойствами и пробелы. Утилита находит их и «сокращает» во время обмена между сервером и браузером пользователя. Таким образом, размер передаваемых файлов уменьшается и они передаются быстрее.
Утилита может сжать данные в несколько раз в зависимости от уровня (от 1 до 9). Как правило, в программах используется 3–5 уровень gzip-сжатия. Он позволяет сократить данные без потери качества и не сильно нагружает процессор.
Gzip-сжатие увеличивает скорость загрузки сайта, но создаёт дополнительную нагрузку на сервер. Как правило, мощности современных серверов хватает на сжатие даже на минимальных тарифах хостинга.
Как проверить gzip-сжатие онлайн
Большинство хостинг-провайдеров сейчас предоставляет возможность включить gzip-сжатие, и зачастую на сайтах пользователей оно работает автоматически. Однако, если сайт создавался несколько лет назад или вы замечаете проблемы со скоростью загрузки, стоит проверить, корректно ли работает сжатие.
Чтобы удостовериться, всё ли хорошо с оптимизацией сайта, воспользуйтесь бесплатными сервисами. Например, проверкой CY-PR или другой аналогичной (WebSitePlanet, GIDNetwork и т. п.).
Сервис показывает размер несжатого контента и процент сэкономленного трафика. Это результаты проверки сайта, у которого всё в порядке с gzip:
Проверка gzip-сжатия онлайн в CY-PR
А вот противоположный пример:
Если при проверке вы увидели результат, как на второй картинке, или вас не устраивает процент сжатия, ускорьте сайт по инструкции ниже.
Как включить сжатие gzip
Есть несколько способов включить эту настройку для сайта:
- вручную добавить код в конфигурационном файле htaccess (для web-сервера Apache) или nginx.conf (для Nginx),
- воспользоваться готовыми плагинами.
Первый способ более универсальный, но для реализации потребуются технические навыки и доступ к настройкам сервера.
Мы разберём более простой вариант, для начинающих. Он подойдёт в случае, если ваш сайт создан на CMS WordPress. Включить сжатие можно с помощью бесплатных плагинов.
Создайте сайт легко
Чтобы не тратить время на настройку домена, хостинга и CMS, закажите услугу REG.Site. В услугу входит хостинг, WordPress, десятки шаблонов и SSL-сертификат. Вам не понадобятся дополнительные настройки. Просто закажите услугу и сразу приступайте к редактированию шаблона.
Заказать
Сжатие для WordPress
- org/HowToStep»>
1.
-
2.
Перейдите в раздел Плагины и нажмите Добавить новый:
-
3.
В строке поиска справа введите название плагина:
- W3 Total Cache — многофункциональный плагин, полезный не только для настройки сжатия, но и для других SEO-показателей: кэширование, адаптивной версии сайта, интеграции в CDN. Чтобы по максимуму использовать его возможности, придётся разобраться в «начинке»;
- Enable GZIP compression — простой плагин, в котором есть только две функции: включить и отключить gzip-сжатие;
- WP Fastest Cache — похож на W3 Total Cache, но в нём можно настроить 3 режима кэширования, в том числе для продвинутых пользователей с корректировкой файла . htaccess.
-
4.
Нажмите Установить, а затем Активировать в том же блоке:
Как включить на примере W3 Total Cache
Авторизуйтесь в административной панели CMS.
Дальнейшие действия будут зависеть от выбранного плагина.
W3 Total Cache
Enable GZIP compression
WP Fastest Cache
Здесь всё настраивается автоматически. Если хотите перестраховаться и проверить:
-
5.
В левом меню наведите курсор на строку Preferences и перейдите в раздел Browser Cache:
-
6.
Напротив пункта «Enable HTTP (gzip) compression» должна стоять галочка:
- org/HowToStep»>
5.
-
6.
Нажмите Enable Gzip Compression:
В левом меню наведите курсор на раздел Настройки и выберите последний пункт списка — Gzip Compression:
-
5.
Кликните по названию плагина в основном меню слева, поставьте галочку напротив строки «Gzip» и нажмите Submit:
Готово, теперь страницы сайта будут загружаться быстрее.
С помощью бесплатного плагина вы сможете включить gzip-сжатие и увеличить скорость загрузки страниц. Это важный момент не только для удобства (юзабилити), но и для улучшения позиций сайта в поисковых системах. Чтобы оптимизировать сайт, наряду с gzip-сжатием, вам потребуется настройка кэширования, работа с изображениями и другие параметры.
Помогла ли вам статья?
Да
6 раз уже помогла
Включаем GZIP сжатие в WordPress
Чтобы добиться высокой скорости загрузки вашего WordPress-сайта, важно снизить размер его страниц. Есть ощутимая разница между сайтом, загружающимся в пределах одной секунды, и сайтом, который грузится «со скрежетом», еле-еле. Включение GZIP-сжатия позволяет снизить размер ваших веб-страниц, что отражается на времени загрузки всего ресурса в целом, ускоряет процесс передачи данных клиенту, а также помогает улучшить время до первого рендеринга страниц. Все современные браузеры поддерживают и автоматически согласовывают GZIP-сжатие для всех HTTP-запросов. Сегодня мы расскажем вам, как проверить и включить GZIP-сжатие на вашем веб-сервере.
Содержание
- Что представляет собой GZIP-сжатие?
- Предупреждение GZIP в Google PageSpeed Insights
- Предупреждения GZIP в GTmetrix
- Как проверить, включено ли сжатие GZIP
- Проверка с помощью GZIP Compression Tool
- Заголовок ответа GZIP
- Как включить GZIP сжатие
- Включаем GZIP с помощью плагина WordPress
- Включаем GZIP на Apache
- Включаем сжатие GZIP в NGINX
- Включаем сжатие GZIP в IIS
Что представляет собой 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:
Проверка с помощью 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 с помощью инструмента.
Заголовок ответа 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 GZIP — советы Plesk
На самом деле вам нужно включить сжатие WordPress GZIP на стороне сервера, а не на стороне WordPress. Когда вы покупаете хостинг у популярных хостинговых компаний, вы обнаружите, что в их стандартных пакетах хостинга это уже включено. С некоторыми другими провайдерами веб-хостинга вам нужно будет сделать это самостоятельно.
Если вы обнаружите, что WordPress GZIP-сжатие еще не включено, вы можете начать с одного из нескольких способов. Мы рассмотрим несколько способов включения GZIP-сжатия в WordPress, которые подойдут вам, будь вы новичок или опытный веб-разработчик.
Включить сжатие GZIP WordPress в Apache
Вы можете включить сжатие GZIP для своего веб-сайта WordPress, внеся изменения в файл .htaccess (который является частью инфраструктуры Apache). Многие люди используют этот подход, но, к сожалению, такой подход означает, что есть шанс, что что-то может сломаться! В этом нет ничего удивительного, потому что возня с таким важным серверным файлом, как .htaccess, означает, что одна маленькая ошибка может привести к серьезным последствиям, которые приведут к сбою вашего сайта.
Чтобы снизить шансы испортить свой сайт WordPress, поступите разумно и создайте резервную копию исходного файла, прежде чем что-либо менять, и не только это, но и сделайте резервную копию вашего сайта WordPress! Как только вы будете полностью уверены, что сможете оправиться от катастрофического сбоя, если вам это нужно, пришло время приступить к делу.
Файл .htaccess обычно скрыт как на удаленном сервере, так и на вашем компьютере, вы сможете найти его в корневой папке вашего сайта.
Идеальным способом является доступ к файлу через FTP, также можно использовать другой интерфейс администратора или Plesk.
Чтобы включить сжатие WordPress GZIP в вашем FTP-клиенте, вам нужно сделать скрытые файлы видимыми.
Как только вы найдете файл .htaccess, вы сможете внести изменения, но сначала лучше загрузить его на свой компьютер и внести изменения там. Файл, скорее всего, будет скрыт на вашем компьютере, поэтому вам нужно указать ему показывать скрытые файлы.
Сжатие JavaScript, Text, HTML, CSS, XML и FONTS
ADDOUTPUTFILTERBYTYPE DOFLATE Приложение/JavaScript
AddOutputPilterBytype Defflate/RSSS+XML
7777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777700 гг. 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 шрифт/opentype
AddOutputFilterByType DEFLATE шрифт/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
9Mozilla/4\. 0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Добавление заголовка Vary User-Agent
Сохраните файл, используя его чтобы перезаписать исходный файл .htaccess. Проверьте свой веб-сайт с помощью инструмента проверки сжатия GZIP (или проверьте заголовки ответов), чтобы проверить, работает ли он.
Включить сжатие GZIP на NGINX
Хотя в большинстве планов общего хостинга используются веб-серверы Apache, вы можете использовать что-то другое, например NGINX.
Чтобы включить сжатие GZIP для веб-серверов NGINX, вы должны сделать это по-другому. Если вы используете NGINX, вы можете включить сжатие GZIP в WordPress, найдя файл nginx.conf и добавив следующий код:
gzip on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
gzip_vary включен;
gzip_types текст/обычный текст/текст css/изображение javascript/изображение svg+xml/приложение x-icon/приложение javascript/x-javascript;
Обратитесь к своему веб-хостингу, чтобы включить сжатие GZIP.
Многие веб-хостинги, в том числе GoDaddy, Kinsta и Siteground, автоматически включают сжатие WordPress GZIP, потому что это значительно повышает производительность, в то время как другие дадут вам инструкции и позволят настроить сжатие WordPress GZIP самостоятельно.
Если у вас по умолчанию не включено сжатие GZIP и вы не знаете, как это изменить, не бойтесь обращаться к своему веб-хостингу. Большинство из них, как правило, будут совершенно счастливы помочь вам.
Плагин для включения сжатия WordPress GZIP
Сжатие WordPress GZIP можно настроить с помощью плагина, но, хотя это может быть проще, это также может подвергнуть вас дополнительным проблемам безопасности и занять больше места на диске на вашем сервере. Но если вы решите пойти по этому пути, то вот несколько плагинов, которые помогут вам включить сжатие WordPress GZIP.
Многие инструменты, позволяющие включить сжатие GZIP на вашем сайте WordPress, представляют собой пакеты кэширования, которые помогут вам настроить ваш сайт для достижения наилучшей производительности. Сжатие файлов HTML, JavaScript и CSS, безусловно, улучшит его.
Но Включить сжатие GZIP было разработано только для одной цели: включать и отключать сжатие GZIP для вашего сайта WordPress, когда он находится на веб-сервере Apache.
WP ROCKET
WP Rocket — это плагин для кэширования, который всего за несколько кликов поможет сайтам WordPress загружаться быстрее. После активации WP Rocket добавляет правила сжатия GZIP в файл .htaccess с помощью модуля mod_deflate.
W3 TOTAL CACHE
W3 Total Cache — один из лучших плагинов кэширования WordPress, но он не для новичков и может сломать ваш сайт, если вы не знаете, как его правильно использовать. Но если вам удобно, это может быть полезно, чтобы помочь вам включить сжатие HTTP. Просто зайдите в кеш браузера, а затем установите флажок для HTTP-сжатия.
WP SUPER CACHE
WP Super Cache — еще один плагин кэширования WordPress, который позволяет сжимать код.
Чтобы включить сжатие WordPress GZIP с помощью WP Super Cache, перейдите на панель управления WordPress > WP Super Cache > Дополнительно > и установите флажок «Сжимать страницы». Это гарантирует, что они будут доставлены посетителям быстрее.
WP Баффы | Управление веб-сайтом WordPress 24/7
Услуги по обслуживанию для серьезных владельцев веб-сайтов, управление веб-сайтом для агентств и фрилансеров:
Ваш сайт значит для вас все. Станьте партнером команды, которая предлагает все аспекты премиальных услуг поддержки WordPress.
- круглосуточное редактирование сайта
- Экстренная поддержка 24/7
- Постоянная безопасность
- Еженедельные обновления
- Резервные копии веб-сайтов
- Оптимизация скорости
Цены
Упаковки
Управление веб-сайтом для клиентов
Агентства, фрилансеры, блоги WordPress
Предлагайте премиальную круглосуточную поддержку всей вашей клиентской базе или аудитории, не беспокоясь о найме, управлении командой или оказании технической поддержки.
Управление сайтом для вас
Малый бизнес, владельцы веб-сайтов, стартапы
Станьте партнером команды талантливых инженеров WordPress, чтобы полностью управлять всеми аспектами вашего веб-сайта WordPress круглосуточно и без выходных за небольшую ежемесячную плату.
НАШИ
КЛИЕНТЫ
У меня совершенно новая работа — вы изменили мою жизнь. Раньше я целыми днями был рабом компьютера, пытаясь что-то починить или сделать то, что на самом деле не должен был делать.
Я вижу смехотворный ROI от работы с программой WP Buffs white label. На самом деле, я могу обналичить 4-значная прибыль в месяц благодаря объединению с Баффами.
Прочтите о том, как мы увеличили рентабельность Rigorous Digital на 23% и помогли устранить все проблемы с веб-сайтами для издателей MEP и их 3 сложных веб-сайтов.
Corrin CampbellWP Клиент BuffsПодробнее
Я здесь, чтобы сказать. .. @thewpbuffs каждый день спасают мое кровяное давление на много-много баллов. Лучшая команда веб-сайтов @Indepreneur_io!
Клиент Dr. Linda OnlineWP BuffsПодробнее
#bufftastic @thewpbuffs делает фантастическую работу. Мне так приятно. Их время ответа на мои проблемы с веб-сайтом является образцовым. ЛЮБЛЮ ВАС, ПАРНИ!!!
Jake HytenWP Buffs клиент5499_Google_Icon
Подробнее
За последние 60+ дней не было ни одного неудачного ответа или проблемы, о которой не позаботились. Невероятное обслуживание клиентов на каждом этапе пути. Они всегда говорят, что прикрывают твою спину, и это действительно так! Спасибо команде WP Buffs. Мы любим вас всех!
Rita PaiewonskyWP Buffs клиент5499_Google_Icon
Подробнее
Я часами искал в Интернете, кого нанять для обслуживания моего сайта. Я выбрал WP Buffs, и мне очень нравится с ними работать! Они действительно заботятся о моем сайте и имеют выдающееся обслуживание клиентов. Они держат меня в курсе всего, что связано с моим сайтом… так что мне больше не о чем беспокоиться. Я очень рекомендую их всем!
Шеннон О’Нил Клиент WP BuffsПодробнее
Команда WP Buffs превзошла все мои ожидания с первого дня. Они невероятно отзывчивы, предлагают быстрые решения проблем, которые я им отправляю. , и найдите время, чтобы описать все доступные варианты. Вдобавок ко всему, все в команде такие дружелюбные, что с ними приятно работать. Не могу рекомендовать их достаточно! Я только хотел бы найти их раньше.
Ян СильвербергWP Клиент BuffsПодробнее
Должен сказать, что проработав в команде Buffs более 6 месяцев, я просто поражен.