Why is Largest Contentful Paint almost 4 seconds?

Question

I don't understand which element on the mobile version of https://www.openstream.ch is considered to be the Largest Contentful Paint by Lighthouse.

When I test the current version of the website with PageSpeed Insights (currently running on Lighthouse v6.0.0), it has 90 points for desktop with 1.8s to render the Largest Contentful Paint which seem to be the 4 images at the bottom of the view port:

When I switch to the mobile results it has 61 points with 3.7s to render the Largest Contentful Paint, although there is not even an image in the view port:

On https://web.dev/lcp/ it says that the types of elements currently considered for Largest Contentful Paint are:

• <img> elements
• <image> elements inside an element
• <video> elements (the poster image is used)
• An element with a background image loaded via the url() function (as opposed to a CSS gradient)
• Block-level elements containing text nodes or other inline-level text elements children.

When I do the test in the latest version of Chrome for macOS (Lighthouse 5.7.1) the Largest Contentful Paint is rendered after around 0.5s:

Is this a bug in Lighthouse 6.0.0 or does it probably have another reason?

Answer 1

You have missed an important part of how Lighthouse (the engine behind Page Speed Insights (PSI)) works.

When running the test for a mobile PSI simulates a 4x CPU slowdown and a 4G connection.

To simulate this while profiling you need to change the "Network" to "Fast 3G" (this is close enough, for more accuracy you can go in set up a profile for 4G which is the same as PSI - see below) and change "CPU" to "4x slowdown".

If you run the profiling again with these settings you will see that it takes just over 3 seconds to render the page and then very shortly after you get the fonts loading in, which is when the largest contentful paint happens.

The image below shows the location of the settings (right hand side)

How to set your network profile the same as Page Speed Insights

Page Speed Insights use the same settings as Lighthouse as I said earlier. You can find the config they currently use here.

From this we can see that they use throttling.mobileSlow4G as the default which can be set as follows:-

Download: 1.6 * 1024 * 0.9 = 1474 kbps.

Upload: 750 * 0.9 = 675 kbps.

latency: 150 * 3.75 = 562.5ms.

If you set up a profile (go to "Network" -> "Custom" -> "Add") with the above settings and call it something like "Page Speed Insights Throttle Settings" you can then use this to run a very similar profile.

An alternative way to get the profiling data

The trace that is produced in Developer Tools > Audits can be made to generate an accurate trace by clicking on the settings gear (top right of the audits panel) and unchecking "Simulated throttling" in the small bar that appears.

If you then run your audit (it will take longer as it applies the throttling now instead of simulating it). you can then access the trace that matches your report by clicking the "View Trace" button, which is located just above the photo timeline / below "Time to Interactive".