TL;DR: First Contentful Paint (FCP) is a performance metric that measures the time it takes for the first piece of content to appear on a webpage. To enhance FCP, minimize unnecessary third-party scripts, leverage browser caching, and compress images. Implementing asynchronous loading for non-essential resources and prioritizing above-the-fold content also contribute to a faster FCP.
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.
What is First Contentful Paint (FCP)?
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 something is happening or not.
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.
Here’s why.
Why Measuring FCP 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.
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.
To recap:
-
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.
How to Measure FCP
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.
Important: Keep in mind that each testing tool can give you a slightly different score due to various factors like testing methodology, testing location, etc. Also, focus on tools that provide data from real users over those that only have lab metrics.
Chrome’s DevTools
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.
PageSpeed Insights
Google’s PageSpeed Insights tool shows your FCP and LCP times based on lab and field data:
Important: When looking at web performance, it’s important to focus on field data since it’s gathered from real users and reflects their experience. If your FCP is okay in the lab but not in the field, you still have work to do.
GTmetrix
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
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.
How To Fix Your FCP Time
If you open PSI (or the Lighthouse audit), you’ll likely get the following Opportunities:
And Diagnostics:
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.
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:
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 2022 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.
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 our article on 7 font loading techniques that will improve your Core Web Vitals.
Eliminate render-blocking CSS and JavaScript
CSS and JavaScript (JS) files are render-blocking by default.
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.
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 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.
In addition to the file type, it’s also a good idea 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 unnecessary 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 yours to see if they already do it for you.
Avoid Excessive JS Usage (A Proven Way to Improve Your WordPress Site's FCP)
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 2024, WordPress powers around 43% of all websites on the Internet.
All WordPress websites have a theme and at least 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, apply all the techniques that we already mentioned and choose your theme and plugins 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:
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.
NitroPack Can Do All of These Optimizations for You
Without a doubt, web performance optimization is a complex area that takes a lot of effort and time. That's why a lot of website owners decide to deal with this aspect of their websites by hiring a performance specialist or installing numerous plugins.
Unfortunately, both options have their setbacks.
Web performance optimization is a niche discipline that complicates the process of finding a specialist in the field. In turn, this makes their services very expensive, and not everyone can afford them.
Installing multiple plugins might look like a good alternative if you cannot afford to hire a web performance specialist. However, there are a few things that you need to consider before taking that route. Firstly, as you already know, plugins come with a huge amount of JS and CSS baked into them. Something you would like to avoid. Secondly, making all of your plugins work together without conflicting with each other is a tough task.
That's where NitroPack comes in.
NitroPack is an all-in-one solution that offers a ton of out-of-the-box features. Such as:
Image Optimization
By default, NitroPack uses lossy compression to reduce image file size. We also convert all images to WebP while keeping the original format as a backup for browsers that don’t support WebP.
Built-in CDN
NitroPack comes with a built-in CDN. It works automatically once you set it up and you don’t have to pay for or integrate 3rd party services.
Critical CSS
Our service creates unique Critical CSS for every page (not page type), per layout. This ensures that each of your pages has unique Critical CSS, resulting in better performance and stability.
Defer JS Loading
NitroPack delays the loading of non-critical resources until user interaction is detected. You can also specify other scripts that should be loaded with a delay.
Code Optimization
We minify and compress HTML, CSS, and JavaScript files. NitroPack also combines multiple CSS/JS files into a single file, reducing the number of network requests the browser has to make.
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 FP.
At the same time, LCP is also a part of Google’s Core Web Vitals, along with Cumulative Layout Shift (CLS) and Interaction to Next Paint (INP) (previously measured by First Input Delay (FID)). Moreover, these performance metrics are part of Google’s ranking algorithm.
So, a great next step is to learn everything you can about them, starting with our Core Web Vitals guide.
