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:

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.

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.

Without Critical CSS

With 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.

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.

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

Preload Pages in the Background

By preloading pages in the background, whenever 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">

Use plugins like Flying Pages which will automate this task intelligently.

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. If you’re using Flying Images, you can exclude images by keywords which can be file names, class, id, attribute or even from the parent node of the image.

Inline ‘Critical’ Images

Inlining images mean 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]..."/>

If you take a look at the home page of my blog, you’ll see a few images that I’ve inlined:

Inlining every image can be harmful. Read the below guide on choosing which images has to be inlined.



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.

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).

Demo:

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.

Comment below if you’ve any queries or feedback. I read and reply to each of them within 8 hours!