I’ve been a happy customer of Guru Hosting for a few years now (I actually have two accounts with them). Well, only recently I found out that the web server they use to power their network of customer websites is the Litespeed server.
Why is this pretty cool that they use Litespeed Server? Well, I’ll get to that further down but for the moment let’s see what I was trying to accomplish.
1. Display Dynamic Content Via a Shortcode
When rebuilding my web design Shropshire website last week, I thought it would be nifty to include some personality into the Get to Know Me a Bit Better section of my about me page; by displaying my most recent Strava activity in the list via the WP-Strava plugin. It’s basically a shortcode called [activities] that I have modified to suit my needs.
Then, what’s shown to my visitors is the following 🥳:
2. I Love Me Some Caching
Now, as a huge fan of fast loading websites (Who isn’t right?), I also use the complimentary caching plugin from the same company that powers my web server – It rocks, and serves up my pages up super fast! So fast in fact, my GTmetrix score is a superb A with 471 milliseconds for the first LCP or Largest Contentful Paint 🥳
You can probably see where I’m going with this…
3. Damn You Caching!
Well, once I launched my new company website to the world, I checked over the pages to make sure there were no bugs and there was nothing too bad in fairness, some CSS tweaks here and there… and then I noticed that my little Strava activity was… cached and stuck on an activity I had done two days ago! ☹️
Maybe I could just turn off the caching for this one page I thought to myself?
Well, by disabling caching on this one about me page, it solved my issue of displaying my latest Strava activity, but my GTmetrix score took a pretty hard hit with the First Contentful Paint, Speed Index, Largest Contentful Paint, and Time to Interactive scores all being doubled 😭
Also, when I browsed the about me page in an incognito tab, I could feel it load slower!
Not good. I could either:
- Remove the little dynamic Strava shortcode
- Convert the functionality to JavaScript
- Set a 6/12/24 hour new TTL
- Try and find another solution
I chose to try and find another solution.
4. Litespeed Server & Edge Side Includes (ESI) To the Rescue!
So back to why my host is pretty awesome for using Litespeed server. It turns out that Litespeed server has this thing called Edge Side Includes (ESI) built in.
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.
https://www.litespeedtech.com/products/features/edge-side-includes
So, I can cache my pages as normal but when I enable ESI in Litespeed’s settings in WordPress – say for example I would like to… display dynamic data such as my silly little Strava activity, I can and it will be processed as normal, as if the page was not cached!
After I have enabled ESI includes, my page is back to having a damn healthy GT metrix score! What an awesome bit of tech 💪🏻
5. How Do I Display Dynamic Data With Litespeed server and ESI?
If you are using the Litespeed Cache plugin, read on and find out how I’ve done it.
5.1. Enable ESI
First up, you will have to enable ESI includes in the Litespeed Cache settings area, more specifically, in the Cache settings area.
5.2 Amend WordPress Shortcode
Once Enable ESI has been enabled, you will have to find the shortcode name (in my example: [activities]) that you would like to display in your page and amend it slightly.
I changed mine from [activities] to [esi ttl="900" activities].
That’s it! Pretty darn simple eh? It turns out you just need to prefix your WordPress shortcode with esi and add a TTL value, mine being 900 seconds or 15 minutes.
6. Conclusion
So there you have it – if you are using the Litespeed server (plus Litespeed caching plugin) and you have some type of data that is updated fairly regularly and would like to display this data on your cached pages, you can use the power of ESI includes.
