What is First Contentful Paint (FCP) and How to reduce FCP time?

First Contentful Paint (FCP) is an indicator that is the time between the time when user start navigation (enter address and press GO) to the time when the browser render first bit of content.

FCP is a very important indicator that tell you about your server side in a reliable way.

Usually, a high value FCP, indicates that your server’s response time is high or some slow in network bandwidth between server and user’s browser.

Another reason is, you have some render blocking resources like external CSS and JS.

loitools.com-site-speed-optiomization-cfp
loitools.com-site-speed-optiomization-cfp

Here is loading analyze of inneka.com, a programming receipt site, with FCP = 1.62s.

How to reduce FCP time?

Fisrt of all, check your server to ensure it’s strong enough to process all requests at the same time. The two major factors are CPU and Memory (RAM).

Next is to check your network bandwidth, it’s usually a problem before as you have some limitations (1TB/month, …). Basically, the most expensive usage of bandwidth are BOTs. Yes, they are Google Bot, MSN Bot, Yandex, Semrush, Yahoo Bot, Facebook ExternalHit, Crawler, … especially if you have a lot of post.

One another thing to consider is to use CDN for your assets to reduce number of requests to your server hence reduce the load for the server. JQuery, Jquery Plugins, Bootstrap, CSS, JS, … Moving those assets as much as possible to the CDN.

Finally, move all your JS files to the end of the site. JS functions usually used for interactive action with human hence not affect to the display of the site. That’s why they should be placed at the end of the site.