Have you got a slow loading site?
Do you have a high bounce rate?
Then, let’s do something about it!
Find out how to leverage browser caching and make your website load faster, and why it’s worth the effort.
What is Browser Caching?
Each time you visit a website, the elements on the page you visit are stored on your hard drive in a temporary storage or cache. The next time you access that same site, your browser can load the page without having to send another HTTP request to the server.
So, your browser loads a web page, and all the web files have to be downloaded to display the page correctly. These include the following:
Some web pages may consist of only a few files and therefore, be small in size, perhaps just a few kilobytes. However, others may have loads more, and the combined total capacity of these may be many megabytes.
Waiting for several megabytes to ‘download’ into your browser can take a long time depending on your internet connection – not good news.
The main problem here can be summed up in two parts:
- Significant amounts of data will take longer to load and can be very annoying if you have a slow internet connection or you are on a mobile.
- Each file makes an individual request to the server, which means that your server is having to do a lot of work simultaneously. As the files can’t all be requested at once, there is going to be a considerable reduction in page loading speed.
How Browser Caching Can Help
Browser caching can help as some of these files are stored locally in the user’s browser, which will make them faster to retrieve next time.
Therefore, the first time they visit your site it will take the same time to load, but whenever that same user returns to your website, load time will be significantly reduced.
Why and how?
- Some files will already be stored locally on their computer, so these files will all load much faster.
- As there will be fewer data requests made to your server, there will be less data to download to the user’s browser – so speeding up page loading time.
- Faster page loading means lower bounce rates, as visitors rely on speed and efficiency and are not prepared to hang around and wait.
- Lower bounce rates mean that fewer visitors are leaving your site prematurely – you see where I’m going?
Wow! See how a delay in page load time can affect the bottom line of your business!
How To Leverage Browser Caching
You can see from the WebPageTest taken before I implemented the code snippet that my site scores a low grade ‘F‘ for Cache static content.
For most folks, the way to enable caching is to add a little bit code to a file on your web host/server called .htaccess. This can be found by either:
- Going through cPanel and clicking on the File Manager, or whatever location you go to add and upload files to your web host, or
- Via FTP (like FileZilla or another such FTP host) and finding your .htaccess file in the root directory of your website.
Accessing the file is easy enough, but remember this file controls several important things for your website.
Be wary of deleting any existing data.
Modifying the .htaccess File
Once you have located the file, you will need to open it in a code editor – I use Sublime Text 2 as my preferred choice, but there are loads of others.
The code we add will tell browsers what to cache and how long to remember it for.
By using this code, the main static files, CSS, JS, images, PDF’s, etc. will be cached resulting in faster load times in the future.
Ensure you add the snippet to the top of your .htaccess file:
## EXPIRES CACHING ##
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/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
## EXPIRES CACHING ##
Now, save your .htaccess file.
Congratulations! You now know how to leverage browser caching and have implemented it successfully on your site!
I went from a grade ‘F‘ to a grade ‘C‘ with just this implementation!
There is always more that can be done to optimize further your site, so every small chunk helps.
Using a Plugin Can Also Help
Installing a good plugin, like WP Rocket, W3 Total Cache, Super Cache or Comet Cache is advisable, as caching will happen automatically. There are often a bunch of extra settings to enable further customization depending on which plugin you have installed and activated.
But, accessing your .htaccess file and placing this snippet of code into it ensures you are off to a good start.
Speed Up Your Website – Optimize Images To Improve Performance
7 Ways To Optimize Website SEO | Improve Your Rankings
Find Great Keywords – Use The Best SEO Keyword Tool
It’s straight forward enough to leverage browser caching in WordPress using this tutorial, so keep on optimizing for your visitors – enjoy!
- Review of VideoScribe – Awesome Animated Video Software - February 13, 2017
- Best Amazon WordPress Plugin for eCommerce | WooZone - May 20, 2016
- How To Make Money By Blogging | A Useful Guide - April 8, 2016
- Best Animation Software for Beginners is Fun and Easy to Use! - March 29, 2016
- What Is FileZilla? | Popular FTP Client to Transfer Files - February 29, 2016
- How to Leverage Browser Caching Using .htaccess - February 21, 2016
- How To Back Up A Computer To An External Drive - December 30, 2015
- Powtoon Review: Free Presentation Software - December 15, 2015
- Whiteboard Animation Software is the Secret Ingredient | See Why! - August 16, 2015