First Contentful Paint: How to Improve FCP in 12 Steps
First Contentful Paint (FCP) influences Page Experience signals, Google’s search algorithm, and Search Engine Results Page (SERP) rankings. FCP consists of 10% of your site’s performance score, which can affect your page experience.
All websites need a fast-loading time to get a better likelihood among visitors. Then, a slower loading time indicates poor performance and user experience that may lead to abandoned carts for eCommerce pages, lower confidence and a negative impact on your brand.
In this article, you’ll discover and understand what needs to know about First Contentful Paint (FCP), including the meaning, significance, and the best practices on how you can fix and/or improve the FCP score of a page, getting higher score in Google PageSpeed Insights.
First Contentful Paint (FCP) refers to one of the six metrics in the Performance section of the Lighthouse speed test report.
FCP monitors how long it takes a specific page in a browser to produce the first piece of content like text, image or canvas render when the page loads.
To better understand the definition of the First Contentful Paint (FCP), we have to divide it into two halves: ‘First Paint’ and ‘Contentful’.
First Paint initiates when a render is identified in the browser. It can be an empty space or a change in background color.
Literally, it’s just a ‘paint’ as it doesn’t offer any significant user-based information. Since First Paint is triggered early on page loading, it is not enough to use it to determine the website performance since it is measured without meaningful content shown to the user.
Contentful refers to the initial batch of content that appears when a site is launched on a user’s browser. It can be in the form of text, an image, or canvas that appears during the page loading time that is perceivable and consumable by the human mind.
For example, the first 0.1 to 0.2 seconds of the page loading time is called the ‘First Paint’ while the ‘Contentful paint’ comes after 0.4 seconds. Thus, the first 0.1 to 0.4 sec is what we call the ‘First Contentful Paint’ (FCP).
The Significance of First Contentful Paint (FCP) to Your Website’s User Experience
Web browsers can’t show all website elements in a single moment. During the website’s loading process, various factors impact a user’s impression of a page’s speed.
As a key metric in website development, FCP evaluates website performance and improves the best type of user experience. Thus, the FCP should be maintained low so users can view the website’s elements shortly after the page loads up and get a good impression.
If your FCP is fast, more visitors will spend time and read through the content on your site. As a result, they will have a better shopping or reading experience and not abandon your site when a particular page isn’t running properly.
Time to First Byte (TTFB) and First Contentful Paint (FCP)
Website developers use Time to First Byte (TTFB) to identify when a server loads slowly upon the request of a particular user.
With the help of TTFB, the FCP becomes a handy metric in evaluating the website’s user experience in general. It gives an accurate impression and picture of the page’s speed once a page load.
Check out my article on Reduce Initial Server Response Time (TTFB)
First Contentful Paint (FCP) vs. Largest Contentful Paint (LCP)
Despite their similarity in sound and purpose, the two terms refer to two different measures. The Largest Contentful Paint (LCP) metric measures how long it takes for the largest element on a page to become visible on a webpage. In contrast, FCP considers the first object to load, which is frequently not the biggest.
Largest Contentful Paint refers to the metric that indicates the time it takes a website to show the viewer the biggest chunk of website elements such as image, uploaded media, or any interactive material on the screen. This score, according to Google, only examines above the fold content.
Compared to Largest Contentful Paint (LCP), the First Contentful Paint (FCP) is considered as a more straightforward website performance indicator. It doesn’t need to consider the size, location, presentation, or type of a website element (logo, text, image, theme, or design).
Read more about Largest Contentful Paint – What is it & How to improve LCP
First Contentful Paint (FCP) vs. First Meaningful Paint (FMP)
First Meaningful Paint (FMP) is another metric that can be generated with and analyzed in your website’s Lighthouse performance report. FMP considers the visible content on a specific page in a website that becomes visible on the screen and offers ‘meaningful’ details to its visitors through each rendered content or ‘hero element’
Compared to FCP, FMP only measures how the page becomes visually complete after it loads up and serves its purpose to the user. So, the FCP must be considered and optimized first before the FMP as it indicates how a website performs initially without offering any valued content yet.
Also, the First Contentful Paint (FCP) needs to load up first before the page provides its purpose to the users (FMP) regardless of whether it’s a blog site or an eCommerce page. For example, the first 0.1 to 0.4 second of the page loading time is attributed to FCP while the next 0.7 second indicates the page’s FMP.
How to Measure First Contentful Paint (FCP)?
As an essential metric indicator for analyzing the page loading time, First Contentful Paint represents the duration from when the page starts loading to when any part of the page’s content is rendered on the screen.
To measure a page’s FCP, it can be tested both in the lab and through real-time performance. Currently, these are readily-available tools that web developers use to test First Contentful Paint (FCP):
- Chrome DevTools
- PageSpeed Insights
- PageSpeed Insights
- Chrome User Experience Report
- Search Console (Speed Report)
What Causes Poor First Contentful Paint (FCP) Score?
A slow First Contentful Paint (FCP) value can be attributed to the following variables:
- Font loading takes a long time.
- Initial server response time (TTFB) is slow
- Large transfer volumes and high request counts
- Resources that are blocking
- CSS that isn’t being utilized or is inefficient
- Above the fold, script-based components
- Above-the-fold lazy loading
- Images above the fold are not in-lined
- DOM size that is too large
- Multiple and frequent page redirects
FCP provides you with a clear picture of your site’s performance. These indicators are critical if you want to increase its performance and give consumers a great user experience.
How to Improve First Contentful Paint?
Fixing high-impact chances is the first step in improving First Contentful Paint (FCP). You may raise your FCP score by offering your content faster and decreasing and streamlining the resources needed to process & load up your pages.
1. Reduce and/or Remove Render-Blocking Resources
By removing render-blocking resources, you may lower your website’s paint time for the first time. Anything that prevents the Document Object Model (DOM) from being rendered is referred to as a render block.
Here are some of the plugins that can eliminate the external render-blocking resources in WordPress:
- WP Rocket
- Flying Press
Check the following steps on how to reduce and/or remove render-blocking resources in any page:
- To find non-critical CSS and JS, use the Coverage panel in Chrome DevTools. The tab informs you how much code was utilized vs. how much was loaded when you access or run a page.
- Move important code out from render-blocking URL to an in-line <script> tag in your HTML page once you’ve recognized it. The page will handle the page’s primary functionality when it loads.
- If there is code found in a render-blocking URL that isn’t important, retain it in the URL and use the <async> or <defer> properties to label it. Remove any script that’s not being utilized at all
Keep your CSS minimal, provide it as rapidly as possible, and unblock rendering with media types and queries.
Here are some of the other solutions that improve FCP Score:
- Chrome DevTools’ Coverage tab can help you identify crucial and non-critical CSS.
- WooCommerce scripts and styles, as well as non-eCommerce content, should be disabled if they are not in used.
- In Elementor, activate optimal DOM output and faster asset loading.
Before a browser can show or render any form of content to a user’s screen, it must first download, analyze, and execute all resources it finds. Reduce or replace the number of plugins that load useless CSS on your website.
3. Optimize the Page Load Speed with Preconnect
The preconnect directive allows the browser to setup early connections before an HTTP request is actually sent to the server. It indicates the browser that it should connect a given origin, before that domain is used to download resources.
To optimize preconnect connections to essential third-party domains, try adding <preconnect> or <dns-prefetch> resource hints. The <link rel=”preconnect”> tells the browser that your page plans to connect to another location in a website that makes the loading page faster than usual.
4. Reduce the time it takes for the server to respond (TTFB)
The Time to First Byte, or the time it takes for a browser window to get the first byte of page content, is reported in the Opportunities part of your Lighthouse report.
A page’s performance is hampered by slow server response times. When the browser takes more than 600 milliseconds to load, speed tools will raise an alert. Long page loads can be caused by a variety of factors, including slow server response times.
Here are some of the strategies to improve your FCP Score using the TTFB:
- Optimize the application logic on the server to prepare pages faster. If you’re using a server platform, the framework may offer suggestions for you.
- Streamline your server’s database queries, or switch to a quicker database system.
- Boost your database server to include extra RAM or a faster processor.
Server response time is affected by themes, extensions, and server requirements. Consider updating your server, choosing a more efficient theme, and/or carefully picking an optimization plugin.
5. Avoid and Fix Multiple Page Redirects
Your page load time will be slowed by redirects. The server typically responds with a 301-response code if a browser accesses a redirected resource that can be fixed by setting up a new connection at a new location.
Consider rebuilding your site to use Responsive Design instead of redirects to send mobile users to the mobile version of your page.
6. Determine Key Requests and Preload Resources
Preload instructs the user’s browser to acquire a certain resource as quickly as feasible. Fonts are the most commonly used resource for preloading.
If PageSpeed Insights encounter resources that should be preloaded, it will provide a “preload key requests” warning. Here are some of the WordPress plugins that can be applied to the critical resources:
- Pre* Party Resource Hints
- WP Rocket (For fonts only)
Determining key requests on preloading avoids Flash of Unstyled Text (FOUT), which occurs when the text on a web page shows momentarily in the browser’s default font before transitioning to a custom font. After determining the key requests, you can preload resources by using rel=”preload” such as <link rel=”preload” href=”style.css” as=”style”>
7. Avoid massive network payloads.
Longer page loading time is closely connected with large network payloads. They also cost customers money; for instance, additional cellular data may be required. As a result, it lowers the overall number of your page’s connection queries among the audience.
Here are some ideas for reducing payload size for a page:
- Rather than JPEG or PNG, use WebP for your photos.
- If you still choose to use a larger image size, set it as a JPEG picture with a compression level of 85.
- Cache page access requests so that the browser does not have to re-download the content on a user’s next visit.
- Consider using a widget to lazy-load comments and display excerpts in your post lists (e.g., through the “more” tag).
- Try to decrease the number of posts shown on a single page by splitting long articles into many pages.
- Utilize pagination to restrict the number of content items seen on a particular page if you’re using the ‘Views’ section to show all sections inside a page.
Aim for a total byte size of less than 1,600 KB according to HTTP Archive statistics. This goal is based on the quantity of data that may possibly be downloaded over a 3G network while maintaining a 10 second or less Time to Interactive.
8. Optimize a Page's Caching Strategy to All Serve Static Assets.
Browser caching can reduce the time it takes for your website to load on a user’s succeeding visits. Whenever a user’s browser accesses a resource, all page elements that load up are served from the browser’s local copy instead of from the network.
Optimizing a caching strategy allows the browser to retrieve all text, pictures, scripts, CSS styles, media files easily. Thus, providing browser options for where it can get a resource makes a major difference in the speed in the long run, especially for existing or loyal customers.
Long cache duration has the potential of preventing users from seeing changes to static website elements. Make sure to configure your build tool to include a hash or a version in the filenames of your static assets so that each release is distinct, forcing the browser to retrieve the updated version of static files that have already been loaded in the past.
9. Identify Critical CSS Elements, Inline & Reduce Unused CSS
Depending on the site, website developers can utilize a free crucial CSS generator or WordPress plugins like WP Rocket. However, it is strongly advised to create a backup of your site before making any changes since CSS files can be deleted or modified in the process of fixing a page’s FCP score.
Then, in-lining the CSS elements are crucial to maintaining your low FCP score. This allows a smooth-flowing CSS delivery in your cache plugin where all source codes are rendered.
One of the most significant solutions to improving FCP is Reducing Unused CSS.
10. Lower All Sizes of a Page’s DOM
The browser produces a Document Object Model (DOM) of a web page when it is loaded. The DOM is simply a representation of the page using nodes that hastens smooth interaction between a browser and the domain where the website is created and located. Thus, lowering the DOM size in a page requires a shorter time of loading and content rendering.
FCP reports flag pages with DOM when:
- It has more than ~800 nodes – Receive a Warning Notification
- It has more than ~1,400 nodes – Gives an Error Message
You may lower the size of your DOM in several ways:
- Dividing huge pages into smaller chunks.
- Acquire as many lazy-loaded HTML elements as possible, not only pictures.
- Organize comments, posts, and photos accordingly.
- Reduce the number of posts that appear on your page.
- Remove any CSS that you don’t want and not hide it.
How to minimize the size of your WordPress DOM:
- Use page builders and plugins that don’t include unnecessary <div> tags.
- Select a well-optimized theme. Consider the Hello or GeneratePress theme for example.
It’s preferable to keep your Document Object Model as short as possible (DOM). This makes it simpler for your target users to read and load a page across browsers.
11. Upload Next-Gen Image Formats and Avoid Lazy-Loaded Images Above the Page Fold
JPEG XR, JPEG 2000, and WebP are image formats that offer higher compression than PNG and JPEG. These are called ‘Lazy-Loaded Images’ that translates to quicker downloads and fewer data usage.
Images above the fold (ATF) need to load as rapidly as possible so that your FCP time isn’t wasted. So, make sure your above the fold images are excluded from Lazy load.
12. Use Lightweight Themes and Hard Code Your Header & Menu Bars
When it comes to first impressions, themes, headers and menus are among the first things your visitors notice. Using page builders, hefty plugins, or hamburger menus to create menus will slow down your FCP.
Therefore, the header, navigation bars, menu, footer, and page sidebars must be all hard-coded before launching it. Eventually, this will result in a significant increase in web vitals while navigating through the website’s pages. Currently, people are increasingly switching from heavy page builders (such as Elementor and Divi) to lighter options like Gutenberg, GeneratePress, and Oxygen Builder.
After reading this article, you now know what strategies to take to decrease the First Contentful Paint (FCP) metric to boost your overall user experience. If you have applied the tips suggested above, perform a series of tests on your First Contentful Paint. Remember, if you want it to be green, it should be under 1.8 seconds.
Website developers fail to recognize the importance of FCP performance optimization, which causes their sites to rank low. Fixing your FCP score aids in improving loading speed to position your website higher in search engine results organically.
Website developers and business owners need to closely monitor FCP because it became part of Google’s search algorithm. If you’ve observed that some factors are causing you to have a low FCP score based on the generated report, you might need to consider learning how to speed up your site or to contact an expert to improve your site speed.
Page Speed Optimization Course
If you want to learn more about how to optimize page speed and improve First Contentful Paint (FCP), please check out my WordPress Page Speed Optimization Course.
Every aspect of this case study is covered in depth in this course, with detailed step-by-step lessons.
I will also offer personal assistance to everyone taking the course so that I can guide you along the process.
Send me your site URL, and I will personally check your site and give you a few recommendations for free.