ESI Demo - Edge Side Includes
This page demonstrates Fastly's Edge Side Includes (ESI) functionality by loading content fragments dynamically at the edge. Compare standard HTML loading versus ESI processing below.
🖼️ Test 1: Standard HTML Image
This image is loaded using a standard HTML <img src=""> tag.
The browser requests and renders it as part of the normal page load.
<img src="https://www.fastly.com/img/og-image-lg.png" />
✓ Standard HTML Load Successful
⚡ Test 2: ESI Fragment Include
This content is loaded using an ESI <esi:include> tag.
Fastly's edge processes the ESI directive, fetches the child fragment, and assembles the final response before sending it to your browser.
<esi:include src="https://test-ly.global.ssl.fastly.net/html/child_esi.html" alt="/html/child_esi.html" onerror="continue"/>
503 Service Temporarily Unavailable
How ESI Works
- ESI Enabled: If you see the second image above, ESI processing is active on this service
- ESI Disabled: If the second image didn't load, ESI processing is turned off in the Fastly configuration
- Edge Assembly: The ESI tag is replaced with actual content at Fastly's edge before reaching your browser
- Error Handling: The ESI directive can include
onerror="continue"to gracefully handle failures
ESI Error Handling
- Without onerror: If the ESI fragment fails to load, the entire request fails with an error
- With onerror="continue": If the fragment fails, processing continues and other ESI includes still work
- Use Case: Use
onerror="continue"for non-critical content that shouldn't break the page if unavailable