First Contentful Paint (FCP) is a web page speed metric that measures how long a web page takes to start rendering content to the screen.
Google coined the term to describe the time it takes for a user to be able to interact with a given web page.
Shortening this time is important for the overall page experience because if it takes too long, the user may think there is something wrong with the page and navigate away from it.
Even if the overall page load takes a long time, having a short FCP allows the user to begin interacting with the page which will keep them on the page, giving the rest of the page time to load.
This article explains what FCP is, how it works, why it matters, and how to use FCP as part of your SEO strategy.
What Is FCP?
First Contentful Paint is the amount of time that it takes to render something to the page after the initial page load.
The time a visitor has to wait for the page to load will affect their decision of whether to stay on it or not. With thousands of SERPs with alternative web pages, why should the visitor wait for one that is taking too long to load?
There are plenty of other web pages that will give them the exact same information quicker. So, a ‘good’ FCP is essential for retaining visitors.
Lighthouse is a website auditing tool that helps developers with diagnostics to improve the overall user experience on their web page or site.
The metric score for FCP in Lighthouse is calculated from this time on a scale of 1-100, with ‘good’ times found experimentally for actual web pages.
In v8,v9 Lighthouse:
- A ‘good’ score, one in the 90th percentile or above, requires an FCP time of <= 940 ms on desktop and <= 1800 ms on mobile (v8,v9 Lighthouse).
- A 100% score requires FCP <= 510 ms on desktop and <= 1070 ms on mobile.
Since First Contentful Paint measures the render time, after page load, it does not include Time To First Byte (TTFB).
Many consider First Contentful Paint to be one of Google’s core web vitals, but this is not the case. The core web vitals are LCP, FID, and CLS. FCP is not one of the three core web vitals.
However, that’s not to say that improving FCP cannot indirectly improve one of the core vitals and improve your performance in the eyes of Google’s SERPs.
Why Should FCP Be Improved?
FCP keeps visitors from clicking off your webpage and onto one of the many alternatives their search engine has offered. It also makes your site look more professional and increases the chance of repeat visitors.
FCP is also an effective method of tracking your usability. Keeping track of how long sections of your page take to load can help you improve your SEO.
Using data found from tracking FCP, you can create reports to track which areas of your site take the longest to load. Utilize these to focus your efforts on optimization to improve the page’s overall performance.
Improving FCP will:
- Improve your site’s speed
- Better conversion rates
- Reduce bounce rates
- Increase usability score
How To Improve FCP?
Several things can improve a page’s First Contentful Paint, depending upon what is slowing down the given page.
The first thing to do is determine the cause of the slow loading speed. Use a metric measuring system, such as PageSpeed Insights from Google or YSlow from Yahoo.
These will give you detailed insights and recommendations for improving your page’s speed. Utilize these recommendations with our following tips on how to improve FCP.
Reduce Server Response Times
How quickly the server returns your FCP element dramatically impacts your First Content Paint time. If the web page is waiting for an asset to load, the asset cannot be rendered.
The initial load time of the HTML page itself doesn’t go into the FCP time – although it’s also important. However, the load time of images, stylesheets, and Javascript files all do impact this score.
Use a Content Delivery Network (CDN) to ensure your page resources load quickly from a location physically close to your users. A CDN is a network of proxy servers and their data centers geographically distributed all over the world.
These provide high availability and performance to users no matter their geographical location. The better your CDN, the closer a server will be to your users, improving server response times.
Eliminate Render Blocking Resources
Sometimes the page is forced to download resources that it will use later before it can proceed. These assets are known as ‘render blocking resources’ and may not be useful until much later in the page load process.
For example, anything below the fold of the webpage does not need to be rendered right away. If unseen resources are being loaded first, it will take longer to load elements that the user will see first.
Conceptually, the browser is forced to do what the HTML of the page tells it to do. If these HTML ‘instructions’ tell the browser to do something inefficiently, the browser will do it, not knowing any better.
Essentially, everything in the <head> tag of your HTML page must be processed before your page can render. Here are some practical suggestions for removing render-blocking resources:
Load Javascript asynchronously or at the end of the page.
Javascript adds functionality to the page but searchable content should never be created by client-side Javascript, so load any Javascript files last.
Another way to look at this is that Javascript should not affect a user’s initial view of the page, so it isn’t needed until the user wants to directly interact with it – like click, scroll, etc.
Essentially, your page should be able to be viewed perfectly without Javascript’s help. JS is used to enhance the webpage rather than being a dependent factor. This is due to the time it takes to load Javascript.
Use responsive images
Having to download a larger image than is needed for the given screen has a significant impact on FCP, especially if the FCP element is that image. Use responsive images with good image formats – like WebP – to serve your images.
A common scenario that can cause a bad FCP score is a background image found in a stylesheet for the hero image. If the background image is implemented using CSS, then it’s not responsive, so the page can end up downloading a big image, regardless of screen size.
The mobile FCP score is terrible in this case.
An even better approach is to remove as many images as you can on mobile – especially background images – via media queries. Mobile visitors don’t need to see many images as they’re most likely looking for a quick answer to a question before clicking off again.
Don’t waste vital mobile FCP time on images that are most likely not going to be viewed.
Remove unused CSS
Web pages often have stylesheets that are applied to every page of the site which means that a given page may only use a fraction of the CSS that it loads. Since loading styles is done in the <head> tag of the page, all styles must be loaded before the page can render.
Reduce unused CSS and/or use one of the techniques for reducing ‘above-the-fold’ CSS on the given page. Whenever you update your page or site, remember to check for unused CSS to keep your FCP ‘good’.
Changing aspects of your site can render more CSS useless than you first realize.
Don’t Rely On Browser Caching
The browser cache is where little pieces of information from your page are stored within a user’s browser. It allows your page to communicate with the user’s system, which speeds up browsing.
Once the asset has been downloaded onto the user’s computer, it lives there for a certain period of time.
This means that these pieces of information will be rendered quicker from the hard drive rather than from a remote server. This is a great advantage for improving FCP, but one that shouldn’t be heavily relied upon.
Page experience should be optimized for the first time a user loads a page on your site. You should never assume that a resource is cached in the browser – although it may be cached at the CDN.
Having a user interact with a second page is a luxury, one you won’t get if the user bounces.
Conclusion
No one wants to click on a link to load a page and be presented with a white blank screen. Optimizing First Contentful Paint (FCP) prevents exactly that.
This article shows you how to make sure your users can
Mailing Address