Optimizing web performance with phased rendering in Adobe Experience Manager Sites
Clunky, slow-loading web pages can create frustration and drive visitors away. Adobe Experience Manager Sites with Edge Delivery Services is designed to support best-in-class performance by delivering content to users quickly.
In this article, we’ll describe the content management system’s phased rendering approach, which loads web content in three phases and divides the payload of the page.
Why is phased rendering important?
In addition to improving the customer experience, phased rendering helps optimize site performance, which is measured by Google Lighthouse scores and Core Web Vitals.
Loading web pages in phases makes it easy to achieve high Google Lighthouse scores and healthy Core Web Vitals, which impacts:
- Search engine optimization (SEO) and traffic: In addition to other factors such as relevance, Core Web Vitals affect search rankings. Improving Core Web Vitals helps your site rank higher in search results. Higher rankings improve your site’s discoverability and attract more traffic.
- Bounce rate: Improved site performance and page load speeds provide a better user experience, reducing bounce rates.
- Engagement and conversion: With faster page load speeds, users are more likely to stay, engage with site content, and convert.
How does phased rendering work in Experience Manager Sites?
Experience Manager Sites with Edge Delivery Services loads web content in three phases:
- Phase E (Eager): This phase loads everything necessary to get to the Largest Contentful Paint (LCP), which measures the time required to load the main page content and indicates the user’s perceived load time, which is a critical aspect of the user experience.
- Phase L (Lazy): This phase loads resources largely served from the same origin that are not critical to LCP.
- Phase D (Delayed): This phase loads everything else such as third-party tags or assets that are not essential to the visible experience.
Let’s take an in-depth look at the three phases.
Phase E — Eager
Phase E focuses on optimizing LCP load time, which represents when the largest element of your page — like an image, video, or text — loads. A faster LCP allows users to see and interact with your page quickly.
In this phase, everything required to be loaded for the true LCP to be displayed is loaded. This usually consists of the markup, the CSS styles, and JavaScript files.
Phase L — Lazy
During Phase L, only the portion of the payload that does not impact Total Blocking Time (TBT) is loaded. TBT is the amount of time that a user could not interact with your web page, which negatively impacts site performance and Core Web Vitals.
This phase includes loading blocks (JavaScript and CSS), the remaining images that were not critical for LCP, and other JavaScript libraries that are not blocking. The header and footer of the page are also loaded asynchronously in their respective blocks during this phase as they are not in the critical path to the LCP.
Phase D — Delayed
Phase D loads parts of the payload that do not immediately impact the user experience. This includes third-party tags, marketing tools, consent management, extended analytics, and chat modules. These are loaded in the third phase as they often generate large JavaScript files that affect performance.
It is important to delay the start of this phase by at least three seconds after the LCP event, allowing for the rest of the user experience to stabilize.
Phased rendering strategically loads elements based on its impact to the user experience, ensuring a high-performance site. With this phased rendering approach as well as our edge architecture, real-user monitoring (RUM), and persistent caching, Edge Delivery Services in Experience Manager Sites provides fast load speeds, high Google Lighthouse scores, and healthy Core Web Vitals — right out of the box.
To dive deeper into our phased rendering approach, check out our technical documentation here.