Using Edge Side Includes (ESI) With LiteSpeed

With NameHero, you get access to the LiteSpeed web server, which allows you to use powerful caching features. Other web hosts might have server-side caching too, but LiteSpeed is easily the most powerful. One of the reasons is what is called “Edge Side Includes” (ESI). Here’s what ESI is, why it’s so powerful, and how to use it in WordPress.

What is ESI?

ESI, or Edge Side Includes, is a caching technology that lets your server cache even pages where content is changing all the time. A great example is when your visitor is logged into your website, you can’t normally serve them a cached page because the name varies with each person. Thanks to ESI, your server can now cache “most” of the page and only regenerate the portions that have changed.

This paradigm change renders your website immune to traffic spikes, even for dynamically changing content.

Enabling ESI with the LiteSpeed Plugin

First, to enable ESI, you need to download and set up the WordPress LiteSpeed cache plugin. Once you’ve gone through the initial configuration, head over to the “CDN” section and enter the “ESI” tab. From here, enable Edge Side Includes, and disable the option to cache the admin bars and comment sections like this:

By itself, this simple change will now regenerate the admin bar and the comment section and serve you a cached version of the page even when you’re logged in.

To test this, here’s a screenshot of the network requests when I visit the site a second time while logged in:

Here you can see my name on the top right of the page, meaning that I’m logged in. In the network request section, however, there’s also the following:

x-litespeed-cache: hit

This means that the page is cached by LiteSpeed while showing me a logged-in page. ESI is working as intended.

Further Proof: Making Widgets and Shortcodes Dynamic

Ok, the above example was too basic. Let’s say we have a shortcode that displays the date and time. We want the whole page to be cached except for that particular shortcode. To do this, I’m using the excellent WP Date and Time Shortcode, where I display the current date and time inside my post, including the seconds, using this:

[wp-dt] [wp-dt-seconds] seconds

This will show me the date and time with the seconds so we can test to see if ESI is working. By default, all content is cached. To make the above shortcode into an ESI-enabled block, we change each shortcode by adding “esi” after the opening square bracket. So the above becomes:

[esi wp-dt ttl="3"] [esi wp-dt-seconds ttl="3"] seconds

Here, I’ve also added the “ttl” argument so that the cache for the shortcode clears after 3 seconds. Otherwise, it will obey whatever timeout is specified in the LiteSpeed plugin. So the post looks like this:

So now I update the post and visit the URL a few times in the browser – making sure to wait at least 3 seconds between each visit. Here’s what I see:

You can see in the source that LiteSpeed has generated comments around each output with a note specifying when the content was dynamically generated. As expected, the time matches the number of seconds displayed exactly, and the same for the hour and seconds as well.

We can compare this to the code at the bottom of the page, where LiteSpeed tells us when the page was cached. No matter how many times you visit the page, the “page cache” date remains the same, but the shortcodes keep refreshing.

Is ESI Worth it?

Granted, ESI might not make too much of a difference for small sites. But if you have lots of dynamic pages with plenty of traffic, ESI will absolutely improve your website performance. And it’s only available with NameHero and LiteSpeed!