In the battle of web performance, it’s easy to feel overwhelmed by all the various weapons in your arsenal. From on-page optimization techniques, to server-side manipulation, winning the war of sluggish website performance can feel like a never-ending battle. Thankfully, some of the most successful optimization techniques are also some of the easiest to implement.
While on-page optimization is an essential component when maximizing website speed, browser caching is perhaps the most influential. If you’ve noticed your website still underperforms after you’ve implemented a variety of tactics, maybe it’s time to zone into your browser cache system. You may be surprised this is the solution you’ve been searching for.
An Overview of Performance Essentials – Browser Caching
Although browser caching may seem like a tricky topic to master, it’s surprisingly easy, but only if you understand what this term actually means.
Essentially, browser caching is when a web browser, such as Chrome or Safari, stores the resource files of a website within its local hard drive. The purpose of this is to expedite loading times when the end-user visits the same website again at a future date.
According to Google, to maximize efficiency and boost page ranking, you should leverage browser caching. Don’t worry, this isn’t as complex as you may think. In short, leveraging browser cache is when you tell the browser how to store and deal with your website resource files.
The Basics of Leveraging Browser Cache – Tips and Tricks
Have you ever noticed that it takes longer to load a website you’ve never visited than one you’ve visited multiple times? The answer for this is browser caching. The key to using this already imperative technique to your advantage is learning how to leverage browser caching.
The first step in this process is fairly simple. It requires you to change request headers of website resource files that are called upon when your site is cached. In general, look to cache the following file resources:
- Static Images
- Stylesheets
- Javascript (static Javascript files)
- HTML Documents (only for static HTML)
- API Calls (not very common, but also possible)
In general, you’ll want to cache as much content as you can. However, this should only be done with site resources that don’t frequently change. You’ll notice that content, such as user-specific data, isn’t included in this list. The reason? This data is volatile in terms of its stability. Data elements that are constantly manipulated or changed shouldn’t be cached.
Moreover, it’s important to know how long a static resource file should remain cached in the end-user browser.As a rule of thumb, different file types should have different cache time limits. While static images can remain cached for up to one year, it’s a good idea to place an expiration on more volatile files, such as:
- Stylesheets
- HTML Documents
- Applications
- Javascript
In general, these files should have an expiration date of at least one month. This prevents the end-user browser from calling upon an old and outdated version of your website. Manipulating browser cache expiration dates is done in the .htaccess file. Make sure to always create a backup copy when altering this document.
