First Contentful Paint

First Contentful Paint, or FCP, is another component of the Core Web Vitals from Google. It is the length of time between the initial page load to when a visitor sees anything rendered on the page, such as text, background color, or images. Like Time to First Byte (TTFB), First Contentful Paint is a crucial factor as it relates to the page loading process and can help uncover issues that may be caused by server-side bottlenecks. For example, if your page contains a lot of content, it will require more resources from the server to return all the necessary content to the client/browser. However, First Contentful Paint differs from the Largest Contentful Paint, or LCP, which indicates when the main, or biggest, piece of content on the page has finished rendering and is visible to the visitor.

Lighthouse scores the First Contentful Paint based upon the length of time is takes the browser to any components from the DOM (Document Object Model), like text, images, background images, or non-white graphics elements that typically contain JavaScript. Ideally, developers should try to optimize and reduce the time it takes so that it is under two seconds. Again, this is important for a couple of reasons. One, it ensures that users see something on the page. If not, they may assume the page is not loading properly and will likely bounce. Two, for users on mobile devices, the time may be delayed as their network connection may impact how quickly content is downloaded and rendered. If your page takes more than three seconds to load, users will be making the decision to leave your page and find what they were looking for somewhere else. Running Lighthouse test will help to uncover any specific opportunities that may be able to help diagnose a poor First Contentful Paint score.

Unlike the Cumulative Layout Shift, the First Contentful Paint metric accounts for about 10 percent of the overall Lighthouse Performance score, so this metric is one that developers will want to take care of if a Lighthouse audit brings up recommendations to improve the First Contentful Paint. We have mentioned a few recommendations above, such as cleaning up server-side elements, like databases, code, etc., but there are several more optimizations that can be considered, such as utilizing a Content Delivery Network, or CDN (Content Delivery Network), reducing the amount of page redirects, and caching mechanisms. All these optimizations help to improve the delivery of resources from the server to the client. In the case of a CDN, proxy servers are used to help deliver content to users that are closer to those servers, reducing the time it takes to download, execute, and render page elements. Additionally, with some CDN providers, organizations can take advantage of CDN caching, which reduces the load on the server, allowing it to send content faster to visitors.

Additionally, some other optimization techniques include reducing the number of render-blocking resources, such as JavaScript, CSS (Cascading Style Sheets), and HTML (HyperText Markup Language). Developers can either move, or defer, scripts to load later so that they do not impact the initial page download or inline JavaScript or CSS, to reduce the number of files the browser must parse. Furthermore, techniques like minifying can also reduce or eliminate any redundant or unnecessary code, without affecting how the code is processed. Teams that deal with a lot of code or large websites can implement automated workflows during the development process, ensuring that the code is optimized from start to finish. And the goal should be to try to reduce the amount and size of requests where possible, so the browser does not have to work so hard to download and render them and pages can load faster.