RFC: Optimize pre-rendered pages for LCP

[BioPhoton]

Motivation

Dynamic pages are hard to optimize for the LCP as we can't determine the LCP before executing the page. It is important to optimize the LCP because it is part of the core web vitals and has a direct impact on user experience. If we could know the LCP we could use preload and fetch priority to increase the network priority and load the LCP image much faster.

This can be applied to pre-rendered pages.

e.g. inject

• <img src="img.png" fetchpriority="high" />
• <link rel="preload" as="image" href="img.png" fetchpriority="high" />

State of the art

ATM preloading of images is done manually. An example is manually adding the LCP image in the index.html. This can only improve situations where the LCP is static.

Idea

For pre-rendered pages we can run analyzing tools against the page e.g. lighthouse and determine the LCP and if it is an image. Here is a detailed definition LCP.

In our case the following content is relevant:

• <img> elements
• <image> elements inside an <svg> element
• <video> elements (the poster image is used)
• An element with a background image loaded via the url()

After identifying the LCP element and its content source we can insert a link tag using the preload rel attribute to improve the download prioritization of the content by the browser, thus overwriting the HTML file of the pre-rendered page.

Implementation proposal

As the code should also be executed in the CI pipeline we should create a CLI executable in the CI. The CLI should maintain the following commands:

• Optimize (It measures the LCP, and then injects the LCP as a preload link tag and re-analyzes the LCP).
• Analyze (Determent if LCP is the image or video, determine if the rendered size and the intrinsic size are the same or smaller and if it's delivered in a next-gen format).