Developing a site with best practice browser caching - Siteflex

print page
Siteflex Announcements RSS Feed

Announcements

 
  • Developing a site with best practice browser caching

    Tweet This

    19 October, 2011

    Earlier this year Siteflex servers began to utilise web browser cache to it's fullest potential. What's all the fuss about caching you may ask? Let's delve a little deeper...
     

    The advantages of caching

    Browser caching speeds up a website experience substantially. A returning visitor's browser can quickly retrieve any locally stored (cached) files, instead of going off to your website and downloading them (again).

    The majority of the work is done, but we can still do better. The web browser will still need to confirm that a file has not been changed before using it's cached copy. This confirmation process slows things down, especially so if given a large list of unique files.

    In steps the concept of setting an expiry header on your website's files. This is the method of advising a user's web browser that it won't need to check for an updated file until a specified future date. Instead, the web browser will go straight for it's local files; which results in a tasty speed bonus.

    Siteflex sets an expiry header to ensure your static content is loaded as quickly as possible.

    The disadvantages of caching

    But what happens when you make a change to your website?

    The best websites are dynamically driven and constantly evolving. A dilemma; we've just told the user's web browser to not download any files that have been already cached. So how do we deliver updated content?

    It's a bit much to expect your website's users to be clearing their cache, websites should just work. Without any intervention, a user could find a site's styling partially askew, or would continue to see that home page image you have since updated... you know, the one previously featuring a lovely spelling mistake.

    From a site management perspective, caching can get a little frustrating. Replacing files becomes an almost unrealistic option. Though it is now common practice across the web to upload files with fresh filenames, we're keen to make things a little easier with Siteflex.
     

    Caching with Siteflex

    Our first step with making life a little easier with caching was to force the web browser to download a fresh copy of the site's styling (css) and front-end functionality (javascript / jquery). In this way, a site's styling and functionality will always work smoothly for website users. Great!

    However, this still means when uploading updated files (images, documents) Siteflex administrators should avoid using the same filename so that all website users can see your fresh content.

    There's more to do, but this is a great starting point for making websites as fast as they can be while making the website management experience even easier.