Включить сжатие gzip и кэширование в Nginx и Apache

0
0
0

Включить сжатие gzip и кэширование в Nginx и Apache

Сейчас, все браузеры поддерживают сжатия (картинок, файлов), т.к. он является частью спецификации протокола HTTP 1.1. Такое сжатие, а именно сжатие текстовых форматов (например CSS, Javascipt или HTML) сможет уменьшить их объем до 70%. Работает это следующим образом:

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

<img src=»http://linux-notes.org/wp-content/uploads/2015/03/gzip-v-nginx-i-apache.jpg» alt=»gzip в nginx и apache» width=»978″ height=»569″ srcset=»https://linux-notes.org/wp-content/uploads/2015/03/gzip-v-nginx-i-apache.jpg 978w, https://linux-notes.org/wp-content/uploads/2015/03/gzip-v-nginx-i-apache-300×175.jpg 300w, https://linux-notes.org/wp-content/uploads/2015/03/gzip-v-nginx-i-apache-900×524.jpg 900w» sizes=»(max-width: 978px) 100vw, 978px» />

И в своей теме «Включить сжатие gzip в Nginx и Apache» я расскажу как можно настроить веб-сервер (apache или  nginx) с поддержкой сжатия.

Сжатие на веб-сервере Nginx

Если используете Linux (Debian/Ubuntu/Mint или CentOS/RedHat/Fedora) то путь к файлу конфигурации будет:

sh
1 lines












# vim /etc/nginx/nginx.conf

При использовании FreeBSD путь к файлу конфигурации лежит в:

sh
1 lines












# vim /usr/local/etc/nginx/nginx.conf

Если хотите использовать сжатие, то необходимо в файл сервера или в отдельный виртуальный хост прописать следующие строки:

sh
17 lines














#GZIP


 gzip on;



 gzip_min_length 1000;



 gzip_proxied expired no-cache no-store private auth;



 gzip_types text/plain application/xml;



# Выделяем буфер для gzip


 gzip_buffers 32 4k;



# Устанавливаем уровень сжатия, от 1-9


 gzip_comp_level 9;



# Убираем поддержку IE6


 gzip_disable "msie6";



# Устанавливаем версию для использования gzip (1.0 или 1.1)


 gzip_http_version 1.1;



# Разрешаем использовать статику


 gzip_static on;



 gzip_vary on;



 gzip_types text/css text/javascript text/xml text/plain text/x-component application/javascript application/x-javascript application/json application/xml application/rss+xml font/truetype application/x-font-ttf font/opentype application/vnd.ms-fontobject image/svg+xml;

Кэширование в Nginx

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

sh
31 lines














# Хранить кэш 24ч1 сутки


 expires 86400s;



# Добавляем заголовки (хеадеры)


 add_header Pragma public;



 add_header Cache-Control "max-age=86400, public, must-revalidate, proxy-revalidate";



 #add_header "X-UA-Compatible" "IE=Edge,chrome=1";





# Правила rewrite для версированного CSS + JS через дериктиву filemtime


 location ~* ^.+.(css|js)$ {



 rewrite ^(.+).(d+).(css|js)$ $1.$3 last;



# Задаем сколько будет храниться кэш 


 expires 31536000s;



# Выключаем логирование 


 access_log off;



 log_not_found off;



# Добавляем заголовки (хеадеры)


 add_header Pragma public;



 add_header Cache-Control "max-age=31536000, public";



 }





# Агрессивное кэширование для статических файлов


 location ~* .(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|odb|odc|odf|odg|odp|ods|odt|ogg|ogv|otf|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|t?gz|tif|tiff|ttf|wav|webm|wma|woff|wri|xla|xls|xlsx|xlt|xlw|zip)$ {



# Задаем сколько будет храниться кэш·


 expires 31536000s;



# Выключаем логирование·


 access_log off;



 log_not_found off;



# Добавляем заголовки (хеадеры)


 add_header Pragma public;



 add_header Cache-Control "max-age=31536000, public";



 }

Это включит кэш на веб-сервере на максимальный период для всех  перечисленных файлов.

Сжатие на веб-сервере Apache

По умолчанию модуль mod_deflate должен быть включен в apache. Но лучше убедиться и выполнить проверку и поискать следующую строку в конфиге веб-сервера apache:

sh
1 lines













LoadModule deflate_module modules/mod_deflate.so

Мы можем определить, какие типы файлов нужно сжать:

sh
1 lines













AddOutputFilterByType DEFLATE text/html text/plain text/css application/javascript

Пропишите следующую конфигурацию в виртуальный хост Apache  и это включит сжатие mod_deflate для вашего сайта.

sh
52 lines















<Directory /var/www/html/>




<IfModule mod_mime.c>



 AddType application/x-javascript .js



 AddType text/css .css




</IfModule>




<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



 #The following line is enough for .js and .css



 AddOutputFilter DEFLATE js css



 AddOutputFilterByType DEFLATE text/plain text/xml application/xhtml+xml text/css application/javascript application/xml application/rss+xml application/atom_xml application/x-javascript application/x-httpd-php application/x-httpd-fastphp text/html




</IfModule>




<IfModule mod_setenvif.c>



 # Удалить ошибки браузера (требуется только для очень старых браузеров)



 BrowserMatch ^Mozilla/4 gzip-only-text/html



 BrowserMatch ^Mozilla/4.0[678] no-gzip



 BrowserMatch bMSIE !no-gzip !gzip-only-text/html




</IfModule>




<IfModule mod_headers.c>·



 Header append Vary User-Agent env=!dont-vary




</IfModule>·




<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 handler ^cgi-script$


 mod_gzip_item_include mime ^text/.*



 mod_gzip_item_include mime ^application/x-javascript.*



 mod_gzip_item_exclude mime ^image/.*



 mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*




</ifModule>




</Directory>

Используем кеш на стороне браузера в Apache

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

Создаем файлик .htaccess в своей домашней директории сайта и добавляем:

sh
55 lines














# кеширование в браузере на стороне пользователя



<IfModule mod_expires.c>



 #Включаем поддержку директивы Expires



  ExpiresActive On



 # Задаем время для хранения файлов (картинок) в кэше для каждого типа 



  ExpiresDefault "access 7 days"



  ExpiresByType application/javascript "access plus 1 year"



  ExpiresByType text/javascript "access plus 1 year"



  ExpiresByType text/css "access plus 1 year"



  ExpiresByType text/html "access plus 7 day"



  ExpiresByType text/x-javascript "access 1 year"



  ExpiresByType image/gif "access plus 1 year"



  ExpiresByType image/jpeg "access plus 1 year"



  ExpiresByType image/png "access plus 1 year"



  ExpiresByType image/jpg "access plus 1 year"



  ExpiresByType image/x-icon "access 1 year"



  ExpiresByType application/x-shockwave-flash "access 1 year"




</IfModule>



# Cache-Control



<ifModule mod_headers.c>



# Задаем 30 дней для данного типа файла



<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">



  Header set Cache-Control "max-age=2592000, public"




</filesMatch>





# Задаем 30 дней для данного типа файла



<filesMatch ".(css|js)$">



 Header set Cache-Control "max-age=2592000, public"




</filesMatch>





# Задаем 2 дня для данного типа файла



<filesMatch ".(xml|txt)$">




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




</filesMatch>





# Задаем 1 день для данного типа файла



<filesMatch ".(html|htm|php)$">



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




</filesMatch>




</ifModule>





# использование кеша браузеров



FileETag MTime Size




<ifmodule mod_expires.c>




<filesmatch ".(jpg|jpeg|gif|png|ico|css|js)$">



 ExpiresActive on



 ExpiresDefault "access plus 1 year"




</filesmatch>




</ifmodule>





#Запрет отдачи HTTP-заголовков Vary браузерам семейства MSIE



<IfModule mod_setenvif.c>



 BrowserMatch "MSIE" force-no-vary



 BrowserMatch "Mozilla/4.[0-9]{2}" force-no-vary




</IfModule>

Проверка gzip и кэширования в Nginx и Apache

Создаем тестовый файл php_info.php в домашней директории вашего сайта со следующими строками:

sh
3 lines















<?php




phpinfo();



?>

И открыв его в браузере по ссылке вида http://host_or_IP/php_info.php посмотреть что есть в поле “Loaded Modules“, вы должны увидеть там что-то вроде:

<img aria-describedby=»caption-attachment-6473″ loading=»lazy» src=»http://linux-notes.org/wp-content/uploads/2015/06/Ispol-zovanie-kesha-na-storone-brauzera-apache.png» alt=»Использование кеша на стороне браузера apache» width=»628″ height=»317″ srcset=»https://linux-notes.org/wp-content/uploads/2015/06/Ispol-zovanie-kesha-na-storone-brauzera-apache.png 628w, https://linux-notes.org/wp-content/uploads/2015/06/Ispol-zovanie-kesha-na-storone-brauzera-apache-300×151.png 300w» sizes=»(max-width: 628px) 100vw, 628px» />

Использование кеша на стороне браузера apache

Если в списке нет mod_expires или mod_headers  – выполните в консоли сервера (подключившись по ssh) по очереди следующие команды (это установит/включит mod_expires, mod_headers):

sh
3 lines














#·a2enmod headers


# a2enmod expires


# service apache2 restart

Для индексной странички видим, что gzip включён, но для URL из js нет:

sh
1 lines












$ curl -I -H 'Accept-Encoding: gzip,deflate' http://linux-notes.org/ | grep gzip

А после добавления gzip_types получаем такое:

sh
1 lines












$ curl -I -H 'Accept-Encoding: gzip,deflate' http://linux-notes.org/test/test.js

ИЛИ еще:

sh
16 lines














#·curl --header "Accept-Encoding: gzip,deflate,sdch" -I http://linux-notes.org





HTTP/1.1 200 OK




Server: nginx




Date: Thu, 25 Jun 2015 11:27:22 GMT




Content-Type: text/html; charset=UTF-8




Connection: keep-alive




Vary: Accept-Encoding




Set-Cookie: wfvt_3183169984=558be599d6523; expires=Thu, 25-Jun-2015 11:57:21 GMT; path=/; httponly




X-Pingback: http://linux-notes.org/xmlrpc.php




X-UA-Compatible: IE=edge,chrome=1




Expires: Fri, 26 Jun 2015 11:27:22 GMT




Cache-Control: max-age=86400




Pragma: public




Cache-Control: max-age=86400, public, must-revalidate, proxy-revalidate




Content-Encoding: gzip

Проверка Gzip онлайн ресурсами

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

http://checkgzipcompression.com/
http://www.whatsmyip.org/http-compression-test/

На этом все, я завершаю свою тему «Включить сжатие gzip и кэширование в Nginx и Apache».

Was this helpful?

0 / 0