What Is FCP (First Contentful Paint?)

Gary Green
Gary Green
August 24, 2022

FCP or First Contentful Paint is a key user-centric metric used to measure perceived load speed since it indicates the first point on the page loading timeline at which users are able to see anything on their screen. If the FCP is fast, users can be reassured that something is taking place.

Essentially, the First Contentful Paint metric is designed to measure the length of time taken from the moment the page begins to load to the moment when any element of the content of the page is rendered on the visitor’s screen. In terms of this metric, the word “content” is used to refer to images (including any background images), text, or elements.

It’s important to be aware that FCP is not the same as LCP (or Largest Contentful Paint). This term is used to refer to the metric that measures when the primary contents of the page have finished loading as opposed to when the first element of the page’s content becomes visible to the viewer.

FCP Scores

In order for users to enjoy a good experience when visiting your website you should aim for your FCP to be 1.8 seconds or under. You can ensure that you’re hitting that target for the majority of users by measuring the page loads’ 75th percentile, segmented across both desktop and mobile devices.

Your FCP score can either be measured in the field or in the lab by using a number of tools such as PageSpeed Insights or Chrome User Experience Report in the field, or Lighthouse or Chrome DevTools in the lab. FCP can be measured in JavaScript by using the Paint Timing API.

How Can FCP Time Be Improved?

Since having a speedy FCP time is essential for your website visitors’ user experience, you need to be aware of how FCP time can be improved. Here are a few suggestions to point you in the right direction:

Reducing TTFB (Server Response Times)

TTFB (Time to First Byte) or server response time is the length of time a browser takes to receive its initial byte of your webpage content. Although FCP is reliant on more than solely TTFB, reducing your server response time is a good first step to take.

Content Load Time + TTFB + Render Time = FCP

So as FCP is extremely dependant on TTFB you need to optimise it in order to improve your FCP.

The simplest ways of doing this are to:

  • Select a faster hosting provider, ideally with servers that are in close proximity to the users of your site.
  • Use a high-quality CDN to speed up delivery of the static resources on your site such as scripts, videos and images. This significantly reduces the network latency between your users and server.
  • Enabling caching to decrease server processing times.

Eliminating Render-Blocking Resources

Webpages are rendered by the user’s browser once many elements have been put together including CSS stylesheets, HTML, HTML imports and JavaScript scripts. HTML documents themselves include a number of tags, however most browsers parse them swiftly.

This isn’t the case when it comes to parsing JavaScript and CSS. Usually, browsers attempt to download all of the elements of the webpage first, then parse them before rendering the page. Typically, HTML documents have a smaller size that JS scripts and CSS stylesheets and also the number of JS and CSS resources will usually be higher.

This means that when users request a webpage, HTML content is received rapidly by the browser but there is still a wait for other resources to load before the page can be rendered. These are known as render-blocking resources and it considerably reduces FCP. Eliminating these resources therefore couldn’t be more important. It can be achieved by:

  • Inlining Critical Resources – identify the critical styles and scripts to render your webpage’s FCP then remove them from render-blocking resources, inlining them instead inside the HTML page using <style> and <script> tags.
  • Deferring Non-Critical Resources – these URLS should be marked with defer or async attributes.
  • Remove unused code – if you have any used code on your webpage, remove it to optimise your page still further.

Avoid Above-The-Fold Script-Based Elements And Lazy Loading Images

However well you optimise JavaScript you’ll still find it’s slow when compared with HTML. Having too many script-based elements will, therefore, spoil your FCP. A lot of themes use above-the-fold fancy elements which use many scripts. This is why you should choose the theme of your site carefully, opting for a fast and well-coded theme to reduce your FCP considerably. The elements you should avoid using above-the-fold include:

  • Any kind of heavy animations
  • Slider plugins
  • Sharing or social media plugins
  • Embeds such as Google Ads
  • Mega menu plugins

Although lazy loading images can speed your website easily, you shouldn’t use them above-the-fold as lazy loading needs JavaScript to be used before the visitor’s browser can render images and this can delay FCP.

Inlining Essential Images

If all above-the-fold images are inlined, the visitor’s browser won’t need to make additional HTTP requests in order to download them, thus improving FCP. Images which can be inlined above-the-fold include:

  • Logos
  • Icons
  • Banner images
  • Backgrounds

Avoiding Multiple Page Redirects

When visiting URLs that have been redirected to a different URL, an HTTP 301 redirect status code response is returned by the server. As a result, the browser must make a different HTTP request to the URL’s new location and this can delay the page’s loading. If there are several redirects, FCP can be slowed down considerably. Make sure that any resource that is part of your webpage’s Critical Rendering Path has no redirects at all originating from it.

The Final Word

It’s absolutely essential to improve your FCP since it can ensure an optimal user experience which will improve your site’s PageSpeed score. If you follow the advice provided here, you should find that your website runs more swiftly and smoothly so your visitors can enjoy a better experience each and every time they visit.

Tell us about your project...
Fill in your details to get started and join over 50 businesses enjoying Key Business Marketing's expertise..
Contact Form Demo (#1)
We adhere to strict GDPR rules and do not reveal or sell your data to any third-parties. For more, please read our Privacy Policy.
Latest Insights
February 13, 2024
A Guide To Using ChatGPT To Carry Out Keyword Research

Discover how to harness the potential of ChatGPT for advanced keyword research in SEO with our comprehensive guide.

January 12, 2024
Bolstered Advertising From Google On YouTube Shorts

Explore the latest Google advancements in YouTube Shorts advertising! Discover how Google is boosting brand visibility and addressing revenue challenges.

December 15, 2023
How Do I Manage My WordPress Website’s Email Services?

Learn how to effectively manage your WordPress website's email services for optimal performance. Explore the three methods of sending emails in WordPress

November 26, 2023
Monitoring Your Website Performance And Optimizing Accordingly

Explore the art of monitoring and optimising your website's performance. Discover dedicated tools to prevent downtime, enhance user experience, and meet Google's performance standards.

November 10, 2023
Project Magi: A Major Change To Google Search

Discover the revolutionary shift in Google's search landscape with Project Magi! This upcoming AI-powered search experience makes some big promises!

October 23, 2023
Top Tips For WordPress Security

Discover essential tips to fortify your WordPress website's security. Safeguard your site with expert advice in this comprehensive guide

September 29, 2023
A Guide To WordPress Maintenance Plans

Mastering WordPress Maintenance Plans: Organize your website tasks efficiently, from backups to plugin updates.

September 18, 2023
Solutions For The Most Frequently Seen WordPress Errors

Discover expert solutions for the most common WordPress errors and streamline your website management.

September 2, 2023
Top Tips For Managing Your WordPress Website

Master the art of WordPress website management with our expert tips! Learn how to streamline maintenance, boost performance, and enhance security

View Our latest insights »
Get the latest digital marketing insights delivered straight to your inbox
Newsletter Form (#2)
We care about the protection of your data. No spam. Unsubscribe anytime.
02037 282 848
Mon-Fri 9am - 5.30pm
Digital marketing guidance at your fingertips
Copyright © 2022 KEY BM LTD Reg: E&W 11055943
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram