{"id":8107,"date":"2026-05-10T15:23:51","date_gmt":"2026-05-10T13:23:51","guid":{"rendered":"https:\/\/mybox.com\/help\/?post_type=manual_kb&#038;p=8107"},"modified":"2026-05-10T15:23:52","modified_gmt":"2026-05-10T13:23:52","slug":"what-is-first-contentful-paint-fcp","status":"publish","type":"manual_kb","link":"https:\/\/mybox.com\/help\/en\/knowledgebase\/what-is-first-contentful-paint-fcp\/","title":{"rendered":"What is First Contentful Paint (FCP)?"},"content":{"rendered":"\n<div class=\"translation-block translation-block-merged\">\n<p class=\"wp-block-paragraph\"><strong>First Contentful Paint (FCP)<\/strong> is a user-centric performance metric that measures the time from when a page starts loading to when any part of the page&#8217;s content is rendered on the screen. Unlike <strong>TTFB<\/strong>, which measures the server&#8217;s response, FCP measures the moment the user actually <em>sees<\/em> something happening on your <strong>mybox-hosted<\/strong> site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&#8220;Content&#8221; in this context refers to text, images (including background images), <code>&lt;svg&gt;<\/code> elements, or non-white <code>&lt;canvas&gt;<\/code> elements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 ez-toc-wrap-left counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/what-is-first-contentful-paint-fcp\/#Why_FCP_is_Critical_for_Your_Success\" >Why FCP is Critical for Your Success<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/what-is-first-contentful-paint-fcp\/#Understanding_the_Scores\" >Understanding the Scores<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/what-is-first-contentful-paint-fcp\/#Factors_That_Delay_FCP\" >Factors That Delay FCP<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/what-is-first-contentful-paint-fcp\/#How_to_Improve_FCP_on_Your_Website\" >How to Improve FCP on Your Website<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/what-is-first-contentful-paint-fcp\/#Summary\" >Summary<\/a><\/li><\/ul><\/nav><\/div>\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Why_FCP_is_Critical_for_Your_Success\"><\/span>Why FCP is Critical for Your Success<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<\/div>\n\n<div id=\"mybox-616218607\" class=\"mybox-content mybox-entity-placement\"><div class=\"early-access-banner-inpost\">\r\n  <div class=\"banner-left-inpost\">\r\n    <div class=\"icon-box-inpost\">\r\n      <img decoding=\"async\" src=\"https:\/\/mybox.com\/help\/wp-content\/uploads\/2026\/02\/square-info-icon.svg\" alt=\"Info\">\r\n    <\/div>\r\n    <div class=\"text-box-inpost\">\r\n      <span class=\"label-inpost\"><span class=\"translation-block translation-block-banner-text\">Early access<\/span><\/span>\r\n      <h4><span class=\"translation-block translation-block-banner-text\">Still need help?<\/span><\/h4>\r\n      <p><span class=\"translation-block translation-block-banner-text\">Contact our customer service team.<\/span><\/p>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"banner-right-inpost\">\r\n    <a href=\"https:\/\/panel.mybox.com\/helpdesk2\/v\/list\/\" class=\"banner-button-inpost\"><span class=\"translation-block translation-block-banner-text\">Message us<\/span><\/a>\r\n  <\/div>\r\n<\/div><\/div>\n\n<div class=\"translation-block translation-block-merged\"><p class=\"wp-block-paragraph\">FCP is the first milestone in the user&#8217;s perception of loading speed. It is a mechanical necessity for keeping visitors engaged.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Psychological Impact:<\/strong> A fast FCP provides immediate &#8220;visual feedback&#8221; to the user that the website is working and that the information they seek is on its way.<\/li>\n\n\n\n<li><strong>Google Core Web Vitals:<\/strong> FCP is one of the metrics Google uses to evaluate page experience. A poor FCP score can drag down your overall search engine performance.<\/li>\n\n\n\n<li><strong>Reduced Bounce Rate:<\/strong> If a user stares at a blank screen for too long, they are likely to &#8220;bounce&#8221; back to search results. FCP effectively ends the &#8220;blank screen&#8221; phase.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Understanding_the_Scores\"><\/span>Understanding the Scores<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">According to industry standards (and tools like PageSpeed Insights), your FCP should ideally fall within these ranges:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Rating<\/strong><\/td><td><strong>Time (Seconds)<\/strong><\/td><td><strong>Status<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong>Good<\/strong><\/td><td>0 \u2013 1.8s<\/td><td>Excellent user experience.<\/td><\/tr><tr><td><strong>Needs Improvement<\/strong><\/td><td>1.8s \u2013 3.0s<\/td><td>Potential for user frustration.<\/td><\/tr><tr><td><strong>Poor<\/strong><\/td><td>Over 3.0s<\/td><td>High risk of abandonment and SEO impact.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Factors_That_Delay_FCP\"><\/span>Factors That Delay FCP<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If your <strong>mybox-hosted<\/strong> site has a slow FCP, it is usually caused by one of the following:<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Render-Blocking Resources:<\/strong> CSS and JavaScript files that must be fully downloaded and processed before the browser can draw anything on the screen.<\/li>\n\n\n\n<li><strong>Slow Server Response (TTFB):<\/strong> If the first byte takes too long to arrive, the FCP will be delayed by default.<\/li>\n\n\n\n<li><strong>High Font Load Time:<\/strong> If your site uses custom web fonts, the text may remain invisible until the font file finishes downloading (often called &#8220;Flash of Invisible Text&#8221;).<\/li>\n\n\n\n<li><strong>Large Document Size:<\/strong> An oversized HTML file takes longer for the browser to &#8220;parse&#8221; and build the structure of the page.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Improve_FCP_on_Your_Website\"><\/span>How to Improve FCP on Your Website<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To sharpen your FCP and make your site feel &#8220;snappy,&#8221; focus on these optimizations:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Minify CSS and JS:<\/strong> Remove unnecessary spaces and comments from your code to make the files smaller and faster to download.<\/li>\n\n\n\n<li><strong>Eliminate Render-Blocking Assets:<\/strong> Use &#8220;defer&#8221; or &#8220;async&#8221; attributes for non-critical JavaScript so they don&#8217;t stop the page from drawing.<\/li>\n\n\n\n<li><strong>In-line Critical CSS:<\/strong> Put the styles needed for the top of the page (the &#8220;above the fold&#8221; content) directly into the HTML so the browser can style the content immediately.<\/li>\n\n\n\n<li><strong>Optimize Web Fonts:<\/strong> Use the <code>font-display: swap;<\/code> property. This tells the browser to show a system font until your custom font is ready, ensuring the text is readable right away.<\/li>\n\n\n\n<li><strong>Leverage Server-Side Caching:<\/strong> Use the caching tools available in your <strong>mybox panel<\/strong> to serve pre-rendered HTML, which significantly slashes the time it takes for the browser to start painting.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Summary\"><\/span>Summary<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">FCP is the &#8220;hook&#8221; that keeps a visitor on your page. While it doesn&#8217;t represent the full page load, it is the most important indicator of perceived speed. By optimizing your code and leveraging the performance of your <strong>mybox-hosted<\/strong> server, you can ensure that your visitors see your content almost the instant they click your link.<\/p>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"template":"","format":"standard","manualknowledgebasecat":[28],"manual_kb_tag":[4758,6254,6827,8438,8439,8440,8441,8442,1153,1378,2240,3139,4455,4456],"class_list":["post-8107","manual_kb","type-manual_kb","status-publish","format-standard","hentry","manualknowledgebasecat-others","manual_kb_tag-first-contentful-paint","manual_kb_tag-server-response-time","manual_kb_tag-render-blocking","manual_kb_tag-perceived-performance","manual_kb_tag-render-blocking-resources","manual_kb_tag-web-fonts","manual_kb_tag-font-display-swap","manual_kb_tag-flash-of-invisible-text","manual_kb_tag-web-performance","manual_kb_tag-user-experience","manual_kb_tag-critical-css","manual_kb_tag-pagespeed-insights","manual_kb_tag-core-web-vitals","manual_kb_tag-time-to-first-byte"],"_links":{"self":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb\/8107","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb"}],"about":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/types\/manual_kb"}],"author":[{"embeddable":true,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":1,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb\/8107\/revisions"}],"predecessor-version":[{"id":8108,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb\/8107\/revisions\/8108"}],"wp:attachment":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/media?parent=8107"}],"wp:term":[{"taxonomy":"manualknowledgebasecat","embeddable":true,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manualknowledgebasecat?post=8107"},{"taxonomy":"manual_kb_tag","embeddable":true,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb_tag?post=8107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}