Core Web Vitals
60-120 minAdvanced
Optimize Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS) for better user experience and search rankings.
Prerequisites
- Access to Magento admin and server
- PageSpeed Insights or Lighthouse for testing
Intermediate
Improve LCP
Optimize largest visible element loading time.
1
Enable Full Page Cache
1
Go to Stores > Configuration > Advanced > System > Full Page Cache
2
Set 'Caching Application' to 'Varnish' (recommended) or 'Built-in'
3
Clear cache after enabling
2
Optimize Images
1
Use WebP format for product images
2
Enable lazy loading for below-fold images
3
Preload hero/LCP images in <head>
Example
<link rel="preload" as="image" href="hero-image.webp">3
Use CDN
1
Configure Stores > Configuration > General > Web > Base URLs
2
Set static/media URLs to CDN domain
Verification Checklist
Pro Tips
- Use Real User Monitoring (RUM) data from CrUX for accurate field data
- Prioritize mobile performance - Google uses mobile-first indexing
- Varnish cache is critical for Magento LCP improvements