Текстовые ресурсы следует обслуживать со сжатием, чтобы минимизировать общее количество сетевых байтов. В разделе «Возможности» вашего отчета 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
Включите сжатие текста в конфигурации вашего веб-сервера.