Core Web Vitals: How To Improve First Contentful Paint

In, what will be a series of posts and videos here we will work to explain what each of the 6 measurements provided by the lighthouse report is, and how to improve them. In this article, we will address how you can improve your website's first contentful paint times are also known as FCP. While we are going to be providing advice for WordPress website's keep in mind the general concepts will apply to any and all websites.

What Is First Contentful Paint (FCP)?

First Contentful Paint is a performance metric used for measuring the perceived load time of the page. FCP measures when the first bit of text or an image is painted on the screen. This is similar to "First Paint" as measured by GTMetrix and their speed test but is a bit more specific.

First Paint is when any type of content has been painted First Contentful Paint is when the first bit of content is painted. Keep in mind these timings can be very similar but the distinction is important. Technically, any of the following can be counted as the FCP for the page including text, images, background images, SVG elements, and canvas elements.

How To Measure First Contentful Paint

There are a number of tools at your disposal to properly measure First Contentful Paint I am just going to provide links to the tools I use below.

• Lighthouse (chrome dev tools)
• Page Speed Insights
• GTMetrix
• Web.dev (provides full lighthouse reports without needing to use dev tools)

No matter what tool you use remember to run the test a few times and take the median score to get a good idea of the actual measurement of your site's FCP.

What Is The Recommended Score?

Google recommends that your FCP is below 2 seconds to get a fast rating in lighthouse (for mobile users), for desktop while the recommendation keep in mind it's unlikely you're running into any performance limitations on the desktop for your FCP. So to keep things simple we will be solely focused on mobile from here on out but all recommendations apply to optimizing for both platforms.

How To Improve First Contentful Paint (FCP) In WordPress

Let's start by saying that not all of these methods will apply to your site and may not be possible for you and they may require a developer to perform the work on your website on your behalf. But they are all possible ways to improve your LCP.

Reduce Server Response Time (TTFB)

This is the first and most obvious suggestion, reducing the server response time is one of the easiest things you can do to improve your website's overall load time. This is because your FCP is the sum of TTFB + Content Load + Rendering Time FCP is also as simple as either employing a caching solution on your existing website or you can upgrade to a faster host.

Some common hosts I recommend you stay away from due to poor performance.

• GoDaddy
• Hostgator
• Bluehost
• Hostmonster
• There are more if you're unsure feel free to ask!

The I don't recommend these hosts ultimately comes down to lack of resources which for mildly complex website's can lead to a high TTFB. Additionally, any host you are considering should offer a free SSL, and should be using an SSD for storage. Some good brands I have worked with (not all of them are listed below even though there are tons of great ones out there.

• SiteGround (good value especially if you need email hosting free SSL, good amount of storage, fast and great support)
• Cloudways (best value, though they don't offer email hosting so you will need something like GSuite for emails)
• Kinsta (my most recommended hosting platform from my experience, amazing support but very expensive)
• WPEngine / Flywheel (great hosts with good support a good "middle ground" between Kinsta and SiteGround.

Basically, all of the above hosts have an SSD and come with a good server-side caching system. If you're unsure and coming from a traditional CPanel host SiteGround is probably your best fit. If you have a higher traffic site that needs a strong reliable server then Kinsta, if you're in the middle Cloudways, is a great option as is WPEngine.

Use a CDN (Even a Free One)

Remember how I mentioned FCP is a sum of three items including the content load time, if you're making use of an image, in particular, a good CDN to reduce the latency between the user and the asset can greatly improve the load time of your website. By delivering the assets closer to your users you cut out additional latency and often times the CDN's servers are significantly faster than your web host further reducing the load time of images, CSS files, and other static assets. I have used Cloudflare's free plan for many years now and I highly recommend it.

Many times your hosts offer a free CDN through stack path and this is a great option as well but if you can I more often than not still recommend installing Cloudflare onto your website to further reduce load times, compress assets, and more. I install it on nearly every client site I work on.

Add Font-Display Swap Where Applicable

Font-Display Swap clears the "Ensure text remains visible during webfont load" warning in the Lighthouse report but it also improves your FCP. Font-Display Swap basically tells the browser to use a fallback font and then once the font file is downloaded swap to it. This is because by default if the browser doesn't have the font file downloaded locally it can't render that font until it is downloaded. For desktop this process usually takes less than a blink of an eye. Particularly, if you're only using a handful of fonts if you have many this becomes an even larger issue.

The implementation is relatively simple if you have an @font-face value in your stylesheet simply add the property font-display: swap; at the end and it should work there is an example provided below.

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
  font-display: swap;
}

Now, if you have Google Fonts, all you need is to include &display=swap at the end of the URL such as the following and it will append the property to all the fonts for you.

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">

Keep in mind this will cause a flash of unstyled text (FOUT) while loading but remove the flash of invisible text (FOIT) entirely this is from my experience the best experience for mobile users overall even though it might seem a bit distracting at first.