Включить сжатие текста

Текстовые ресурсы следует обслуживать со сжатием, чтобы минимизировать общее количество сетевых байтов. В разделе «Возможности» вашего отчета Lighthouse перечислены все несжатые текстовые ресурсы:

Как Lighthouse обрабатывает сжатие текста

Lighthouse собирает все ответы, которые:

• Используйте текстовые типы ресурсов.
• Не включайте заголовок content-encoding установленный на br , gzip или deflate .

Затем Lighthouse сжимает каждый из них с помощью GZIP , чтобы вычислить потенциальную экономию.

Если исходный размер ответа меньше 1,4 КБ или если потенциальная экономия при сжатии составляет менее 10 % от исходного размера, Lighthouse не помечает этот ответ в результатах.

Как включить сжатие текста на вашем сервере

Включите сжатие текста на серверах, которые предоставили эти ответы, чтобы пройти этот аудит.

Когда браузер запрашивает ресурс, он будет использовать заголовок HTTP-запроса Accept-Encoding , чтобы указать, какие алгоритмы сжатия он поддерживает.

Accept-Encoding: gzip, compress, br

Если браузер поддерживает Brotli ( br ), вам следует использовать Brotli, поскольку он может уменьшить размер файла ресурсов больше, чем другие алгоритмы сжатия. Найдите, how to enable Brotli compression in <X> , где <X> — имя вашего сервера. По состоянию на декабрь 2022 года Brotli поддерживается во всех основных браузерах, кроме Safari для iOS. Обновления см. в разделе «Совместимость браузера» .

Используйте GZIP как запасной вариант Brotli. GZIP поддерживается всеми основными браузерами, но он менее эффективен, чем Brotli. Примеры см. в разделе «Конфигурации сервера» .

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

Content-Encoding: br

Проверьте, был ли сжат ответ в Chrome DevTools

Чтобы проверить, сжал ли сервер ответ:

Нажмите Control+Shift+J (или Command+Option+J на Mac), чтобы открыть DevTools. Откройте вкладку «Сеть».

[комментарий]: <> (Следующий список представляет собой короткий код с сайта web.dev, но он не был переведен с английского ни на один язык.) 1. Нажмите Control + Shift + J (или Command + Option + J на ​​Mac), чтобы открыть Инструменты разработчика. 2. Откройте вкладку Сеть . 3. Щелкните запрос, вызвавший интересующий вас ответ. 4. Перейдите на вкладку Заголовки . 5. Проверьте заголовок content-encoding в разделе «Заголовки ответов» .

Чтобы сравнить сжатый и распакованный размеры ответа:

[комментарий]: <> (Следующий список представляет собой короткий код с сайта web.dev, но он не был переведен с английского ни на один язык.) 1. Нажмите Control + Shift + J (или Command + Option + J на ​​Mac), чтобы открыть Инструменты разработчика. 2. Откройте вкладку Сеть . 3. Включите большие строки запросов. См. раздел Использование больших строк запроса . 4. Посмотрите в столбце «Размер» интересующий вас ответ. Верхнее значение — это сжатый размер. Нижнее значение — это несжатый размер.

См. также Минимизация и сжатие полезной нагрузки сети .

Рекомендации для конкретного стека

Джумла

Включите параметр «Сжатие страниц Gzip» (« Система » > «Глобальная конфигурация» > «Сервер »).

WordPress

Включите сжатие текста в конфигурации вашего веб-сервера.

Ресурсы

• Исходный код для включения аудита сжатия текста