WordPress Core Web Vitals: LCP, INP and CLS Explained
A WordPress-focused guide to the three Core Web Vitals and the kinds of fixes each one requires.
Short answer: Core Web Vitals measure different parts of user experience: loading (LCP), interaction responsiveness (INP) and visual stability (CLS). A single optimization rarely fixes all three.
LCP often depends on origin response, resource discovery and the size/rendering of the largest visible element.
Largest Contentful Paint
LCP often depends on origin response, resource discovery and the size/rendering of the largest visible element.
INP is strongly affected by main-thread JavaScript and event-handling work.
- Change one important variable at a time.
- Compare repeatable behavior rather than one isolated score.
- Keep reliability and maintainability ahead of marginal benchmark gains.
Interaction to Next Paint
INP is strongly affected by main-thread JavaScript and event-handling work.
CLS is about unexpected movement, often caused by missing dimensions, late-loaded fonts, ads or injected UI.
- Change one important variable at a time.
- Compare repeatable behavior rather than one isolated score.
- Keep reliability and maintainability ahead of marginal benchmark gains.
Cumulative Layout Shift
CLS is about unexpected movement, often caused by missing dimensions, late-loaded fonts, ads or injected UI.
LCP often depends on origin response, resource discovery and the size/rendering of the largest visible element.
- Change one important variable at a time.
- Compare repeatable behavior rather than one isolated score.
- Keep reliability and maintainability ahead of marginal benchmark gains.
Lab vs field data
LCP often depends on origin response, resource discovery and the size/rendering of the largest visible element.
INP is strongly affected by main-thread JavaScript and event-handling work.
- Change one important variable at a time.
- Compare repeatable behavior rather than one isolated score.
- Keep reliability and maintainability ahead of marginal benchmark gains.
Template-by-template diagnosis
INP is strongly affected by main-thread JavaScript and event-handling work.
CLS is about unexpected movement, often caused by missing dimensions, late-loaded fonts, ads or injected UI.
- Change one important variable at a time.
- Compare repeatable behavior rather than one isolated score.
- Keep reliability and maintainability ahead of marginal benchmark gains.
Practical decision rule
Fix the layer the evidence points to. Caching helps repeated server work; CSS and JavaScript work affect rendering and responsiveness; images and fonts affect transfer and discovery; hosting and application behavior affect origin response. Avoid solving a different problem just because a tool is popular.
Related guides
Sources and further reading
Editorial note: Product features, pricing and plan terms can change. Commercial claims are checked against current vendor documentation where cited; verify the live merchant page before purchase.