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

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

Скриншот аудита сжатия текста Lighthouse Enable

Как 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

Проверьте сжатие ответа

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

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

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

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

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

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

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

  • Joomla : включите параметр сжатия страниц Gzip ( Система > Глобальная конфигурация > Сервер ).
  • WordPress : включите сжатие текста в конфигурации вашего веб-сервера.

Ресурсы