Scandiweb slider widget as LCP element
Page builder background image as LCP element // Aden
Page builder video as LCP element // Aden
Image as LCP element // Aden
<aside> ❗ This guide suggests that most of the basic optimization is already done, by following the following guides:
How to preload critical chunks?
How split preload and rendering?
</aside>
Before optimizing CMS, it is required to analyze the page to determine its critical elements and what should be considered high-priority elements.
In most cases, the LCP element on CMS is considered to be one of the following:
To verify, it can be tested with the performance insights tool, to check which element will be considered as LCP on page.
Now when the LCP element is known, it is possible to determine a possible solution for the critical rendering path to this element. At the moment critical rendering path is with requests/code that slows down rendering on LCP.
At the moment, the critical rendering path looks like this:
Looking at the requests waterfall, we can notice that the current behavior is for the content of the entire CMS page to get requested all at once. This leads to the page feeling slower to users since they are waiting for things that are out of view or not directly impacting their experience to load alongside what they actually care about.
Therefore, our main goal would be to load what matters the most first and everything else afterward. So the request waterfall will look something like this:
