What is First Contentful Paint and how can you optimise it

User experience (UX) has become the term of the year, perhaps of the decade. Among the many ways to measure it, speed and convenience often rank highly. In this, First Contentful Paint (FCP) plays a key role. It denotes the amount of time taken for a page to render its first visual component. Research shows that an FCP load time of 1.8 seconds or less is ideal – the faster the better, but beyond 1.8 seconds the difference is not astronomic. Below that threshold, however, the sleeping beast of user irritation risks being awoken. In order to keep this fearsome creature in a deep slumber, you should run tests across mobile and desktop devices to determine how fast your site loads on average. Should the results prove disappointing, there are a variety of methods to cut down FCP load time and enhance user experience. Read on to find out more. 

Measuring FCP

Measuring FCP is mercifully easy. The best way to do it is to run PageSpeed Insights on your site’s URL. You will be presented with two options – mobile and desktop – and directly below you’ll find FCP as the first metric that appears. For some sites, there will be insufficient ‘real-user data’, in which case the analytic tool will resort to ‘aggregate’ data on your domain name as a whole. These metrics are fairly reliable, but inevitably pages load differently on different devices, so there will be some variation. 

Enhancing FCP

Now, if you didn’t like what you saw on the score sheet, you should be looking to rectify the problem as soon as possible. Nothing puts users off more than a laggy webpage. The good news is that there are many ways to improve your site’s load time – the less good news is that it’s hard to pinpoint exactly which you should focus on. The Google web.dev guide recommends addressing them all, with the assistance of Lighthouse, a performance analytic that may be able to indicate which areas are most in need of improvement. 

Using Lighthouse 

Lighthouse is an auditing tool that you can use in a variety of ways. The simplest way is to download the Chrome extension and run your site in an Incognito window. From the Lighthouse icon in the Toolbar you will see an option ‘Generate report’ which will show the same analytics that you see in PageSpeed Insights. From there, you will see a section called ‘Opportunities’ that will suggest to you the most prudent ways of reducing your FCP load time. One of the most common issues that developers run into is font rendering – ensuring that all fonts are rendered quickly – but there a variety of potential issues to address, such as unused CSS, multiple page redirects, disabled text compression and non-composited animations. Any files on your page that must be rendered before other features can cause ‘render-blocking’. These might be CSS files, HTML or fonts – whatever the case, the solution is to ‘minify’ and combine these files together. See the ‘Opportunities’ section of this Google page to learn how to do this. There are sections dedicated to minifying CSS, HTML and more. 

The algorithm is on to you

FCP was recently (just this year) added to the Google search algorithm so that any sites with a subpar FCP will likely be penalised in the SERPs. While we are as of yet unsure what difference an exceptional FCP would make over an average or good FCP, what is certain is that a negative score should be actively avoided. This has always been the case for reasons of UX, but with the algorithm’s recent adoption of FCP metrics, now more than ever web devs and business owners need to be on top of their FCP load time. 

Being a landowner in the digital landscape of the internet is constant work. SEO is like a party – either you’re invited, or you’re not. It’s becoming increasingly difficult for low-ranking websites, or websites that aren’t fulfilling all the necessary UX criteria, to rise from anonymity into the sphere of public recognition. In order to make this transition, not only does your business need to attract consumers from a traditional marketing perspective, but you also need to tick the boxes that Google requires you to tick. Ross Pike of exhibition stand builder, Quadrant2Design comments, ‘It’s not enough to simply have an attractive website with marketable products — in 2021, there are a number of logistical hurdles to overcome, including a reasonable backlink profile and compatibility across mobile and desktop, before Google will even acknowledge your site as worth showing to users. Business owners can afford very little laziness when it comes to fulfilling these criteria.’ Yes, the digital to-do list grows like garden weeds, but none of it is arbitrary. Once you do as the almighty algorithm commands, you will see significant improvements in the user experience of navigating your site.