LCP + Critical CSS

Typically there are two types of images that have bad LCP; lazy-loaded images and images that are CSS background-images.

The solution for the first is excluding your hero-images from being lazyloaded (adding skip-lazy as CSS class is a good way), the solution for the 2nd is loading the background-image also like this

<img src="https://your.url/yourbackground/image/path.jgp" style="display:none;" />

which will ensure the image is loaded with higher priority.

hope this helps,
frank

based on a quick webpagetest.org test (3G fast bandwidth + Galaxy S8 simulated) the image for which LCP is calculated is loaded as 4th resource, but (and that is HTTP/2 for you) it competes for bandwidth with some other resources:

the AO’ed CSS is the first request (after the base HTML) but that already has priority “idle” (as it’s just a print CSS when being requested), but for reasons only browsers know (decide) is it loaded early anyhow. the logo is next up with priority “medium”, after that you have your “LCP-image” also with priority “medium” BUT in the HTTP/2 stream is reads it depends on the logo. I’m not deep enough into HTTP/2 to know why and how that can be changed I’m afraid. after that you have a font-file (the social warfare icons) which have “highest” priority, so it would be interesting to see if that font-file can somehow be loaded later?

hope this somehow helps ..
frank

no, the priority is not something AO actively sets, it’s the browser that decides based on resource type (e.g. fonts have high priority) and other properties (e.g. css with medium print has lower priority).

those priority hints could help, but afaik this is not available outside Chrome “origin trials” yet.

problem is the font mentioned is not a Google Font, but a local one (for the social warfare icons).

no, afraid not. disabling social warfare would help, but guess you don’t want to go there .. 😉