Leverage browser caching to make your webpages faster. If you can leverage browser caching, you can increase website speed considerably. This tutorial shows you how to leverage browser caching with MaxCDN to deliver assets to various users in the shortest amount of time. To leverage your browser’s caching generally means that you can specify how long browsers should keep images, CSS and JS stored locally.
Leverage browser caching : Speed up Your WordPress
Reduce the load times of pages by storing commonly used files from your website on your visitors browser.
- Reduce page load times for repeat visitors
- Particularly effective on websites where users regularly re-visit the same areas of the website
- Benefit-cost ratio: high
- Access needed
What is browser caching?
Some pages might only consist of a few files and be small in size – maybe a couple of kilobytes. For others, however there may be a lot of files, and these may add up to be several megabytes large. Twitter.com for example, is 2mb+.
The issue is two-fold.
- These large files take longer to load and can be especially painful if you’re on a slow internet connection (or a mobile device).
- Each file makes a separate request to the server. The more requests your server gets simultaneously the more work it needs to do, only further reducing your page speed.
Browser caching can help by storing some of these files locally in the user’s browser. Their first visit to your site will take the same time to load, however when that user revisits your website, refreshes the page, or even moves to a different page of your site, they already have some of the files they need locally.
This means the amount of data the user’s browser has to download is less, and fewer requests need to be made to your server. The result? Decreased page load times.
How to leverage browser caching
- Change the request headers of your resources to use caching.
- Optimize your caching strategy.
Browser caching for .htaccess
To leverage your browser’s caching generally means that you can specify how long browsers should keep images, CSS and JS stored locally. Of course, if you change any of those, the server will tell the visitor’s browser to clear that cache. To enable it, add those lines to your .htaccess file. The code below tells browsers what to cache and how long to “remember” it. It should be added to the top of your .htaccess file.
- Be aggressive with your caching for all static resources
- Expiry at a minimum of one month (recommended: access plus 1 year)
- Don’t set your caching more than a year in advance!
Common caching issue
If you list your html and images to be cached for one year or some other long time period, remember that this can mean if you make a change to your pages they may not be seen by all users. This is because the users will look to cached files rather than the live ones. If you have file that you tweak occasionally (example – a CSS file) you can overcome the cache issue by using URL fingerprinting.