How to fix the largest contentful paint element (LCP) in wordpress

For a while now, seeing how agencies struggle when talking about the largest contentful paint element loading issues in WordPress, it’s not that difficult to fix in many cases. The main thing here is to understand the cause of the issue and work with your developers to fix it.

Types of LCP elements

In most cases the LCP elements is one of the items below:

• Image/Video from hero section
• Text (font) on the hero section

Obviously, different types of elements require different approaches.

How LCP works

Basically, LCP is the time required to load the largest piece of content for the user.

In my practice, it’s not always about making the element smaller in size like you used to hear

• compressing images,
• compressing scripts,
• minifying styles
• etc.

All this won’t help much and you likely tested this.

In this situation you and your dev need to make sure

1. Element is discoverable by browser as soon as possible
2. Element has a high priority in loading queue ( loads first, not after other elements )

How to make LCP discoverable

Make sure it’s the link to the LCP element is in HTML

• Not rendered with JS
• Not in CSS ( Hi Background images)
• Not lazy loaded

How to make LCP load as fast as possible

In most cases, the LCP element is loaded in the wrong order – too late, that’s why Page Speed is unhappy. There 2 most common ways to load desired elements faster.

1. Using fetchpriority="high" attribute
ex: <img src="" fetchpriority="high">

2. using preload
<link rel="preload" src="">

Your dev should ensure he’s using it correctly and individually for each page, not one for all or all for all.

Ex: If you have image in blogs and it’s LCP – it’s a good rule to preload that image in the template, while image itself should be minimised and NOT lazy-loaded

For fonts, the biggest tip is to save them locally and not rely on Google Fonts or other services as establishing connection takes time and effort.

Common issues and fixes with LCP

1. Background images – fixed by images positioned absolutely ( devs will understand )
2. Lazy-loaded LCP image – fixed by adding skip-lazy or alternative class, attribute by your dev. All other images should be lazy-loaded except LCP and maybe the logo
3. Fetchpriority does not work? Use preload + fetchpriority – it’s always working

Best LCP guide I use for developers

This is an official video from the Page Speed Insights team, and I don’t know a better video you could share with your devs to check out and use as a handbook when we’re talking about LCP