Главная/ Собираем HTML и CSS приемы/ Настройки сервера/ Htaccess: обзор и инструкции по использованию/ .htaccess. Производительность сайта :: настройки сервера

.htaccess. Производительность сайта

Дата публикации: 22.07.2011

Gzip сжатие

Gzip сжатие — это технология архивирования файлов на стороне сервера для уменьшения их веса. Меньший вес файлов — более быстрая их передача по сети. Имеет смысл приметь для текстовых файлов (уменьшения размера файла может достигать 300-400%). Для бинарных (например, изображений) применять смысла нет: выигрыш в весе почти не получаем, а сервер нагружаем.

Браузер, получив архивированные файлы, распаковывает их, а затем как обычно обрабатывает. Все современные браузеры поддерживают архивирование. Установка Windows

Простое решение для gzip сжатия с помощью .htaccess:

# gzip сжатие.
<IfModule mod_deflate.c>

# html, txt, css, js, json, xml, htc:
AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript
AddOutputFilterByType DEFLATE text/xml application/xml text/x-component

# веб-шрифты и svg:
<FilesMatch ".(ttf|otf|eot|svg)$" >
    SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

У такого подхода есть один недостаток: не все пользователи получат сжатые файлы. Tony Gentilcore в своей книге «Even Faster Web Sites» приводит цифру в 15%. Виновникам этого являются прокси-сервера и некоторое программное обеспечения безопасности, которые деформируют HTTP заголовки. Перед отправкой данных есть возможность это отследить и если такая ситуация возможна, отправить специальные заголовки чтобы сжатые файлы нормально прошли.

<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
   SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)s,?s(gzip|deflate)?|X{4,13}|~ 4,13}|-{4,13})$ HAVE_Accept-Encoding
    RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
</IfModule>
</IfModule>
# html, txt, css, js, json, xml, htc:
<IfModule filter_module>
  FilterDeclare   COMPRESS
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type /text/(html|css|javascript|plain|x(ml|-component))/
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type /application/(javascript|json|xml|x-javascript)/
  FilterChain     COMPRESS
  FilterProtocol  COMPRESS  change=yes;byteranges=no
</IfModule>

<IfModule !mod_filter.c>
  # Legacy versions of Apache
  AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
  AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript
  AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
</IfModule>

# webfonts and svg:
<FilesMatch ".(ttf|otf|eot|svg)$" >
    SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

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

Кэширование

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

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

<IfModule mod_expires.c>
Header set Cache-Control "public"
ExpiresActive on

# устанавливаем значения кэширования по умолчанию
ExpiresDefault                          "access plus 1 month"

# cache.manifest требует доп. запросов в FF 3.6
ExpiresByType text/cache-manifest       "access plus 0 seconds"

# задаем кнкретные значения кэширования для каждого типа сайта
# значения ставим в зависмости от специфики проекта

# html 
ExpiresByType text/html                 "access plus 0 seconds"

# данные
ExpiresByType text/xml                  "access plus 0 seconds"
ExpiresByType application/xml           "access plus 0 seconds"
ExpiresByType application/json          "access plus 0 seconds"


# rss поток
ExpiresByType application/rss+xml       "access plus 1 hour"

# фавикон (переименовывать нельзя)
ExpiresByType image/vnd.microsoft.icon  "access plus 1 week"
 
# медиа: картинки, видео, аудио
ExpiresByType image/gif                 "access plus 1 month"
ExpiresByType image/png                 "access plus 1 month"
ExpiresByType image/jpg                 "access plus 1 month"
ExpiresByType image/jpeg                "access plus 1 month"
ExpiresByType video/ogg                 "access plus 1 month"
ExpiresByType audio/ogg                 "access plus 1 month"
ExpiresByType video/mp4                 "access plus 1 month"
ExpiresByType video/webm                "access plus 1 month"

# веб-шрифты
ExpiresByType font/truetype             "access plus 1 month"
ExpiresByType font/opentype             "access plus 1 month"
ExpiresByType font/woff                 "access plus 1 month"
ExpiresByType image/svg+xml             "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
     
# css и javascript
ExpiresByType text/css                  "access plus 1 month"
ExpiresByType application/javascript    "access plus 1 month"
ExpiresByType text/javascript           "access plus 1 month"
</IfModule>


# если не используется ETag, тогда его отключаем для сокращения HTTP заголовков
FileETag None

По теме

Теги: , , ,