Welcome to LCP Test

We are here to find out how to improve or slow down the LCP!

Getting started:

1. First upload all the files to your webserver
2. Open the developer tools (F12) and go to the network tab
3. Disable your browsers cache by checking the disable cache checkbox
4. Keep the network tab open!! If you close it you you will just test your browser cache
5. Click on the start test button

Start Quick Test Start Full Test

---

Text based LCP

• text - no image ...

Jpeg image

• large - 1 image ...
• large - 1 image - lazy loaded ...
• large - 1 image - preloaded ...
• large - 1 image - high fetchpriority ...
• large - 1 image - decoding async ...

Resized jpeg image

• resized - 1 image ...
• resized - 1 image - lazy loaded ...
• resized - 1 image - preloaded ...

Newer image formats

• converted - 1 image - webp ...
• converted - 1 image - avif ...
• converted - 1 image - picture tag ...

Video formats

• video with poster image ...
• No poster image ...

Multiple images

• multiple - all eager ...
• multiple - all lazy ...
• multiple - all lazy lcp eager ...
• multiple - all lazy lcp eager + fetchprio ...
• multiple - all lazy lcp eager + early preload ...
• multiple - all lazy lcp eager + late preload ...

Misc

• fade in LCP ...
• Client side render ...
• Background Image ...

---

Let's chart the results

Let's visualize the results and see which one is faster!

Default order:

From fast to slow