Progressive Rendering Guidelines

When is the best time to Progressive Rendering?

Not all Experience Cloud sites require this powerful feature, so don’t rush to use it. However, when you need it, you really need it.

Progressive Rendering is designed to help improve 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 experience.

Use the Page Optimizer tool to determine if Progressive Rendering is a good choice for your site pages and to get suggestions on how to prioritize your components. It can also help you evaluate the performance impact of your configurations.

Note Page Optimizer is available as a Chrome extension. You can read more about the tool in its documentation.

Finding the right configuration that works best for you both in terms of performance and user experience can take a few iterations of configuration and testing.

Which components are good candidates for prioritization?

Generally, it’s probably best to have a few small (but important) components in the Highest group. However, trial and error testing and in-depth performance analysis are the best routes to figuring out how to best optimize your pages.

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.

When is the best time to revisit your priority settings?

After priorities are set, adding, deleting, or duplicating a component or changing themes or layouts potentially invalidates your currently set priorities. Any changes require you to review the display order to ensure it’s still effective.

Test, test, test

Always test your pages after you change your priority settings. We made it easy to test the page with and without Progressive Rendering enabled. If you turn off the feature, your component priority settings are remembered, and they’re reapplied when you turn it back on.