Improve your website’s page speed and user experience by learning how to leverage browser caching with htaccess or plugins.
If you are reworking your website, implementing updates, or simply building a website, you have probably heard about browser caching. You know that your website looks good from your perspective, but you need to see it how other people will see it to really get a feel for how effective it is.
But when you go to look at it by searching for your website or just typing in the URL, you notice a problem: you don’t see any of your updates. You are probably worried that you lost them, but fear not! Your browser cache is doing its job.
You’ve likely heard of browser caching, but it wasn’t something that you ever had to really deal with at all. We all have to clear out our browser cache every so often so that our laptops work properly, but other than that, we don’t really need to touch them.
Your web browser, no matter which one you use, is a software application that has a cache. That application searches, identifies, and shows us the websites and other information via URLs. Your browser cache will save information and data, including images and HTML, that is necessary to see the website.
It is then saved to help bandwidth, so the next time you visit that website, it will take less time to download the page. The data will load automatically, so you may not always see the latest versions of a website unless you periodically clear your browser cache.
Caching will improve speeds and browsing. Once the data is stored, visitors to your website will have a better experience as they will be able to move through your site faster. Certain assets, like logos or contact information, are likely to appear on every page of your website in the same place.
Without caching, visitors will have to download that information on every new page. In many cases, including eCommerce sites, it will just take up too much bandwidth. As you get more and more traffic to your website, it can become too much for your server to handle if everyone has to redownload assets.
Mobile devices are already limited by bandwidth, some mobile data plans will have bandwidth caps. The more a website can be cached, the less data it will use. Even so, mobile performance is key to a brand’s success. Your browsing cache can last for months - which is important when your own interests come and go.
You should care about browser caching because it helps customers move through your site easily. You will get the chance to keep people on your website because they can just easily click around. There are some plugins to improve page loading times, so you can stay on top of any slowing or make-up for slow periods when you may be performing site maintenance.
If you build websites, you may use a DAM Tool to help with the management of content files that are large and require a lot of space on your server. This is just another way to make your website run faster.
However, you need to care about browser caching because there are some definite pitfalls. You need to ensure that people aren’t loading information, logos, or pages that aren’t correct or are broken.
Not all users are savvy enough to know that if something doesn’t look right, it is probably time to clear their caches. If you are worried about customer acquisition, you need to put your best foot forward when they are searching – so customers are likely to be repeat visitors to your website.
The “Leverage Browser Caching” warning on Google is a common warning that developers will see as they test their page performance on some of the most popular speed testing tools. It looks like this:
This warning stems from how browsers have been instructed to cache static assets from the webserver. If you do not have any caching rules in place or you have set the expiration times too low, this warning will be deployed.
When you leverage browser caching for your website or blog, you are making it easier for the page to load.
Browser caching can be used for different types of files. The following file types can be cached:
There are a few different ways that you can leverage browser caching:
In order to leverage your browser’s caching, you need to determine how long web browsers should keep the images, JS, and CSS stored locally. You can do this based on industry standards or your own timeline. You will have to look at how often you change your website.
To enable it, you need to add these specific lines of code to your .htaccess file:
## EXPIRES CACHING ##
<IfModule mod_expires.c>
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"
</IfModule>
## EXPIRES CACHING ##
You can change the timeline by changing the “access 1 year” text to your set length. This method is often referred to as “Expires,” and it is the most commonly used approach.
There are also plugins that you can use to leverage browser caching. These will help you to obtain more one-stop control over your caching. Many of the plugins will have other features as well to make them more enticing. They will work with your speed tests to provide optimal results.
Plugins work by adding the browser caching code inside the htaccess file. There are a few other approaches, but most of the popular ones will do this. You usually won’t have too many personalization options with plugins.
There are so many different WordPress caching plugins that it can be really difficult to determine which ones are meant for you and which ones aren’t. WordPress is powering 35% of websites now and it looks like that number will continue to rise.
You will need to do some research into different options to see which one meets your needs. Regardless, our top three are:
Unequivocally, the best and most popular caching plugin (thanks to more than one million installs), W3 Total Cache is a great option. It is an open-source plugin, which means that it is free to use and you can get access to all the additional features. It saves other speedsucks, including HTTP compression, feed optimization, and bandwidth.
This is a popular choice because it works for mobile and desktop websites and will integrate with your website’s CDN.
You should know that this is a bit more complex than other plugins, so it may not be the best selection for beginners.
Hyper Cache is another great plugin option. It will work with virtually every blog without the need for complex configurations. It helps to optimize your bandwidth and decrease loading times. This plugin is more of a “set it and forget it” situation, which will work for most website managers.
Hyper Cache is a free plugin that offers CDN support and mobile-friendly caching. If you have a website that has a ton of user-generated comments, it is a great option. Want to know one more factor that we love? It has website backups, so you can use those in a pinch!
It is best for websites that are not too complex.
Comet Cache is another perfect option if you are in a hurry. You will be able to install it and start working with it quickly. It is also an informative plugin, so you can learn more about caching and how to use it to your advantage. If you like to learn about things, this is the one for you.
There is a free version of Comet Cache or a paid version with additional options. The free version is great, but the paid upgrade is also quite good. If you upgrade, you will be able to utilize their intelligent clearing, which helps for those who really don’t want to touch their systems.
You can test your cache for free with a Single Page Analysis from Ryte. It will show you if browser caching is enabled on your website. All you have to do is enter a URL from your website in the search bar and click on "Single Page Analysis." If browser caching is not enabled, you will receive a warning message.
Your browser cache is an important piece of your website’s design because it improves user experience. However, you need to be careful about what the cache keeps and what it doesn’t. If you have updated information, you don’t want the wrong graphics to be displayed. A plugin or changing the code yourself should help - as well as just paying attention to your site daily and troubleshooting issues as they arise.
Speed up your website!
Analyze your website performance with Ryte FREE
Published on 07/29/2020 by Max Benz.
Max Benz is head of content at Filestage, an online proofing software, and loves creating actionable content that really makes a difference. On the side, the remote work enthusiast is running the blog Let's be crazy and the German remote job board remote-job.net.