• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
NameHero Blog

NameHero Blog

Web Hosting Tips & Resources From NameHero

  • Hosting
    • Web Hosting
    • VPS Hosting
    • WordPress Hosting
    • WooCommerce Hosting
  • Reseller
  • Enterprise
  • Domains
  • Account
  • Blog Home
  • Categories

Using Edge Side Includes (ESI) With LiteSpeed

Bhagwad Park

Published on: May 11, 2022

Categories: Website Performance 0

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:

Enable Edge Side Includes in LiteSpeed
Enable Edge Side Includes in LiteSpeed

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:

Cache Hit for Admin User with the Admin Bar
Cache Hit for Admin User with the Admin Bar

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:

Converting Shortcodes to ESI
Converting Shortcodes to ESI

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:

LiteSpeed ESI with Shortcodes TTL 3 Seconds
LiteSpeed ESI with Shortcodes TTL 3 Seconds

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!

Bhagwad Park Profile Picture
Bhagwad Park

I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow & Subscribe

Exclusive promos, content and more!

Most Popular Posts

Speed up your site: solving the WordPress slowdown

NameHero’s Recommended WordPress Plugin and Theme Setup (2023)

How To Increase The InnoDB Buffer Pool Size

How To Fix A Stuck All-in-One WP Migration Import

How To Add A Subdomain In Cloudflare

Top Categories

  • WordPress
  • Website Performance
  • Web Hosting
  • Resellers
  • Website Development
  • Website Security
  • VPS Hosting
  • SEO Tips
  • Announcements
  • Domain Registration
NameHero

NameHero proudly provides web hosting to over 40,000 customers with 99.9% uptime to over 750,000 websites.

  • Master Card
  • Visa
  • American Express
  • Discover
  • Paypal
Products
  • Web Hosting
  • VPS Hosting
  • WordPress Hosting
  • WooCommerce Hosting
  • Reseller Hosting
  • Enterprise Hosting
  • Domains
Help & Support
  • NameHero Blog
  • Knowledgebase
  • Announcements
  • Affiliates
Company
  • About Us
  • Contact Sales
  • Reviews
  • Uptime
  • We're Hiring

Copyright © 2023 NameHero, LLC. All rights reserved.

  • Privacy Policy
  • Terms of Use
  • Acceptable Use Policy
  • Payment Policy
  • DMCA