How to Speed Up Your Website with Browser Cache

By: Sunil Kumar |  In: Website Optimization  |  Last Updated: 2017/09/20

How to Speed Up Your Website with Browser Cache

Caching is a memory space where you keep your thing stored. every Browser has its own cache which is used to store data of sites a user visited. So whenever the user visits the same page again instead of calling from a server the page will be served from the Browser cache. But stop…!!!
You can ask, what is the use of browser caching?
If your page is served from the browser cache means your page speed will be much faster as compared to, if it is served from the server. And your content will be available to the visitor even your server is down or due to any other reason server is not able to serve the content.
So when a visitor visits a page first time browser will download everything on the page and when we re-visit the same page, instead of downloading each element of page ie. CSS, images js browser pick these from the cache.
For example, you have 10 pages in your website and every page has the same element- Your brand logo. So when anyone visits any page of your site first-time browser will download the logo into the cache. For each additional page, you visit, the logo doesn’t need to be downloaded again, as long as the same logo is displayed, it’s already on your hard disk. As Google starts considering site speed as an SEO parameter, webmasters can leverage browser caching to improve site speed and get better search engine rankings.

Leverage Browser Caching for Images, CSS and JS

To leverage browser cache means you are specifying a time for how long your browser will keep your CSS, images, JS stored in the cache. To enable browser caching you need to edit your HTTP headers to set expiry times for certain types of files.

Configuring Apache to serve the appropriate headers

Method 1: Last-Modified

You can tell the browser when that file was modified. A server can return a Last-modified date along with the file (let’s call it logo.png), like this:

 Last-modified: Sun, 16 Mar 2016 03:00:05 GMT

So the browser will check that when was the cache of that particular file created. If it is newer than your last-modified it will load it from cache otherwise it will download it from the server.

Method 2: ETag

Instead of sending back the modification time, the server can send back the ETag (fingerprint):

 ETag: weblogo46573465 File Contents

The ETag can be any string which uniquely identifies the file. So now your file will be recognized by the fingerprint instead of the file name. so next time you send a fingerprint along with the file it will search for the fingerprint in the cache and get the corresponding file(if exists in cache else it will download it from the server). So here fingerprint and file work as a key-value pair.

Method 3: Expires

The above methods are cool But we have some more cool methods. What if we tell the browser that for how much long time you have to keep this copy of that particular file in your cache. The browser keeps using that copy of file until the expiry time. If you want to specify for a particular file you can set in your header like this

 Expires: Tue, 20 Mar 2015 02:02:51 GMT

Or if you want to all files or for all the files of particular type you can set in the .htaccess file You will find your .htaccess file in the root directory of your domain. In this file we can set our caching parameters to tell the browser what types of files to cache and for how much longer.

      ExpiresActive On
      ExpiresByType image/jpg "access 1 year"
      ExpiresByType image/jpeg "access 1 year"
      ExpiresByType image/gif "access 1 year"
      ExpiresByType image/png "access 1 year"
      ExpiresByType text/css "access 1 month"
      ExpiresByType application/pdf "access 1 month"
      ExpiresByType application/javascript "access 1 month"
      ExpiresByType application/x-javascript "access 1 month"
      ExpiresByType application/x-shockwave-flash "access 1 month"
      ExpiresByType image/x-icon "access 1 year"
      ExpiresDefault "access 2 days"

Depending on your website’s files you can set different expiry times. If certain types of files are updated more frequently, you would set an earlier expiry time on them (ie. CSS files)

Be careful if you are setting a long expiry time because if in between you have changed your content, a user might be getting the old version of your page instead of a fresh version.


  • Leave a Comment

    Your email address will not be published.


    Sunil Kumar

    I am the owner of acmeextension. I am a passionate writter and reader. I like writting technical stuff and simplifying complex stuff.
    Know More

    Join more than 10,000 others Web Developers