Before the introduction of Google’s Core Web Vitals in 2020, First contentful paint (FCP) and First input paint (FID) were the web performance metrics from 2019.
FCP is the stage that makes sure user who visit your website doesn’t get disappointed, as the first content appear on their screen. This improves the user experience and reduces the bounce rate.
Despite being included among the Core Web Vitals, still FCP has 10% weightage in overall website performance score.
Even though a web page loads less than 2.5 seconds, FCP more than 1.8 seconds could impact the page experience.
In this article, we would in-depth discuss the concept of FCP, what are the causes for poor FCP, and how to improve the score.
What Is First Contentful Paint?
First contentful Paint (FCP) is a user-centric web performance metric for chrome lab and field data. It measures the time between page load and first content rendered on the screen. In FCP, content can be images, text, <svg> elements, or <canvas> (non-white) elements.
If you see the above image, the first view on the content on the web page is calculated as FCP, and the complete (largest visual element) appearance of the content is LCP.
That’s the reason, LCP has more weightage compared to FCP. But, remember poor FCP eventually causes poor LCP.
What Is Good FCP Score?
Google’s recommended First contentful paint is less than 1.8 seconds, as 75% of the web page loads across any device.
Here are the FCP score categories.
- Good – less than 1.8 seconds
- Needs improvement – 1.8 to 3.0 seconds
- Poor – more than 3.0 seconds
How to Measure FCP?
FCP can be measured in chrome lab and field (real-world) data. Here are a few tools that help you to get the FCP metrics.
- Page Speed Insight
- Chrome DevTools
- Lighthouse
- GTMetrix
- WebPage test
Page Speed Insight - Field Data
Just run Page speed insight test, and if your website is eligible for field data, then you get the FCP loading seconds as per the real-world (field) user experience.
To get field data, your website should have ample organic traffic from Google search engine.
Page Speed Insight - Lab Data
Lab data of the page speed insight is the same as the lighthouse data. It takes the data from the chrome interaction of the website.
Chrome DevTools
Chrome DevTools is another tool to measure FCP data. To use this method, you should inspect the web page (using right-click).
Next, click on Performance and press the record button.
Once the record is completed, select only the screenshot under Performance, and leave Memory and Web Vitals unselected.
Finally, click on the timing option to get the FCP data.
WebPage Test
WebPage test is another free tool to measure FCP and other core web vital metrics. You can choose mobile and desktop views with the location of your server to find the FCP data.
Once you run the test, you get both lab and field FCP data.
GTMetrix
Another free tool to measure FCP is GTmetrix. Along with FCP, you can get other core web vital lab data like LCP, CLS, TBT, speed index, and time to interactive.
How to Improve First Contentful Paint?
Before stepping forward, you should understand what could cause poor FCP scores. Here is the snap of page speed insight with opportunities and diagnostics. Fixing them helps in improving FCP under 2 seconds.
So, here are a few steps you should take care in fixing the issues
- Eliminate Render-Blocking Resources
- Reduce Initial Server Response Time (TTFB)
- Minify CSS and Remove unused CSS
- Avoid Multiple Redirects
- Avoid an excessive DOM size
- Reduce unused JavaScript
- Serve static assets with an efficient cache policy
- Ensure text remains visible during web font load
- Keep request counts low, and transfer sizes small
- Avoid enormous network payloads
- Preload Key requests
1. Eliminate Render-Blocking Resourses
JavaScript and Stylesheets (CSS) are commonly the render-blocking resources in a website. These resources could block rendering of the web page and delay the loading speed.
This has high impact in both FCP and LCP.
You should eliminate render-blocking resource to achieve great user experience and to clear web vital metrics.
Here are following ways to eliminate the render-blocking CSS resources
- Minifying or combining critical CSS resources
- Removing non-critical or unused CSS files
- Also use media attributes when it comes to CSS files
When it comes to eliminating JavaScript files, you should use defer and async attribute. We would recommend to defer the JavaScript execution.
2. Reduce Initial Server Response Time
Initial Server response time or Time to First Byte (TTFB) is the time taken between browser request to display the first content of the website from the server.
When the sever response time delays, it will eventually affect FCP score.
To fix this,
- use a cloud based dedicated hosting with high bandwidth to handle the traffic.
- if needed, use CDN to deliver the content faster.
- never use a crack theme or plugins.
- server images in new generation formats like webp.
- avoid redirect loops.
- stream markup to the browser.
- use 103 early hits to render the critical resources.
3. Minify CSS and Remove Unused CSS
CSS (stylesheet) are often big files, and it affects the loading speed of the website, obviously the FCP score.
These bulky files can be optimized by minification and removing non-critical CSS files.
You can use tools like CSS Minifier to minify the codes into few lines. Once the code is minified, the loading speed can be enhanced.
At the same time, you can remove the unused CSS files. Use Chrome DevTool by inspecting the webpage to find all the unused CSS files.
When you’re website is built in WordPress, you can use WP-rocket or nitropack to minify or remove the unused CSS files.
4. Avoid Multiple Redirects:
If you have seen the above network request phase from a browser, redirect is the first step that the request spends time.
So, when a web page redirects to a chain of multiple URLs, the time taken to redirect increases.
So, you should control or remove all the internal links with redirects. So, potentially it saves the FCP under 1.8 seconds.
5. Avoid an Excessive DOM Size
Page Speed Insight warns when the DOM size exceeds 800 elements and becomes error when the DOM size exceeds 1400 nodes.
Excessive DOM size will impact your web performance like
- network efficiency and load performance,
- runtime performance,
- memory performance.
Here are few ways you can fix excessive DOM size of the web page.
- Use only light-weight themes and plugin, and avoid cracked version of theme/plugins.
- Minimize JavaScript based DOM nodes.
- Avoid bloated page builders. bloated builders generate excessive DOM nodes.
- If possible, breakdown the web page with excessive DOM size into multiple web pages.
- Never use display:name to hide unwanted elements.
- Avoid using complicated JavaScript and CSS resources.
- Use content visibility to improve web page rendering.
- Use lazy load on visual elements.
- Implement infinite scroll.
- Avoid memory intensive JavaScript.
6. Reduce Unused JavaScript
JavaScript is render-blocking resources that affect the rendering of web page and first contentful paint (FCP).
The unused JavaScript can be non-critical resource and Dead scripts. Once the unused JSS files are reduced or removed, the browser execution time becomes faster.
Here are few ways to reduce the unused JavaScript:
- Delay non-critical JavaScript
- Defer JavaScript execution time
7. Serve Static Assets with an Efficient Cache Policy
A cache policy that serves static assets with an efficient cache policy can reduce the loading time for repeat visitors by storing these files locally in the user’s browser.
A browser must download all HTML, CSS, JavaScript, and image resources whenever it loads a page.
CSS, JavaScript, and images are cached by browsers so they can be retrieved from their local caches by the browser. By doing so, you don’t have to download the resources from the server again, which is faster.
The cached content on your page will make subsequent visits to your page quicker. However, the first visit won’t be any faster with browser caching enabled.
8.Ensure Text Remains Visible During Webfont Load
When text is invisible, the FCP gets affected. The user experience of the web page gets affected when the text remains hidden.
Here are few tips to ensure text remains visible during web font loads
- Use font-display: swap
- Use Flash of invisible text (FOIT)
- Implement Preloading web fonts
<link rel="preload" href="/webfontname" as="font" type="font/format" crossorigin>
- Use googlewebfonturl&display=swap attributes while using Google fonts
9. Keep Request Counts Low and Transfer Sizes Small
Each resource in the web page reports network requests. As the number of request increases, it would increase the loading speed and impact the FCP.
Keeping HTTP requests under control can reduce the amount of size transfer between a browser request and server response. This could maintain good LCP and FCP score.
Here are few steps to keep HTTP request counts low
- Minify and reduce JavaScript and CSS files.
- Use caching layers in your website.
- Compress GZIP.
- Optimize multimedia files like images and videos.
- Avoid bloating themes and plugins.
10. Avoid Enormous Network Payloads
A network payload is simply how much code, images, or videos it takes to render a website page. It takes a long time and a great deal of data to load an enormous network payload.
The total size of your page should not exceed 1.6 MB, according to Google. Every time you have a page that exceeds 1.6 MB, you will receive the warning “avoid enormous network payloads”.
An enormous network payloads will affect user experience and impact web vitals like FCP and LCP.
Ways to optimize enormous network payloads
- Minify resources like JavaScript and CSS.
- Remove unused non-critical CSS and JS files.
- Implement cache.
- Optimize images in webp format, and keep less than 100 kb.
- Use faster hosting.
11. Preload Key Requests
Preloading key request commands the browser to download the critical resources on priority. The most common key request resources are the fonts and making them appear faster helps in better UX.
Conclusion
- First contentful paint is an user-centric web performance metrics measured in both chrome lab and field (real-world).
- FCP is the time taken from the request to the first content response from the server. It should be less than 1.8 seconds for greater web performance.
- There are more number of reasons that your web page would have poor FCP. I hope, this article would helped you to fix the poor FCP score.
