What Is Edge Side Includes (ESI)?

Updated on October 4, 2018

What is ESI?

Edge Side Includes, or ESI for short, is a small XML-based markup language that allows for dynamic web content assembly. According to the W3 ESI documentation, ESI is designed to improve perceived performance, reduce processing overhead on the server, and enhance availability. By allowing for dynamic content assembly at the edge of the network (i.e. a CDN's edge server, the client's browser, etc) ESI is able to achieve these benefits.

W3C, however, has not yet accepted ESI's proposal, therefore, it isn't a standard yet. Certain companies and services have implemented the use of ESI although, without standardization, this means documentation and user adoption will likely be limited.

How does ESI work?

ESI typically sits at the surrogate level, meaning intermediaries or reverse proxies that act on behalf of the origin server. These intermediaries must be able to understand the ESI language in order to process the instructions given by the ESI element tags. ESI element tags are placed within the HTML and instruct the processor on what needs to be done in order to complete page assembly.

There are various elements available which can be used for a range of purposes. Check out section 3 of the ESI language specification to learn more. However, one of the primary elements of ESI is the include tag.

The include element specifies a fragment for assembly and allows for two optionally specified behaviors.

The following is a simple example of how the include element tag can be used:

<esi:include src="https://yourwebsite.com/1.html" alt="https://backup.yourwebsite.com/2.html" onerror="continue"/>

In this case, the ESI processor would retrieve the URL found in the src attribute. If that URL is not found, you can optionally define an alt attribute that tells the ESI processor to check that URL instead. Lastly, if neither src nor alt is found, you can optionally define a onerror attribute that will silently delete the include element and do nothing.

Features of ESI

There are four main features of ESI, these include:

Inclusion: Allows pages to be created by assembling included content, as shown in the example above. This allows you to cache fragments of a page instead of only assets
Variables: ESI supports the use of variables which can be defined in cookies of HTTP headers and written into markup.
Conditions: Allows for different markup to be used based on certain conditions (i.e. if a cookie is set or not) this influences how a template is processed.
Exception/Error Handling: Allows for an alternative URL to be defined if the origin is unavailable.

Drawback of ESI

On the other hand, there are also drawbacks to using ESI. A few of these include:

It involves implementing an additional layer of technology which adds complexity to the system
Support and informational resources are limited
ESI is slow in terms of TTFB

Summary

ESI does come with benefits but at the same time introduces drawbacks. Some say that ESI isn't relevant anymore due to the use of Client Side Includes (CSI) although may still be beneficial to users with non-powerful machines. That being said, ESI is still useful in certain circumstances although until it is approved by W3C and becomes a standard, the adoption rate likely won't change all that much.

KeyCDN doesn't currently support ESI due to the disadvantages mentioned in this article. Although if it one day becomes a W3C standard, its implementation may be reconsidered.