Original address: github.com/berwin/Blog…

FMP (short for “First Meaningful Paint,” which translates as “First effectively drawn”) represents the point at which the “main content” of a page begins to appear on the screen. It is the primary metric we use to measure the user loading experience.

FMP values are usually obtained using a measurement tool such as Lighthouse. But here’s the problem: The “main content” is different from product to product; For blogs, the main content is the article title + the first screen text (visible text), for search engines the main content is the search results.

Only we know what the main content of our product is, so how does the measurement tool capture the FMP value? Does it capture this FMP accurately?

We will discuss these two issues in detail in this article.

A layout-based approach to capture FMP

In this section we describe a layout-based approach to capturing FMP with 77% accuracy.

As the web page is loaded and parsed, the browser gradually adds Layout objects to the Layout Tree for Layout.

Taking the Google search results page as an example, the figure below shows how many layout objects were added to the layout tree when the page was loaded (abscissa is time, ordinate is quantity).

Figure 1 – Layout objects

FCP (First Contentful Paint) takes 1.577 seconds, 60 layout objects have been added to the layout tree, and only one Header has been rendered; At 1.86 seconds, 261 layout objects are added to the layout tree. These objects are search results, followed by a Paint at 1.9 seconds, which is FMP. Then some remaining layout objects at the bottom of the page were added to the layout tree and drawn, and the final page was completed in 2.425 seconds.

As you can see from this example, the number of layout objects is closely related to the integrity of the page load.

After a lot of experimentation and testing, it was found that a large number of new layout objects were added to the layout tree at a time that was very close to FMP. And in the case of FMP, the number of new layout objects is more important than the number of new layout objects.

So we get a formula for FMP:

FMP = Paint after the maximum layout changeCopy the code

Maximum layout change refers to the point in time at which the largest number of layout objects have been added to the layout tree.

As shown in Figure 1, the maximum layout change is 1.86 seconds, and the next drawing time is 1.907 seconds, so the 1.907 time is FMP.

The accuracy of FMP captured in this way is about 57.1%, which is much better than FCP alone, but in most cases it still fails to capture a truly meaningful drawing.

Assuming we have a long page, the following figure shows how many layout objects for this page were added to the layout tree and when:

Figure 2 – Layout object 2

In Figure 2, the main content of the page is drawn in 6.047 seconds, so the FMP of the page should be 6.047 seconds, but if we follow our previous algorithm, the FMP given is 24.25 seconds, because 23.8 seconds is the maximum layout change, and the next drawing time for the maximum layout change is 24.25 seconds.

But the fact is that 24.25 seconds is not important because it is drawn in an off-screen area that the user can’t see at all.

How do I prevent these off-screen layouts from interfering with the accuracy of FMP measurements? The ideal way is to calculate whether elements are visible, but doing expensive calculations during layout is not a good idea either. So the solution is to use “weights” that demote layout objects when their position exceeds the height of the screen. So now we use the “meaning” of the layout to capture the FMP, not the “number” of layout objects.

So we can get an improved formula to calculate FMP:

Meaning = Number of layout objects at the current time/Max (1, page height/screen height) FMP = Paint after the most significant layout changeCopy the code

Note: In this formula, page height = position of the current layout object on the page

The following graph shows the “layout meaning” flow diagram calculated using this formula:

Figure 5 – Layout meaning

Right now, the most significant layout change is 5.89 seconds, and the next drawing is 6.047 seconds, which is FMP. The accuracy of FMP captured by this algorithm can reach 62.1%.

Web fonts can beat the algorithm’s accuracy in capturing FMP by assuming that the maximum layout change for a Web page is 2.51 seconds, but there is nothing on the screen because the Web font is still loading.

Why Web fonts cause this and how to optimize them are beyond the scope of this article

Blink’s layout layer logic doesn’t care if the text is displayed or not, but if the font is displayed or not is crucial to the user experience, so the visibility of the font should be taken into account when calculating FMP.

If a Web font is loading when a layout occurs, you should delay recording the layout change until the font is loaded, but you need to set a 3-second timeout or wait indefinitely. But it was too radical to apply this rule to all Web fonts, because some icon fonts are not really important and should not affect FMP time, so I ended up with 200 + characters that block FMP time. FMP is now calculated with 77% accuracy.

conclusion

This article introduced the principles of a layout-based approach to FMP capture, and now we should understand what FMP capture is using the tool.

This number is not a real FMP per se. It is an algorithm that guesses that a certain point in time may be FMP based on the number of layout objects, meaning, and Web fonts. The current accuracy rate is 77%.