First (Contentful) Paint with a touch of Perfume(.js)

Leonardo Zizzamia

4 min read

·

Mar 13, 2018

--

1

Listen

Share

The experience of navigating and using a web page is defined by four key moments:

1. it ishappening;
2. it is useful;
3. it is usable;
4. it is delightful.

First Paint (FP) and First Contentful Paint (FCP) are the first keyprogress metrics focused on giving the perception that the pageis happening. They mark the point immediately after navigation when the browser renders pixels to the screen.

Press enter or click to view image in full size

The main difference between the two metrics is the following:

• FP is the exact time the browser renders anything as visually different from what was on the screen before navigation, e.g. a background change after a long blank white screen time.
• FCP is the exact time the browser renders the first bit of content from the DOM, which can be anything from an important image, text, or even the small SVG at the bottom of the page.

Together they refer to the precise time at which navigation started successfully, with elements rendered to the page and showing thatit is happening.

Measuring

Web performance APIs, available in multiple browsers, are the solution to these real world measurements.

We use thePerformanceObserver interface to observe and receive notifications about new performance metrics as they are recorded in thePerformance Timeline. Those accurate measurements result in High Resolution Time (DOMHighResTimeStamp) values present inside thePerformance Entry object.

We create a performance observer, instructed to observe specific entry types, including; “measure”, “resource”, “longtask” and most importantly, “paint”. The callback is invoked asynchronously as soon as the entries of that types become available.

All entries are surfaced by thePerformanceEntryListobject, which by the method getEntries() come easy iterate through all the sequence of PerformanceEntry.

To report the time of FP and FCP, the PerformanceEntry has been extended to the new interfacePerformancePaintTiming(under development asW3C draft), which will differ by the name values: “first-paint”, “first-contentful-paint”.

API’s in practice

Let’s play with alive demo. We have an empty page where there are two DOM changes, the first is the background color, and the last is an H1 attached to the BODY with a simple text. WithPerformanceObeserver we observe the entry type “paint” which asynchronously will return two measurements:

1. “first-paint” when the yellow background is visible after navigation, in the scenario around 400ms;
2. “first-contentful-paint” when the H1 is rendered to the DOM, for the purpose of this demo we waited 600 ms before executing and ending with a final measurement of 1 second.

This demo works well in Chrome where from v60 theFP andFCP APIs are supported. But for other browsers, we still have to wait for the full support of these new APIs. You can follow this bug to keep track of when the support will land on Firefoxhttps://bugzilla.mozilla.org/show_bug.cgi?id=1403027 .

A touch of Perfume.js

Let’s add a touch ofPerfume.js to ourlive demo. Instead of directly using the web performance API’s we will use a small JavaScript library (https://github.com/Zizzamia/perfume.js) formeasuringFP andFCP.

The results are the same as in the previous demo, with two extra important advantages:

1. cross-browser support, which will use the modern native APIs when available and some emulated methods for other scenarios;
2. reporting the metrics results to Google Analytics User timing which supports the customuser timing variabletimingVar:”name”.

Analytics

In a large web project with multiple engineers contributing to the same initial JS bundle size, monitoringFP is a significant way to catch regressions and indicates to the user the browser has started rendering.

Usually,FCP is a less reliable metric, because it will catch meaningless things such as a copyright image but at the same time for a single page app where most of the content is rendered at the same time, the first contentful paint metric plays a major role.

Press enter or click to view image in full size

Now, take a few extra minutes and startmeasuring the metrics for your app! Have fun 🔥 🚀 🌕

For extra questions, send me a tweet or a private message at Twitter@zizzamia.