knfrmd.

About WebLogs Services Projects

FCP: How big is your <head>?

Last Modified: 2021-08-05
Knfrmd - FCP: How big is your <head>?
Kanmi Obasa
Kanmi Obasa

The <head> element is a collection of machine-readable information about the document like <title>, <style>, <meta>, <link>, <script>, <noscript>, <base>. What I've found is with an increase in the information in the <head>The browser tends to spend more time on that info before the page starts to render.

Addressing First Contentful Paint Issues in <head>

The Order of <head>

The size and order in which the <head> tag is written could determine if a site is fast or slow. Using Nestle Central and West Africa's mobile website as a case study. Here is a Pagespeed Insight test, the website does not pass the Core Web Vitals assessment. With a First Contentful Paint of 4.2 seconds on mobile. Not for the First Contentful Paint to be considered Good, it would need to be recorded at 1.8 seconds or less.

With such a high First Contentful Paint recording, I decided to take a look under the hood of the website.

First thing I noticed was the amount of content was in the <head> before any of the CSS. My first advice here is to ensure that the location of the CSS file is high up in the waterfall.

Second thing I noticed, not a big issue or an issue at all, but I'll recommend the meta tag about the viewport should be located high up, so the browser knows what viewport its working with a little earlier.

Size of <head>

Most times certain assets are crucial in ensuring a page looks and functions the way it needs to. From experience, I have noticed that these essential assets tend to have a lot of unused code in them that could potentially be adding to the amount of render-blocking resources. Using Dev Tools, just 20% of the assets were found to be used on each page. Creating critical assets that ensure content above the fold render first and fast would be my recommendation here.

Priority

Every now and then we get tips on how to make sites seem faster. <link rel="preload"> is an awesome tool which I'll recommend anyday, but for every scenario. In the case of Nestle Central and West Africa, preloading so many assets may not give the best results. Priority should be given to above the fold content.

With the minor changes listed above Nestle Central and West Africa's website should see some improvement.