Specify browser cache in WordPress

Let’s start with an apparently simple question: As we can get the shortest download time from a web page, image or other resource from a website?

When asked a question, we will almost always answer the same thing: reduce the size of the page, image or resource, optimize the hosting server to achieve better performance, use cache plugins or a network of CDN servers, among many possibilities.

All those answers would be correct, we reduced the download time, but … can there be something faster than not needing to download that web page, image or resource at all because it is already stored in the user’s browser?

In this case, the download time would be zero: Nothing to download!

In this article we will see what it is and how we can configure browser cache from the web server or WordPress of our website, so that only the files that are really needed to show all the content of a web page and get a really fast response time and improve the loading speed are downloaded from the web server WordPress.

What is the browser cache?

To understand what the browser cache is, let’s first review the communication that occurs between a browser and a website when a user wants to see a web page from that site:

  1. The user enter address of a web page in your browser.
  2. The browser makes a request to the web server corresponding to that address for him to deliver that web page.
  3. The web server receives the request and send the HTML file corresponding to that web page.
  4. The Navigator “parse”This file (that is, it reads the content of the web page) and requests the web server to send it all necessary resources so that this web page can be displayed (scripts, style sheets, images, etc.).
  5. The web server answer all these requests and send the requested resources.
  6. The web browser generates the web page on the user’s computer, using all downloaded resources.

As can be seen in this process, for each resource necessary to generate and display a web page, it is necessary, first, to request that resource from the web server and, second, that it send it to the browser.

It is possible that some resources may be downloaded in parallel, but this request and response exchange consumes time that is added to the total download time from the website.

When a user accesses a web page, this whole process is done completely; that is, request and download each and every one of the resources that make up this website. And if the user visits that web page again (something quite frequent), all the resources would have to be downloaded again …

Now, if these resources had not been modified since your last visit, would they have to be ordered and downloaded again? How could we avoid having to repeat this whole process again?

The way to avoid this is for the browser to store the files of the resources downloaded during the first visit to that web page on the hard drive.

Thus, when the user visits that page again, the browser no longer has to request and download them, but can retrieve them directly from the hard drive. In this way, the web page can be displayed to the user much faster.

This is what is called browser cache: it is a copy of the files of a web page, which is stored in our browser when we first access that web page.

With this consideration, the previous communication between the browser and the server would look like this:

  1. The user enter address of a web page in your browser.
  2. If the HTML file of that page is in the browser cache, jump to point number 5.
  3. The browser makes a request to the web server corresponding to that address for him to deliver that web page.
  4. The web server receives the request and send the HTML file corresponding to that web page.
  5. The Navigator “parse”This file (that is, it reads the content of the web page) and requests the web server to send you resources that are not in its cache.
  6. For non-cached resources, the web server responds to your requests and send those resources to the browser.
  7. The web browser generates the web page on the user’s computer, using all the resources downloaded from the web server or recovered from its cache.

In this way, the web browser can now generate a web page without having to send any request to the website, when all its resources are stored in the browser’s cache.

How long do resources remain in the browser cache?

The key in the above browser cache definition is in the expression “For a certain period of time”. The resources are not stored indefinitely, but for a limited period of time, which can be different for each type of resource (be it image, script, style sheet, etc.), after which it is cleared from the browser’s cache.

This condition is very important: in the absence of this time, if there were any changes to a previously visited web page, the user would never see it, since it would always display the page cached in the browser.

Later, we will see how we can specify this period of time (“Browser cache expiration time”) for each type of resource.

Why is it good to specify the browser cache?

The website determines whether the resource that is downloaded from it should be cached in the browser, with these two possibilities:

  • Expiry time. The browser stores that resource in its cache and, after the specified time, discards it. As long as the expiration time is not reached, the browser will retrieve that resource from the cache.
  • Do not frisk. In this case, the browser will not cache that resource, or type of resource, and will always download it from the website, even if you visit it repeatedly in a short space of time.

The expiration time value in the browser cache is also relevant, no value is useful, neither too low nor too high.

There is little advantage, for example, in indicating a very short expiration time, especially if this resource is modified very few times or even never.

Thus, Google’s performance evaluation tool, PageSpeed ​​Insights, takes into account the value of the expiration time of the resources of a web page when it analyzes its performance and assigns it a score.

In the following image, the PageSpeed ​​Insights report recommends increasing the expiration time of the indicated static resources:

PageSpeed ​​Insights Cache Browser

Therefore, in addition to caching the files on our website, we must also try assign them the longest expiration time, without compromising that the user sees the updated content when they visit the website again.

That said, the main advantages of specifying the browser cache are:

  • The user gets a better browsing experienceSince you will have to wait less time for the web page to be downloaded and displayed in your browser.A better user experience will also favor the organic positioning of the website in search engines.
  • Free up memory resources, bandwidth and web server processor, that you will not have to send files that are already stored in your cache to the browser. In this way, the server can attend to requests from other users.
  • The pages of the same website usually share quite a few files (website logo, decorative images, script files, etc.). Since they are stored in the browser cache when one of their pages is visited for the first time, they are also available for the other pages that use them.Therefore, the benefit of the browser cache would not be limited to a single page of the website, but to all web pages that use the same resource.

Different cases in which to specify the cache and why do it

Now, should we always specify the cache in the browser for all resources?

Let’s see below in which cases we should always specify the cache and when it is convenient, not just deactivate it, but assign it a low expiration time:

    • The expiration time of static HTML pages It will depend on each website and its content update or modification policy, so we will have to evaluate it individually for our website, although an expiration time of one week should be more than sufficient.However, since it is important to always show the most recent content, we must adjust it to the average frequency of updating the website.
    • Common website imagesAs a logo, decorative elements, banners, etc., they usually remain static for practically the entire life of the website or are changed very rarely. Being common, the benefit of specifying a high expiration time, from one month from the last access, benefits all the web pages of the site.
    • The script files They can be of three types: their own, plugins and the theme used.As they are so varied, their refresh rate will vary greatly and can affect the behavior of the website, so it cannot be set too high. One week from last access should be sufficient.

 

 

  • CSS style sheets They are also not frequently modified, although they can also be presented in the same three types as scripts, with the same considerations.An outdated style sheet (i.e. retrieved from the browser’s cache) can alter the look of the entire website, not just one page, so a not-too-long time, like a week, is appropriate.
  • Other types of resources, such as documents, audios and videos, they are rarely modified, so they can be assigned a long expiration time, greater than one month.As they are files that are downloaded and are not integrated into the design of the website, even if they are outdated they do not interfere with the visual appearance of their pages.

In general, all the resources of a website should have a relatively low default expiration time (for example, an hour or a day) and, based on this value, assign to each type of resource the expiration time that we consider most appropriate for our website based on your refresh rate, taking as reference the values ​​we have just seen.

When we use WordPress, plugins and theme can use external resources to our website, which must be downloaded in order for the browser to display the web page.

Like any other resource, the browser must download them from the web server where they are hosted.

However, we have no control over the expiration time of these resources, since they are not on our server.

For example, in the following PageSpeed ​​Insights report, most notices about browser cache usage refer to external resources:

External Resources Cache Browser

In these cases, the only thing we can do is locate which plugin uses that external resource and, if we see that it may be affecting the response time of our website too much, look for another plugin that works similarly that does not use external resources.

In any case, you also have to evaluate the impact that these external resources may have, if they have a very short expiration time.

For example, in the previous image, the resources are very small, a few KB, so they download very quickly and, in addition, they are scripts, so it is convenient that they be updated as soon as possible, as they could affect the operation of the entire website.

How to specify the browser cache in WordPress

Now that we are clear about what the browser cache is and how we can use it to improve the browsing experience of our users, it is time to see how we can specify the expiration time on our website in WordPress.

The expiration time setting can be specified at three levels, depending on the static resources it affects:

  • To the entire website. All resources on the website will have the same expiration time, regardless of their type.It seems the quickest and easiest solution, but using only this option would mean that all the resources would be cached at the same time, even if their refresh rates are different.
  • By types of resources. A type of resource, in general, is equivalent to a file extension, to indicate that they are resources that have the same structure or function, for example, images, pdf’s or scripts. Each type of resource has an identifier associated with it, on which the expiration time is specified.It is important to point out that resources that apparently seem the same (for example, images), may not be, since an image in JPG format is not the same as another one in PNG format.
  • For each resource individually. Only applicable to HTML pages, using meta-tags with the CACHE-CONTROL parameter.We should avoid using this possibility, since it requires that each resource individually has its expiration time associated and its management, especially in large sites, would be unmanageable.

With these configuration options, the best strategy to specify the expiration time in the browser cache for our website would be:

  1. Specify a default expiration time for the entire website, so there is no need to specify it for all resource types. Its value will depend on the activity of the website, although values ​​between 1 week and 2 weeks will work for almost everyone.
  2. Identify types of resources of the website and analyze its possible update frequency.
  3. Assign the expiration time to each type of resource suitable according to its refresh rate.

At the end of this section, you will see a video that shows two ways to specify the browser cache in WordPress, with and without a plugin:

Without plugin

In a web server with Apache, the browser cache can be specified through the file .htaccess, which is in the folder / public_html from server:

Htaccess file

Through the cPanel File Manager (or the web control panel that we are using), we can edit this file and enter the commands corresponding to the browser cache settings.

In general, these commands will have the following structure:

## EXPIRES CACHING ##

ExpiresActive On
ExpiresActive "access plus 10 days"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/svg "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/plains "access plus 1 month"
## ExpiresByType text/x-javascript "access plus 1 week"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType application/x-icon "access plus 3 months"
ExpiresByType image/x-icon "access plus 3 months"

## EXPIRES CACHING ##

In this code, the content in bold font it will be specific to each website, while the lines before and after the box must be added for activate browser cache configuration module and thus be able to specify the expiration time.

The instruction “ExpiresDefault”Must be the first (after the activation instruction) and indicates what the default expiration time will be for ALL resources on the website.

In the image, it is configured for 10 days, counted from the last access and download of that resource in the browser.

Next, for each type of resource we must indicate:

  • The instruction “ExpiresByType
  • The MIME type of that type of resource (a concept similar to that of a file name extension). The most frequent MIME types are images, videos, texts, documents, etc.
  • The expiration time of that type of resource since its last access. We can use units of time such as seconds, minutes, hours, days, week and month, written in English.

With plugin

Some server cache plugins (that is, they keep a static copy of WordPress web pages, so they don’t have to be regenerated with each visit) include configuration options to specify the browser cache, to activate or deactivate it, according to the guidelines of the PageSpeed ​​Insights tool.

If we do not use a server cache plugin that has this option, we have a plugin, Leverage Browser Caching, that solves the problem of the browser cache with PageSpeed ​​Insights automatically, without having to check the expiration time to each type of resource.

Although the plugins do not allow the degree of control that we can achieve through the .htaccess file, it specifies values ​​that are acceptable for most websites and, on the other hand, are sufficient to pass the PageSpeed ​​Insights performance test.

How to clear browser cache from your computer

Precisely for this situation (that a web page has been modified and a browser has cached it), browsers allow, on the one hand, clear your cache, so that it would be downloaded completely again.

Or, on the other hand, the possibility of reload that web page bypassing the cache, usually using the Ctrl-F5 key combination (for Edge, Firefox and Chrome browsers).

In the case of Chrome, the cache can be cleared with the following steps:

    • Click on the three vertical dots in the upper right corner of the Chrome browser window.
    • Select option “Setting”.

 

 

  • Scroll the page to the end and unfold the label “Advanced configuration”.
  • Inside the block “Privacy & Security”, to select “Clear browsing data”:

Clear Cache from Chrome computer

  • In the window that appears, select “Since ever” in the time interval (to clear the entire cache), check the box Cached files and images and press “Delete data”:

Clear Cache from Chrome computer

It may also be the solution when we encounter a 500 error or a

In our quest to improve the features and performance of our website, we must not only pay attention to how to optimize the web server and the WordPress manager, but also consider the possibility that the browser may use resources that you have already downloaded on a previous visit. .

The browser cache temporarily stores all resources that are downloaded from a website, for a certain period of time, so that if the user visits the same website, and another page on the same website that uses any of these resources, it is not necessary to download them again.

In this way, the user experiences a faster browsing speed and it frees the server from having to attend to and send those resources to the browser, without the need to modify or optimize anything on the web server.

To take full advantage of the capabilities of the browser cache, it is necessary to identify and specify for each type of website resource its expiration time in the browser cache, depending on its refresh rate: the higher the frequency, the shorter the expiration time.

The browser cache in WordPress can be specified without or with a plugin, but whatever option is chosen, it is important to correctly calibrate the expiration time, to prevent a user from seeing obsolete resources due to too high an expiration time.