Как включить сжатие GZIP для ускорения сайтов WordPress

Опубликовано: 2020-10-16

Самый простой способ ускорить работу вашего сайта WordPress — удалить все ненужные ресурсы. Второй самый простой способ ускорить его — сжать все требуемые ресурсы. Включение сжатия GZIP на вашем веб-сервере — один из самых простых и эффективных способов добиться этого.

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

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

Возбужденный? Распаковываемся!

Предпочитаете смотреть видео версию?

Самый простой способ ускорить работу вашего сайта #WordPress: избавиться от ненужных ресурсов. Второй самый простой способ: сжать все нужные ресурсы. Научитесь делать это быстро с помощью сжатия GZIP Click to Tweet

Основы сжатия данных в Интернете

Сжатие данных в Интернете — это процесс уменьшения размера данных, передаваемых веб-сайтами. В зависимости от типа данных — текста, изображений, таблиц стилей, скриптов, шрифтов — существуют различные способы сжатия данных.

Иллюстрация основных компонентов веб-страницы
Основные компоненты веб-страницы

Например, минимизация HTML, CSS и JavaScript — это простой способ уменьшить объем данных, отправляемых браузерами. Здесь минификатор сжимает текст, удаляя ненужные символы, такие как комментарии и пробелы, из исходного кода.

В приведенном ниже примере простого HTML-документа есть три типа содержимого: HTML-разметка, стили CSS и код JavaScript.

Каждый тип контента имеет уникальный синтаксис и семантику. Всего в этом HTML-документе 357 символов.

 < html > < head > < style > /* kinsta-banner is used on the homepage only */ .kinsta-banner { font-size: 150% } .kinsta-banner { width: 75% } </ style > </ head > < body > <!-- kinsta banner START --> < div >...</ div > <!-- kinsta banner END --> < script > kinstaScripts(); // random scripts used on the page </ script > </ body > </ html >

Приведенный выше код легко читается и ему легко следовать. Он идеален для развития. Однако браузеру не обязательно читать комментарии и иметь тэги с идеальным отступом. Умный компрессор может проанализировать этот документ и удалить из него все ненужные биты.

 < html >< head >< style >.kinsta-banner{font-size:150%;width:75%}</ style ></ head >< body >< div >...</ div >< script >kinstaScripts();</ script ></ body ></ html >

После минификации HTML-документ сокращается до 141 символа. Это 60,50% экономии количества символов. Это не так просто для глаз, но для браузера это не имеет значения. Он по-прежнему будет отображать ту же страницу для пользователя.

Чтобы воспользоваться преимуществами обеих версий, вы можете сохранить исходный документ как «версию для разработки», но минимизировать весь код перед его запуском.

Большинство плагинов производительности WordPress позаботятся об этом автоматически.

Сравнение размера файла несжатого и минимизированного jQuery
Сжатие размера файла несжатого и минимизированного jQuery

Например, несжатая версия библиотеки jQuery 3.5.1 более чем в 3 раза больше, чем уменьшенная версия того же файла.

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

Но сжатие данных — это нечто большее, чем просто минимизация. Используя передовые математические методы, алгоритмы сжатия данных могут еще больше уменьшить размер данных.

Одним из самых популярных примеров такого метода сжатия данных является GZIP . Он обеспечивает эффективную передачу данных и внес значительный вклад в превращение Интернета в жизнеспособную глобальную коммуникационную среду.

Что такое сжатие GZIP?

GZIP, сокращение от GNU Zip , является самым популярным методом сжатия данных без потерь в Интернете. Это позволяет уменьшить размер HTML-страниц, таблиц стилей и скриптов вашего сайта.

Помимо алгоритма сжатия данных, GZIP также является расширением файла ( .gz ) и программным обеспечением, используемым для сжатия/распаковки файлов.

Он основан на алгоритме DEFLATE, который представляет собой смесь алгоритмов кодирования LZ77 и кодирования Хаффмана.

Иллюстрация того, как сжатие GZIP основано на алгоритме DEFLATE.
Сжатие GZIP основано на алгоритме DEFLATE.

Компрессор GZIP берет набор необработанных данных и сжимает их без потерь. Необработанные данные могут быть из файлов любого типа, но GZIP лучше всего работает с текстовыми активами (например, HTML, CSS, JS).

В следующем разделе подробно рассматривается, как работает сжатие GZIP.

Как GZIP сжимает данные

Грубая иллюстрация того, как работает сжатие GZIP
Грубая иллюстрация того, как работает сжатие GZIP

Начнем с того, что компрессор GZIP запускает алгоритм сжатия LZ77 для необработанных данных, чтобы удалить избыточность. Этот алгоритм работает, находя повторяющиеся шаблоны в предварительно определенном скользящем окне (небольшой раздел необработанных данных).

Затем он заменяет все повторяющиеся строки кортежами для сжатия необработанных данных.

Иллюстрация алгоритма кодирования LZ77
Иллюстрация алгоритма кодирования LZ77

В приведенном выше примере размер скользящего окна составляет всего 13 символов (13 байт). Однако сжатие GZIP может использовать максимальный размер скользящего окна 32 КБ (32 768 байт). Размер скользящего окна играет ключевую роль в производительности сжатия LZ77.

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

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

Чтобы понять, как работает алгоритм кодирования Хаффмана, рассмотрим слово BOOKKEEPER . Он состоит из 10 символов, но в нем всего 6 уникальных символов. В этом слове удачно сочетаются одинарные, двойные и тройные буквы.

Почти все веб-сайты используют кодировку UTF-8 для представления букв и символов. Каждый символ ASCII в UTF-8, который также включает английский алфавит, использует 1 байт (8 бит).

В слове «БУХГАЛТЕР» много повторяющихся букв.
В слове «БУХГАЛТЕР» много повторяющихся букв.

Строка из 10 символов, такая как BOOKKEEPER , потребует 10 байт (80 бит) памяти. Вы можете видеть, что он содержит 1 экземпляр букв B , P , R , 2 экземпляра букв O и K и 3 экземпляра буквы E .

Алгоритм кодирования Хаффмана использует эти знания для сжатия строки без потерь. Он делает это, создавая двоичное дерево с каждой уникальной буквой в качестве листа.

Буквы с наименьшей частотой (например, B , P , R ) окажутся внизу дерева, а те, которые появляются часто (например, E , O , K ), в идеале окажутся вверху.

Самый верхний узел в дереве — это корень , и его значение равно общему количеству символов в строке.

Дерево Хаффмана для слова «БУХГАЛТЕР»
Дерево Хаффмана для слова «БУХГАЛТЕР»

После создания дерева Хаффмана всем стрелкам, ветвящимся влево и вправо, присваиваются номера 0 и 1 соответственно. Затем вы можете сгенерировать код Хаффмана для любого символа, проследив путь от корня к листу и соединив все 0 и 1 с.

Коды Хаффмана — это уникальные двоичные коды для каждого символа.
Коды Хаффмана — это уникальные двоичные коды для каждого символа.

Вы можете заметить, что буквы с самой высокой частотой имеют коды Хаффмана с наименьшим размером бит.

Примечание . Алгоритм кодирования Хаффмана может генерировать альтернативные двоичные коды, используя другую стратегию упорядочения символов с одинаковыми частотами. Однако общий размер закодированной строки останется прежним.

80-битное слово, закодированное как 25-битная строка.
80-битное слово, закодированное как 25-битная строка.

Это на 68,75% меньше памяти, необходимой для хранения исходного слова.

Использование дерева Хаффмана с соглашением 0/1 генерирует двоичные коды, удовлетворяющие свойству префикса. Это гарантирует, что код Хаффмана любого конкретного символа не является префиксом кода любого другого символа, что упрощает декодирование закодированной строки с использованием дерева Хаффмана. Это играет основную роль в скорости распаковки GZIP.

Как и в случае со словом выше, компрессор GZIP использует алгоритм кодирования Хаффмана для дальнейшей оптимизации кортежей, сгенерированных алгоритмом LZ77. Это приводит к сильно сжатым файлам с расширением .gz.

Если вам интересно узнать больше о том, как работает GZIP, просмотрите это видео для краткого обзора.

Насколько хорошо сжатие GZIP?

Как правило, GZIP обеспечивает степень сжатия около 70% для небольших файлов, но может достигать 90% для больших текстовых ресурсов.

Сравнение степеней сжатия GZIP для различных библиотек CSS и JS
Коэффициенты сжатия GZIP для некоторых популярных библиотек CSS и JS.

В приведенной выше таблице вы можете видеть, что сжатие минифицированных файлов с помощью GZIP может еще больше уменьшить их размер.

Примечание. С помощью GZIP можно сжимать файлы любого типа, но для ресурсов, уже сжатых другими методами (например, изображений, видео), это не приведет к какой-либо экономии. Иногда это может даже увеличить размер файла.

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

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

Производительность сжатия brotli, bzip2, GZIP и xz (Источник: OpenCPU)
Производительность сжатия brotli, bzip2, GZIP и xz (Источник: OpenCPU)

На приведенных выше диаграммах сравнивается производительность алгоритмов сжатия brotli , bzip2 , gzip и xz . GZIP проигрывает в тесте степени сжатия с небольшим отрывом, но по скорости сжатия и распаковки он полностью превосходит конкурентов.

Глядя на график скорости сжатия, можно сделать вывод, что GZIP идеально подходит для сжатия в реальном времени на HTTP-серверах и других потоках данных в сети. Принимая во внимание все его преимущества в развитии Интернета, IETF ратифицировала GZIP как один из трех стандартных форматов сжатия в HTTP/1.1.

Примечание. Абстракция библиотеки сжатия GZIP под названием zlib используется во многих популярных операционных системах (Linux, macOS, iOS) и современных игровых консолях (PlayStation 4, Wii U, Xbox One). Он также используется в формате файлов PNG без потерь для сжатия изображений.

6 преимуществ сжатия GZIP

Давайте подробнее рассмотрим наиболее важные преимущества сжатия GZIP.

Обеспечивает достойную степень сжатия

Как обсуждалось ранее, у GZIP не лучшая степень сжатия по сравнению с конкурентами. Но и от них не так далеко. Как правило, это может помочь вам уменьшить размер текстовых ресурсов на 70-90%.

Сверхбыстрое сжатие и распаковка

По скорости сжатия и распаковки данных GZIP является явным победителем. Это очень желательно для оперативного сжатия на HTTP-серверах и других потоках данных.

Требуется очень мало памяти

GZIP оставляет минимальный объем памяти, что делает его подходящим для серверов и систем с ограниченным объемом памяти. Следовательно, вы обнаружите, что его поддерживают даже самые дешевые провайдеры веб-хостинга.

Не сильно расширяется даже в худших случаях

Алгоритмы сжатия данных без потерь, такие как GZIP, имеют строгий предел, за которым они не могут сжимать данные.

Как правило, это происходит, когда ресурс уже хорошо сжат или если он крошечный, а накладные расходы на добавление словаря GZIP превышают экономию при сжатии. Мы можем приписать это явление концепции, называемой энтропийным кодированием. GZIP очень устойчив к этому эффекту.

Бесплатное использование и открытый исходный код

GZIP изначально создавался как бесплатная замена с открытым исходным кодом запатентованной программы сжатия , использовавшейся в ранних системах Unix. Таким образом, он не обременен никакими патентами и может свободно использоваться кем угодно.

Пользуется универсальной поддержкой

По данным W3Techs, сжатие GZIP используется на 82% всех веб-сайтов, которые они отслеживают, что делает его наиболее широко используемым алгоритмом сжатия в Интернете.

GZIP поддерживается почти всеми серверами и клиентами. Независимо от того, на каком сервере вы размещаете свой сайт, вы можете ускорить его, включив на нем GZIP.

Предупреждения GZIP в инструментах тестирования скорости веб-сайта

Помимо минимизации, включение GZIP является одним из самых простых и эффективных способов оптимизации скорости, которые вы можете реализовать на своем веб-сайте.

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

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

Заголовок ответа «content-encoding: gzip»
Заголовок ответа «content-encoding: gzip» в Chrome DevTools

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

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

Google PageSpeed ​​Insights выдает предупреждение, если на вашем веб-сайте не включено сжатие текста.

Примечание. Google PageSpeed ​​Insights и Google Lighthouse были двумя отдельными инструментами для тестирования производительности веб-сайтов. Они работали независимо друг от друга до 2018 года, когда Google обновил PageSpeed ​​Insights, чтобы использовать Lighthouse в качестве механизма анализа. Следовательно, PageSpeed ​​Insights и Lighthouse теперь одно и то же.

Предупреждение «Включить сжатие текста» в Google PageSpeed ​​Insights
Предупреждение «Включить сжатие текста» в Google PageSpeed ​​Insights

В приведенном выше примере сайта сжатие текстовых ресурсов может уменьшить вес страницы более чем на 78% и ускорить время загрузки страницы на 2,1 секунды .

Примечание. PageSpeed ​​Insights использует заголовки ответов, возвращаемые в ваш браузер сервером. Иногда может отображаться ложное предупреждение, даже если у вас включено сжатие GZIP. Это может быть из-за запуска теста скорости на машине, которая использует промежуточный прокси-сервер или программное обеспечение безопасности. Они могут мешать загрузке сжатых файлов с внешних серверов.

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

GTmetrix показывает предупреждение, если ваш веб-сайт не обслуживает сжатые текстовые ресурсы. Как и Google PageSpeed ​​Insights, он также покажет вам потенциальную экономию, которой вы можете достичь.

Предупреждение «Включить сжатие» в GTmetrix
Предупреждение «Включить сжатие» в GTmetrix

Примечание. GTmetrix обновляет свой алгоритм проверки скорости, чтобы заменить старые библиотеки PageSpeed ​​Insights и YSlow последними показателями Google Lighthouse. Вы можете ожидать, что его предупреждение о сжатии GZIP будет похоже на то, которое показывает Lighthouse.

Предупреждение GZIP в Pingdom Tools

Pingdom Tools выдает прямое предупреждение о необходимости сжатия компонентов вашего веб-сайта с помощью GZIP.

Предупреждение «Сжать компоненты с помощью GZIP» в Pingdom Tools
Предупреждение «Сжать компоненты с помощью GZIP» в Pingdom Tools

В разделе описания Pingdom Tools также дает вам несколько статистических данных о важности GZIP. Холодные бобы!

Предупреждение GZIP в WebPageTest

WebPageTest показывает предупреждение на вкладке «Просмотр производительности », если обнаруживает, что какие-либо сжимаемые ответы не обслуживаются наиболее оптимизированным способом.

Предупреждение «Использовать сжатие GZIP» в WebPageTest
Предупреждение «Использовать сжатие GZIP» в WebPageTest

WebPageTest также дает оценку, чтобы показать, насколько серьезным является предупреждение. Например, приведенное выше предупреждение оценивается в 23 балла из 100, что означает, что вы должны исправить его в первую очередь.

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

HTTP-заголовок Accept-Encoding: gzip, deflate поддерживается практически всеми современными браузерами. Следовательно, большинство веб-хостов, включая Kinsta, по умолчанию включают сжатие GZIP на всех своих серверах.

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

Но если вы используете другого хостинг-провайдера WordPress или просто хотите убедиться, что ваш веб-сайт правильно обслуживает сжатый контент GZIP, всегда проверяйте, включен ли он.

Ниже приведены несколько простых способов проверить сжатие GZIP.

1. Онлайн-инструменты для проверки сжатия GZIP

Использование онлайн-инструмента — это самый простой способ проверить, включено ли сжатие GZIP на вашем веб-сайте. Я рекомендую использовать бесплатные инструменты Check GZIP Compression или HTTP Compression Test. Просто введите URL-адрес своего веб-сайта и нажмите кнопку « Проверить » или « Проверить» .

Оба этих онлайн-инструмента покажут вам краткий отчет о том, включен ли GZIP, а также о том, сколько данных вы сохранили (или можете сохранить) при передаче тестового URL-адреса с включенным сжатием GZIP.

Первый инструмент также покажет вам другую важную информацию, такую ​​как тип сервера вашего веб-сайта, тип контента и время сжатия.

Тестирование домашней страницы Kinsta с помощью инструмента Check GZIP Compression
Тестирование домашней страницы Kinsta с помощью инструмента Check GZIP Compression
Тестирование Kinsta.com с помощью инструмента проверки сжатия HTTP
Тестирование Kinsta.com с помощью инструмента проверки сжатия HTTP

Обратите внимание, что оптимизация GZIP не ограничивается только вашей веб-страницей, но также включает в себя ее статические текстовые активы, такие как таблицы стилей, скрипты и шрифты. Если вы используете CDN для обслуживания этих ресурсов, вам необходимо убедиться, что CDN также обслуживает их с включенным сжатием GZIP.

Большинство современных CDN, таких как Cloudflare, Kinsta CDN, KeyCDN и CloudFront, поддерживают сжатие GZIP. Вы можете протестировать ресурсы, обслуживаемые CDN, на сжатие GZIP, связавшись напрямую с активами.

Тест сжатия GZIP для ресурсов, размещенных в CDN
Тест сжатия GZIP для ресурсов, размещенных в CDN

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

2. Заголовок HTTP-ответа «content-encoding: gzip»

Второй способ проверить, доставляет ли веб-сайт сжатый контент GZIP, — это проверить HTTP-заголовок ответа content-encoding: gzip .

Устали от некачественной поддержки хостинга WordPress уровня 1 без ответов? Попробуйте нашу службу поддержки мирового уровня! Ознакомьтесь с нашими планами

Вы можете открыть Chrome DevTools или Firefox Developer Tools и найти этот заголовок ответа в разделе « Сеть ».

Ранее я уже показывал, как это выглядит в Chrome DevTools. Вот как это выглядит в инструментах разработчика Firefox.

Заголовок «content-encoding: gzip» в инструментах разработчика Firefox
Заголовок «content-encoding: gzip» в инструментах разработчика Firefox

Вы также можете включить параметр «Использовать большие строки запроса» на панели настроек Chrome DevTools, чтобы увидеть как исходный, так и сжатый размер страницы. Как вы можете видеть ниже, размер исходной страницы уменьшился со 118 КБ до 22,9 КБ после сжатия с помощью GZIP.

Просмотр сжатых и несжатых размеров страниц в Chrome Devtools
Просмотр сжатых и несжатых размеров страниц в Chrome Devtools

3. Инструменты для тестирования скорости веб-страницы

Большинство инструментов тестирования скорости веб-сайта предупредят вас о том, что вы не используете сжатие, такое как GZIP, для обслуживания ваших веб-страниц. Многие читатели, приходящие к этой статье, вероятно, приходят именно из-за этих предупреждений GZIP, многие из которых я уже подробно обсуждал выше.

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

Вы можете использовать такие инструменты, как PageSPeed Insights, GTmetrix, Pingdom Tools и WebPageTest, чтобы проверить, включено ли сжатие GZIP на вашем веб-сайте WordPress.

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

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

Важно: Как всегда, сделайте резервную копию файлов конфигурации вашего сайта и сервера перед их редактированием.

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

Самый простой способ включить сжатие GZIP на вашем сайте WordPress — использовать плагин кэширования или оптимизации производительности.

Например, если вы размещаете свой сайт WordPress на веб-сервере Apache, W3 Total Cache включает возможность включения сжатия GZIP на панели настроек Browser Cache .

Точно так же WP Rocket позволяет автоматически добавлять правила сжатия GZIP. Эти плагины позволяют сжимать GZIP, добавляя модуль Apache mod_deflate в файл .htaccess.

Включение сжатия GZIP в W3 Total Cache
Включение сжатия GZIP в W3 Total Cache

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

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

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

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

Включить GZIP на веб-сервере Apache

По данным Netcraft, Apache обслуживает больше активных сайтов, чем любой другой веб-сервер, используемый сегодня. Это также один из двух рекомендуемых веб-серверов WordPress.

Чтобы включить сжатие GZIP на серверах Apache, вам необходимо использовать его mod_filter и mod_deflate и правильно настроить их с помощью правильных директив. Они предписывают Apache сжимать выходные данные сервера перед их отправкой клиентам по сети.

У вас есть два варианта редактирования конфигураций сервера Apache в зависимости от имеющегося у вас уровня доступа:

  1. Если у вас есть доступ к основному файлу конфигурации сервера (обычно он называется httpd.conf ), рекомендуется использовать его для настройки Apache, поскольку файлы .htaccess могут замедлить работу Apache.
  2. Если вы не можете получить доступ к основному файлу конфигурации сервера, что обычно имеет место у большинства провайдеров виртуального хостинга WordPress, вам необходимо настроить Apache с помощью файла .htaccess .

Первый вариант строго для сисадминов, так как хостинг-провайдеры редко позволяют редактировать основной файл конфигурации сервера. Объяснение того, как это сделать, выходит за рамки этой статьи. Чтобы начать работу, вы можете обратиться к примерам конфигураций сервера Apache, которые используются в проекте HTML5 Boilerplate, и к документации Apache.

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

Для начала используйте SFTP или онлайн-менеджер файлов вашего хоста, чтобы найти файл .htaccess в корневом каталоге вашего сайта WordPress. Затем добавьте к нему приведенный ниже фрагмент кода.

Важно: Убедитесь, что модуль mod_filter активен на вашем сервере. На большинстве веб-хостов он включен по умолчанию, но если это не так, директива AddOutputFilterByType не будет работать и может вызвать ошибку HTTP 500. Вы можете проверить журналы ошибок вашего сервера, если у вас есть какие-либо проблемы после добавления фрагмента кода ниже.

 <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 ancient 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 на вашем сервере.

Пример файла Apache .htaccess после включения сжатия GZIP
Пример файла Apache .htaccess после включения сжатия GZIP

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

Если вы хотите, чтобы прокси-серверы и программное обеспечение безопасности на стороне клиента не мешали сжатию GZIP, вы можете заменить приведенный выше фрагмент кода приведенным ниже.

 <IfModule mod_deflate.c> # force compression for clients that mangle 'Accept-Encoding' request headers <IfModule mod_setenvif.c> <IfModule mod_headers.c> SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding </IfModule> </IfModule> # compress all output with one of the following file extensions <IfModule mod_filter.c> AddOutputFilterByType DEFLATE "application/atom+xml" \ "application/javascript" \ "application/json" \ "application/ld+json" \ "application/manifest+json" \ "application/rdf+xml" \ "application/rss+xml" \ "application/schema+json" \ "application/geo+json" \ "application/vnd.ms-fontobject" \ "application/wasm" \ "application/x-font-ttf" \ "application/x-javascript" \ "application/x-web-app-manifest+json" \ "application/xhtml+xml" \ "application/xml" \ "font/eot" \ "font/opentype" \ "font/otf" \ "font/ttf" \ "image/bmp" \ "image/svg+xml" \ "image/vnd.microsoft.icon" \ "text/cache-manifest" \ "text/calendar" \ "text/css" \ "text/html" \ "text/javascript" \ "text/plain" \ "text/markdown" \ "text/vcard" \ "text/vnd.rim.location.xloc" \ "text/vtt" \ "text/x-component" \ "text/x-cross-domain-policy" \ "text/xml" </IfModule> # define and map media types to their appropriate encoding type # Using SVG format (Scalable Vector Graphics) is highly recommended to # load logos, icons, text, and simple images. You can compress .SVG files # further using GZIP to create .SVGZ files. However, most browsers don't # know that they need to decompress them first if they're not served # without an appropriate 'content-encoding' HTTP response header. Thus, # these images wouldn't show up in the browser. Hence, this module. <IfModule mod_mime.c> AddType image/svg+xml svg svgz AddEncoding gzip svgz </IfModule> </IfModule>

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

Включить GZIP на веб-сервере Nginx

Согласно Netcraft, Nginx является наиболее часто используемым веб-сервером для компьютеров, подключенных к Интернету. Если текущая тенденция сохранится, он скоро обгонит Apache и станет самым используемым веб-сервером для активных сайтов. Даже Kinsta использует Nginx для поддержки своих оптимизированных по производительности хостинговых решений для WordPress.

Вы можете включить сжатие GZIP на своем веб-сервере Nginx, используя директивы, определенные в модуле ngx_http_gzip_module.

Для начала добавьте приведенные ниже директивы в файл nginx.conf . Как правило, вы можете найти этот файл в каталоге вашего сервера /etc/nginx/nginx.conf .

 # enables GZIP compression gzip on; # compression level (1-9) # 6 is a good compromise between CPU usage and file size gzip_comp_level 6; # minimum file size limit in bytes to avoid negative compression outcomes gzip_min_length 256; # compress data for clients connecting via proxies gzip_proxied any; # directs proxies to cache both the regular and GZIP versions of an asset gzip_vary on; # disables GZIP compression for ancient browsers that don't support it gzip_disable "msie6"; # compress outputs labeled with the following file extensions or MIME-types # text/html MIME-type is enabled by default and need not be included gzip_types application/atom+xml application/geo+json application/javascript application/x-javascript application/json application/ld+json application/manifest+json application/rdf+xml application/rss+xml application/vnd.ms-fontobject application/wasm application/x-web-app-manifest+json application/xhtml+xml application/xml font/eot font/otf font/ttf image/bmp image/svg+xml text/cache-manifest text/calendar text/css text/javascript text/markdown text/plain text/xml text/vcard text/vnd.rim.location.xloc text/vtt text/x-component text/x-cross-domain-policy;

Если ваш сайт обслуживает большие файлы JS и CSS, вы можете увеличить размер буфера, используемого для сжатия, добавив следующую директиву в файл nginx.conf :

 # sets the 'number' and 'size' of buffers for GZIP compression # default buffer size is 4K or 8K depending on the platform gzip_buffers 16 8k;

Не забудьте перезагрузить Nginx после сохранения файла nginx.conf .

 sudo service nginx reload

Наконец, вы должны проверить, включено ли на вашем сервере сжатие GZIP. Вы можете обратиться к документации Nginx за актуальным списком всех директив ngx_http_gzip_module .

Включить GZIP на веб-сервере IIS

Microsoft Internet Information Services (IIS) — третий по популярности веб-сервер, используемый сегодня. IIS в основном развертывается в корпоративных средах под управлением Windows, особенно для настройки внутрикорпоративных и экстрасетевых серверов.

Он редко используется для размещения сайтов WordPress из-за различных проблем с совместимостью.

Тем не менее, если вы окажетесь в одной из тех редких ситуаций, когда вам нужно включить сжатие GZIP в IIS, вы можете обратиться к документации Microsoft, чтобы начать работу. Вы также можете найти эту ветку переполнения стека полезной.

Альтернативы сжатию GZIP

Мир сжатия данных в Интернете постоянно развивается. Поскольку средний вес страницы постоянно увеличивается, веб-технологии также пытаются догнать его, чтобы сделать передачу данных через Интернет более эффективной.

Увеличение веса страницы с течением времени (Источник: HTTPArchive)
Увеличение веса страницы с течением времени (Источник: HTTPArchive)

За последние несколько лет широкое распространение получил новый алгоритм сжатия: Brotli. Сжатие веб-шрифтов WOFF2 изначально было основным направлением деятельности Brotli, но с тех пор оно расширилось, чтобы поддерживать сжатие для любого типа данных.

Brotli сжимает данные лучше, чем GZIP, но для сжатия данных требуется значительно больше времени и ресурсов. Однако время его распаковки сравнимо с GZIP, хотя и немного медленнее.

Поддержка Brotli в различных браузерах
Поддержка Brotli в различных браузерах

Сегодня большинство браузеров поддерживают Brotli, но использовать его на сайтах WordPress по-прежнему несколько сложно. Вы должны разместить свой сайт у хостинг-провайдера, который поддерживает Brotli или позволяет вам установить библиотеку Brotli. Большинство управляемых хостов WordPress еще не поддерживают его напрямую, но если вы используете CDN, например Cloudflare или KeyCDN, вы можете легко включить его.

Brotli показывает большие перспективы для сжатия статических ресурсов. Akamai опубликовал подробную статью, сравнивающую Brotli и GZIP. You can check it out to learn more about Brotli.

Ready to speed up your site? ️ Enabling GZIP compression on your web server is one of the simplest and most efficient ways to achieve that. Learn how with this step-by-step walkthrough ️ Click to Tweet

Резюме

A well-optimized web is great for everyone. Users love snappier websites, website owners love the reduced hosting charges, and web hosts love the optimization achieved on their servers. Compression techniques like GZIP are one of the best ways to speed up page load times for your visitors.

WordPress site owners can speed up their sites instantly by enabling GZIP compression. Kinsta enables it by default on all its servers, but for others, this article covers multiple ways to enable GZIP compression on various web servers.

Speed is critical for any website. Just compress!