Want to improve your largest contentful paint in WordPress?
Largest contentful paint (LCP) measures how long it takes for the page’s main content to load. You’ll want to look your “largest contentful paint element” report in Lighthouse. Optimizing this specific element will help, but there are many other factors that determine your LCP score.
Your largest contentful paint element can be one of the following:
Depending on which element it is, there are specific optimizations you can do to make your LCP element load faster (especially reducing TTFB, eliminating render-blocking resources, and reducing resource load times). Optimizing CSS, images, fonts, and JavaScript also improves LCP.
All these tips on improving largest contentful paint are specific to WordPress.
1. Optimize Your Largest Contentful Paint Element
If your largest contentful paint element is an image:
- Compress and preload it.
- Use proper dimensions.
- Specify image dimensions.
- Convert it to WebP.
- Serve it from a CDN.
- Exclude it from lazy load.
If your largest contentful paint element is a background image:
- Follow the same tips to optimize images.
If your largest contentful paint element is a video or animation:
- Compress your video before uploading it.
- Avoid self-hosted videos and upload it to YouTube instead.
- Videos and animations in the hero section will inevitably slow down LCP.
[…]
This article was written by Tom Dupuis and originally published on Tom Dupuis.