What are Edge Side Includes (ESI)?
ESI is a markup language that allows web developers to designate parts of a web page as fragments to be processed separately from the rest of the page.
ESI is processed by what is known as an ESI Engine. ESI Engines can function in any step of web page delivery - ADC, CDN, Proxy, Web Server, Web Application, etc. The engine checks the response for ESI tags. If found, the engine removes the ESI tag and sends a second request to the backend (however far it needs to go) without going to the browser first. The second request's response is used in place of the ESI tag, filling the hole that the tag left behind. This continues until no ESI tags remain, and then the complete page is forwarded to the browser.
There are many possible applications for ESI, but its main purpose is to allow pages to be delivered quickly and more accurately using tools such as caching. It is considered an edge computing application, meaning it minimizes the distance that data must travel, the volume of data and the traffic. With ESI, a web page can be broken into different fragments, processed separately, and then re-assembled before being delivered to the browser.
Why ESI Instead of JavaScript (CSI) or SSI?
Most modern web applications generate dynamic content based on user requests and may contain per-user data such as shopping cart items for an e-commerce site. Caching accurately for dynamic content is tricky. In general there are three solutions: CSI, SSI, and ESI.
Client Side Includes (CSI) Using Javascript and Ajax
When JavaScript is used, it takes two or more trips from the browser to the web server to fully load a page that includes dynamic fragments. Most of the time, these AJAX requests for dynamic fragments are not cacheable. If the main page is cached, the browser will load the initial page quickly, issue Ajax calls afterwards, and then refresh the page. You may have seen this when visiting a new product page in an ecommerce site. Initially the cart is empty. Then, after a second, it shows the cart has two items. This makes viewers feel the page has loaded quickly, and then the content is sneakily refreshed afterwards. Indeed, this improves the user experience, but at the cost of extra round trips to the server. For the same number of online users, you get increased incoming requests and higher server resource usage.
Server Side Includes (SSI)
SSI is a simple interpreted server-side scripting language that is supported by major web servers including LiteSpeed, Nginx, Apache, IIS, Tomcat etc. It allows the contents of a file or the output of a CGI script to be transcluded in another. Since SSI runs on a web server, it is hard to use on a CDN or proxy. It is not flexible and is mostly used on custom built sites.
Edge Side Includes (ESI)
ESI is more flexible and includes all of the functions that SSI has. It can run on an edge server, such as CDN edge nodes. With ESI, when a page is requested, the full page will be assembled before making any trips back to the browser. Avoiding extra trips back and forth shaves excess loading time.
With the ability to create fragments (aka "punch holes") for private content, ESI enables most of a site's pages to be considered publicly-cacheable. A page no longer has to be deemed non-cacheable only because a section of it is non-cacheable. Allowing that section to be cached privately, while the rest of the page remains in public cache, optimizes space usage and speed.
The LiteSpeed Difference
Unlike competing products, LiteSpeed implements the ESI 1.0 protocol in full. All elements, such as esi:include, esi:inline, esi:choose, esi:try and more, are supported. LiteSpeed's esi:include requires the URL to be from the same domain to avoid the risk of XSS attacks.
When ESI is combined with LSCache plugins and the LiteSpeed Cache server module, it takes on a whole new level of usefulness. The plugin resides within the CMS and knows exactly what content can be cached and when to purge it. The cache engine is at the server level (either LiteSpeed Web Server Enterprise or Web ADC). Pages can be given a longer time to live (TTL) - days, weeks - as the plugins will indicate when the page content is outdated. This is possible through LiteSpeed's intelligent tag-based cache system.
Using ESI Hole Punching, Private/Public Cache separation, and Flexible Cache Control via rewrite rules and response headers, LiteSpeed can assemble and serve dynamic web pages entirely from cache without backend server interaction.
Compared to Varnish as a separate proxy layer, the LiteSpeed solution makes the whole stack simpler and easier to maintain by combining HTTPS/HTTP2 termination, caching, and the web server in a single piece. It also makes the purge process faster because there is no separate socket connection. For example, an "add to cart" request, and the cart ESI block purge request can be handled through a single response header with no extra cost.
Other application-based internal cache systems may also allow hole punching, but they must invoke backend PHP scripts. They just can't beat the efficiency of LiteSpeed's server-side cache.
LiteSpeed ESI and eCommerce
eCommerce sites are usually heavy applications which need faster load times to convert more sales. Edge Side Includes give users the opportunity to cache these sites. Without ESI, this would otherwise be tricky, because there is often a mix of public and private content on a single page.
Public content is information that can be served to all visitors. Private content is specific to individual users. For example, look at a product page on an eCommerce site: most of the page is public content because it is the same for everyone, but the header may contain "items in cart" information, or a "hello, Jane" greeting, both of which are considered private content.
ESI provides the ability to cache each page fragment appropriately in public or private cache. In an eCommerce scenario, this allows the dynamically generated shop page to be fully served from cache. Privately cached items (such as personalized greetings and cart contents) may be assembled together with the page's publicly cached contents and delivered as a single, fully-cached page. Full and accurate caching translates into superior performance and improved customer experience.
LiteSpeed Cache plugins for WordPress/WooCommerce, Joomla, OpenCart, PrestaShop, Magento, and Drupal have ESI support built in. With ESI, LiteSpeed is able to provide the best caching solution in the industry.