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:
Table of Contents
- Reduce TTFB
- Remove Render-blocking resources
- Use well-coded themes and page builders
- Avoid JS dependent elements in Above Fold
- Preload Pages in the Background
- Exclude ‘Above Fold’ Images from Lazy Loading
- Inline ‘Critical’ Images
- Reduce DOM Size
- Ensure Text Remains Visible during webfont load
FCP = TTFB + render time.
So you’ve to reduce TTFB to reduce FCP.
Remove Render-blocking resources
Once the browser receives the HTML content, it may have to download extra resources in order to start rendering.
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.
Use well-coded themes and page builders
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
- Sliders like Revolution slider
- Google Ads
- Mega Menu plugins
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
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:
A base64 image in HTML (inlined):
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
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).
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.
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!