What is the First Meaningful Paint metric?

Definition of First Meaningful Paint

    The First Meaningful Paint metric belongs to the set of metrics that attempt to measure perceived user experience, specifically the time on a page when an important element first loads. Generally this element is what you would want a user on your site to experience first, namely a banner image showing the current sale, the company logo, or an important announcement. This page element is called in some contexts the Hero Element since it represents a crucial milestone in the user's perception of the load time for your page.

Configuring First Meaningful Paint

    In order to capture the time when the Hero Element loads on a page, this element must be configured for each page a Synthetic Monitor measures. This configuration can be accessed when creating or updating a Synthetic Monitor, after clicking the Advanced Configuration button located at the bottom of the page.

    The page element sub-string refers to part of elements name used to identify the Hero Element to mark the time when this element loads on the page. Multiple element sub-strings can be added, but the load time of the first element found will be reported back as the First Meaningful Paint. For example common practice for naming conventions is to have the word 'Hero' somewhere in the element name, which can be configured here in the Synthetic Monitor by simply entering in the word 'Hero'. An example of this would be a banner image with a weekly sale, which changes week to week from 'Week1_03032020_Hero.jpg' to 'Week2_03102020_Hero.jpg'. Here the load time when this image loads on the page can be configured by entering in 'Hero' or 'Hero.jpg' since the search here is for the sub-string on the elements name.

How is First Meaningful Paint different from First Contentful Paint?

    First Contentful Paint "measures the time from navigation to the time when the browser renders the first bit of content from the DOM. This is an important milestone for users because it provides feedback that the page is actually loading."

    The first bit of content here refers to "any text, image (including background images), non-white canvas or SVG. This excludes any content of iframes, but includes text with pending webfonts."

    The important thing to note here is that First Contentful Paint is pulled directly from Google Chrome's Paint Timing API, and depends on the timestamp provided there when the browser first renders any bit of content.

    However since First Meaningful Paint measures the time from navigation to the time when the browser first loads a user defined element, this metric provides a more customized metric specific to the important elements on your page.

    Both metrics have their purpose in understanding perceived user experience, and properly configuring the hero element for capturing the First Meaningful Paint is an important task when configuring a Synthetic Monitor to measure your most important pages.