Useful Htaccess Tricks and Tips for your websites (better performance, speed up, stability and more)

Apache configuration file (.htaccess) .htaccess files are an overhead, this logic should be in your Apache config if possible: httpd.apache.org/docs/2.2/howto/htaccess.html

Techniques in here adapted from all over, including: html5boilerplate: html5boilerplate.com Kroc Camen: camendesign.com/.htaccesss perishablepress.com/press/2006/01/10/stupid-htaccess-tricks/ Useful htaccess tricks & tips: http://www.queness.com/post/5421/17-useful-htaccess-tricks-and-tips Sample .htaccess file of CMS MODx: modxcms.com

1. Better website experience for IE users

Force the latest IE version, in various cases when it may fall back to IE7 mode github.com/rails/rails/commit/123eb25#commitcomment-118920 Use ChromeFrame if it's installed for a better experience for the poor IE folk for iranian user you can use chromeframe.ir

<IfModule mod_headers.c>
  Header set X-UA-Compatible "IE=Edge,chrome=1"
  # mod_headers can't match by content-type, but we don't want to send this header on *everything*...
  <FilesMatch "\.(appcache|crx|css|eot|gif|htc|ico|jpe?g|js|m4a|m4v|manifest|mp4|oex|oga|ogg|ogv|otf|pdf|png|safariextz|svg|svgz|ttf|vcf|webm|webp|woff|xml|xpi)$">
    Header unset X-UA-Compatible
  </FilesMatch>
</IfModule>

2. Cross-domain AJAX requests (if you need)

Serve cross-domain Ajax requests, disabled by default. enable-cors.org code.google.com/p/html5security/wiki/CrossOriginRequestSecurity

<IfModule mod_headers.c>
  Header set Access-Control-Allow-Origin "*"
</IfModule>

3. CORS-enabled images

Send CORS headers if browsers request them; enabled by default for images. developer.mozilla.org/en/CORS_Enabled_Image blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/ wiki.mozilla.org/Security/Reviews/crossoriginAttribute

<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    # mod_headers, y u no match by Content-Type?!
    <FilesMatch "\.(gif|ico|jpe?g|png|svg|svgz|webp)$">
      SetEnvIf Origin ":" IS_CORS
      Header set Access-Control-Allow-Origin "*" env=IS_CORS
    </FilesMatch>
  </IfModule>
</IfModule>

4. Webfont access

Allow access from all domains for webfonts.

<IfModule mod_headers.c>
  <FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

5. Proper MIME type for all files

# JavaScript
#   Normalize to standard type (it's sniffed in IE anyways)
#   tools.ietf.org/html/rfc4329#section-7.2
AddType application/javascript         js jsonp
AddType application/json               json

# Audio
AddType audio/mp4                      m4a f4a f4b
AddType audio/ogg                      oga ogg

# Video
AddType video/mp4                      mp4 m4v f4v f4p
AddType video/ogg                      ogv
AddType video/webm                     webm
AddType video/x-flv                    flv

# SVG
#   Required for svg webfonts on iPad
#   twitter.com/FontSquirrel/status/14855840545
AddType     image/svg+xml              svg svgz
AddEncoding gzip                       svgz

# Webfonts
AddType application/vnd.ms-fontobject  eot
AddType application/x-font-ttf         ttf ttc
AddType application/x-font-woff        woff
AddType font/opentype                  otf

# Assorted types
AddType application/octet-stream            safariextz
AddType application/x-chrome-extension      crx
AddType application/x-opera-extension       oex
AddType application/x-shockwave-flash       swf
AddType application/x-web-app-manifest+json webapp
AddType application/x-xpinstall             xpi
AddType application/xml                     rss atom xml rdf
AddType image/webp                          webp
AddType image/x-icon                        ico
AddType text/cache-manifest                 appcache manifest
AddType text/vtt                            vtt
AddType text/x-component                    htc
AddType text/x-vcard                        vcf

6. Allow concatenation from within specific js and css files

Enable SSI (Server side include) e.g. Inside of script.combined.js you could have

and they would be included into this single file.

You may choose to use this technique if you do not have a build process.

<FilesMatch "\.combined\.js$">
  Options +Includes
  AddOutputFilterByType INCLUDES application/javascript application/json
  SetOutputFilter INCLUDES
</FilesMatch>

<FilesMatch "\.combined\.css$">
  Options +Includes
  AddOutputFilterByType INCLUDES text/css
  SetOutputFilter INCLUDES
</FilesMatch>

7. Gzip compression

Compress all output labeled with one of the following MIME-types (for Apache versions below 2.3.7, you don't need to enable mod_filter and can remove the <IfModule mod_filter.c> and </IfModule> lines as AddOutputFilterByType is still in the core directives)

<IfModule mod_deflate.c>

  # Force deflate for mangled headers developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/
  <IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
      SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
      RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
    </IfModule>
  </IfModule>

  <IfModule mod_filter.c>
    AddOutputFilterByType DEFLATE application/atom+xml \
                                  application/javascript \
                                  application/json \
                                  application/rss+xml \
                                  application/vnd.ms-fontobject \
                                  application/x-font-ttf \
                                  application/xhtml+xml \
                                  application/xml \
                                  font/opentype \
                                  image/svg+xml \
                                  image/x-icon \
                                  text/css \
                                  text/html \
                                  text/plain \
                                  text/x-component \
                                  text/xml
  </IfModule>

</IfModule>