Реклама

Ускорение загрузки сайта

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

В этой статье мы рассмотрим настройку на примере хостинга Ru-center, cms wordpress, тарифа виртуального хостинга,  и связки веб-серверов nginx и apache. Первый будет выступать в роли front-end, то есть отдавать клиенту статику, второй в роли back-end, он будет заниматься только обработкой php контента.

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

Итак, почему и зачем нам нужны два сервера?

Это один из способов ускорить работу динамического сайта. Nginx в силу особенностей своей архитектуры способен быстро отдавать статические файлы, apache же делает то же самое дольше, и отнимает больше ресурсов. Поэтому наша связка настроена так, что запросы принимает на себя nginx, переадресуя apache только обработку php страниц. Статику же (картинки, css, js и т.д.) отдает наш front-end. За счет этого мы в разы снижаем нагрузку на back-end.

Теперь посмотрим где лежат конфигурационные файлы хостинга ru-center.

FAQ от хостера – hosting.nic.ru/faq/

Для управления основным конфигурационным файлом apache для сервера, нам нужно включить ручной режим управления. После включения, конфиг находится тут – /home/ИМЯ/etc/apache_1.3/httpd.conf

hosting_server

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

Основной конфиг nginx для сервера частично доступен здесь –

/home/ИМЯ/etc/nginx/nginx.conf 

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

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

hosting_site

В этом случае конфиги apache для виртуальных хостов будут здесь –

/home/ИМЯ/etc/apache_1.3/ИМЯ_САЙТА.site.conf

Конфиги nginx здесь –

/home/ИМЯ/etc/nginx/ИМЯ_САЙТА.site.conf

 Включаем gzip nginx

Давайте приступим к настройке. Ускорять мы будем следующия способом – включим сжатие файлов GZIP, и кэширование в браузере. Этого от нас очень хочет великий гугл. Проверить что он хочет, можно здесь – PageSpeed Insights. Говорят, что ранжирование сайта не в последнюю очередь зависит от скорости его работы.

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

Включать в данном случае директивы mod_gzip или mod_deflate в .htaccess (или httpd.conf) в apache бессмысленно – apache не отдает нам статику, ему нечего будет сжимать.

Переключим сервер в ручной режим работы (предварительно включив нужные модули)

Подключимся по протоколу SSH, с помощью утилиты PUTTY к серверу.

Открываем конфиг nginx /home/ИМЯ/etc/nginx/nginx.conf

gzip_on_nginx

В контексте http { … } вставляем следующий код:

#включение/выключение
gzip on;
#оставляем по умолчанию
gzip_buffers 16 8k;
#Степень сжатия, макс.9
gzip_comp_level 6;
#Разрешает отдавать сжатый контент проксирующим серверам
gzip_proxied any;
#Минимальная величина ответа (Content-Length) для сжатия в байтах
gzip_min_length 1024;
#Типы файлов, которые будут сжиматься
gzip_types application/xml text/css text/js text/xml application/x-javascript text/javascript application/javascript application/json application/xml+rss;
#минимальная версия протокола
gzip_http_version 1.0;
#Важный параметр, помогает браузеру получить нужный кэш с промежуточного прокси сервера
gzip_vary on;

Комментарии можно удалить. Данные параметры будут действовать для всех сайтов на виртуальном хостинге.

Документация на русском по nginx – nginx.org

Проверить, что сжатие работает, можно на этих сайтах – gziptest.com и checkgzipcompression.com

 Кэширование в браузере

Теперь включим заголовки для кэширования в браузере. Для nginx, переводим сайт в ручной режим, у нас появляется файл /home/ИМЯ/etc/nginx/ИМЯ_САЙТА.site.ru

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

(Подробнее про эту директиву можно почитать здесь – nginx.org.)

expires

1w – значит 1 week, одна неделя, по требованию google. Вы можете поставить другое значение. Перечисленные в конфиге и на скриншоте файлы и есть те типы файлов, которые nginx отдает без участия apache. После правки файла, перезапускаем сервер, и проверяем заголовок тут – urivalet.com, или плагином для firefox и chrom Live HTTP headers.

headers_1w1

На скриншоте мы видим, что время хранения файла задано 604800 секунд (неделя) и еще мы видим метку ETag. Это метка, которая изменится, при изменении  файла, если Etag изменится, браузер будет знать, что произошли изменения, и файл нужно загрузить заново. Метку и типы файлов для хранения мы настроим в apache, большинство заголовков будет выдавать он.

В apache заголовки мы будем настраивать через .htaccess.

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

.htaccess set browser cache

<IfModule mod_mime.c>
AddType text/css .css
AddType text/x-component .htc
AddType application/x-javascript .js
AddType application/javascript .js2
AddType text/javascript .js3
AddType text/x-js .js4
AddType video/asf .asf .asx .wax .wmv .wmx
AddType video/avi .avi
AddType image/bmp .bmp
AddType application/java .class
AddType video/divx .divx
AddType application/msword .doc .docx
AddType application/vnd.ms-fontobject .eot
AddType application/x-msdownload .exe
AddType image/gif .gif
AddType application/x-gzip .gz .gzip
AddType image/x-icon .ico
AddType image/jpeg .jpg .jpeg .jpe
AddType application/json .json
AddType application/vnd.ms-access .mdb
AddType audio/midi .mid .midi
AddType video/quicktime .mov .qt
AddType audio/mpeg .mp3 .m4a
AddType video/mp4 .mp4 .m4v
AddType video/mpeg .mpeg .mpg .mpe
AddType application/vnd.ms-project .mpp
AddType application/x-font-otf .otf
AddType application/vnd.ms-opentype .otf
AddType application/vnd.oasis.opendocument.database .odb
AddType application/vnd.oasis.opendocument.chart .odc
AddType application/vnd.oasis.opendocument.formula .odf
AddType application/vnd.oasis.opendocument.graphics .odg
AddType application/vnd.oasis.opendocument.presentation .odp
AddType application/vnd.oasis.opendocument.spreadsheet .ods
AddType application/vnd.oasis.opendocument.text .odt
AddType audio/ogg .ogg
AddType application/pdf .pdf
AddType image/png .png
AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx
AddType audio/x-realaudio .ra .ram
AddType image/svg+xml .svg .svgz
AddType application/x-shockwave-flash .swf
AddType application/x-tar .tar
AddType image/tiff .tif .tiff
AddType application/x-font-ttf .ttf .ttc
AddType application/vnd.ms-opentype .ttf .ttc
AddType audio/wav .wav
AddType audio/wma .wma
AddType application/vnd.ms-write .wri
AddType application/font-woff .woff
AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw
AddType application/zip .zip
</IfModule>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css A86400
ExpiresByType text/x-component A86400
ExpiresByType application/x-javascript A86400
ExpiresByType application/javascript A86400
ExpiresByType text/javascript A86400
ExpiresByType text/x-js A86400
ExpiresByType video/asf A604800
ExpiresByType video/avi A604800
ExpiresByType image/bmp A604800
ExpiresByType application/java A604800
ExpiresByType video/divx A604800
ExpiresByType application/msword A604800
ExpiresByType application/vnd.ms-fontobject A604800
ExpiresByType application/x-msdownload A604800
ExpiresByType image/gif A604800
ExpiresByType application/x-gzip A604800
ExpiresByType image/x-icon A604800
ExpiresByType image/jpeg A604800
ExpiresByType application/json A604800
ExpiresByType application/vnd.ms-access A604800
ExpiresByType audio/midi A604800
ExpiresByType video/quicktime A604800
ExpiresByType audio/mpeg A604800
ExpiresByType video/mp4 A604800
ExpiresByType video/mpeg A604800
ExpiresByType application/vnd.ms-project A604800
ExpiresByType application/x-font-otf A604800
ExpiresByType application/vnd.ms-opentype A604800
ExpiresByType application/vnd.oasis.opendocument.database A604800
ExpiresByType application/vnd.oasis.opendocument.chart A604800
ExpiresByType application/vnd.oasis.opendocument.formula A604800
ExpiresByType application/vnd.oasis.opendocument.graphics A604800
ExpiresByType application/vnd.oasis.opendocument.presentation A604800
ExpiresByType application/vnd.oasis.opendocument.spreadsheet A604800
ExpiresByType application/vnd.oasis.opendocument.text A604800
ExpiresByType audio/ogg A604800
ExpiresByType application/pdf A604800
ExpiresByType image/png A604800
ExpiresByType application/vnd.ms-powerpoint A604800
ExpiresByType audio/x-realaudio A604800
ExpiresByType image/svg+xml A604800
ExpiresByType application/x-shockwave-flash A604800
ExpiresByType application/x-tar A604800
ExpiresByType image/tiff A604800
ExpiresByType application/x-font-ttf A604800
ExpiresByType application/vnd.ms-opentype A604800
ExpiresByType audio/wav A604800
ExpiresByType audio/wma A604800
ExpiresByType application/vnd.ms-write A604800
ExpiresByType application/font-woff A604800
ExpiresByType application/vnd.ms-excel A604800
ExpiresByType application/zip A604800
</IfModule>
<FilesMatch “\.(css|htc|less|js|js2|js3|js4|CSS|HTC|LESS|JS|JS2|JS3|JS4)$”>
FileETag MTime Size
<IfModule mod_headers.c>
Header set Pragma “public”
Header append Cache-Control “public”
</IfModule>
</FilesMatch>
<FilesMatch “\.(html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml|HTML|HTM|RTF|RTX|SVG|SVGZ|TXT|XSD|XSL|XML)$”>
FileETag MTime Size
<IfModule mod_headers.c>
Header set Pragma “no-cache”
Header set Cache-Control “max-age=0, private, no-store, no-cache, must-revalidate”
</IfModule>
</FilesMatch>
<FilesMatch “\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|json|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|ttf|ttc|wav|wma|wri|woff|xla|xls|xlsx|xlt|xlw|zip|ASF|ASX|WAX|WMV|WMX|AVI|BMP|CLASS|DIVX|DOC|DOCX|EOT|EXE|GIF|GZ|GZIP|ICO|JPG|JPEG|JPE|JSON|MDB|MID|MIDI|MOV|QT|MP3|M4A|MP4|M4V|MPEG|MPG|MPE|MPP|OTF|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|PNG|POT|PPS|PPT|PPTX|RA|RAM|SVG|SVGZ|SWF|TAR|TIF|TIFF|TTF|TTC|WAV|WMA|WRI|WOFF|XLA|XLS|XLSX|XLT|XLW|ZIP)$”>
FileETag MTime Size
<IfModule mod_headers.c>
Header set Pragma “public”
Header append Cache-Control “public”
</IfModule>
</FilesMatch>

За что отвечают данные модули: mod_mime список типов файлов, mod_expires список файлов по типам, и время истечения кэша, FilesMatch, FileETag MTime Size список файлов, которым будет присваиваться метка Etag,  mod_headers  разрешает кэширование на публичных прокси (заголовок cache-control public)

Для группы файлов выставлен запрет кэширования (что бы главная страница обновлялась все время)

<FilesMatch “\.(html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml|HTML|HTM|RTF|RTX|SVG|SVGZ|TXT|XSD|XSL|XML)$”>
FileETag MTime Size
<IfModule mod_headers.c>
Header set Pragma “no-cache”
Header set Cache-Control “max-age=0, private, no-store, no-cache, must-revalidate”
</IfModule>
</FilesMatch>

Про кэширование – developers.google.com

Gzip Или Deflate на apache

На apache сжатие включается директивой mod_gzip ИЛИ mod_deflate.

Приведу пример кода для Apache. Можно вставить его в .htaccess

.htaccess set mod_gzip

<IfModule mod_gzip.c>

mod_gzip_on Yes

mod_gzip_can_negotiate Yes
mod_gzip_static_suffix .gz
AddEncoding gzip .gz

mod_gzip_update_static No

mod_gzip_temp_dir /tmp
mod_gzip_keep_workfiles Yes

mod_gzip_minimum_file_size 500
mod_gzip_maximum_file_size 500000
mod_gzip_maximum_inmem_size 60000

mod_gzip_min_http 1000
mod_gzip_handle_methods GET POST
mod_gzip_item_exclude reqheader “User-agent: Mozilla/4.0[678]”
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-httpd-php
mod_gzip_item_include mime ^application/xml
mod_gzip_item_exclude mime ^image/
mod_gzip_item_include file \.js$
mod_gzip_item_include file \.css$

mod_gzip_dechunk Yes

LogFormat “%h %l %u %t \”%V %r\” %<s %b Content-Type: ‘%{Content-type}o’ mod_gzip: %{mod_gzip_result}n In:%{mod_gzip_input_size}n -< Out:%{mod_gzip_
output_size}n = %{mod_gzip_compression_ratio}n pct.” common_with_mod_gzip_info2
CustomLog /var/log/mod_gzip.log common_with_mod_gzip_info2
mod_gzip_add_header_count Yes

</IfModule>

Качественные пояснения к вышеописанному конфигу – eax.me, от автора.

 

.htaccess set mod_deflate

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

Для работы этих конфигов, должны быть включены модули mod_gzip или mod_deflate в apache.

Подведём итог данных действий применительно к wordpress и хостингу ru-center. Мы оптимизировали сайт сайт под требования PageSpeed Insights

pagespeed

От красных предупреждений мы почти избавились, предупреждения про кэш и сжатие указывают на внешние ресурсы (реклама и счетчики)

Мы включили сжатие gzip в nginx, включили заголовок expires в nginx (он будет действовать на те файлы, которые по каким то причинам не попадут под действие директив в .htaccess apache) И настроили заголовки кэширования apache.

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

gmetrix1

 

Присваиваются метки Etag, срок истечения кэша не задан только внешним файлам.

gmetrix2

 

Отчеты с сайта gtmetrix.com – рекомендую.

Плагины для wordpress на все случаи жизни – в этой статье

В следующий раз мы рассмотрим как автоматизировать  процесс  кэширования и сжатия файлов, и как ускорить сайт с помощью плагинов autoptimize и w3 total cache.

Плагин для ускорения wordpress w3 total cache

Плагин для ускорения wordpress autoptimize

Если у Вас есть вопросы, задавайте их на форуме, или ниже в комментариях.

 

 

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

ITQuestion – задай вопрос

Сообщество IT специалистов

Реклама