Расширенная настройка web сервера (apache2 + nginx)

Вступление

Nginx хорошо себя показывает, когда выполняет запросы к веб-страницам, однако несмотря на это, сервис Google’s PageSpeed Insights tool обычно не очень хорошо оценивает сайты, которые работают на серверах со стандартными настройками Nginx. А ведь именно скорость вашего сайта является одним из ключевых моментов при ранжировании в поисковой выдаче.

Поэтому это руководство посвящено тому, как при помощи небольших изменений в настройках увеличить скорость отклика сайта и, соответственно, поднять PageSpeed metric. Цель – получить больше 80/100 баллов, так как это порог, после которого Google ставит зеленый маркер вашему сайту, считая его быстрым.Первое, с чего следует начинать, — это с включения Gzip-сжатия некоторых видов файлов. Затем нужно будет настроить браузерное кэширование. Оба этих действия увеличат скорость любого сайта, запущенного на Nginx, вне зависимости от ПО или используемой CMS. Это работает даже в случае, даже если ваш сайт находится на VDS – главное, чтобы сервер работал на Nginx, и вы могли редактировать конфигурационный файл.

Отключение кэширования

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

    location /proxy_nocache {
        proxy_pass http://localhost:3000;
        …
        proxy_cache off;
    }
    location /fastcgi_nocache {
        fastcgi_pass http://localhost:9000;
        …
        fastcgi_cache off;
    }

* обратите внимание, что в данном примере мы отключаем кэширование как для запросов proxy_pass, так и fastcgi_pass. При отключении кэширования для статики используем следующую конфигурацию:

При отключении кэширования для статики используем следующую конфигурацию:

    server {
        …
        location ~* ^.+\.(jpg|jpeg|gif|png|css|js)$ {
            root /var/www/site
            expires epoch;
        }
    }

* expires epoch задаст заголовок сache-control с временем окончания кэша «1 января 1970 00:00:01».

Предварительное сжатие

Перед тем, как отдать содержимое страниц в браузер посетителя, можно его сжать. Сжатие уменьшает размер передаваемых файлов (иногда в несколько раз), что приводит к увеличению скорости загрузки страниц и уменьшению исходящего трафика. Сжимать нужно только файлы, содержащие текстовую часть — текст, HTML, PHP, JS, XML, и прочие подобные. Текст хорошо сжимается даже при низком уровне компрессии, объем передаваемых фалов уменьшается на 50-80%. Конечно, файлы небольшие, всего десятки килобайт, но если учесть, что таких фалов тысячи, и загружаются они тысячами посетителей каждый день, то, как говорят, с миру по нитке — нищему на воротник, экономия получается существенная.

Предварительное сжатие / Apache

Для тех, у кого установлен Apache, нужно узнать у хостера, какие специальные модули, реализующие его, установлены — mod_pagespeed или mod_deflate? Обычно в Apache 2x устанавливают mod_deflate. Есть еще mod_gzip, но его устанавливали в предыдущих версиях, так что его встретить маловероятно.

Если установлен модуль mod_pagespeed, то в файл .htaccess, находящийся в корне вашего сайта, нужно вставить:

	ModPagespeed on
	# using commands,filters etc

Если установлен модуль mod_deflate, то то в файл .htaccess, находящийся в корне вашего сайта, нужно вставить:

	AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript

В данном случае сжатию подвергаются все текстовые файлы — txt, html, xml, xhtml, css, js.

Предварительное сжатие / Nginx

Если хостинг работает под управлением Nginx, то директивы будут выглядеть иначе. В файл .htaccess, находящийся в корне вашего сайта, нужно вставить:

server {
    gzip on;
    gzip_types text/html text/css application/x-javascript text/plain text/xml image/x-icon;
}

Предварительное сжатие / Скрипт

Бывает так, что сервер, обеспечивающий работу вашего блога, не поддерживает mod_deflate или mod_gzip. В этом случае можно прибегнуть к универсальному скрипту, который работает и на Apache, и на Nginx.

В файл header.php используемой вами темы, в самое его начала, первой строкой нужно вставить:

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

Настройка кэширования для proxy_pass

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

Включение кэширования

Открываем конфигурационный файл nginx:

vi /etc/nginx/nginx.conf

В секцию http добавляем:

http {
    …
    proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=all:64m inactive=2h max_size=2g;
    …
}

* в данном примере мы задали глобальную настройку для кэширования:

• /var/cache/nginx — путь хранения кэша.
• levels — уровень вложенности каталогов. В данном примере мы задаем настройку, при которой в каталог с кэшем будет создан каталог, а в ней — еще один каталог.
• keys_zone — имя зоны в разделяемой памяти, где будет храниться кэш, а также ее размер.
• inactive — задает время, после которого кэш будет автоматически чиститься.
• max_size — максимальный размер данных под кэш. Когда место заканчивается, nginx сам удаляет устаревшие данные.

Создаем каталог для хранения кэша и задаем владельца:

mkdir /var/cache/nginx

chown nginx:nginx /var/cache/nginx

Настройка хостов

Чтобы определенный сайт или отдельная страница кешировала запрос, открываем конфигурационный файл с настройками виртуального домена или хоста, например:

vi /etc/nginx/conf.d/default.conf

… и добавим к proxy_pass кэширование — мы получим что-то на подобие:

    location / {
        if ($http_cookie ~* «.+» ) {
            set $cookie_cache_bypass 1;
        }
        proxy_cache_bypass $cookie_cache_bypass;
        proxy_pass http://localhost:3000;
        …
        proxy_cache all;
        proxy_cache_valid 404 502 503 5m;
        proxy_cache_valid any 1h;
        proxy_cache_use_stale error timeout invalid_header updating;
    }

* где:

• set $cookie_cache_bypass 1 — задаем значения переменной $cookie_cache_bypass, если передаются куки. Необходимо для предотвращения отдачи устаревших данных.
• proxy_cache_bypass — не отдавать данные из кэша. В нашем случае, применяется при куках.
• proxy_pass — передает запросы на бэкэнд.
• proxy_cache — включаем кэширование.
• proxy_cache_valid — задает время кеширования. В нашем примере первый параметр задает кэширование страниц с кодами ответов 404, 502, 503 на 5 минут, второй — для всего остального на 1 час.
• proxy_cache_use_stale — указывает, в каких случаях можно отдать устаревший кэш.

Применение настроек

NGINX настроен. Проверим корректность настроек:

nginx -t

Если ошибок нет, применяем их:

systemctl restart nginx

Теперь заходим на сайт и смотрим в каталог с кэшем — в нем должны появиться каталоги и файлы:

ls /var/cache/nginx/

Мы должны увидеть что-то на подобие:

drwx——. 3 nginx nginx 4096 Jan 25 16:09 0
drwx——. 5 nginx nginx 4096 Jan 25 16:09 2
drwx——. 5 nginx nginx 4096 Jan 25 16:15 3
drwx——. 3 nginx nginx 4096 Jan 25 16:09 4
drwx——. 4 nginx nginx 4096 Jan 26 05:08 5
drwx——. 3 nginx nginx 4096 Jan 25 16:09 6
drwx——. 3 nginx nginx 4096 Jan 26 04:18 7
drwx——. 3 nginx nginx 4096 Jan 25 16:10 8
drwx——. 5 nginx nginx 4096 Jan 25 16:15 a
drwx——. 3 nginx nginx 4096 Jan 25 16:09 b
drwx——. 5 nginx nginx 4096 Jan 26 04:19 e
drwx——. 3 nginx nginx 4096 Jan 25 19:55 f

Настройка кэширования для fastcgi_pass

Настройка fastcgi_cache аналогична proxy_cache и настройки можно сделать по подобию последнего, заменив proxy_ на fastcgi_. Мы разберем основные настройки без подробностей и комментариев.

Открываем конфиг nginx:

vi /etc/nginx/nginx.conf

Добавляем в секцию http:

http {
    …
    fastcgi_cache_path /var/cache/fastcgi levels=1:2 keys_zone=fastcgi:64m inactive=2h max_size=2g;
    …
}

* обратите внимание, что мы задали другой каталог и keys_zone. Создаем каталог для кэша:

Создаем каталог для кэша:

mkdir /var/cache/fastcgi

chown nginx:nginx /var/cache/fastcgi

Настраиваем хост:

vi /etc/nginx/conf.d/default.conf

    location / {
        if ($http_cookie ~* «.+» ) {
            set $cookie_cache_bypass 1;
        }
        fastcgi_cache_bypass $cookie_cache_bypass;
        fastcgi_pass http://localhost:9000;
        …
        fastcgi_cache all;
        fastcgi_cache_valid 404 502 503 5m;
        fastcgi_cache_valid any 1h;
        fastcgi_cache_use_stale error timeout invalid_header updating;
    }

Проверяем настройки и применяем их:

nginx -t

systemctl restart nginx

Сжать фотографии, иллюстрации и другую графику

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

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

Как оптимизировать картинки для сайта:

1. Подберите разрешение.
   Незачем загружать изображение в большом разрешении, если оно будет отображаться в маленьком без увеличения по клику.
2. Подберите формат.
   JPEG подходит для фотографий, PNG для дизайнерской графики, SVG для вектора. Google также индексирует формат WebP, который весит меньше, но не все браузеры его поддерживают. Яндекс не индексирует SVG и изображения в скриптах.
3. Уменьшайте количество цветов.
   Изображения, где нет сложных градиентов, требуют меньшего количества цветов. Можно оптимизировать картинку без потери качества, выбрав палитру меньше, тогда изображение будет хранить меньшее количество битов на пиксель.Слева направо: 32 бита (16M цветов), 7 бит (128 цветов), 5 бит (32 цвета)

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

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

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

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

Используйте алгоритмы сжатия.
Настройте на сервере gzip-сжатие для SVG-графики.

Инструменты и сервисы для оптимизации изображений на сайте:

• CompressJPEGСервис для сжатия JPEG и PNG без потерь качества.
• PunyPNG
  Инструмент сжимает PNG, JPEG и GIF.
• TinyPNGИнструмент для оптимизации изображений в PNG и JPEG.
• JpegtranИнструмент для оптимизации JPEG-изображений.
• OptipngИнструмент для оптимизации PNG без потерь.
• PngquantИнструмент сжимает PNG-изображения.

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

Шаг 1: включение сжатия

CSS, JS файлы и изображения могут быть большими, увеличивая количество информации, которое пользователям необходимо загрузить. Сжатие означает, что эти элементы будут уменьшены в размере до более компактной версии, которая даже при таком малом весе будет содержать всю необходимую информацию. Gzip – один из вариантов выполнения этого сжатия. Утилита доступна на всех основных Linux дистрибутивах, поэтому все, что нужно сделать – это включить ее и правильно настроить. Когда Gzip сжатие будет включено, браузеры смогут быстрее загружать статику.

Для того, чтобы включить сжатие, откройте конфигурационный файл Nginx в nano или другом редакторе:

$ sudo nano /etc/nginx/sites-available/default

Найдите блок с настройками сервера, он должен выглядеть примерно вот так:

server {

listen 80 default_server;

listen :80 default_server;

. . .

}

Теперь нужно добавить несколько сниппетов для того, чтобы настроить сжатие.

Сначала включите сжатие и установите его уровень:

server {

listen 80 default_server;

listen :80 default_server;

gzip on;

gzip_comp_level 5;

Можно выбрать число от 1 до 9. 5 – это самый подходящий компромисс между размером и использованием процессора, позволяющий получить около 75% сжатия для большинства файлов ASCII.

Теперь нужно настроить Nginx так, чтобы сжатие не применялось к маленьким файлам, которые вряд ли можно сделать еще меньше. По умолчанию это 20 байт, что не очень правильно и ведет к увеличению размеров файлов после сжатия. Установите 256:

...

    gzip_comp_level    5;

gzip_min_length 256;

Теперь нужно настроить Nginx так, чтобы сжатие применялось даже для тех клиентов, которые подключаются через прокси:

...

gzip_min_length 256;

gzip_proxied    any;

Еще один момент, который нужно учесть: существуют пользователи, с которыми Gzip не работает (редкая ситуация, но она может возникнуть) – и сжатая версия может отобразиться некорректно. Поэтому необходимо, чтобы прокси кэшировали обе версии источника – и сжатую, и обычную.

...

gzip_proxied    any;

gzip_vary       on;

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

...

gzip_vary       on;

gzip_types

application/atom+xml

application/javascript

application/json

application/ld+json

application/manifest+json

application/rss+xml

application/vnd.geo+json

application/vnd.ms-fontobject

application/x-font-ttf

application/x-web-app-manifest+json

application/xhtml+xml

application/xml

font/opentype

image/bmp

image/svg+xml

image/x-icon

text/cache-manifest

text/css

text/plain

text/vcard

text/vnd.rim.location.xloc

text/vtt

text/x-component

text/x-cross-domain-policy;

# text/html is always compressed by gzip module

В итоге после всех правок блок должен выглядеть вот так:

server {

listen 80 default_server;

listen :80 default_server;

gzip on;

gzip_comp_level 5;

gzip_min_length 256;

gzip_proxied any;

gzip_vary on;

gzip_types

application/atom+xml

application/javascript

application/json

application/ld+json

application/manifest+json

application/rss+xml

application/vnd.geo+json

application/vnd.ms-fontobject

application/x-font-ttf

application/x-web-app-manifest+json

application/xhtml+xml

application/xml

font/opentype

image/bmp

image/svg+xml

image/x-icon

text/cache-manifest

text/css

text/plain

text/vcard

text/vnd.rim.location.xloc

text/vtt

text/x-component

text/x-cross-domain-policy;

# text/html is always compressed by gzip module

}

Сохраните и закройте файл.

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

$ sudo nginx -t

Если вы выполнили все действия именно так, как написано в этом руководстве, вы не увидите сообщений об ошибках.

Зачем уменьшать размер HTML-страницы

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

Пользователи не будут ждать долгой загрузки, максимум, который они ждут — 2-3 секунды на десктопе или 3-4 на мобильном устройстве. Если сайт так и не загрузился, пользователь закроет страницу — для поисковиков это будет значить, что сайт не удовлетворяет задачи пользователей. Поисковики стимулируют веб-мастеров ускорять и облегчать сайты. Обновление
Google Speed Update занижает позиции очень медленных сайтов, к тому же Google переводит сайты в Mobile-first index — это значит, что mobile-friendly сайты получат преимущество, десктопная выдача будет строиться на основе мобильной, где особенно важен вес страницы.

Иногда незначительные задержки скорости не критичны, если посетители целенаправленно хотят получить услуги, товары или информацию с конкретного сайта. К примеру, по данным инструмента
Google PageSpeed Insights, у сайта amazon.com довольно низкая скорость загрузки с мобильных устройств, но Amazon востребован: пользователи готовы ждать, чтобы делать выгодные заказы.

Анализ amazon.com

Скорее всего Amazon рассчитывает на то, что пользователи со смартфонов будут скачивать мобильное приложение, поэтому не работает над скоростью мобильной версии сайта.

Измерить скорость загрузки своего сайта и сравнить с конкурентными можно с помощью инструментов
Google PageSpeed Insights или Проверка скорости сайта от PR-CY.

Фрагмент результатов проверки

Если хотите ускорить загрузку страницы, то рекомендуем уменьшить ее размер.

Как уменьшить размер HTML

Для уменьшения размера HTML-страницы нужно сжать код и облегчить элементы:

1. Избавиться от переадресации с целевой страницы. Google пишет о том, что перенаправления типа example.com → www.example.com → m.example.com или example.com → m.example.com/home для мобильных пользователей замедляют загрузку страницы.
2. Оформить HTML-элементы с помощью CSS, это ускорит загрузку и упростит работу с повторяющимися на страницах элементами.
3. Сжать все текстовые файлы HTML, XML, CSS, Javascript, сжать HTML-код страниц.
4. Использовать минификацию — удалить ненужные данные, которые увеличивают объем кода.
5. Сжать все графические файлы, оптимизировать изображения — фотографии и графику.
6. Использовать кэш браузера — кэшировать данные в браузере пользователя.
7. Оптимизировать нефункциональные анимационные детали, отказаться от flash — такие элементы вредят безопасности сайта и могут не поддерживаться у пользователей.
8. Оптимизировать количество рекламных блоков на странице.

Рекомендации и противопоказания

Кэш — это данные не первой свежести

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

Чтобы избежать данных проблем, настройка nginx должна быть тесно сопряжена с разработкой сайта. Идеальная работа кэша возможна только при полном понимании внутренних механизмах работы портала, такие как, отправка запросов на авторизацию, продление сессии, обновлении контента — программист может написать для этого запрос по определенным URL, для которого администратор NGINX может отключить кэширование.

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

Из всего этого можно сделать вывод, что кэширование на стороне сервера NGINX стоит применять только в случае высоких нагрузок и медленной работы сайта из-за долгой работы backend’а.

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

Помимо поддержки gzip-сжатия браузером, его должен поддерживать и сам сайт.

За сжатие в apache отвечает модуль deflate_module. Он по умолчанию включен.

Включить Gzip можно при помощи:

• плагинов CMS
• Файла .htaccess
• Конфигурации веб-сервера

В WordPress сделать это можно с помощью плагинов кэширования, например: WP Super Cache или W3 Total Cache 

.htaccess

Включить gzip сжатие можно и самому, без каких-либо плагинов, для этого нужно добавить в файл .htaccess один из следующих кодов:

# compress text, html, javascript, css, xml:AddOutputFilterByType 
DEFLATE text/plainAddOutputFilterByType
DEFLATE text/htmlAddOutputFilterByType
DEFLATE text/xmlAddOutputFilterByType
DEFLATE text/cssAddOutputFilterByType
DEFLATE application/xmlAddOutputFilterByType
DEFLATE application/xhtml+xmlAddOutputFilterByType
DEFLATE application/rss+xmlAddOutputFilterByType
DEFLATE application/javascriptAddOutputFilterByType
DEFLATE application/x-javascript

# Or, compress certain file types by extension:
SetOutputFilter DEFLATE

Или

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/css
<IfModule mod_setenvif.c>
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0 no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>
</IfModule>

На основе расширений файлов: 

<IfModule mod_deflate.c>
    <filesMatch "\.(js|css|html|php)$">
        SetOutputFilter DEFLATE
    </filesMatch>
</IfModule>

Или на основе Mime-заголовков:

<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css text/javascript application/javascript
</IfModule>

Если в веб-сервере используется модуль mod_gzip, вместо mod_deflate, то в .htaccess пропишите код:

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_include mime ^text/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_include handler ^cgi-script$
</ifModule>

NGINX

Для настройки gzip в веб-сервере NGINX пропишите в конфиг-файле:

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;

# Disable for IE < 6 because there are some known problems
gzip_disable "MSIE .(?!.*SV1)";

# Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6
gzip_vary on;

Изменение файлов

Javascript и CSS файлы обычно изменяются. Но заранее невозможно определить когда нужно будет внести изменение. Можно кэшировать такие файлы на короткое время (например минуту), но это не позволит использовать все преимущества Cache-Control.

Браузер хранит в кэше файлы соответственно их адресам URL. Если Мы добавим GET параметр в путь, путь изменится и браузер заново запросит файл. Что нам и нужно. При каждом обновлении CSS и Javascript файлов следует добавлять в GET параметр новое значение:

Лучше всего использовать последовательные числа (версии), и при каждом изменении просто увеличивать их на единицу.

2: Проверка стандартного поведения Nginx

Давайте проверим как обрабатывается HTML-файл test.html – со сжатием или без. Команда запрашивает файл с сервера Nginx и через HTTP-заголовок (Accept-Encoding: gzip) указывает, что можно использовать сжатый с помощью gzip контент:

В ответ вы должны увидеть несколько заголовков HTTP-ответа:

В последней строке вы можете увидеть заголовок Content-Encoding: gzip. Это говорит нам о том, что для отправки этого файла использовалось сжатие. Произошло это потому, что в Nginx сжатие включено автоматически – то есть даже в новой установке Ubuntu.

Однако по умолчанию Nginx сжимает только файлы HTML. Все остальные файлы будут обслуживаться без сжатия, что не совсем хорошо. Чтобы убедиться в этом, вы можете запросить тестовый файл test.jpg:

Результат будет немного отличаться от предыдущего:

В выводе заголовок Content-Encoding: gzip отсутствует, а это означает, что файл был обработан без сжатия.

Вы можете повторить тест с таблицей стилей CSS:

И снова в выводе не будет упоминания о сжатии:

Давайте настроим Nginx так, чтобы он мог сжимать все типы файлов, для которых полезно использовать gzip.

Использование в приложении

В приложении заголовки Cache-Control обычно не используются, т.к. приложения генерируют динамический контент. Если же у вас редко изменяется сайт, вы можете добавить кэширование, чтобы снизить количество запросов на сервер. Например, в PHP:

header("Cache-control: public");
header("Expires: " . gmdate("D, d M Y H:i:s", time() + 60*60) . " GMT");

Включим кэш на 1 час

Однако лучше этого не делать, т.к. при изменении контента у разных посетителей будут разные версии страниц.

Использование на Web сервере

Заголовки для картинок и статических файлов (JS/CSS) нужно устанавливать на Web сервере.

Nginx

В Nginx кэширование включается инструкцией expires:

server {
...
location ~* ^.+.(ogg|ogv|svg|svgz|eot|otf|woff|mp4|ttf|rss|atom|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf)$ {
expires max;
}
...
}

Включит кэш на бесконечный срок для файлов с перечисленными расширениями

Apache

В Apache кэширование включается модулем mod_expires и выглядит так:

<FilesMatch ".(ogg|ogv|svg|svgz|eot|otf|woff|mp4|ttf|rss|atom|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf)$">

Header set Cache-Control "max-age=2592000, must-revalidate"

Включает кэш для файлов на 1 месяц

Cache-control

Для того, чтобы управлять кэшированием в браузере используется HTTP заголовок Cache-control. Его необходимо передавать со всеми файлами, которые нужно кэшировать. Он имеет следующий формат:

• private означает, кто кэширование будет работать только на браузере пользователя. Вместо этого Вы можете использовать инструкцию public. Это разрешает кэширование на публичных прокси-серверах (такие часто есть в компаниях).
• no-cache означает, что данный запрос нельзя кэшировать.
• max-age это время, на которое будет закэширован результат. Устанавливается в секундах.

Обычно этого заголовка достаточно для того, чтобы все заработало:

закэширует результат запроса в браузере на 60 секунд

запретит кэширование запроса

Expires

Дополнительный заголовок HTTP Expires указывает дату и время, когда браузер должен обновить кэш:

Браузер отправит повторный запрос аж в 2037 году, до этого времени он будет использовать кэш

Этот заголовок следует использовать вместе с Cache-Control.

Vary

Заголовок Vary позволяет установить дополнительные правила для кэширования запросов:

Браузер будет знать, что контент может отличаться в зависимости от версии сайта (например, мобильной и настольной)

Чуть теории

Кеширование… Основной принцип заключается в том, что обмениваясь заголовками, сервер сообщает клиенту (браузеру) что такой-то контент можно закешировать на продолжительное время — неделя, месяц, год.. После чего, при последующих запросах этого контента, браузер будет вытягивать данные из кеша. Лафа может закончиться, когда:

1. Время жизни кеша истекло;
2. Пользователь очистил кеш вручную — Ctrl+F5, 
3. Закончилось доступное под кеш пространство и закешированные данные был перезаписан более новым;
4. Данные были обновлены на стороне сервера;

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

Сжатие. Полезная штука, которая позволяет сжимать (с помощью gzip) данные на сервере и распаковывать после получения на клиенте (в браузере). Клиент должен уметь распаковывать сжатые данные, о чем он сообщает в заголовке Accept-Encoding, например:

Опять же мы экономим на трафике и, соответственно, сокращаем время ожидания. Но, при этом, чуть больше нагружаем ЦП при распаковке данных.