What is browser cache?
The browser cache allows you to bypass server connections and use resources from your local computer. It works like temporary Internet files that take up a lot of space on our computer. You want it to exist, as it helps speed things up, but you don't want it to always exist, as things can change on a website. You can set this refresh rate for whatever the expiration time is, the longer the better.
List of expiration dates
In most cases, expiration times can be set in seconds. Here is a list of possible browser cache expiration dates:
- 3600 seconds (hour)
- 86400 seconds (day)
- 172800 seconds (two days)
- 604800 seconds (week)
- 2592000 seconds (month)
- 31536000 seconds (year)
Google recommends a minimum cache time of one week and preferably up to one year for static sites that change infrequently. For most sites, it's true.
However, the appropriate expiration time depends largely on the frequency of content changes. If you have a news site, your home page changes all the time.
You can set the expiration time for your web page content (HTML) to 3600 seconds (1 hour) without any problem. However, if you load a CSS file on that home page, that will probably only change during a redesign. The expiration time of that CSS file can easily be 31536000 seconds (one year). Please test and find what works best for your type of content.
Checking the browser cache
In this section, I'll show you a couple of site speed tools used to check browser cache. Which one you want to use to check the browser cache for your website depends on personal preference.
YSlow
My personal favorite for browser cache control is Yahoo's YSlow. It is available as a browser extension, works quite fast and checks much more than just browser cache expiration times. Here is a screenshot:
ETags
In addition to a simple header expiration check, YSlow also allows you to check entity tags, which are also called “ETags.” These ETags are used to “determine whether the component in the browser cache matches the one on the origin server.” This helps determine if a new file is available. Keep in mind that ETags tend to slow down a website, so please dive into the topic and see if you really need them.
As you can see in the image, the first file is a CSS file that has an expiration time of one day. I do not think that it's necessary; In most cases, set expiration times for CSS files to one year.
Google Insights PageSpeed
Google provides its own browser caching checker in PageSpeed Insights. If the 'Should fix' section contains the recommendation 'deliver browser cache', you should definitely address this issue.
If these tools are not clear enough, there are more tools that we depend on to do additional checks, such as Pingdom and GT Metrix.
WordPress Plugins That Help Browser Cache
Browser caching is something that can be set, for example, in the .htaccess file. For most users, it's probably not something you do every day. However, if you're using WordPress, you're in luck. There are a number of plugins that can help you with this. We have made a list below.
RocketWP
W3 Total Cache
In WordPress (with this plugin installed), go to Performance > Configure Expiry Headers and enable them. After that, go to the separate sections for CSS/JS and HTML and choose the expiration for your specific section.
Rocket WP is really my first recommendation. But if you are well versed in speed optimization, feel free to check out W3 Total Cache as well.
