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.

Largest Contentful Paint Video Background

Largest Contentful Paint WordPress Element - Video

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.

Largest Contentful Paint Block Elements

Largest Contentful Paint WordPress Element - Block Elements

 

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.

Preload Largest Contentful Paint Image WordPress - Passed Audit

 

3. Reduce TTFB To Under 600ms

Google lists slow server response times as the primary way to improve LCP.

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.

Most render-blocking resources can be fixed using Autoptimize and Async JavaScript. These plugins are specifically designed to optimize CSS/JavaScript by using minify, defer, and inline.

It will also help to remove unused CSS and JavaScript, host fonts locally and preload them, and avoid heavy plugins and page builders that add lots of extra CSS and JavaScript to your website.

 

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.

CDN Facebook poll

 

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.

Your fonts, largest contentful paint image, and possibly CSS and JavaScript files can be preloaded so they load immediately. You can do it manually or in WP Rocket and other plugins.

Preload Fonts

<link rel="preload" href="https://onlinemediamasters.com/font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="http://onlinemediamasters.com/style.css" as="style" />
<link rel="preload" href="http://onlinemediamasters.com/script.js" as="script">

 

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.

GTmetrix Image Optimizations

 

8. Optimize CSS And JavaScript

Web vitals emphasize optimizing CSS and JavaScript, and largest contentful paint is no different.

Remove unused CSS and JavaScript – this can be done using plugins like Asset CleanUp or Perfmatters. Plugins, page builders, and other things can load across your entire website, so you can disable them if they’re not being used in certain places. Other tools like RapidLoad (premium plugin by Autoptimize), and online tools like PurifyCSS can also remove unused CSS.

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.

Minify, combine, defer, inline – can be done in most cache plugins as well as Cloudflare, Autoptimize, and Async JavaScript. As I mentioned earlier, I recommend Autoptimize and Async JavaScript since it does a better job of handling CSS and JavaScript than other methods.

Third-party JavaScript – JavaScript from third-party code can cause a higher largest contentful paint especially if it’s loading above the fold. See your reduce third-party code report in Lighthouse and optimize these. Many things can be hosted locally (Google Fonts, Analytics, Tag Manager, and Gravatars) using plugins like OMGF, Flying Analytics, and WP User Avatar. You can also use browser hints like preload, prefetch, and preconnect as mentioned in this tutorial.

Disable Elementor ScriptsRemoving unused Elementor CSS/JS in Perfmatters

 

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.

Host fonts locally

 

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.

Some cache plugins like LiteSpeed Cache and SG Optimizer use server-side caching which is typically faster (at caching) faster than file-based cache plugins. However, plugins like WP Rocket come with a lot more speed optimization features than most other cache plugins (defer and delay JavaScript, preload, preconnect, prefetch, mobile cache, optimized CSS delivery, etc).

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

If you have third-party code loading on your WordPress site, consider using browser resource hints like prefetch and preconnect to establish early connections to those 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.

Prefetch DNS Requests in WP Rocket

 

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.

Largest Contentful Paint WordPress - GTmetrix Report

 

FAQs

How do I improve largest contentful paint in WordPress?

Find your WordPress site’s largest contentful paint element in your Lighthouse report which is either an image, background image, video, or block-element. Optimize that element, for example, you can preload your LCP image. Reducing TTFB and eliminating render-blocking resources are also top priority when improving LCP in WordPress.

How do I improve largest contentful paint using WP Rocket?

WP Rocket can improve largest contentful paint by preloading your LCP image, loading JavaScript deferred, optimizing CSS delivery, and minifying/combining CSS and JavaScript. It can also exclude hero images from lazy load and use browser resource hints to establish early connections to third-party domains.

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:

Cheers,
Tom

About Tom Dupuis

Tom Dupuis 2017Tom Dupuis writes WordPress speed and SEO tutorials out of his apartment in Denver, Colorado. In his spare time, he plays Rocket League and watches murder documentaries. Read his bio to learn 50 random and disturbing things about him.

Keep reading the article at Tom Dupuis. The article was originally written by Tom Dupuis on 2021-04-03 15:21:52.

The article was hand-picked and curated for you by the Editorial Team of WP Archives.

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

Your email address will not be published. Required fields are marked *

Show Your ❤️ Love! Like Us
Scroll to Top