First Contentful Paint

First Contentful Paint – How to Improve FCP?

By

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 every user entered doesn’t get disappointment, as the first content appear on their screen. This improves the user experience and reduce the bounce rate.

Despite of being included among the core web vitals, still FCP has 10% weightage in overall website performance score.

Eventhough a web page loads less than 2.5 seconds, but the FCP more than 1.8 seconds could impact the page experience.

In this article, we would cut down the concept of first contentful paint, 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 to first content rendered on the screen. In terms of FCP, content can be images, text, <svg> elements, or <canvas> (non-white) elements.

What is First Contentful Paint

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?

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?

First, contentful paint can be measured in chrome lab and field (real-world) data. Here are a few tools that help you to get the FCP metrics.

  1. Page Speed Insight.
  2. Chrome DevTools.
  3. Lighthouse.
  4. GTMetrix.
  5. WebPage test.

Page Speed Insight - Field Data

Just run Page speed insight teat, 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 of organic traffic from Google search engine.

FCP Field Data - Page Speed Insight

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.

FCP Lab Data Page Speed Insight

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.

Chrome DevTools - First Contentful Paint

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.

WebPage Test to Measure FCP

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.

GTMetrix to Measure FCP

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.

Issues that Cause Poor First Contentful Paint

So, here are a few steps you should care in fixing the issues,

  1. Eliminate Render-Blocking Resources.
  2. Reduce Initial Server Response Time (TTFB)
  3. Minify CSS and Remove unused CSS.
  4. Avoid Multiple Redirects.
  5. Avoid an excessive DOM size.
  6. Reduce unused JavaScript.
  7. Serve static assets with an efficient cache policy.
  8. Ensure text remains visible during webfont load.
  9. Keep request counts low, and transfer sizes small
  10. Avoid enormous network payloads.
  11. Preload Key requests.

1. Eliminate Render-Blocking Resourses

JavaScripts and Stylesheets (CSS) are commonly the render-blocking resources in a website. These resources could block rendering of the web page, and delays the loading speed.

This has high impact in both first contentful paint (FCP) and largest contentful paint (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,

  1. Minifying or Combining critical CSS resources.
  2. Removing non-critical or unused CSS files.
  3. 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 the display of first content of the website from the server.

When the sever response time delays, it will eventually affects 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 a 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.

Sametime, 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:

Network Request Phase - To Measure TTFB

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 redirect into chain of multiple URLs, then the time taken at 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

Avoid an Excessive DOM Size

Page Speed Insight warns when the DOM size exceed 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,

  1. Use only light-weight themes and plugin, and avoid cracked version of theme/plugins.
  2. Minimize JavaScript based DOM nodes.
  3. Avoid bloated page builders. bloated builders generate excessive DOM nodes.
  4. If possible, breakdown the web page with excessive DOM size into multiple web pages.
  5. Never use display:name to hide unwanted elements.
  6. Avoid using complicated JavaScript and CSS resources.
  7. Use content visibility to improve web page rendering.
  8. Use lazy load on visual elements.
  9. Implement infinite scroll.
  10. Avoid memory intensive JavaScript.

6. Reduce Unused JavaScript

JavaScripts are render-blocking resources that affects 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 (the first impression of visual element) 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 webfont 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 attrobutes while using Google fonts.

9. Keep Request Counts Low and Transfer Sizes Small

Each resources in the web page reports network of 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 to server response. This could keep LCP and FCP under good score.

Here are few steps to keep HTTP request counts low,

  • Minify and reduce JavaScripts, 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 reason that your web page would have poor FCP. I hope, this article would helped you to fix the poor FCP score

Related Posts

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top