Recommendations as LCP on the page // SLOW

CMS as LCP on the page // PUMA

Product card from the list of products as LCP // Aden

Category image as LCP on the page // …

How to optimize PLP ?

<aside> ❗ This guide suggests that most of basic optimization is already done, by following next guides:

How to preload critical chunks?

How split preload and rendering?

How to inline main chunk?

</aside>

Before starting to optimize PLP it is required to take analyze of page to determine its critical elements and what should be considered as high priority elements.

By default, in most cases LCP element on PLP is considered to be one of visible on viewport products cards image.

To verify, it can be tested with performance insights tool, to check which element will be considered as LCP on page.

Now when LCP element is known, it is possible to determine possible solution for critical rendering path to this element. At the moment critical rendering path is with requests/code that slow down rendering on LCP.

At the moment, critical rendering path looks like this:

Looking at requests waterfall, it is possible to make points such as:

• Unnecessary request such as information about category, filters/sorting are blocking of rendering product cards.
• Category chunk is containing unnecessary code for rendering LCP elements, such as sorting, filters and so on.
• All product cards are rendered at once (by default it is 24), but only images that are on view port of user are considered to be LCP elements.