Как сжать скрипты и стили?

Для оптимизации сайтов мы думаем о том как сжать нам эти HTML, CSS и JavaScript. Конечно же самый делетанский метод — это установить соответствующий плагин для вордпресс или джумлу... и подхватить потом «трипер» от автора сие говна. Сейчас разберем как сжать самому без плагинов и расширений, используя при этом .htaccess. Проверить текущее состояние сжатия сайта можно по 

адресу http://www.whatsmyip.org/http-compression-test.

Динамический вариант сжатия — добавляем директиву в .htaccess:

# сжатие text, html, javascript, css, xml:
<ifModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript
</ifModule>

Статический вариант сжатия — мы сжимаем архиватором скрипты (js, css и тд.) и приводим в формат .gz и закидываем архивы на хост рядом с сжатыми файлами. А в .htaccess прописываем следующую хрень:

# Перенаправление на gzip файлы
AddEncoding gzip .gz
<FilesMatch "\.js.gz$">
ForceType text/javascript
Header set Content-Encoding: gzip
</FilesMatch>

<FilesMatch "\.js$">
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} !".*Safari.*"
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule (.*)\.js$ $1\.js.gz [L]
ForceType text/javascript
</FilesMatch>

<FilesMatch "\.css.gz$">
ForceType text/css
Header set Content-Encoding: gzip
</FilesMatch>

<FilesMatch "\.css$">
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} !".*Safari.*"
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule (.*)\.css$ $1\.css.gz [L]
ForceType text/css
</FilesMatch>
 

Третий способ!

Обработчики Apache 2.0 и 2.2 позволяют вам сжать содержимое перед его отправкой в браузер посетителя. Типы содержимого, подлежащие сжатию, задаются типом MIME. Эта функция требует правильной работы команды mod_deflate обработчика Apache.

Добавьте в .htaccess строки:

<IfModule mod_deflate.c>
AddOutPutFilterByType DEFLATE text/html text/plain text/xml
<IfModule mod_setenvif.c>
# Netscape 4.x has some problems...
BrowserMatch ^Mozilla/4 gzip-only-text/html

# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4.0[678] no-gzip

# MSIE masquerades as Netscape, but it is fine
# BrowserMatch bMSIE !no-gzip !gzip-only-text/html

# NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48
# the above regex won't work. You can use the following
# workaround to get the desired effect:
BrowserMatch bMSI[E] !no-gzip !gzip-only-text/html

# Don't compress images
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary
</IfModule>

<IfModule mod_headers.c>
# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</IfModule>
</IfModule>

Четвертый способ

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

Спросил как то у ДЖИНО — как сжать шрифты на сайти? Какую директиву для этого нужно прописать в .htaccess? В итоге мне скинули полный комплект сжатия вообще всего что можно:

---- КОД ---------------------------
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript text/x-js text/ecmascript application/ecmascript text/vbscript text/fluffscript
AddOutputFilterByType DEFLATE image/svg+xml application/x-font-ttf application/x-font font/opentype font/otf font/ttf application/x-font-truetype application/x-font-opentype application/vnd.ms-fontobject application/vnd.oasis.opendocument.formula-template
AddOutputFilterByType DEFLATE text/xml application/xml
</IfModule>
<IfModule mod_expires.c>
<FilesMatch "\.(ico|gif|jpg|JPG|jpeg|png|PNG|swf|css|js|html?|xml|txt)$">
ExpiresActive On
ExpiresDefault "access plus 1 month"
</FilesMatch>
</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>
---- КОНЕЦ КОДА --------------------

Метки записи: