First Contentful Paint and how to master it

First contentful paint (FCP) is an important metric used in Google pagespeed insights and the lighthouse report.

It measures how long it takes the browser to render the first piece of DOM content after a user navigates to your page. This includes pretty much anything thats not inside and iframe and visible to the user.

The most important aspect of getting a good score with this section is to make sure text remains visible on load. A good way of keeping a font viewable before the page loads is using 

font-display: swap; in your @font-face this tells the browser to display the font as a system font before the actual font gets loaded in.

Other ways to maximise FCP are:

• Eliminate render-blocking resources
• Minify CSS
• Remove unused CSS
• Preconnect to required origins
• Avoid multiple page redirects
• Avoid an excessive DOM size
• Ensure text remains visible during webfont load

Eliminating render block issues are usually done by adding defer to your script tags so they load after the initial page load.

Minifying and removing unused code is a large help to speed up your site in general and works especially well for FCP.

Using link rel="preload" or link rel="preconnect" are a great way to preload styles and tell your browser to grab this information as soon as possible especially if it comes from a seperate source.

For more information on FCP visit Mozilla.