In early 2019, Google announced that they would evaluate a website’s speed ranking by focusing on two performance metrics: First Contentful Paint (FCP) and First Input Delay (FID).
Over time, the performance scenario has evolved. For instance, Google announced the three Core Web Vitals: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and First Input Delay (FID).
Nonetheless, the First Contentful Paint metric has continued to play an important role as a Lighthouse (and user experience) metric. It accounts for 10% of the overall performance score.
Your website may load under 2 seconds in a speed test, but if that’s not the case for a majority of your audience, then Google will still penalize you.
In this article, you’ll learn what’s FCP and why it’s important. Next, we’ll move on to various ways you can improve FCP on your WordPress site.
Sounds exciting? Let’s dive in!
What is First Contentful Paint (FCP)?
First Contentful Paint (FCP) is a user-centric metric for measuring perceived page load speed. FCP measures how users perceive the performance of a website, rather than what a speed test tool measures.
First Contentful Paint differs from First Paint, which is a point in the page load timeline where any type of render is detected on the browser. On the other hand, FCP requires some content to be rendered. This content could be text, images (including background images, logos), or non-white <canvas> elements.
First Contentful Paint also differs from the Largest Contentful Pain (LCP), one of the Core Web Vitals measuring how long it takes for the largest element to become visible in the viewport.
To keep it simple, you can think of FCP as the time it takes for the user to see any content on their browser. Thus, a fast FCP reassures the user that something is happening and keeps them glued to the site.
Google recently made an announcement that they’re ranking websites based on FCP and FID.
They categorize websites into Slow, Moderate and Fast
This is now visible in Google Search Console‘s ‘Speed’ menu.
This is also visible in Google PageSpeed Insights as ‘Field Data’.
“But my website loads in 2s” Why does this matter?
The Field Data is the data collected from the Chrome User Experience Report (Crux). Chrome collects data from real users.
Your testing tools might say your website loads in 2s or less. But your audience might be from different locations, with different devices and network speed.
Field Data tells the actual speed that your users are experiencing.
So if you’re trying to figure out how to reduce FCP, here are some tips:
1. Reduce TTFB
FCP = TTFB + render time.
So you’ve to reduce TTFB to reduce FCP.
There are several techniques to reduce TTFB in WordPress. The easiest one is to use a good cache plugin like WP Rocket and a good hosting provider like Cloudways.
2. Remove Render-blocking resources
Once the browser receives the HTML content, it may have to download extra resources in order to start rendering.
They’re usually CSS and JavaScript.
For JavaScript, you’ve to add a defer attribute to the script tag. The defer attribute tells the browser to only execute the script file once the HTML document has been fully parsed.
For CSS, we’ve to load them at the bottom, asynchronously.
Almost all cache plugins can do both. What I usually recommend is WP Rocket since it can generate critical CSS too.
Generate Critical CSS
When you load CSS asynchronously, the browser doesn’t have the necessary styles required. This will create Flash of Unstyled Content of FOUC.
To prevent this, we’ve to generate Critical CSS.
Critical CSS is the CSS that is required to render the above fold contents. It’s inlined in the HTML so that no resources need to be downloaded and the browser can immediately render the content.
3. Use well-coded themes and page builders
A good theme has a major role in reducing FCP. Use well-coded themes like GeneratePress or Astra.
Page builders also inject too many divs and unwanted CSS. Use builders like Oxygen that doesn’t inject unwanted divs and has more control over everything.
If you’re new to Oxygen, watch Building a Website in Oxygen from Scratch.
4. Avoid JS dependent elements in Above Fold
Anything that requires JavaScript to be executed to render can harm First Contentful Paint.
So as a thumb rule, avoid elements that require JavaScript to render in the above fold, like these:
- Sliders like Revolution slider
- Google Ads
- Mega Menu plugins
- Animations
5. Preload Pages in the Background
By preloading pages in the background, whenever a user navigates to a page, the page is loaded instantly without any delay.
Link prefetching is a browser mechanism, which utilizes browser idle time to download or prefetch documents that the user might visit in the near future.
Mozilla Docs
Note that this will not help for the initial page load, only for the inner pages.
The code looks like this:
<link rel=”prefetch” href=”URL_TO_PAGE”>
6. Exclude ‘Above Fold’ Images from Lazy Loading
Lazy loading usually requires JavaScript to be executed before displaying images. This can delay rendering images in the above fold.
Always exclude images in the above fold from lazy loading. Most of the lazy loading plugins have this feature.
7. Inline ‘Critical’ Images
Inlining images mean the browser doesn’t have to make another HTTP request to download the image. The content of the image is already inside the HTML.
A normal image in HTML:
<img src=”https://yout-site.com/logo.png”/>
A base64 image in HTML (inlined):
<img src=”data:image/png;base64,…[content]…”/>
8. Reduce DOM Size
When your browser receives an HTML document, it has to be converted to a tree-like structure which is used for rendering and painting with the help of CSS and JavaScript.
This ‘tree’ like structure is called DOM or Document Object Model.
The more elements you add into a page, render time and First Contentful Paint increases.
9. Ensure Text Remains Visible during webfont load
You may have seen an error like this in Google PageSpeed Insights:
Font files are usually added in the CSS files.
For a browser to get the fonts ready, it has to parse HTML, download CSS files, parse them, and download fonts files.
Until these all are done, the text is invisible! Also called Flash of Invisible Text (FOIT).
You can fix this by adding a display:swap to CSS (@font-face). This tells the browser to use a default font until the actual one is downloaded.
Conclusion
As Google has started to put more focus on site speed, improving FCP is no longer a ‘good to have’, it’s a ‘necessity’.
Not just Google, FCP and FMP are the metrics which says when a site is ‘visible’ to the user. Measuring fully loaded time is not always enough.