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:
- Background image
- Video or animation
- Block-level element
All these tips on improving largest contentful paint are specific to WordPress.
- Optimize Your Largest Contentful Paint Element
- Preload Your Largest Contentful Paint Image
- Reduce TTFB To Under 600ms
- Eliminate Render-Blocking Resources
- Serve Assets From A CDN
- Preload Key Requests
- Optimize Images
- Make Fonts Load Faster
- Take Advantage Of Your Cache Plugin
- Prefetch And Preconnect Third-Party Domains
|Largest Contentful Paint (LCP)||Score|
|0 - 2.5s||Good|
|2.5 - 4s||Average|
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.
If your largest contentful paint element is a block-level element:
- Use blocks properly and simplify your design.
- Determine which text nodes belong to your LCP element.
- Block-elements often have a lower LCP than video/animations.
2. Preload Your Largest Contentful Paint Image
If your LCP element is an image, Google will probably recommend preloading it.
This can be done manually or in many speed plugins like WP Rocket or Perfmatters. This will instruct the browser to download the image as soon as possible and is also a recommendation.
<link rel='preload' href='/background-image.png' as='image'>
3. Reduce TTFB To Under 600ms
A TTFB of 600ms or over will be flagged in Lighthouse. This usually occurs on cheap, shared hosting (GoDaddy, Bluehost, EIG brands). Backlinko also found SiteGround has a slow TTFB.
Join the WordPress Hosting Facebook Group to get unbiased feedback. We all know how many biased affiliates are out there (including me, but I at least try to steer you in the right direction).
I personally use Cloudways who was rated #1 in 18 Facebook polls and is highly recommended in many Facebook Groups. It’s cloud hosting and you have a choice between DigitalOcean, Vultr High Frequency, and other cloud providers. These are much faster than cheap, shared hosting.
4. Eliminate Render-Blocking Resources
Eliminating render-blocking resources is another recommendation to improve LCP in WordPress.
5. Serve Assets From A CDN
Serving images and other assets from a CDN can improve your largest contentful paint and overall load times.
Cloudflare and BunnyCDN are two popular options. If using Cloudflare, consider using their automatic platform optimization to serve your WordPress site from Cloudflare’s edge network. Some plugins like Flying Images both compress images and serves them from Statically’s CDN.
6. Preload Key Requests
Other than preloading your largest contentful paint image, there may be other assets you should preload which are usually listed in the preload key requests recommendation of PSI.
<link rel='preload' href='/style.css' as='style'> <link rel='preload' href='/script.js' as='script'> <link rel='preload' href='/font.woff2' as='font' crossorigin>
7. Optimize Images
Optimizing images also improves largest contentful paint.
Other than preloading the largest contentful paint element (often an image), here are a few other ways to optimize images (many of which are also recommended in PageSpeed Insights).
- Properly size images – crop/resize images to their correct dimensions.
- Specify image dimensions – use a width/height attribute in the image HTML.
- Compress images – ShortPixel, TinyPNG, Photoshop, and GIMP are popular.
- Lazy load images – built-in to WordPress 5.5 (exclude above the fold images).
- Use WebP – use a plugin like ShortPixel to convert images to WebP or use an online WebP converter if you only want to convert a few important images.
- Use Adaptive Images – use a plugin to serve smaller images to mobile devices.
Optimize CSS delivery – some cache plugins like WP Rocket have an option to optimize CSS delivery, but it doesn’t always work or improve performance/scores. Make sure you test that optimize CSS delivery working, set a fallback critical CSS, generate critical CSS, and clear cache.
9. Make Fonts Load Faster
Fonts are often one of the biggest contributors to both largest contentful paint and cumulative layout shift.
Hosting fonts locally is much faster. This prevents requests from third-party domains like fonts.gstatic.com while letting you optimize fonts with an efficiently cache policy, preload and preconnect fonts, and use font-display:swap to ensure text remains visible during webfont load.
You can learn whether your fonts are hosted locally by viewing your PageSpeed Insights or GTmetrix Waterfall report. If they’re hosted locally, they will be served from your domain name.
10. Take Advantage Of Your Cache Plugin
Which cache plugin you’re using and how it’s configured has a large impact on your WordPress site’s largest contentful paint.
The cache plugins I just mentioned are solid choices and I have tutorials for both WP Rocket and SG Optimizer. Just make sure you test all the settings and take advantage of it’s features.
11. Prefetch And Preconnect Third-Party Domains
This can be done manually in plugins like WP Rocket or Perfmatters. WP Rocket automatically preconnects CDN URLs and third-party fonts, but you will still need to add prefetched domains.
Retest Your Largest Contentful Paint
Run your site through Lighthouse or GTmetrix and retest your largest contentful paint. Hopefully the his tips outlined in this tutorial helped you get it under 2.5s like Google wants.
How do I improve largest contentful paint in WordPress?
Find your largest contentful paint element in Lighthouse which is either an image, background image, video, or block-element. Optimize it, for example, you can preload your LCP image. Reducing TTFB and eliminating render-blocking resources will also improve LCP.
How do I improve largest contentful paint using WP Rocket?
How do I preload my largest contentful paint image?
Find your largest first contentful paint image in your Lighthouse report and preload it manually with code, or with speed plugins like WP Rocket, Perfmatters, or Pre* Party Resource Hints.
Hope this helped! Drop me a comment if you have questions.
See Also: WordPress Speed Guide