Page speed "the time it takes for a user 's browser to receive information from your server and load a page" is one of the most important ranking signals in Google search results. Since fetching assets over the network takes time and resources, reducing the number of assets is a great way to lower load time.
How do you reduce the number of files needed to download without actually reducing the number of images or scripts on a page?
Using browser caching.
In our guide to browser caching, we'll cover
- What is Browser Caching?
- How to Leverage Browser Caching for SEO
- Optimizing Your Site's Caching
- How to Enable Browser Caching on Your Site
- Testing Your Site's Caching
What is Browser Caching?
Browser caching is the ability of a web browser to store files right on your computer and then loading those files from there the next time to you visit the page. This eliminates the need to redownload those assets, which can significantly reduce the time it takes the page to load.
When a browser displays a web page, it has lots of different things it has to load:
- Images
- CSS files
- Scripts
- Various other widgets and files
The next time you visit a page, load it with the Network pane open. This will show the assets loaded when the page is displayed, and how long each asset took to load.
You 'll probably notice that the time it takes to load certain assets goes way down when you load the page a second time. This is thanks to caching. These files are loaded directly from your local computer, increasing the efficiency of your browser 's connection the page 's server.
How to Leverage Browser Caching for SEO
There are 2 ways to leverage browser caching to speed up your page 's load time:
- Expires headers
- Cache-control headers
Both of these methods are enabled by adding code to your website 's .htaccess file.
The .htaccess file is very important for your website, so if you 're not familiar with working with one check out this guide on htaccess before attempting to make any changes.
1. Expires headers
To use Expires headers to your .htaccess file, add the following code to the beginning:
## 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 text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##
Going through that chunk line by line, you can see the idea behind Expires headers is not all that complicated.
The line ExpiresActive On enables the Expires module. Each line after that sets the amount of time a browser should keep a certain type of file in its cache. So in the example above, JPEGs and GIFs "any file that ends in .jpg, jpeg or .gif" should be cached for 1 year while CSS should be cached for 1 month.
To change those times simply replace "1 month" with however many months, weeks or years you 'd like.
2. Cache-control headers
The Expires method of caching works for most servers. However, not all servers will work with Expires. Plus, it 's a bit bulky to have a line for each and every file type you want to cache.
A simpler, but a bit more advanced way of enabling caching is to use what 's called Cache-Control.
To use Cache-Control, add the following code to your .htaccess:
# 1 Month for most static assets
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
The first line, the one with the hash, is just a note. Your file will ignore this, but it 's useful to leave for others who might be working on your site, especially as your caching optimization grows more complex.
The next line, <filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">, is saying to do something with any file type that matches one from the list. In this case CSS, JPG, PNG, GIF, JS and ICO. If you didn 't want one of those files to be cached the same amount of time as the others, simply remove it from that line.
The third line, Header set Cache-Control "max-age=2592000, public", is where the actual header is inserted and the caching time is actually defined.
The Header set Cache-Control part sets the header, while the "max-age=2592000" part says browsers should store the files for 1 month (2592000 seconds). Time values here are always in seconds.
The public part says that it 's public on your server.
Finally, the last line </filesMatch>, closes the block of code.
Optimizing Your Site 's Caching
You 'll notice that most files are cached for either 1 month or 1 year. If you think about it, most files on your website don 't change all that often. Some, like your logo, CSS or blog images, won 't change for years.
It 's best to set these files to cache for longer (Google recommends at least a week but a month or a year is probably better) so you don 't waste resources redownloading files that haven 't changed.
However, remember that sometimes these files do change in the middle of the period defined by your .htaccess. This can cause users to see out of date assets when they visit your pages.
URL fingerprinting
A way around this is to use unique file names when updating something like your logo or CSS. If your logo is currently logo.jpg, name the new one logo_1.jpg. When a browser sees a file that doesn 't match one it 's stored in its cache, it will download the new one.
This method is known as "URL fingerprinting" and useful for files that will change from time to time.
ETags
Another method to handle changing files is to use entity tags. ETags, as they 're known, are unique identifier tokens for assets on your website. When a browser loads a page, it looks at the tokens for the assets currently on the page and compares them to the ETags for the files stored locally.
It will then only download any assets that don 't match the ETags stored in the cache.
There is no specific way to generate ETags. All that matters is that they change every time to load a new version of a file onto your site.
Learn more about creating and adding ETags here.
How to Enable Browser Caching on Your Site
Browser caching is something you can set in your .htaccess file. If you 've got a WordPress site, there are lots of plugins you can use to edit your site 's .htaccess file. If you aren 't using WordPress, you 'll do this through whatever file manager you use to upload files to your server.
To enable browser caching, you 'll add some lines to code to your .htaccess file that defines how long a user 's browser should keep a copy of different types of files. You can cache each type of file for a different amount of time if you 'd like.
Testing Your Site 's Browser Caching
Test how long your site 's assets are cached, or whether or not you 've enabled caching, by checking your .htaccess file as discussed above. If the file doesn 't include the code necessary to enable caching, add it.
Even if your site does enable caching, you should still validate the code to make sure you are caching everything correctly. There are a number of tools available that will check caching on your site:
- Your site 's WooRank Review
- Google 's PageSpeed Insights
- YSlow from Yahoo!
- Pingdom
- GTmetrix
