Progressive Rendering Overview

Progressive Rendering improves the performance of your page by fetching and rendering page components in a parallel and prioritized manner. If you notice that your site pages take a long time to load before you see the components rendered on the screen, then progressive rendering can help improve your site’s performance.

Assign one of three priorities to any top-level component.

Note Only top-level components in the content area of your pages can have a priority. You can’t assign a priority to a nested component.

As an example, assign Highest (first) to the few components that you want to be viewed first. Specify High (second) for those components that can load later without affecting your customer’s experience. Unassigned components are treated as Neutral by default and are displayed last. There’s no right choice for assignments, but a lack of planning can degrade performance and diminish positive experiences on your site.

For instance, sometimes you want a critical notice to appear first, prioritized as highest, and then fill in some of your highlighted content, prioritized as high. All other components, visible and below the fold, load after critical notices are rendered. Whether explicitly prioritized as neutral or not, they’retreated as neutral.

Note All unassigned components are set to Neutral priority. For new sites, the default priorities for components can vary based on the site template.

Because Progressive Rendering requires careful planning and testing, it’s off by default. Turn it on from the Advanced section of your Experience Builder Settings. Using this feature requires time and effort. But don’t worry, we provide some ideas to help you get started in the Progressive Rendering Guidelines

So, what happens while Progressive Rendering is doing its thing? Your page layout is roughly rendered and then components are added in order of decreasing priority. Generally, this type of rendering doesn’t cause any visual issues. However, sometimes components rearrange as the page displays, depending on which components you prioritized and how quickly it loads. That’s another good reason to test, test, and retest when you decide to take advantage of this advanced feature.

Assign a priority to a component in the actions menu of the Property Editor.

Note After you set the priorities, adding, deleting, or duplicating a component or changing themes or layouts doesn’t change your priority settings, but it invalidates your assumptions and testing. To ensure that your choices remain effective, you can expect any changes made to kick off a new round of testing. We try to notify you when you make those kinds of changes, but you still have to do the testing. Always make testing a part of your change plan.

Turning off Progressive Rendering removes prioritized behavior, but your settings remain. If you turn on Progressive Rendering again later, the original priority settings go back into force. While the continuity makes testing easier, the results can surprise you if you don’t watch for it.

• Progressive Rendering Guidelines
  Here are some guidelines for how to get the most out of Progressive Rendering.
• Prioritize Component Display Order with Progressive Rendering
  Quickly set the display order of components on your Experience Builder pages with Progressive Rendering. By carefully optimizing how your pages display, you can enhance the experience of your site and better engage your community.