Back to Blogs
Image For Blog

First Contentful Paint and how to master it


15 Apr 2022

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:

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.

This website was built in SVG animation and CSS3 Animation.

This is an ongoing project to better understand SVG animation across browsers so this website may change often.

For the best experience use Chrome on desktop.