Track First Contentful Paint with PerformanceObserver and Google Analytics
"If you can't measure it, you can't improve it." The first step when doing performance work is to measure meaningful metrics to establish a baseline for improvement. In this lesson, we'll measure Time to First Contentful Paint, a user-centric performance metric. We'll first create a PerformanceObserver object and explore the information it captures. Next, we'll send that information to Google Analytics to track FCP over time. Lastly, we'll discover why PerformanceObserver is one of the few bits of Javascript that rightly belong in the head of your document.
Instructor: [00:00] Here we have a website pre-installed with Google Analytics, a light blue background color, and an image of a kitten. Because we want to improve the performance of this site, let's instrument it and monitor the First Contentful Paint time of the page.
[00:14] In order to do this, we'll use PerformanceObserver to capture the First Contentful Paint metric and the paint timings. To do this, we instantiate a PerformanceObserver. PerformanceObserver takes in one parameter, a call-back function. That call-back function takes in as its parameter a list of performance timings.
[00:33] We can iterate through this list with a for of and calling the list docket entries on that. With that, we can console log the name of the entry and the start time of the entry. Once we've done that, we tell the observer that we want to observe types of paint.
[00:53] 18 milliseconds is when the browser was first able to render the blue background. 66 milliseconds was when the browser was able to first render the first bits of that kitten. Let's log these values now to Google Analytics.
[01:05] We do this by calling the built-in GA function. First parameter is send. Second parameter is timing, which tells Google Analytics to send a timing event with a name of our performance entry followed by timing variable, which we'll here use arbitrary user ID and an integer value for how long the entry took.
[01:32] If we save this, we can verify that the network is actually sending requests by loading up image tab of the console, reloading our page, and seeing that a request went out with a timing type, the First Contentful Paint timing variable with a value of 121.
[01:50] Going back to our script, you'll notice one peculiar thing. We wrote our code in the head of the document rather than in the body of the document. This is because if you put the code in the bottom of the body, you may be listing to the PerformanceObserver too late to catch the First Contentful Paint.
[02:05] We've also in-lined this script so there's no additional load-time burden from having to load the instrumentation code. Lastly, if you need IE support, you'll need to check to see if PerformanceObserver exists on the window first and wrapping your instrumentation code within an if block.
[02:25] If we run this code again, we see that it still works. If we now visit Google Analytics and choose user timers in the site speed section of behavior, we see that it logs First Contentful Paint and first paint timings.