All about browser caching! Our XXL article on increasing your pagespeed

Thanks to browser caching, files do not have to be downloaded again and again when a website is called up, but are stored in the browser.

 

Users benefit from the fact that the waiting time until a website is fully loaded is reduced. The shorter loading time of pages also has advantages for website operators: Thanks to the higher page speed (page loading speed), the ranking in search engines is positively influenced.

 

Find out all about browser caching and how to use it correctly in our blog post!

 

What is the browser cache?

The browser cache is the cache of a web browser in which copies of previously accessed resources (e.g. images, JavaScript files, videos) are stored.

 

If a page on the Internet has already been accessed once and some of the resources have been saved in the browser cache, the page loads faster on the second visit. The reason for this is that the data does not have to be downloaded again, but can be retrieved from the cache.

 

You can imagine the browser caching process as follows:

 

• When you visit a certain page on the Internet for the first time, all elements on this page must be downloaded. Visiting a website therefore always involves downloading data.
• Some of the elements on websites change regularly, others are static. The static elements of websites are suitable for the browser cache. They are stored in the cache of your browser.
• The next time the page is called up, the browser accesses the resources stored in its cache. As a result, it has to request less data from the server and the server has to send less data.

 

The concept of caching is widespread. It is also used by proxy servers in larger computer networks . If there are a large number of participants in the network, the proxy server arranges for the resources from the cache to be sent to the users. This means that it does not have to forward the client's request to the server and it is not necessary to traverse the Internet to retrieve the resources.

 

Even the mere definition of the browser cache reveals its great advantage: it leads to an optimization of the loading speed. As communication with the server is shorter and resources can be retrieved directly from the memory, they can be made available more quickly.

 

Advantage: Speed

The advantage of browser caching is the optimization of loading speed. As an SEO agency, we at Specht GmbH use browser caching to increase pagespeed (page loading speed). A high page speed is one of the most important ranking factors for search engines such as Google.

 

The faster your entire website and all associated subpages load when accessed by users, the better your chances of achieving good rankings in the search results. High rankings in the search results go hand in hand with better visibility, more website visitors and faster achievement of your individual goals. Improved page speed also has a positive effect on the user experience (UX).

 

In on-page SEO, the following options for improving the loading time should be considered in particular:

 

• Compression of images
• Removal of superfluous plug-ins from the CMS
• Use of the browser cache

 

Google supports website operators (webmasters), SEO experts and online marketing agencies in search engine optimization. It provides numerous useful tools for optimizing your own website, such as Google Search Console and Google Analytics. The search engine operator also provides tools to reduce the loading time of websites with Google Pagespeed Insights a useful SEO tool for reducing the loading time of websites.

 

Disadvantage: Timeliness

One disadvantage of browser caches is their potentially limited up-to-dateness. As a user, you cannot know when webmasters update individual subpages or even entire websites. The resources stored in the cache may be out of date after updates.

 

Both webmasters and users have a responsibility to avoid the problem of out-of-date content. Webmasters decide whether they want to use caching and which resources should be cached and for how long - we will discuss how webmasters can correctly define the rules for caching in the next section.

 

While webmasters are called upon to select only static resources for caching to ensure that data is up to date, users are responsible for emptying their cache regularly. Clearing the cache deletes all content stored in the cache.

 

If a page is reloaded after the cache has been emptied, all updates to this page are displayed. In addition, the updated and therefore new static resources are stored in the cache so that new content is loaded from the cache the next time. The regular emptying of the cache also has the advantage that the hard disk of the end device is relieved and, as a result, the performance of the end device is higher again.

 

 

Correctly define rules for storing resources in the browser cache

There are two sides to the implementation of caching: the theoretical side and the practical side. We will go into the practical side in the next section. First of all, we would like to expand on the theoretical knowledge about caching already provided in this blog post so that you understand the practical part even better. So far, you know what you need to know:

 

• Caching resources from your website in the user's browser makes perfect sense, as it helps to increase the loading speed of your website and all subpages.
• To ensure that the resources stored in the browser cache are up-to-date, webmasters must define the rules for caching correctly.
• Users also have a responsibility: it is recommended that the cache is emptied regularly to keep the data up to date.

 

When defining the rules for caching as a webmaster, it is best to differentiate between three time periods: long-term, medium-term and short-term. You assign each resource to one of these time periods. This ensures that the respective resource is automatically removed from the cache if it is out of date.

 

Recommendations: When which resources should be loaded from the cache

To ensure that the resources in the browser cache are up to date, as a webmaster you should only cache static resources for the long term (e.g. for one month; one year). Examples of static resources are JavaScript files and CSS files. Here is an overview of the resources suitable for caching:

 

• CSS, HTML and JavaScript
• Image files such as JPG, JPEG, PNG and GIF
• Object files such as videos and PDFs

 

Take images as an example: The logo of a company or the infographic in an informative article does not change at all or only after several years. Images such as logos can therefore be stored in the browser's cache for a long time without any problems, as they remain up-to-date for a long time, for example over a year.

 

The fact that resources such as CSS, HTML and JavaScript can also be saved in the browser cache means that the layout of a page can be saved , for example. Saving CSS files in particular has a positive effect on the performance of websites. CSS files can be saved for a period of one month.

 

All other files that change regularly - perhaps even several times within a day - should be stored in the browser cache for a maximum of a few hours. HTML files are an example of short-term caching periods. These are used for formatting texts, among other things. As texts are often changed, all associated files should be reloaded each time if possible.

 

Header: The information is stored here

In the page structure there is the so-called header. These define rules that govern, for example, the exchange of information between the browser and server or crawling by Google's algorithms. As the rules for caching are also stored in headers, they play a central role in browser caching.

 

Commands are used in the caching header to specify which resource or file may be cached. If no corresponding information is set, no caching takes place. A distinction is made between two caching headers: the Cache-Control header and the Expires header.

 

The Cache-Control header contains information on which resource or file may be cached at all. The following instructions are common:

 

• no-cache: The browser may cache, but must ask the server whether the respective resource is the latest version.
• public: The resource may be saved in the cache.
• private: The resource may be saved in the cache, but only by the browser and not by any existing proxy servers.
• no-store: It is not permitted to temporarily store the resource.

 

While the Cache-Control header indicates which resources and files can be stored where, the Expires header is used to define time periods for caching. The recommendations from the previous section of this blog post can be implemented in this caching header: By specifically naming a time period in the Expires header, the browser knows from which point in time it should request a new copy of the respective resource or file from the server and cache it.

 

 

Implementation: How to use the browser cache correctly!

There are two ways to implement caching. The simple way is to use plug-ins in the CMS, the complicated way with greater control over caching is to change the htaccess file.

 

Set up caching via htaccess file

The htaccess file can be found in the root directory of the website under the name ".htaccess". Open the htaccess file and first activate browser caching via the "mod_headers" module by using the following command as administrator:

 

a2enmod headers
/etc/init.d/apache2 restart

 

Next, you have the option of specifying the file types for caching. On the one hand, you can combine all file types, as in this example:

 

<IfModule mod_headers.c>
<FilesMatch “\.(gif|ico|jpeg|jpg|png|css|js)$”>
Header set Cache-Control “max-age=604800, public”
</FilesMatch>
</IfModule>

 

Secondly, when defining the file types for caching, you can set different defaults for the different file types by simply starting a new file match line:

 

<IfModule mod_headers.c>
<FilesMatch “\.(gif|jpg|jpeg|png)$”>
Header set Cache-Control “max-age=604800, public”
</FilesMatch>
<FilesMatch “\.(css|js)$”>
Header set Cache-Control “max-age=2592000, public”
</FilesMatch>
</IfModule>

 

The "max-age" specification indicates how many seconds (e.g. 604,800 seconds = one week) a file should be stored in the cache. The abbreviations gif, jpg, jpeg and png are formats for images, while css and js stand for CSS and JavaScript files respectively.

 

The browser always prefers the information in the "mod_headers" module just mentioned. The information in the alternative module "mod_expires" is only taken into account if there are no specifications in "mod_headers" as to how long files should be cached before they are requested again from the server. As a webmaster, you benefit from a better overview with the Expires module.

 

If specifying the caching periods in "mod_headers" is too time-consuming for you, start the Expires module using the following command:

 

a2enmod expires
/etc/init.d/apache2 restart

 

From now on, you can fill the Expires header with all the important information for the caching periods by setting the following instructions, for example:

 

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType image/jpg "access 1 year"

ExpiresByType image/jpeg "access 1 year"

ExpiresByType text/css "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"

ExpiresByType text/html "access plus 300 seconds"

</IfModule>

 

The last-mentioned line "ExpiresByType text/html" provides information on how long the entire page - i.e. all content on it - should be stored in the cache.

 

As the texts on HTML pages in particular change regularly, caching periods of 180 to 600 seconds have become established for HTML pages - provided that these pages are frequently visited and/or the content on the pages is frequently updated by the website operators.

 

Set up caching with the help of plug-ins

The most widely used CMS (content management system; system for creating and managing websites) is WordPress. There are plug-ins for WordPress that allow the range of functions to be extended. Some of the plug-ins are specialized in caching. For example, the following WordPress plug-ins allow you to set up and manage caching in the browser:

 

• WP Rocket
• W3 Total Cache
• WP Fastest Cache
• WP Super Cache
• WP Speed of light
• SG Optimizer
• Swift Performance
• Hummingbird
• Cache Enabler
• Comet Cache

 

These 10 WordPress plug-ins are already sufficient to set up individual caching in the browser, which increases the performance of the entire website and significantly improves the user experience of website visitors by increasing the speed at which the website loads.

 

Thanks to WordPress plug-ins, laypeople without any technical knowledge can easily regulate caching in the browser. In addition, some of the WordPress plug-ins (e.g. WP Rocket; Swift Performance) have further advantages. They help to holistically improve the performance and loading time of the website.

 

Conclusion: Set up caching and achieve significant SEO benefits!

As a webmaster or SEO expert, set up caching on websites and achieve far-reaching advantages in search engine optimization! With the help of plug-ins for WordPress and other content management systems, caching is easy to implement even for non-experts.

 

If you have basic technical knowledge, you don't even need plug-ins and use a few simple commands in the header of your pages to customize browser caching and offer your website visitors a good user experience.

 

FAQ: Questions and answers on the topic of "Browser caching"

In this last section of our blog post, we have compiled some of the most frequently asked questions from users. If you also have a question, we will be happy to provide you with an appropriate answer as search engine optimization experts. Get in touch with us and we'll get back to you!

 

How can website visitors influence caching?

Internet users can influence caching in a variety of ways. For example, they can completely deactivate caching in the browser settings. This would result in not a single resource or file being saved in the user's browser, regardless of the webmaster's instructions.

 

Website visitors can also set a maximum age for resources or define caching rules for an individual web page that differ from the caching rules for the rest of the website. It is also always possible to empty the cache.

 

How can I clear the browser cache?

This process varies depending on the browser.

 

With Google Chrome, website visitors delete the cache by first opening it with the key combination "Ctrl + Shift + Del". They can then select the images and other objects in the cache and initiate their deletion.

 

Users can also clear the cache in Internet Explorer using the same key combination as in Google Chrome. After using the key combination, a window opens with the information "Delete browser data". By selecting the option "Cached data and files" and clicking on "Clear", the browser cache is emptied.

 

The next time you visit a previously visited website, the files from the cache are no longer used after the cache has been emptied. Instead, the browser requests the current version of a website from the server.

 

What is the difference between browser caching and server caching?

While browser caching stores resources on the website visitor's hard disk, server caching stores them on the webmaster's server. Server caching therefore also contributes to a higher page loading speed.

 

The differences between browser and server caching therefore lie in the levels of data management, as different types of data are stored in different locations.