In the web world as a web page becomes more popular and begins to have many visits, the cost necessary to serve these visits tends to increase proportionally, especially if we use a server language like PHP.
To reduce these costs there are many possible techniques, such as using a Content Distribution Network or CDN , minify and compress our CSS and javascript files, or use client-side applications such as React or Angular . One of the techniques that in my experience offers better performance is the use of Edge Side Includes (hereinafter ESI), which we are going to explain today.
Understanding the structure of a web page
If you browse any of your favorite web pages for a while, you will see that the structure is almost always the same:
- A header with your logo
- A central part that contains the specific information of that page (the cover, or a news, etc.) usually with images
- Others parts that are repeated on many pages, such as an options menu, access to social networks, an access form, an option to subscribe, etc. etc.
- The footer, which contains technical information or links like the legal notice
If we browse a web page for a while, we will notice that most of the pages are the same, except for a piece of information that is specific to each page, and that is what changes on each page or section.
CDN’s and ESI
When our website begins to have many visits, the first step is usually to activate a CDN, which is placed in front of our server, and saves our website for a time, so that it is not necessary to request it every time we want to see it. .
But as much as we have a CDN ahead of us, every time a page changes it is necessary to delete it from the cache and the CDN has to request the whole page again from the server, even if only a few lines have changed.
That is the point at which ESI appears to make our work easier. ESI allows us to divide a web page into smaller pieces, define cache times for each piece, and clear only those bits that interest us from the cache.
The following image shows us the structure of a web page:
If we want to use ESI, we can divide the page into different sections, such as:
In this way, we can make our CDN only ask our server for the parts that change. In addition, we can define a cache time for each of the parts, so that these pieces are automatically updated from time to time or use labels to define common parts and delete all advertising banners from the cache, for example.
Using ESI
To use ESI we will need to have in front of our web server an element that allows us to use ESI. The most common example is usually having varnish as a caching service, or using CDNs that allow ESI like Fastly or Akamai, and who will be in charge of putting the pieces together to create the final page.
Once we have correctly configured our cache, we must modify the code of our page, to separate it into different pages, each accessible with its own URL.
For example:
<html>
<head>
<esi include="/page-head.html" onerror="continue"/>
</head>
<body>
<esi include="/header.html" onerror="continue"/>
<esi include="/noticias/aparece-el-coronavirus.html" onerror="continue"/>
<esi include="/footer.html" onerror="continue"/>
</body>
</html>Finally, we have to tell our caching system to look for the tags and process them appropriately, which can vary depending on the system we are using, and which in the case of varnish would be similar to:
sub vcl_fetch {
if (req.url ~ "/*\.html") {
set beresp.do_esi = true; /* Do ESI processing */
}
}With this varnish code it will take care of doing all the inspection, request and composition process for the html pages that we have.
Clearing items from the cache
If we have a caching system that stores information for us, we have to manage content updates. For example, if on the main page of our website we show the 10 latest news, each time we add a new news, we must guarantee that the list of latest news on the main page is updated as well.
To do this, we can use different methods:
- Clear all cache: This method is always going to be the worst option we can use. There is no point in clearing the entire cache to refresh a few items
- Clear a specific URL: If only one specific page has changed, we can clear that URL from the cache to refresh that element
- Delete using X-Cache-Tags: Caching systems like Varnish or Fastly allow to mark each element with multiple labels, so that we can clear all elements from the cache Similar. For example, if all the advertising banners are in ESI, and have the same label, deleting that label will allow us to update all the advertising banners.
With this short introduction to ESI you can see the incredible potential it has, how simple it works and how much it can improve the speed and performance of our most viewed web pages.