Ensure Your Website Meets Technical SEO Requirements

Understand Caching

Caching is the process of storing data in a temporary and fast data storage area (cache) so that it can be more quickly and easily retrieved later.

You can cache anything:

• Images

• CSS and JS resources

• HTML pages

You can use several types of caching at many levels on your website. In this chapter, we will examine browser caching, which is the easiest to set up and is sufficient for most websites.

When someone visits a page on your site for the first time, their cache is empty. Their browser will download the contents of the page and save it to a temporary space.

The next time they visit the same page, their browser won’t need to redownload all the information. This helps the page load significantly faster!

Here are two other types of cache you could set up:

• Database caches: If your application or website is making a lot of queries to a database, it may be useful to install a query cache for information that doesn’t change often. This involves storing the results to some common queries to decrease database use and increase performance.

• Web application caches: You can also install a cache on your server; for example, nginx or varnish.

In any case, only cache information that doesn’t change often.

Set Up the Browser Cache

To inform the browser what files to cache and for how long, set up the HTTP headers:

• The Cache-Control header defines the maximum age of a resource (in seconds), i.e., the maximum time this resource remains valid.

• The Expires header is used to specify a specific time (a date) after which the resource is no longer valid.

They are complementary because some older browsers do not understand the Cache-Control header.

Example

Let's look at the Apache HTTP Server, which is the most widely used by hosting companies. The cache settings will be in your .htaccess file. Here is the code to add:

Code to Add for the Cache-Control Header

# BEGIN Cache-Control Headers
<IfModule mod_headers.c>
<FilesMatch "\.(ico|jpe?g|png|gif|swf|css|gz)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>
<FilesMatch "\.(js)$">
Header set Cache-Control "max-age=2592000, private"
</FilesMatch>
<filesMatch "\.(html|htm)$">
Header set Cache-Control "max-age=7200, public"
</filesMatch>
# Enleve le cache pour les ressources dynamiques
<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
Header unset Cache-Control
</FilesMatch>
</IfModule>
# END Cache-Control Headers

Code to Add for the Expires Header

# BEGIN Expires Headers
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
# END Expires Headers

Test Your Settings

It's important to test your cache settings. Depending on the particularities of your website or web application, it is possible that some resources change more often than others.

A tool like Cache Checker allows you to check that everything is being cached correctly and for the right duration.

You can then check that the cached resources aren’t updated more often than the duration of the cache.

This will allow you to adjust how long something stays cached based on how often that resource gets updated!

Let's Recap!

• A cache is a temporary data storage space, which helps to display the data more quickly subsequently.

• Browser caching speeds up load time for pages on your website for return visitors.

• Adapt cache duration to how often you update the resource. 

Now that you know how to set up browser caching, the next chapter will teach you how to speed up your website even more with a CDN!