How Big Is Your Head?
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.
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 it's not 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.
