What Is First Contentful Paint (FCP)?
In this article, you’ll learn everything you need to know about First Contentful Paint (FCP), including:
What FCP Is
Why It's Important
Why Measuring FCP Alone Isn’t Enough
How To Reduce Your FCP Time
If you want to improve your PageSpeed Insights (PSI) score and the user experience on your website, read on.
What is First Contentful Paint (FCP)?
First Contentful Paint (FCP) measures the time it takes for the browser to visualize the first piece of DOM content on a page. According to PSI, that should happen in under 2 seconds.
Content elements described in the DOM, like images, SVGs and non-blank canvas elements.
For example, a loading animation can trigger FCP:
Or your company logo:
These elements might seem insignificant, but they’re crucial for the user experience. They tell your visitors: “Hey, your input is being processed and the site is loading. The result will be ready in a second”.
That’s why FCP is a perceived load speed metric.
More importantly, FCP is a good indicator of the first impression your website makes.
And as I said in our article on First Input Delay (FID), first impressions are everything. You likely won’t get a second chance if you disappoint a first time visitor.
That’s why optimizing your FCP (and FID) is a must.
But while important, FCP doesn’t tell the whole story of how users experience load time. In fact, FCP (like all metrics) has some significant gaps.
Let me explain.
Why Measuring LCP Alone Isn’t Enough
Imagine opening a website and watching a white screen for a few seconds before anything is rendered.
During these few seconds, nothing indicates to you that the website is loading.
That’s not a great experience. In fact, this blank screen alone can cause a ton of page abandonment.
This is where First Paint (FP) comes in.
FP measures how long it takes for the browser to render anything on the page, not just DOM content.
This could be a background change, for example.
This change alerts the user that something is happening. The content might not be there, but the visitor knows it’s coming.
In an ideal situation, your FP and FCP should occur at the same time, or with an unnoticeably small delay.
So, FP and FCP are great at measuring the beginning of the loading experience. But we also need to track its culmination.
Enter: Largest Contentful Paint (LCP).
LCP measures the time it takes for the largest above the fold content element to load.
That might be the breaking story on a news website or a product picture in an Ecommerce store.
In most cases, your visitors came to see precisely that element. That’s the culmination of their loading experience.
At the start of the loading experience, FP and FCP assure your visitors that their input is being processed
At culmination of the loading experience, LCP gives your visitors what they came for - the largest content element
The only way to put yourself in the shoes of your visitors is to analyze all 3 paint metrics.
You can find your FP, FCP and LCP times with Chrome’s DevTools.
Open a page you want to analyze, right-click and select “Inspect”.
From there, go to “Performance”.
And click the “Reload” button.
Chrome will analyze your page and give you a detailed report. In the “Timings” section, you can find information about your FP, FCP and LCP.
From there, it’s about finding specific issues and solving them.
For now, let’s talk about reducing your FCP time.
How To Reduce Your FCP Time
If you open PSI (or the Lighthouse audit), you’ll likely get the following Opportunities:
A lot of these suggestions can help you improve your FCP (and the other two paint metrics).
In general, you should aim to resolve all of them, not just to please PSI, but to achieve excellent user experience.
For now, let’s stick to reducing FCP.
Improve font load time
A common issue when working with custom fonts is the “flash of invisible text” or FOIT.
FOIT occurs when the browser can’t download a font file quickly. When that happens, the browser doesn’t show any text until the entire font file is loaded.
The easiest solution is to temporarily show a system font before the custom font is loaded.
The font-display: swap property can help you achieve this effect. The property tells the browser to use the fallback (swap) font until the custom font is ready.
Check out this article by the Lighthouse team for more details on this topic.
The browser can’t render anything on the page until it processess them. That’s why you need to improve their delivery.
To solve this issue, you have to inline critical resources and defer non-critical ones.
For example, you should set up Critical CSS, so above-the-fold content can appear instantly. Meanwhile, the rest of the page can load asynchronously.
That’s one form of inlining critical resources. And it’s a great way to start resolving the entire render-blocking problem.
You can (and should) do the same with your JS.
Check out this article by the Lighthouse team for more info.
Optimize Your Images
Image optimization means reducing the size of each image without affecting the quality.
It’s a simple idea, but a difficult one to implement.
Choosing the right image type is a great place to start.
The classic image formats (JPEG, GIF and PNG) all have their pros and cons. But right now, the newer WebP format is your best bet for a few reasons.
First, WebP is currently developed by Google. The almighty search engine will be happy to see you using this format.
On top of that, WebP produces better results than both JPEG and PNG. According to Google, WebP images are 26% smaller than PNGs and 25-34% smaller than JPEGs.
In short, choosing WebP is a win-win.
Besides the file type, it’s also good to review all the pictures on your website and delete the unnecessary ones. Trust me, they’re there.
An image that doesn’t contribute to the overall goal of the page shouldn’t be there. Plain and simple.
If you want to get more advanced, check out this comprehensive guide on responsive images by Mozilla.
Minify and combine your code files
Minifying and combining code files is an essential part of optimizing your website’s CSS and JS.
On one hand, minifying the code removes the unnecessary bits of information like whitespace, comments and line-breaks. The browser doesn’t need that data to render the page.
On the other hand, combining code files reduces their total number. The fewer the files, the easier it is for the browser to find and download them.
Again, this is a simple idea that’s not easy to implement.
Check out our article on this topic to learn how you can optimize your website’s code.
Avoid Excessive JS Usage
JS is usually the biggest threat to your website’s performance.
As Addy Osmani puts in his annual talk on website performance, JS is the most expensive part of most websites.
There are many reasons why this problem is so widespread.
First, there are tons of JS frameworks out there.
Each of them helps developers but adds more JS to the website or application. That certainly doesn’t help with website performance.
In fact, Backlinko’s research on page speed found that the fastest JS frameworks (Wink and Gatsby) are 213% faster than the slowest ones (Meteor and Tweenmax).
Second, WordPress’s popularity also contributes to this problem.
As of 2020, WordPress powers around 30-35% of all websites on the Internet.
All WordPress websites have a theme and 2-3 additional plugins. These themes and plugins often have a huge amount of JS (and CSS) baked into them.
The only way to achieve great performance with a WordPress website is to analyze and choose your theme very carefully.
Besides that, you can go through your website and search for excessive JS usage. A few elements you can look out for are:
Unnecessary sliders (especially above the fold)
Images and videos that can be served with HTML & CSS instead of JS
These elements aren’t bad by design. But if they add a lot of JS overhead and don’t contribute to the user experience, they shouldn’t be there.
Don’t be afraid to remove them.
Fix Your Caching, Hosting and CDN
These 3 factors are a pass/fail type of deal.
You have to take care of them and there’s no way around that.
Let’s start with your hosting and CDN.
You should consider 3 key factors when choosing your hosting and CDN provider:
Your Website’s Type - blog, eCommerce store, personal portfolio, etc.
Your Website’s Traffic
But there’s one rule that applies to everyone:
Free hosting and CDN services suck. Sorry to say it, but it’s true.
If you’re serious about website performance, you need a paid plan from a reputable company.
That doesn’t mean you should spend hundreds of dollars on hosting every month. You can find affordable plans with excellent performance.
Check out Quicksprout’s guide to the best hosting companies in 2020 to find a hosting provider that’s right for you.
Most hosting providers also offer CDN services, so you can get both in one swing.
On the other hand, your caching policy will depend on highly individual factors. For example, how often you update the content on your website.
If you want to learn more, our in-depth guide on web caching is a great place to start.
Optimizing Beyond FCP
Optimizing your FCP will vastly improve the user experience on your website.
It’s not easy, but it’s worth it.
However, that’s not the only metric to work on.
As I said, you should analyze FCP in combination with LCP and LP.
At the same time, LCP is also a part of Google’s Core Web Vitals, along with Cumulative Layout Shift (CLS) and First Input Delay (FID).
These 3 metrics (LCP, CLS and FID) will soon become a part of Google’s ranking algorithm.
So, a great next step is to learn everything you can about LCP, CLS and FID. You can get started with our guide on Google’s Core Web Vitals.