{"id":6211,"date":"2020-01-07T11:33:44","date_gmt":"2020-01-07T11:33:44","guid":{"rendered":"https:\/\/www.acmethemes.com\/blog\/?p=6211"},"modified":"2025-05-12T06:56:54","modified_gmt":"2025-05-12T06:56:54","slug":"first-contentful-paint-and-first-meaningful-paint","status":"publish","type":"post","link":"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/","title":{"rendered":"First Contentful Paint (FCP) and First Meaningful Paint (FMP) Explained"},"content":{"rendered":"<p>Whenever you are testing your website on speed testing tools such as <strong><a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google&#8217;s PageSpeed Insights<\/a><\/strong>, <strong>GTMetrix.com<\/strong>\u00a0 you see the result with <strong>First Contentful Paint<\/strong> and <strong>First Meaningful Paint<\/strong> along with other speed metrics. These are important user-centric metrics that can tell you a lot about how long your visitors are waiting for content.\u00a0 Let&#8217;s give a look at the following two screenshots.<\/p>\n<p><strong>PageSpeed Insights speed report:<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6237 size-full\" src=\"https:\/\/www.acmethemes.com\/blog\/wp-content\/uploads\/2020\/01\/FCP-and-FMP-metrics-e1588261397549.jpg\" alt=\"FCP and FMP metrics\" width=\"820\" height=\"505\" \/><\/p>\n<p><strong>GTMetrix.com speed report:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6239 size-full\" src=\"https:\/\/www.acmethemes.com\/blog\/wp-content\/uploads\/2020\/01\/GTMetrix-Report-e1588261423166.jpg\" alt=\"GTMetrix Report\" width=\"820\" height=\"421\" \/><\/p>\n<p>For any website, these two metrics indicate how fast is a particular website&#8217;s contents are opening on the screen. You might be wondering what those metrics exactly are. In this article, we are going to cover the First Contentful Paint (FCP) and First Meaningful Paint (MFP) in detail. Also, we discuss 4 methods to reduce <strong>Paint Times<\/strong> for your WordPress site in order to improve your PageSpeed Insights score.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69f370c411aaf\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69f370c411aaf\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/#What_is_First_Contentful_Paint_FCP\" >What is First Contentful Paint (FCP)?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/#What_is_First_Meaningful_Paint_FMP\" >What is First Meaningful Paint (FMP)?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/#How_to_Speed_First_Contentful_Paint_FCP_and_First_Meaningful_Paint_FMP\" >How to Speed First Contentful Paint (FCP) and First Meaningful Paint (FMP)<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/#1_Reduce_the_number_of_render-blocking_external_CSS_and_scripts_upon_which_the_page_depends\" >1. Reduce the number of render-blocking external CSS and scripts upon which the page depends.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/#2_Use_HTTP_Caching\" >2. Use HTTP Caching<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/#3_Minify_and_Compress_text-based_assets\" >3. Minify and Compress text-based assets<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/#4_Optimize_JavaScript\" >4. Optimize JavaScript<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/#Summary\" >Summary<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"What_is_First_Contentful_Paint_FCP\"><\/span>What is First Contentful Paint (FCP)?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>First contentful paint (FCP)<\/strong> is the first content that is rendered on the screen when users browse the website. It measures the time from navigation to the time when the browser renders the first piece of content defined in the <strong>Document Object Model (DOM).<\/strong> This can be text, an image or canvas render.<\/p>\n<p>In the case of the WordPress website, the <strong>header elements<\/strong> are the first content the begin render. Visitor see the site logo and the navigation menu.<\/p>\n<hr \/>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6226 size-full\" src=\"https:\/\/www.acmethemes.com\/blog\/wp-content\/uploads\/2020\/01\/First-Contentful-Paint-e1588261447857.jpg\" alt=\"First Contentful Paint\" width=\"820\" height=\"98\" \/><\/p>\n<hr \/>\n<p>There are two phases in the First Contentful Paint. <strong>First Paint<\/strong>, and <strong>Contentful Paint<\/strong>.<\/p>\n<p><strong>First Paint &#8211; <\/strong>First Paint is triggered when a render is detected in the browser. This could be something as subtle and uninformative as a change in the background color. The issue with this timing is that first paints can be triggered relatively early on in the page load, while not necessarily delivering any content or information to the user for consumption.<\/p>\n<p>Components of websites can load in a staggered fashion and while a background color may be painted fast, actual content\/interactivity may take a longer time to load.<\/p>\n<p><strong>Contentful Paint &#8211;\u00a0<\/strong>First Contentful Paint is triggered when the first bit of content from the <strong><em>Document Object Model (DOM)<\/em><\/strong> is painted. This can be text, an image or canvas render defined in the DOM.<\/p>\n<p>Because the focus is on content, the idea is that this metric gives you an idea of when your user receives consumable information such as text, visuals, etc.<\/p>\n<p>The different phases of <strong>First Paint<\/strong> and <strong>Contentful Paint<\/strong> is shown in the image below:<\/p>\n<figure id=\"attachment_6221\" aria-describedby=\"caption-attachment-6221\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-6221 size-full\" src=\"https:\/\/www.acmethemes.com\/blog\/wp-content\/uploads\/2020\/01\/First-Contentful-Paint-Diagram-e1588261472160.jpg\" alt=\"First Contentful Paint Diagram\" width=\"820\" height=\"343\" \/><figcaption id=\"caption-attachment-6221\" class=\"wp-caption-text\"><em><strong>Phases of First Contentful Paint<\/strong><\/em><\/figcaption><\/figure>\n<h2><span class=\"ez-toc-section\" id=\"What_is_First_Meaningful_Paint_FMP\"><\/span>What is First Meaningful Paint (FMP)?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>When a website&#8217;s contents are fully loaded that users are looking for, that is called First Meaningful Paint. \u00a0This is the time at which the user feels that the primary content of the page is visible. As the name suggests after the first meaningful paint render, it giver meaningful information to the users.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6228 size-full\" src=\"https:\/\/www.acmethemes.com\/blog\/wp-content\/uploads\/2020\/01\/First-Meaningful-paint-e1588261514486.jpg\" alt=\"First Meaningful paint\" width=\"820\" height=\"343\" \/><\/p>\n<p>The meaningful information differs from site to site but the general practice currently is to designate the rendering of valuable content known as hero elements. Hero elements include marquees, images, and headings that are likely to be more meaningful to a user when they visit the site, making them good flags for the FMP timing.<\/p>\n<p>For a blog website, hero elements could be blog <a href=\"https:\/\/www.acmethemes.com\/blog\/set-featured-image-on-post\/\" target=\"_blank\" rel=\"noopener noreferrer\">posts with featured images<\/a>, and for social sites, hero elements could be timelines, users profile.<\/p>\n<p>The following image shows a fully loaded website of acme themes.<\/p>\n<h2><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6230 size-full\" src=\"https:\/\/www.acmethemes.com\/blog\/wp-content\/uploads\/2020\/01\/First-Meaningful-Paint-Acme-Themes-e1588261532612.jpg\" alt=\"First Meaningful Paint Acme Themes\" width=\"820\" height=\"485\" \/><\/h2>\n<h2><span class=\"ez-toc-section\" id=\"How_to_Speed_First_Contentful_Paint_FCP_and_First_Meaningful_Paint_FMP\"><\/span>How to Speed First Contentful Paint (FCP) and First Meaningful Paint (FMP)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To improve First Contentful Paint, speed up the download time of resources or do less work that blocks the browser from rendering DOM content. The following are ways to improve the website&#8217;s speed.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"1_Reduce_the_number_of_render-blocking_external_CSS_and_scripts_upon_which_the_page_depends\"><\/span>1. Reduce the number of render-blocking external CSS and scripts upon which the page depends.<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>This is the first way you can reduce the paint time of your website by eliminating the render-blocking resources. Render block is anything that is getting in the ways of rendering the <strong>Document Object Model (DOM)<\/strong>. A CSS file is treated as a render-blocking resource meaning the browser won&#8217;t render any processed content until the CSSOM is constructed. Make sure to keep your CSS lean, deliver it as quickly as possible, and use media types and queries to unblock rendering.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_Use_HTTP_Caching\"><\/span>2. Use HTTP Caching<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>HTTP caching is another way os reducing the paint time of any websites. When someone visits a website, everything the site needs to display and operate has to come from somewhere. All the text, images, CSS styles, scripts, media files, and so on must be retrieved by the browser for display or execution.<\/p>\n<p>You can give the browser choices about where it can retrieve a resource from, and that can make a big difference in your page&#8217;s load speed.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"3_Minify_and_Compress_text-based_assets\"><\/span>3. Minify and Compress text-based assets<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Your webpages consist of text-based HTML, CSS and JavaScript files. If you can\u2019t eliminate a file because it is essential, then you need to reduce the file size as much as possible. There are ways you can reduce the file size, wither minify or compress.<\/p>\n<ul>\n<li><strong>Minification: <\/strong>Minification\u00a0refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser &#8211; e.g. code comments and formatting, removing unused code, using shorter variable and function names, and so on.<\/li>\n<li><strong>Compression: <\/strong>Compression if the process of detecting patterns and duplication in the text file and encodes them much more efficiently.<\/li>\n<\/ul>\n<p>Both of these techniques significantly reduce the paint time.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"4_Optimize_JavaScript\"><\/span>4. Optimize JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The JavaScript file is the heaviest file compared to other files for a website. Images, for instance, must be decoded, but JavaScript must be parsed, compiled, and then finally executed, taking up lots of valuable time. You can use different methods such as <strong>Tree Shaking<\/strong> and <strong>Code Splitting <\/strong>to optimize your JavaScript file.<\/p>\n<ul>\n<li><strong>Tree Shaking: <\/strong>Tree shaking\u00a0is a term commonly used within a JavaScript context to describe the removal of dead code.<\/li>\n<li><strong>Code Splitting: <\/strong>It is the process of splitting up the code into bite-sized chunks and moving the chunks that aren\u2019t critical out of the head of your site, reducing the first paint time.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Summary\"><\/span>Summary<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Talking about reducing the page load time, this is just one perspective (technical solution) that speed testing tools consider. There are various other factors that affect <a href=\"https:\/\/www.acmethemes.com\/blog\/tips-to-speed-up-wordpress-website\/\" target=\"_blank\" rel=\"noopener noreferrer\">website loading speed<\/a>.<\/p>\n<p>Both <strong>First Contentful Paint<\/strong> and <strong>First Meaningful Paint <\/strong>should be less than a second for the best user experience. Because these metrics are user-centered metrics that can tell you a lot about how long your visitors are waiting for content. So, you can follow the above-listed methods to reduce <strong>FCP<\/strong> and <strong>FMP<\/strong>. Check out your site&#8217;s page speed at <strong><a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google&#8217;s PageSpeed Insights<\/a><\/strong> and find out the status of your website.<\/p>\n<hr \/>\n<p><strong>Other SEO Articles:<\/strong><\/p>\n<p><strong><a href=\"https:\/\/www.acmethemes.com\/blog\/essential-wordpress-plugins\/\" target=\"_blank\" rel=\"noopener noreferrer\">\u2705<\/a><a href=\"https:\/\/www.acmethemes.com\/blog\/no-follow-vs-do-follow-link\/\" target=\"_blank\" rel=\"noopener noreferrer\">Do-Follow vs No-Follow Outbound Link<\/a>\u00a0\u2013 Which one is better?<\/strong><\/p>\n<p><strong><a href=\"https:\/\/www.acmethemes.com\/blog\/essential-wordpress-plugins\/\" target=\"_blank\" rel=\"noopener noreferrer\">\u2705<\/a><a href=\"https:\/\/www.acmethemes.com\/blog\/no-follow-vs-do-follow-link\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress 301 Redirect &#8211; Step By Step Guide\u00a0<\/a><\/strong><\/p>\n<p><strong><a href=\"https:\/\/www.acmethemes.com\/blog\/essential-wordpress-plugins\/\" target=\"_blank\" rel=\"noopener noreferrer\">\u2705<\/a><a href=\"https:\/\/www.acmethemes.com\/blog\/no-follow-vs-do-follow-link\/\" target=\"_blank\" rel=\"noopener noreferrer\">Outbound Link &#8211; Difference Between No Follow vs Do-Dollow Links<\/a><\/strong><\/p>\n<p>If you liked this article, then consider following us on\u00a0<strong>Twitter<\/strong>\u00a0and<strong>\u00a0<a href=\"https:\/\/www.facebook.com\/acmethemes\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">Facebook<\/a><\/strong>\u00a0and\u00a0<strong><a href=\"https:\/\/www.linkedin.com\/in\/acmethemes\/\" target=\"_blank\" rel=\"noreferrer noopener\">LinkedIn<\/a><\/strong>.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Whenever you are testing your website on speed testing tools such as Google&#8217;s PageSpeed Insights, GTMetrix.com\u00a0 you see the result with First Contentful Paint and First Meaningful Paint along with other speed metrics. These are important user-centric metrics that can tell you a lot about how long your visitors are waiting for content.\u00a0 Let&#8217;s give [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6242,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[49],"tags":[58,126],"class_list":["post-6211","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-tips","tag-seo","tag-website-speed"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>First Contentful Paint &amp; First Meaningful Paint - Explained<\/title>\n<meta name=\"description\" content=\"What is First Contentful Paint (FCP) &amp; First Meaningful Paint (FMP) metrics in website loading speed. Everything explained\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"First Contentful Paint &amp; First Meaningful Paint - Explained\" \/>\n<meta property=\"og:description\" content=\"What is First Contentful Paint (FCP) &amp; First Meaningful Paint (FMP) metrics in website loading speed. Everything explained\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/\" \/>\n<meta property=\"og:site_name\" content=\"Acme Themes Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/acmethemes\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-07T11:33:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-12T06:56:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.acmethemes.com\/blog\/wp-content\/uploads\/2020\/01\/FCP-and-MFP.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1170\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Acme Themes\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@acme_themes\" \/>\n<meta name=\"twitter:site\" content=\"@acme_themes\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Acme Themes\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/\"},\"author\":{\"name\":\"Acme Themes\",\"@id\":\"https:\/\/www.acmethemes.com\/blog\/#\/schema\/person\/a183debef87250cd8412b17cfd5c5a03\"},\"headline\":\"First Contentful Paint (FCP) and First Meaningful Paint (FMP) Explained\",\"datePublished\":\"2020-01-07T11:33:44+00:00\",\"dateModified\":\"2025-05-12T06:56:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/\"},\"wordCount\":1174,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.acmethemes.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.acmethemes.com\/blog\/wp-content\/uploads\/2020\/01\/FCP-and-MFP.jpg\",\"keywords\":[\"SEO\",\"Website Speed\"],\"articleSection\":[\"WordPress Tips\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/\",\"url\":\"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/\",\"name\":\"First Contentful Paint & First Meaningful Paint - Explained\",\"isPartOf\":{\"@id\":\"https:\/\/www.acmethemes.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.acmethemes.com\/blog\/wp-content\/uploads\/2020\/01\/FCP-and-MFP.jpg\",\"datePublished\":\"2020-01-07T11:33:44+00:00\",\"dateModified\":\"2025-05-12T06:56:54+00:00\",\"description\":\"What is First Contentful Paint (FCP) & First Meaningful Paint (FMP) metrics in website loading speed. Everything explained\",\"breadcrumb\":{\"@id\":\"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/#primaryimage\",\"url\":\"https:\/\/www.acmethemes.com\/blog\/wp-content\/uploads\/2020\/01\/FCP-and-MFP.jpg\",\"contentUrl\":\"https:\/\/www.acmethemes.com\/blog\/wp-content\/uploads\/2020\/01\/FCP-and-MFP.jpg\",\"width\":1170,\"height\":500,\"caption\":\"FCP and FMP\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.acmethemes.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"First Contentful Paint (FCP) and First Meaningful Paint (FMP) Explained\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.acmethemes.com\/blog\/#website\",\"url\":\"https:\/\/www.acmethemes.com\/blog\/\",\"name\":\"Acme Themes Blog\",\"description\":\"WordPress Themes and Plugins, WordPress Tips and Tricks, News and Events\",\"publisher\":{\"@id\":\"https:\/\/www.acmethemes.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.acmethemes.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.acmethemes.com\/blog\/#organization\",\"name\":\"Acme Themes\",\"url\":\"https:\/\/www.acmethemes.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.acmethemes.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.acmethemes.com\/blog\/wp-content\/uploads\/2016\/12\/acmelogo.jpg\",\"contentUrl\":\"https:\/\/www.acmethemes.com\/blog\/wp-content\/uploads\/2016\/12\/acmelogo.jpg\",\"width\":3600,\"height\":1800,\"caption\":\"Acme Themes\"},\"image\":{\"@id\":\"https:\/\/www.acmethemes.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/acmethemes\/\",\"https:\/\/x.com\/acme_themes\",\"https:\/\/www.instagram.com\/acmethemes\/\",\"https:\/\/www.linkedin.com\/in\/acmethemes\",\"https:\/\/myspace.com\/acmethemes\",\"https:\/\/www.pinterest.com\/acmethemes\/\",\"https:\/\/www.youtube.com\/c\/AcmeThemes\",\"https:\/\/en.wikipedia.org\/wiki\/User:AcmeThemes\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.acmethemes.com\/blog\/#\/schema\/person\/a183debef87250cd8412b17cfd5c5a03\",\"name\":\"Acme Themes\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/648bc894290f2d11cf2348dd50014c0cf715a434282801b0a72dd7fa49f13d73?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/648bc894290f2d11cf2348dd50014c0cf715a434282801b0a72dd7fa49f13d73?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/648bc894290f2d11cf2348dd50014c0cf715a434282801b0a72dd7fa49f13d73?s=96&d=mm&r=g\",\"caption\":\"Acme Themes\"},\"url\":\"https:\/\/www.acmethemes.com\/blog\/author\/acmeblogadmin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"First Contentful Paint & First Meaningful Paint - Explained","description":"What is First Contentful Paint (FCP) & First Meaningful Paint (FMP) metrics in website loading speed. Everything explained","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/","og_locale":"en_US","og_type":"article","og_title":"First Contentful Paint & First Meaningful Paint - Explained","og_description":"What is First Contentful Paint (FCP) & First Meaningful Paint (FMP) metrics in website loading speed. Everything explained","og_url":"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/","og_site_name":"Acme Themes Blog","article_publisher":"https:\/\/www.facebook.com\/acmethemes\/","article_published_time":"2020-01-07T11:33:44+00:00","article_modified_time":"2025-05-12T06:56:54+00:00","og_image":[{"width":1170,"height":500,"url":"https:\/\/www.acmethemes.com\/blog\/wp-content\/uploads\/2020\/01\/FCP-and-MFP.jpg","type":"image\/jpeg"}],"author":"Acme Themes","twitter_card":"summary_large_image","twitter_creator":"@acme_themes","twitter_site":"@acme_themes","twitter_misc":{"Written by":"Acme Themes","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/#article","isPartOf":{"@id":"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/"},"author":{"name":"Acme Themes","@id":"https:\/\/www.acmethemes.com\/blog\/#\/schema\/person\/a183debef87250cd8412b17cfd5c5a03"},"headline":"First Contentful Paint (FCP) and First Meaningful Paint (FMP) Explained","datePublished":"2020-01-07T11:33:44+00:00","dateModified":"2025-05-12T06:56:54+00:00","mainEntityOfPage":{"@id":"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/"},"wordCount":1174,"commentCount":1,"publisher":{"@id":"https:\/\/www.acmethemes.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/#primaryimage"},"thumbnailUrl":"https:\/\/www.acmethemes.com\/blog\/wp-content\/uploads\/2020\/01\/FCP-and-MFP.jpg","keywords":["SEO","Website Speed"],"articleSection":["WordPress Tips"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/","url":"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/","name":"First Contentful Paint & First Meaningful Paint - Explained","isPartOf":{"@id":"https:\/\/www.acmethemes.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/#primaryimage"},"image":{"@id":"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/#primaryimage"},"thumbnailUrl":"https:\/\/www.acmethemes.com\/blog\/wp-content\/uploads\/2020\/01\/FCP-and-MFP.jpg","datePublished":"2020-01-07T11:33:44+00:00","dateModified":"2025-05-12T06:56:54+00:00","description":"What is First Contentful Paint (FCP) & First Meaningful Paint (FMP) metrics in website loading speed. Everything explained","breadcrumb":{"@id":"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/#primaryimage","url":"https:\/\/www.acmethemes.com\/blog\/wp-content\/uploads\/2020\/01\/FCP-and-MFP.jpg","contentUrl":"https:\/\/www.acmethemes.com\/blog\/wp-content\/uploads\/2020\/01\/FCP-and-MFP.jpg","width":1170,"height":500,"caption":"FCP and FMP"},{"@type":"BreadcrumbList","@id":"https:\/\/www.acmethemes.com\/blog\/first-contentful-paint-and-first-meaningful-paint\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.acmethemes.com\/blog\/"},{"@type":"ListItem","position":2,"name":"First Contentful Paint (FCP) and First Meaningful Paint (FMP) Explained"}]},{"@type":"WebSite","@id":"https:\/\/www.acmethemes.com\/blog\/#website","url":"https:\/\/www.acmethemes.com\/blog\/","name":"Acme Themes Blog","description":"WordPress Themes and Plugins, WordPress Tips and Tricks, News and Events","publisher":{"@id":"https:\/\/www.acmethemes.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.acmethemes.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.acmethemes.com\/blog\/#organization","name":"Acme Themes","url":"https:\/\/www.acmethemes.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.acmethemes.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.acmethemes.com\/blog\/wp-content\/uploads\/2016\/12\/acmelogo.jpg","contentUrl":"https:\/\/www.acmethemes.com\/blog\/wp-content\/uploads\/2016\/12\/acmelogo.jpg","width":3600,"height":1800,"caption":"Acme Themes"},"image":{"@id":"https:\/\/www.acmethemes.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/acmethemes\/","https:\/\/x.com\/acme_themes","https:\/\/www.instagram.com\/acmethemes\/","https:\/\/www.linkedin.com\/in\/acmethemes","https:\/\/myspace.com\/acmethemes","https:\/\/www.pinterest.com\/acmethemes\/","https:\/\/www.youtube.com\/c\/AcmeThemes","https:\/\/en.wikipedia.org\/wiki\/User:AcmeThemes"]},{"@type":"Person","@id":"https:\/\/www.acmethemes.com\/blog\/#\/schema\/person\/a183debef87250cd8412b17cfd5c5a03","name":"Acme Themes","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/648bc894290f2d11cf2348dd50014c0cf715a434282801b0a72dd7fa49f13d73?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/648bc894290f2d11cf2348dd50014c0cf715a434282801b0a72dd7fa49f13d73?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/648bc894290f2d11cf2348dd50014c0cf715a434282801b0a72dd7fa49f13d73?s=96&d=mm&r=g","caption":"Acme Themes"},"url":"https:\/\/www.acmethemes.com\/blog\/author\/acmeblogadmin\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.acmethemes.com\/blog\/wp-json\/wp\/v2\/posts\/6211","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.acmethemes.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.acmethemes.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.acmethemes.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.acmethemes.com\/blog\/wp-json\/wp\/v2\/comments?post=6211"}],"version-history":[{"count":38,"href":"https:\/\/www.acmethemes.com\/blog\/wp-json\/wp\/v2\/posts\/6211\/revisions"}],"predecessor-version":[{"id":12432,"href":"https:\/\/www.acmethemes.com\/blog\/wp-json\/wp\/v2\/posts\/6211\/revisions\/12432"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.acmethemes.com\/blog\/wp-json\/wp\/v2\/media\/6242"}],"wp:attachment":[{"href":"https:\/\/www.acmethemes.com\/blog\/wp-json\/wp\/v2\/media?parent=6211"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.acmethemes.com\/blog\/wp-json\/wp\/v2\/categories?post=6211"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.acmethemes.com\/blog\/wp-json\/wp\/v2\/tags?post=6211"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}