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.
First Contentful Paint
What is First Contentful Paint?
First Contentful Paint Score
How to Improve First Contentful Paint
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.
First Contentful Paint: Additional Optimizations
Lighthouse is an open-source tool that is used to run an audit against your web pages and provides scores and suggestions for improving page performance, accessibility, SEO, and more.
PageSpeed Insights is a tool created by Google that reports on the performance of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved.