htaccess with compression, caching, and rewrite rules for SEO

Question

I have the following htaccess and I want it to be the perfect htaccess for my website so that it uses less bandwidth and meets the requirements of a good SEO.

I am on an apache server and my files are html, php, js(minified and normal), css, ttf fonts, images.

How can I improve this htaccess file?

RewriteBase /
RewriteEngine On

RewriteCond %{REQUEST_FILENAME}.php !-f
RewriteRule ^room/([A-Za-z0-9]+)$ playground.php?room=$1 [L]

RewriteCond %{REQUEST_FILENAME}.php !-f
RewriteRule ^join/([A-Za-z0-9]+)$ index.php?room=$1&action=join [L]

RewriteCond %{REQUEST_FILENAME}.php !-f
RewriteRule ^([\w-]+)$ $1.php [L]

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  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

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

#Cache-control
<IfModule mod_headers.c>
    <FilesMatch ".(jpg|jpeg|png|gif|ico)$">
       Header set Cache-Control "max-age=2628000, public"
    </FilesMatch>
    <FilesMatch ".(css|js)$">
       Header set Cache-Control "max-age=604800, public"
    </FilesMatch>
</IfModule>

Answer 1

The first question I always ask when considering using an htaccess file is - does this really need to be in an htaccess file? By that I mean ask yourself a few questions:

• Do you have the ability to configure Apache on your host? (i.e. you are not in some shared hosting where htaccess is your only recourse.)
• Is this configuration common to all directories in your application?
• Can you restart Apache upon any necessary configuration changes?

If you answered "yes" to all of these questions, you should have this configuration in your main Apache server config, rather than in a directory context, and simply turn off directory overrides. This eliminates the performance hit of checking every directory for an htaccess file on every request that hits this server. This is the best way of "improving" most htaccess files. Site performance can impact your SEO.

As long as you answered "yes" to the first question, you should still probably consider moving this configuration into Apache config as long as you don't have unusual needs such as not being able to restart server without complications (either on your site or possibly other sites on same servers) or having a high frequency of change to this configuration logic such that you would be restarting the server too frequently.

You can also enter directory-specific configuration in the main Apache config, so typically just because you have different configs for different directories, this alone should not be a reason to stick with htaccess.

---

If you are using eTags and have multiple host serving traffic, turn of the iNodes component in generating the eTags so you get more consistent eTag values across servers, so long as your are appropriately deploying or "touching" your files to match modification times across servers.

i.e.

FileETag MTime Size

Also, if you are not using eTags, you might consider it such that, even if a cached item has passed expiry, the browser still may not need to download the item if the eTags haven't changed.

---

If you are worried about server bandwidth and overall performance consider:

• moving your static assets onto a CDN which is better suited for delivery of the content to end user browsers;
• minifying all applicable assets (i.e. don't have some JS that is not minified). Minification is different that deflation of course and more effective regarding overall download size.
• using much longer expiry times for your static assets (i.e. many years) along with an asset versioning strategy to deal with browser caching behavior issues. Think in terms of when you are deploying a static asset, you are deploying it forever (file storage is cheap).
• cusing SVG as part of your suite of tools for replacing iconography, sprite sheets, and other vector-friendly images. I know this is getting more into application design. :)