What Is FCP (First Contentful Paint?)

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’ 75^th 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.