11 Tips to Improve Largest Contentful Paint in WordPress

11 Tips to Improve Largest Contentful Paint in WordPress

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.

Largest Contentful Paint WordPress Image

Largest Contentful Paint WordPress Element - Image

If your largest contentful paint element is a background image:

  • Follow the same tips to optimize images.

Largest Contentful Paint Background Image

Largest Contentful Paint WordPress Element - Background Image

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.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

You have to agree to the comment policy.

Scroll to Top