Posted by Tom Walker in Search Engine Optimisation (SEO) | 0 comments
Website Optimisation – Part 3
Now I’m sure you’re probably getting sick of hearing me go on about website optimisation and performance improvements by now but there really is a great deal of benefit in reducing page load times for you and your users. In this final post I thought I would get even more technical and look at server improvements/changes that will provide some benefit so let’s get started.
Adding an Expires or a Cache Control Header
There are two aspects to this rule:
- For static components you should implement a “Never expire” policy by setting far future Expires header
- For dynamic components use an appropriate Cache-Control header to assist the browser with conditional requests
Site designs are becoming increasingly content rich, this means more images, scripts, stylesheets and flash on the page. A user visiting your website for the first time will have to make several HTTP requests but by using the Expires header you can make those static components cacheable. This will significantly reduce unnecessary HTTP requests on any subsequent page views (depending on your content). Expires headers are most frequently used with images but they can and should be used on all components.
Browsers utilise the cache to minimise the size and amount of HTTP requests, this makes web pages load faster. The purpose of the Expires header is to define the amount of time the browser should store the component in its cache. This is an example of a far future header, it tells the browser that this response won’t go stale until May 19th 2015.
Expires: wed, 19 May 2015 09:00:00 GMT
If you are running an Apache server you can use the ExpiresDefault directive to set the expiration date based on the current date. This example sets the Expires date 5 years from the time of the request.
ExpiresDefault “access plus 5 years”
One thing to keep in mind is that if you decide to change a component that you have used a far future header on you will have to change the name of the file otherwise anyone who has visited your site before will be shown the previously cached version.
Flush the Buffer Early
When a users browser requests a page, it may take anywhere from 200 to 500ms for the server to put together the HTML page. That may not seem like a long time but the browser is sat idle while it waits for this data to arrive. In PHP there is the function flush(). This allows you to send the partially ready HTML response to the browser so that it can start fetching components while the server is busy putting together the rest of the HTML page. The benefit of this is mainly seen on busy backends or light frontends.
An example of it use would be to flush right after the HEAD of your page because the HTML contained in the HEAD is generally easier to produce so it allows you to include any Javascript or CSS files for the browser to start fetching while the server is still processing the rest of the page.
… <!—css, js –>
</head>
<?php flush(); ?>
<body>
…. <!– content –>
Avoid Empty Image src
Although it seems like an elementary mistake, images with and empty string src attribute occur more frequently than you might think. They can appear in two forms:
- Straight
<img src=””>
- Javascript
var img = new Image();
img.src=””;
Both of these forms have the same effect; the browser makes another request to your server. While different browsers deal with this issue in different ways the results are the same. It overloads your servers by sending a large amount of unexpected traffic, especially if you have a page that gets millions of views per day. Plus it wastes server computing cycles by generating a page that will never be viewed.
In HTML5 there has been an addition made to the description of the tags attribute to instruct browsers not to make an additional request if the string is empty.
“The src attribute must be present, and must contain a valid URL referencing a non-interactive, optionally animated, image resource that is neither paged nor scripted. If the base URI of the element is the same as the document’s address, then the src attribute’s value must not be the empty string.”
Hopefully browsers will not have this problem in the future but at present no such clause exists for <script src=””> or <link href=””>.
Tweet