In this article, you’ll learn everything you need to know about First Contentful Paint (FCP), including:
So, if you want to improve your Google’s PageSpeed Insights score and the user experience on your site, read on.
FCP is the time it takes for the browser to visualize the first piece of DOM content (e.g., image, SVG, non-blank canvas element) on a page.
To be in the green zone, a page’s FCP should occur in 1.8 seconds or less.
Different elements can trigger this metric, depending on the website. For example, a loading animation:
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”.
If a page stays blank for a few seconds before it loads, users don’t know whether it's loading at all. However, if an element (even an insignificant one) loads quickly, they see that something is happening.
That’s why FCP is also a perceived load speed metric.
It’s a good indicator of the first impression your website makes.
FCP can be measured both in the lab (on a predetermined device and network settings) or in the field (by tracking page loads for real users). Improving FCP in the field should be your primary goal, as field data reflects how real users experience your site.
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.
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.
It's an awful 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 the 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 use multiple testing tools to measure FCP, and we’ll take a look at some of them.
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.
Google’s PageSpeed Insights tool shows your FCP and LCP times based on lab and field data:
Another great tool to measure your FCP time is GTmetrix.
Along with FCP results, GTmetrix will show your LCP score as well:
These are lab results (i.e., they don’t come from real users), so don’t rely solely on them to judge your site’s performance.
WebPageTest allows you to test your site’s performance from different locations while emulating a device with a specific connection:
Once you fine-tune the settings and run the tests, you will see your FCP and LCP, along with other important metrics:
You can run personalized tests by finding where your visitors access your site from (with Google Analytics or another analytics tool) and testing your site from their locations. If the results in some locations are worse, consider investing in a content delivery network (CDN).
Now, let’s talk about improving 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 also to achieve an excellent user experience.
For now, let’s stick to reducing FCP.
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 2021 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.
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 processes 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.
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 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.
Minifying and combining code files is an essential part of optimizing your website’s CSS and JS.
On one hand, minifying the code removes 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, minifying your website’s resources is a simple idea that can yield great web performance results. In fact, a lot of hosting providers offer compression and minification services. So check out with yours to see if they already do it for you.
JS is usually the biggest threat to your website’s performance.
As Addy Osmani puts in his annual talk on web 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 2021, WordPress powers around 41% 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.
To achieve great performance with a WordPress website, you need to choose your theme carefully. A lot of themes offer demo versions, which you can run through the speed testing tools shown above.
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.
With all that being said, choose your plugins carefully and always monitor your site’s performance after adding a new one. In most cases, sacrificing web performance for a slight design improvement isn’t worth it.
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 FP.
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 three metrics (LCP, CLS, and FID) are now 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 Core Web Vitals guide.