Time to First Meaningful Paint (TTFMT) is a modern performance metric introduced by few engineers from Google, and is the time to paint the main content that users are interested in, so the thing the users came here for.
Rendering some background color can be much easier and faster, but that’s definitely not what the users was looking for when they entered your website.
In order to identify the main content of the page, we define these primary elements as Hero Elements, but for now there is not a clear way for us to get paint times of specific elements of the DOM (Document Object Model).
No browsers exposes this metric at the moment, but it seems to get big traction. You can inspect the First Contentful Paint (FCP) and First Meaningful Paint (FMP) with KissFront, which allows easy monitoring and modern metrics inspection.
First Meaningful Paint can be also defined as the paint after which the biggest layout change has happened.
Thanks for reading. I hope you learned something interesting about React!
If you found this article useful, please share it with others. Don’t forget to subscribe to get notified for the upcoming articles.