Entity Tags (ETags) validate whether components, that is, images, files, and so on, in a browser's cache match components on the server. Unfortunately, ETags do more harm than good. Most servers have ETags available by default, which is why HTML5 Boilerplate's server configuration file prevents a server from serving them, as shown in the following code snippet:

<IfModule mod_headers.c>
  Header unset ETag
</IfModule>
FileETag None

Gzip is the most popular compression method. By compressing your files with Gzip, you can make sure your files get transferred more quickly, even with low bandwidth connections. Sometimes the savings are as much as 70 percent of file size, making this a great performance configuration default.

Let us look at how big our files are without our .htaccess Gzip feature in place. To do this, we simply comment out that section, as shown in the following code snippet:

#<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>
#
#  # HTML, TXT, CSS, JavaScript, JSON, XML, HTC:
#  <IfModule filter_module>
#    FilterDeclare   COMPRESS
#    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/html
#    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/css
#    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/plain
#    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/xml
#    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/x-component
#    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/javascript
#    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/json
#    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/xml
#    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/xhtml+xml
#    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/rss+xml
#    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/atom+xml
#    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/vnd.ms-fontobject
#    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $image/svg+xml
#    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $image/x-icon
#    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/x-font-ttf
#    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $font/opentype
#    FilterChain     COMPRESS
#    FilterProtocol  COMPRESS  DEFLATE 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 application/javascript
#    AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
#    AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml application/atom+xml
#    AddOutputFilterByType DEFLATE image/x-icon image/svg+xml application/vnd.ms-fontobject application/x-font-ttf #font/opentype
#  </IfModule>
#
#</IfModule>

Now, let us look at the sizes of files that get delivered to our browser through the network tools available in browser developer tools (in this case, Chrome Developer Tools):

Now, let's enable Gzip by enabling the appropriate rules in .htaccess by removing # from the beginning of the lines. Notice the difference, as shown in the following screenshot:

If you would like to learn more about Gzip, Chapter 4, Smaller Components, Book of Speed, Stoyan Stefanov, found at www.bookofspeed.com/chapter4.html, would be a good place to start from.

Servers can indicate to browsers how long they can keep files in the cache. This is pretty useful for static files that don't change frequently, and will reduce your page-load time. HTML5 Boilerplate's .htaccess file has a set of defaults for most static files, as shown in the following code snippet:

<IfModule mod_expires.c>
ExpiresActive on

# Perhaps better to whitelist expires rules? Perhaps.
ExpiresDefault                          "access plus 1 month"

# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest       "access plus 0 seconds"

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

# Data
ExpiresByType text/xml                  "access plus 0 seconds"
ExpiresByType application/xml           "access plus 0 seconds"
ExpiresByType application/json          "access plus 0 seconds"

# Feed
ExpiresByType application/rss+xml       "access plus 1 hour"
ExpiresByType application/atom+xml      "access plus 1 hour"

# Favicon (cannot be renamed)
ExpiresByType image/x-icon              "access plus 1 week"

# Media: images, video, audio
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"

# HTC files  (css3pie)
ExpiresByType text/x-component          "access plus 1 month"

# Webfonts
ExpiresByType application/x-font-ttf    "access plus 1 month"
ExpiresByType font/opentype             "access plus 1 month"
ExpiresByType application/x-font-woff   "access plus 1 month"
ExpiresByType image/svg+xml             "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

# CSS and JavaScript
ExpiresByType text/css                  "access plus 1 year"
ExpiresByType application/javascript    "access plus 1 year"
</IfModule>

This tells the server to cache requests for files of each type as soon as it is accessed freshly for the period specified by the text "access plus…". For example, consider the following code snippet:

# CSS and JavaScript
ExpiresByType text/css                  "access plus 1 year"
ExpiresByType application/javascript    "access plus 1 year"

This fragment makes the server tell the browser, requesting CSS and JavaScript files, to cache each of these files for at least a year since the first time it was accessed, unless the user deliberately clears their cache.

HTML5 Boilerplate provides a custom 404 page called 404.html. But, this will never be used, unless the server knows to serve this file every time a resource is not found. HTML5 Boilerplate's .htaccess file has a configuration that tells the server to use this file as follows:

ErrorDocument 404 /404.html

Make sure to refer to the 404.html using the full path. For example, on a Mac, the full path would be /~<username>/404.html, if you are hosting it in the website's folder under your <username> folder.

The following screenshot shows how a browser renders the default HTML5 Boilerplate 404 page, when HTML5 Boilerplate's .htaccess file is used:

Internet Explorer utilizes a meta tag to decide whether it should render a site in compatibility mode or use the latest rendering engine to render it.

Google Chrome has released a plugin named Chrome Frame , downloadable from https://developers.google.com/chrome/chrome-frame/ that, if installed on a user's computer, will provide the experience of a modern browser when the user uses older versions of Internet Explorer. Your site can opt-in to using this plugin on a user's computer, when your page is being viewed on older versions of Internet Explorer. To opt-in to using this plugin automatically, append ", chrome=1" to the content attribute value for the http-equiv meta tag.

This tag can be set within the HTML file itself, which is what HTML5 Boilerplate does, as shown in the following code snippet:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

However, as HTML5 Boilerplate uses conditional comments around the html tag, IE will render the HTML in Compatibility View, not with Chrome Frame. Hence, using the meta tag with conditional comments around the html tag would not work. HTML5 Boilerplate's .htaccess file sets this as an HTTP header instead, as shown in the following code snippet:

<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 ".(js|css|gif|png|jpe?g|pdf|xml|oga|ogg|m4a|ogv|mp4|m4v|webm|svg|svgz|eot|ttf|otf|woff|ico|webp|appcache|manifest|htc|crx|oex|xpi|safariextz|vcf)$" >
    Header unset X-UA-Compatible
</FilesMatch>
</IfModule>

This forces IE to respect the HTTP header that is sent, and use the latest rendering engine irrespective of what the meta tag states. You can also set IE to use whatever rendering engine you like. We discuss this feature in depth in Appendix, You Are an Expert, Now What?, under the section What is meta x-ua-compatible?.

Character encoding is a way to represent your text data in byte sequences. There have been different standards available for different scripts, for example, Greek, Japanese, and so on, but the standards body that creates HTML specifications, W3C, strongly endorses the use of UTF-8 as the de-facto encoding scheme for all text served on the Web to ensure all browsers can render your text data correctly. The .htaccess file sets it in the following manner:

# Use UTF-8 encoding for anything served text/plain or text/html
AddDefaultCharset utf-8
# Force UTF-8 for a number of file formats
AddCharset utf-8 .css .js .xml .json .rss .atom

A Multipurpose Internet Mail Extensions (MIME) type sent as a HTTP header helps the browser decide how to process the content that is sent. For example, a browser needs to know when a file is a stylesheet and when it is a downloadable text document. This information is provided by the MIME type HTTP header that the server returns when sending that resource. HTML5 Boilerplate's .htaccess file ensures your server provides the right MIME type when serving content.

For example, in our Senegal music festival website, we need our Web fonts to be understood by the browser to be a font file and not garbled text. In our HTML5 Boilerplate .htaccess file, the following lines make sure the server returns the correct MIME type so browsers can do that:

AddType application/vnd.ms-fontobjecteot
AddType application/x-font-ttfttfttc
AddType font/opentypeotf
AddType application/x-font-woffwoff

If you use a Version Control System (VCS) to manage your website's code, the hidden folders used to manage versioning (.git or .svn) are likely to exist in your production servers too. You do not want anyone to access these files and find any information that could be used to hack your website. HTML5 Boilerplate prevents the server from providing content requested of these folders within the .htaccess file, as shown in the following code snippet:

# Block access to "hidden" directories whose names begin with a period. This
# includes directories used by version control systems such as Subversion or Git.
<IfModule mod_rewrite.c>
RewriteCond %{SCRIPT_FILENAME} -d
RewriteCond %{SCRIPT_FILENAME} -f
RewriteRule "(^|/)." - [F]
</IfModule>

If you have your databases backed up on the server, for example, database.sql.bak, you do not want anyone to access that either, nor logfiles or any of your source files, such as Photoshop files for logos—we know it happens! The following code in the .htaccess file prevents access to these files:

# Block access to backup and source files
# This files may be left by some text/html editors and
# pose a great security danger, when someone can access them
<FilesMatch "(.(bak|config|sql|fla|psd|ini|log|sh|inc|swp|dist)|~)$">
  Order allow,deny
  Deny from all
  Satisfy All
</FilesMatch>

This tells the server to look for files that end with any of these extensions: <filename>.bak, <filename>.config, and so on, and if so, deny processing requests for such files. It will return a 403 Forbidden error instead.

The Apache server requires you to start the rewrite engine before you do any URL rewriting. The HTML5 Boilerplate .htaccess file enables this as shown in the following code snippet:

<IfModule mod_rewrite.c>
  Options +FollowSymlinks
RewriteEngine On
# RewriteBase /
</IfModule>

If your site is in a subfolder, remove the # from the RewriteBase line and set it to the full path to the subfolder from the root.

In Apache, you need to disable MultiViews if you want to redirect URLs requested from paths, that do not exist, to another path.

For example, if you have an incoming request to http://example.com/beaches/10 and you want it to internally redirect to http://example.com/index.php?q=10 and the folder beaches does not exist in the root folder of your website, Apache would throw an error. The HTML5 Boilerplate's .htaccess file prevents this from occurring by using the following code statement:

Options -MultiViews