Core Web Vitals (CWV) are metrics used to assess webpage user experience. Improving CWV scores is vital as it enhances user experience, can boost SEO ranking, and potentially increase conversion rates.

Performance optimization foundation

To optimize CWV (LCP, FCP, and CLS) you need to shorten the critical rendering path and improve the loading experience. Optimization of the critical rendering path happens, per page type (CMS, PLP, PDP) in phases:

1. Define critical rendering path. Use Performance Insights to pinpoint elements used for LCP and FCP, learn their rendering tree, discover blocking requests.
2. Eliminate render-blocking scripts. Optimize chunk loading sequence, pre-load data and chunks, eliminate blocking requests, inline critical assets.
3. Optimize network payload. Use Bundle Analyzer to pin-point components included in specific chunks, and optimize the contents and priority of their load.
4. Polish the loading experience. Use Performance Insights to pinpoint layout shifts and eliminate them by introducing placeholders.

1. Define critical rendering path

How to get FCP and LCP readings?

How to identify critical rendering path?

How to identify critical request chain?

🧠 Tips & tricks:

How to setup HTTP2 server?

2. Eliminate blocking requests

How to eliminate blocking Suspense?

How to de-prioritize non-critical requests?

How to preload critical data?

How to preload critical chunks?

How to split preload and rendering?

How to inline main chunk?

🧠 Tips & tricks:

How to build configuration plugins?

How to inline dispatchers chunk?

How to make i18n non-blocking?

How to inline styles?

How to change source component imports to lazy?

3. Optimize network payload

How to remove plugins from the main chunk?

How to remove unwanted modules?

How to merge duplicate modules?

How to reduce dependency size?

How to hide off-screen components?

How to disable source maps?

How to optimize fonts?

🧠 Tips & tricks:

How to inspect bundle contents?

How to execute logic before build?

How to enable image optimization?

How to rewire dispatchers?

How to deflate CMS chunk?

4. Polish the loading experience

How to locate the layout shifts?

How to resolve layout shifts?

How to improve App mount time?

🧠 Tips & tricks:

How to setup real time user monitoring?

Improving layout shifts caused by dynamic blocks

Optimization case studies

PDP optimization

PLP optimization

CMS optimization

Extension optimization