first contentful paint

How to Improve First Contentful Paint

March 9, 2022

If you're trying to optimize your website's speed, you've probably heard about Google's Core Web Vitals. This includes, among other metrics, first contentful paint. In this article, we'll explain what FCP is, why it matters, and the biggest things you can do to improve it.


Table of Contents


What is first contentful paint?

First contentful paint is how much time it takes for the first bit of content to be painted to your page as it loads. This metric is important beacause with a faster FCP score, users perceive the page to be loading faster. Before the first contentful paint, users will just see a blank page, and the first contentful paint lets them know the page is actually loading.

How can you measure FCP?

Tools such as PageSpeed Insights, Google Lighthouse, and GTMetrix will all report Core Web Vitals, including first contentful paint. However, keep in mind that you should be most concerned with the mobile performance, since mobile devices make up for over 50% of web traffic. Optimize well for mobile, and the desktop speed will come easily. 

GTMetrix reports desktop results, so it can be misleading to rely on it alone. However, its waterfall chart is great for identifying which resources are slowing your load speed down.

PageSpeed Insights and Google Lighthouse will give you very similar results, and both will give results for mobile devices by default. They simulate a phone on a slow 4G connection, which is important to optimize for, since your users may not always be on a fast connection. You should aim for pages that load fast in all conditions.

Eliminate Render Blocking Resources

When your browser renders a page, it not only has to download the HTML document itself, but other files such as CSS files and Javascript files. If your page isn't properly optimized, then these CSS and JavaScript files will slow down your page, as your browser waits for these files to download. To improve your first contentful paint, you should eliminate render blocking resources as much as possible.

Avoid Large CSS Files

Large CSS files with unused code are big contributor to slow first contentful paint. Since external CSS files are render blocking, your browser has to wait for them to finish downloading before it can parse and render your content.

You should eliminate any unused CSS code from your site, and get your CSS to be as small as possible. You can also inline critical CSS, that is, CSS that's needed to properly display the above-the-fold section of your page. This allows you to defer the rest of the CSS until after page load.

Use Async Attribute For JavaScript

Similar to CSS, JavaScript files can be render blocking resources. However, since on most sites, JavaScript isn't needed to render the page initially, you can delay the loading of your JavaScript until the page is loaded.

Here's an example of a JavaScript tag with the async attribute:

<script src="script.js" async></script>

The async attribute tells the browser that it can start loading the script file at any time, and it can continue parsing the HTML and rendering the page in the meantime.

There's another similar attribute called "defer". This works similar to async, but it tells the browser it must wait until the page is fully loaded. This can be useful for controlling the order that scripts load, or for delaying execution of JavaScript that's less important for the user experience.

Here's an example of the defer attribute in action:

<script src="script.js" defer></script>

On our website at Fastify.com, we have two script loading. One is lazysizes.js, which uses async. That's because we want lazy loading images to work as quickly as possible, and this is a small file that won't majorly impact load times. After that, we load the main JavaScript bundle, which contains less essential functionality, like jQuery, the mobile menu, and the animate on scroll library.

Remove Google Fonts

While Google's Web Fonts provide an easy way to customize your site's typography, they can also significantly slow down your webpages. You have a couple of options for dealing with this.

First, the most easiest option is to use a system font instead. This might not be desirable for some, but if you're okay with the appearance of system fonts, this is the best option.

You can also self-host your webfonts and retain the custom appearance, but significantly improve your site's performance to near the same level as using system fonts. You can check out our article on self-hosting fonts for more information. The fonts on this website are self-hosted, which is part of how we're able to achieve near 100 PageSpeed Insights score, even with advertising pixels installed.

Ensure Text Remains Visible During Load

When you're using web fonts, you may notice a flash of invisible text, or FOIT. As the browser downloads your custom font, it will display nothing in the place of text, until the font is finished downloading. This will lead to slower first contentful paint times, since it's a delay before the browser renders your content.

To fix this, you should use the "font-display" property on your font face declarations. You can read more about this in our article on optimizing fonts.

Replace Background Images With Image Tags

It's a common design pattern for websites to use a hero section with a background image at the top of the page, overlayed by a heading, some subtext, and a call to action button. However, using CSS to display these background images can be significantly slower than using an image tag.

If your pages have a hero section with a background image, you can speed up the page by replacing it with an img tag instead.

Here's an example of CSS you can apply to an image to make it look like a background image. Remember, you'll need to set position to relative on the image's container for this to work.

position: relative;
top: 0;
left: 0;
right 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: -1;
object-fit: cover;

Optimize Your Images

Optimizing images is one of the most important page speed optimizations. Images tend to be the largest files on a site, and the longer it takes to download your images, the longer your first contentful paint. Check out our complete article on image optimization for more tips on how to shrink image files down as much as possible.

Avoid Lazy Loading Above The Fold Images

Lazy loading images is a great way to speed up your pages, and PageSpeed Insights will suggest that you do so, if you aren't already. However, there are some images you don't want to lazy load. For any images above the fold, you should try disabling lazy loading. You know these images are going to be needed immediately, so lazy loading them will only slow the page down.

Inline Small Image Files

For some very small image files, it can make your page faster to inline them in the HTML, rather than loading them as separate files. This is possible with SVG images, or encoding other formats as base64 and using data URLs.

You can use Base 64 Image Encoder to encode your images. Simply upload your file, and the tool will generate a base64 encoded version that can be used inline within your HTML and CSS.

When using the base64 encoded image with an img tag, the code will look like this:

<img src="data:image/jpeg;base64,...">

You can also use the base64 code in CSS like this:

.some-class {
  background: url(data:image/jpeg;base64,...);
}

SVG, also known as scalable vector graphics, is an format for vector graphics that generally results in very small files. You can embed these images directly into your HTML document. For example, you'll find code that looks like this within any .svg file, but this can also be pasted into HTML.

<svg xmlns="http://www.w3.org/2000/svg">
  <circle cx='50' cy='25' r='20'/>
</svg>

Simply insert SVG code into your HTML like you'd do with any other tag!

Use Resource Hints

For resources that are essential to rendering the above the fold section of your page, you should try using resource hints. Resource hints are simply HTML tags you add to the head of your page, and give a hint to the browser that a resource is important. 

When using resource hints, you should always test before and after, and don't add too many. With too many resource hints, or ones for the wrong resources, you'll end up slowing your page down.

Preloading fonts

If you're using custom fonts on your pages, it's likely going to speed up metrics like first contentful paint by adding a resource hint. Take a look at this example code:

<link rel="preload" as="font" href="/path/to/font.woff2" crossorigin>

This is sometimes also referred to as "rel preload." This simply instructs the browser to start downloading the specified file ahead of time. Note the crossorigin attribute, which is required for all fonts, even if they're on the same domain.

Preloading webfonts can speed up your pages, since it eliminates what's known as a critical request chain. This is an issue where your browser first needs to load the CSS and see the font face declaration, before it knows to start downloading the font. By preloading, the browser can get a head start, and your font will be ready sooner.

Preloading largest contentful paint image

Many web pages have a large hero image above the fold, and preloading it can speed up your first contentful paint, as well as other metrics like largest contentful paint. 

Here's an example of preloading an image.

<link rel="preload" as="image" href="/path/to/image.jpg">

Improve Server Response Time

If your server response time is slow, then it's adding to all of the other Core Web Vitals metrics, like first contentful paint. Slow server response time can be caused by a number of factors.

GTMetrix is a great tool for measuring server response time. Look for the "time to first byte" (TTFB) metric. This measures how much time it takes from when the browser makes a request to when it first starts receiving data from the server.

The time to first byte will be under 100ms for a well-optimized site. With a CDN like Cloudflare, you'll even see under 50ms at times! If your time to first byte is much more than 100ms, then it's a problem you should try to address.

If you're using WordPress, then the first thing you should check is that you have a cache plugin installed. Cache plugins will save your page's HTML as static webpages, and deliver them to users, rather than running WordPress's PHP to generate the page every time a request is made. This significantly cuts down the response time and server load.

You can improve your server response time much more if you use a CDN. Sometimes a CDN is used only to deliver assets like images, or CSS and JavaScript files. However, ideally your CDN should cache your HTML content.

With Cloudflare, you can cache your entire site with the WP Cloudflare Super Page Cache plugin. Check out our guide on other free WordPress plugins to speed up your site.


Written By 
Mason Wiley
My name is Mason, and I cofounded Fastify after years of experience with SEO and affiliate marketing in a highly competitive industry. I've worked through countless pages of documentation and ran countless experiments to find all the hidden secrets to making screaming fast pages.
menucross-circle