{"id":1416,"date":"2019-02-01T12:15:10","date_gmt":"2019-02-01T12:15:10","guid":{"rendered":"https:\/\/loadfocus.com\/blog\/?p=1416"},"modified":"2023-09-12T16:46:50","modified_gmt":"2023-09-12T16:46:50","slug":"what-is-first-paint-fp-in-modern-performance-metrics","status":"publish","type":"post","link":"https:\/\/loadfocus.com\/blog\/2019\/02\/what-is-first-paint-fp-in-modern-performance-metrics","title":{"rendered":"What is First Paint (FP) in Modern Performance Metrics?"},"content":{"rendered":"<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\"><\/span> <span class=\"rt-time\"> 2<\/span> <span class=\"rt-label rt-postfix\">minutes read<\/span><\/span><p class=\"lead\"><!-- pn-tldr --><\/p>\n<h2>Key takeaways<\/h2>\n<ul>\n<li>First Paint is the moment any pixel changes, which can be a background colour.<\/li>\n<li>It is a weak signal alone, since it does not mean anything useful is visible.<\/li>\n<li>Track it alongside FCP and LCP rather than on its own.<\/li>\n<\/ul>\n<p><!-- \/pn-tldr --><strong>First Paint (FP)<\/strong> shows the time it took for something to happen, anything at all, however this can be not so useful, as this first render, may not be very useful for the user, and for the overall experience.<\/p>\n<p>First Paint entry marks the first key moment developers care about in page load \u2013 when the browser has started to render the page. <em>More details here<\/em> <a href=\"https:\/\/w3c.github.io\/paint-timing\/#first-paint\">https:\/\/w3c.github.io\/paint-timing\/#first-paint<\/a><\/p>\n<h3>How to improve the First Paint (FP)<\/h3>\n<p>One idea is to trim the size of your JavaScript bundles in order to improve the FP, especially for slow networks like 3G or Edge, which are still available in areas with poor connectivity, or on low-end mobile phones.<br \/>\nHave a look which functionality you use from a library, and try to mimic that in a much simpler fashion.<\/p>\n<p>An improvement to First Paint (FP) is the <a href=\"https:\/\/loadfocus.com\/blog\/2019\/01\/31\/what-is-first-contentful-paint\/\">First Contentful Paint (FCP)<\/a> which helps you understand the time it took to render something useful for the user.<\/p>\n<p>First Paint and <a href=\"https:\/\/loadfocus.com\/blog\/2019\/01\/31\/what-is-first-contentful-paint\/\">First Contentful Paint<\/a> metrics can be identical on fast websites, but on more complex websites, with various client and server side rendering, the First Contentful Paint would be the best metric to use.<!-- pn-faq --><\/p>\n<h2>Frequently Asked Questions<\/h2>\n<h3>What is First Paint?<\/h3>\n<p>The moment any pixel changes on screen, which can be as little as a background colour appearing. It marks the browser starting to draw, not the page becoming useful.<\/p>\n<h3>Is it a good metric on its own?<\/h3>\n<p>No. Painting a background does not mean anything useful is visible, so a fast First Paint can sit in front of a page that is still blank in every way the visitor cares about.<\/p>\n<h3>How should I use it?<\/h3>\n<p>Alongside FCP and LCP. Read together they describe when drawing started, when content appeared, and when the main content finished.<\/p>\n<p><!-- \/pn-faq --><!-- pn-related-reading --><\/p>\n<h2>Related reading<\/h2>\n<ul>\n<li><a href=\"https:\/\/loadfocus.com\/blog\/2019\/01\/what-is-first-contentful-paint\">What is First Contentful Paint?<\/a><\/li>\n<li><a href=\"https:\/\/loadfocus.com\/blog\/2019\/02\/what-is-first-meaningful-paint-fmp\">What is First Meaningful Paint (FMP)?<\/a><\/li>\n<li><a href=\"https:\/\/loadfocus.com\/blog\/2019\/03\/chrome-extension-for-google-lighthouse-as-a-service\">Chrome Extension for Google Lighthouse as a service<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\"><\/span> <span class=\"rt-time\"> 2<\/span> <span class=\"rt-label rt-postfix\">minutes read<\/span><\/span>Key takeaways First Paint is the moment any pixel changes, which can be a background colour. It is a weak signal alone, since it does not mean anything useful is visible. Track it alongside FCP and LCP rather than on its own. First Paint (FP) shows the time it took for something to happen, anything&#8230;  <a href=\"https:\/\/loadfocus.com\/blog\/2019\/02\/what-is-first-paint-fp-in-modern-performance-metrics\" class=\"more-link\" title=\"Read What is First Paint (FP) in Modern Performance Metrics?\">Read more &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":3743,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[104],"tags":[281,280],"class_list":["post-1416","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website-speed-testing","tag-first-paint-fp-vs-first-contentful-paint-fcp","tag-first-render-of-the-web-page"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/posts\/1416","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/comments?post=1416"}],"version-history":[{"count":1,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/posts\/1416\/revisions"}],"predecessor-version":[{"id":2819,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/posts\/1416\/revisions\/2819"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/media\/3743"}],"wp:attachment":[{"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/media?parent=1416"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/categories?post=1416"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/tags?post=1416"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}