{"id":8004,"date":"2017-09-06T06:00:11","date_gmt":"2017-09-06T10:00:11","guid":{"rendered":"https:\/\/blog.litespeedtech.com\/?p=8004"},"modified":"2017-09-06T06:00:11","modified_gmt":"2017-09-06T10:00:11","slug":"wpw-esi-and-litespeed-cache","status":"publish","type":"post","link":"https:\/\/lswp.store\/index.php\/2017\/09\/06\/wpw-esi-and-litespeed-cache\/","title":{"rendered":"WpW: ESI and LiteSpeed Cache"},"content":{"rendered":"

\"WordPress<\/a><\/p>\n

Welcome to another installment of WordPress Wednesday<\/a>!<\/p>\n

As you may know, our LiteSpeed Cache for WordPress plugin<\/a> supports Edge Side Includes<\/a><\/strong>, also known as ESI. Today we are going to talk about why this is such awesome news for your website.<\/p>\n

Please note: OpenLiteSpeed does not support ESI functionality. You will need LiteSpeed Web Server Enterprise<\/a>, LiteSpeed Web ADC<\/a>, or QUIC.cloud CDN<\/a> in order to use ESI.<\/em><\/p>\n

What is ESI?<\/h2>\n

ESI is a markup language that allows you to designate parts of your dynamic page as separate fragments that are then assembled together to make the whole page. To put it more quaintly, ESI lets you \u201cpunch holes\u201d in a publicly cached page, and then fill those holes with privately cached content.<\/p>\n

With ESI, punched holes can be treated differently than the rest of the page. They can have different TTLs and be purged by events that are completely separate from the page they are on. This allows you to cache more of your site for more of your visitors.<\/p>\n

Public Cache vs. Private Cache<\/h2>\n

LiteSpeed Cache is tag-based (which means that each page is stored with an identifier that allows it to be purged from cache as part of a specific subset) and has built-in public and private caches. In the public cache you will find pages that are exactly the same for everyone. Private caches contain content that pertains only to a specific user specified by their IP address and session ID.<\/p>\n

Until now, you\u2019ve had to think about your site\u2019s pages in their entirety. Is this page publicly cacheable? Is that one publicly cacheable? If a page had any private data on it at all, you\u2019d have to say \u201cno, it cannot be stored in the public cache.\u201d This issue of having to cache a full page in its entirety is why our WordPress plugin until 2017<\/a>\u00a0only cached pages for non-logged-in users. In WordPress, non-logged-in users are almost always served only public content. And in the few cases where they are not (password-protected posts, moderated comments, etc.), that content is usually considered non-cacheable for that user. ESI changes this.<\/p>\n

How do ESI and Public\/Private Cache Work Together?<\/h2>\n

ESI allows you to disassemble a full page and treat the pieces differently from each other.<\/p>\n

LiteSpeed Web Server allows you to store content in either the public cache or a private cache.<\/p>\n

Combine these two elements and you get something very powerful. You get a system that can break apart a page into public and private pieces, cache each piece appropriately, and then re-compose the full-page content from the relevant caches and serve it to a user without ever hitting the PHP backend.<\/p>\n

That is pretty amazing.<\/p>\n

\"Edge<\/p>\n

This combination allows you to cache content for logged-in WordPress users.<\/strong> With ESI enabled you can say, \u201cHey this page is mostly<\/em> public. Let\u2019s cache it, punch a few holes in it for the private content, and save that content in the private cache.\u201d<\/p>\n

Examples<\/h2>\n

Let\u2019s look at a few common scenarios and see how they play out with ESI enabled and without ESI.<\/p>\n

Example #1: Admin Bar<\/h3>\n

You\u2019re the site admin, you are logged in, and you visit your site\u2019s home page, which is in the public cache.<\/p>\n

Without ESI<\/strong>: your request hits the backend, because the admin bar at the top of the page is private content, and as such this page (and every other page on your site, for that matter) cannot be served to you from cache.<\/p>\n

With ESI<\/strong>: most of this page is served to you from the public cache, while the admin bar is served to you from your private cache. There is no need to invoke PHP.<\/p>\n

Example #2: Recent Posts Widget<\/h3>\n

You have a large site with much static content that rarely changes. Every page has a sidebar, and the sidebar widget \u201cRecent Posts\u201d appears on each page.<\/p>\n

Without ESI<\/strong>: Every time a new post is published, every single page in the site must be purged so that the widget displays up-to-date data. Re-populating the entire cache requires a crawler to run, or visitors to hit all of the pages of the site.<\/p>\n

With ESI<\/strong>: All of the pages in the site can remain cached with a nice long TTL, while the Recent Posts widget is the only thing that needs to be purged. Re-populating that one bit of the cache requires just one visitor to request any page one time.<\/p>\n

You can see how ESI + LSCache can have huge implications for the speed of your site!<\/p>\n

Enabling and Configuring ESI<\/h2>\n

LiteSpeed Cache for WordPress considers all cacheable full pages to be publicly cached.<\/p>\n

When you enable ESI, you instruct LSCWP to punch holes in public pages. LiteSpeed then caches the content according to the settings for each block: public, private or not at all, and with its own TTL, independent of the page it is on.<\/p>\n

When you enable ESI, LSCWP creates the following ESI blocks:<\/p>\n