Handy default .htaccess rules to enable fast page loads and client-side caching
This is a problem that has always been a bit of a pain – trying to optimise a site so that it caches correctly and loads fast on the client browser.
This .htaccess excerpt below uses a few features built in to Apache, but not necessarily enabled or configured correctly.
Apache’s default configuration does not handle font MIME types at all and the browser is not given any hints to what these types may be. By giving the browser hints to what the content type, MIME type and charset may be for each file, it knows how to process that file even before that file has been downloaded.
The rules provided below are very basic and should only be used on small sites that do not require complicated dynamic caching across individual paths and files.
The charset tells the browser what encoding the HTML page is in. In most cases this it UTF-8. As a developer you should have also put this in the head of your page, but adding this to the server also adds the charset into the response headers which are received before the page is downloaded. By doing this we are telling the browser what to expect with the coming data.
# set the default Char-set AddDefaultCharset UTF-8
Missing MIME types
Apache does not include all the MIME types that are used in modern sites in its default configuration. The ones that are most commonly used and missing are font types.
The reason we add these MIME types to the server is that it can tell the browser what type of file is being sent. If the browser knows what kind of file it is getting then it can process it immediately after it has finished downloading. In the situations where the browser does not know what the type of file is, the browser must either guess (by reading the file to predict what type it is) or treat it as plain text. Guessing the type of a file takes up valuable time that could be used for displaying pretty fonts to the user.
# add any types that are not normal AddType application/x-font-woff .woff AddType application/vnd.ms-fontobject .eot AddType application/x-font-otf .otf AddType application/x-font-ttf .ttf
Cache expiry times
Telling the browser that it can use a file it has already downloaded once before speeds up page loads ten-fold. By setting an expire time for each common file MIME type the browser will used the cached version until the time expires.
The times given below are pretty standard, but you could tweak them if you know your files are not going to change often.
Forcing IE into standards mode & setting the content type
Firstly, by forcing IE into standards mode you are doing a favour for yourself and any user attempting to use the browser. Your code will render better and more smoothly, and you will have less issues with trying to make things “IE friendly”. If you have used the
<meta http-equiv="X-UA-Compatible"> tag before you will recognise the code here. The
<meta http-equiv=""> tag used to be the way we could set HTTP headers in the HTML file. With HTML5 though, the http-equiv attribute has been depreciated. However we can set this in our .htaccess file.
# force IE into standards Header set X-UA-Compatible "IE=Edge,chrome=1"
The next thing is to set the content type. The reason for this is the same as for setting the MIME types and the charset – type hinting. This is also set in HTML files too but the header allows the browser to get ready for the HTML.
# set the content-type Header set Content-Type "text/html"
With both of these rules we need to set some boundaries on them. We don’t want these affecting things like images and scripts. To do this we wrap both up in a conditional as such:
# add headers for html files <filesMatch "\.(html?|php\d?)$"> # force IE into standards Header set X-UA-Compatible "IE=Edge,chrome=1" # set the content-type Header set Content-Type "text/html" </filesMatch>
This makes sure that the headers will only be used on files that are HTML or PHP.
Well that’s about it for now. As I discover new ways to speed page loads by modifying the headers of the HTTP response I will update this post. Any tweaks or errors, please comment below and I will add or fix them.