7 Tips to Improve FCP in WordPress

first impression

Google recently made an announcement that they’re ranking websites based on FCP and FID.

They categorize websites into Slow, Moderate and Fast

fcp and fid

This is now visible in Google Search Console‘s ‘Speed’ menu.

site speed search console

This is also visible in Google PageSpeed Insights as ‘Field Data’.

crux data Jan 14

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

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.

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

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.

flying images settings

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:

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.

render tree construction

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:

fonts error goole psi

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 12 hours!

You May Also Like