By reducing page load times and improving resource optimization, you can raise your first contentful paint score. The use of a content delivery network (CDN), caching, decreasing the size of your DOM, hosting your fonts locally, and getting rid of render-blocking resources are all ways to accomplish this.
The goal of Google’s First Contentful Paint (FCP) score is to evaluate the speed with which a page is rendered from the user’s point of view. It’s useful for estimating how long it takes for a user to see visible results after a web page has begun loading. The FCP score of a website should be as low as possible.
The Page Experience Signals initiative is a part of Google’s Core Web Vitals initiative and are affecting Google SERP rankings once since its implementation on June 2021. That’s why it’s so important for webmasters and SEO experts to grasp the factors that contribute to a high FCP score.
What is First Contentful Paint (FCP)?
First Contentful Paint (FCP) is a web performance metric that measures the time it takes for the first piece of content on a web page to be rendered or painted on the user’s screen. The content could be an image, text, video or any other visible element on the web page.
FCP marks the point in the page load timeline when the user is first able to see any visual indication that the page is loading. It is an important metric for measuring the perceived loading speed of a web page because it represents the first tangible feedback that the user receives after requesting the page.
First Contentful Paint is distinct from First Paint, which is a point in the page load timeline where the browser detects any type of render. FCP, on the other hand, requires that some content be rendered. Text, images (including background images and logos), or non-white canvas> elements could all be used as content.
First Contentful Paint differs from Largest Contentful Pain (LCP), one of the Core Web Vitals that measures how long it takes for the largest element to appear in the viewport.
To put it simply, FCP is the time it takes for a user to see any content on their browser. As a result, a quick FCP reassures the user that something is going on and keeps them glued to the site.
What is a good FCP score?
A good FCP score is typically considered to be under 1-2 seconds, although the ideal FCP time can vary depending on the complexity of the web page and the user’s device and network speed.
Google will give you a green (fast) rating if your FCP is less than 2 seconds. 2-4 seconds is considered moderate, and more than 4 seconds is considered severe (slow). To pass Google’s Web Vitals test, website owners should aim for an FCP of less than 2 seconds.
In general, faster FCP times are better because they indicate that the first piece of content on the web page has loaded quickly and the user is getting visual feedback that the page is loading. A slower FCP time can indicate that the user is experiencing a delay in seeing any visual indication that the page is loading, which can negatively impact their perception of the page’s speed and usability.
Heavy pages, slow servers, and render blocking resources all contribute to low FCP scores. FCP can be made faster by employing a faster server, a CDN, and optimizing the page’s resources.
How to Measure First Contentful Paint (FCP)
First Contentful Paint (FCP) can be measured in a variety of ways, including:
Performance monitoring tools: FCP can be measured using web performance monitoring tools such as Google’s PageSpeed Insights, Lighthouse, or WebPageTest. These tools will load the web page and time how long it takes to paint the first content element on the user’s screen.
Developer tools: Most web browsers include built-in developer tools for measuring FCP. Open the Developer Tools in Chrome, go to the “Performance” tab, and look for the “First Contentful Paint” metric in the timeline.
Third-party libraries: FCP can also be measured using third-party libraries such as the Navigation Timing API or the User Timing API. These libraries can be used to measure FCP and other performance metrics in your web application code.
When measuring FCP, keep in mind that the ideal FCP time varies depending on the complexity of the web page, as well as the user’s device and network speed. Web developers can use techniques such as optimizing images and other media, minifying and compressing code, reducing server response times, and using a content delivery network (CDN) to cache content closer to the user to reduce FCP time.
How To Improve First Contentful Paint (FCP) Time in WordPress
Improving WordPress First Contentful Paint (FCP) time entails optimizing various aspects of the website, including the content, images, code, and server response time. Here are some tips to help you improve your FCP time in WordPress:
- Reduce Server Response Time (TTFB)
- Eliminate Render-Blocking Resources
- Generate Critical Path CSS and Inline It
- Avoid Script-Based Elements Above-the-Fold
- Avoid Lazy Loading Above-the-Fold Images
- Inline essential images
- Optimize Your Site’s DOM Size
- Ensure Text Remains Visible During Webfont Load
- Use Resource Hints
- Avoid Multiple Page Redirects
Let’s take a closer look at each of these actions.
1. Reduce Server Response Time (TTFB)
The server response time, also known as the Time to First Byte (TTFB), is the amount of time it takes for a browser to receive the first byte of webpage content. FCP is dependent on more than just TTFB, but it is the first step.
TTFB + Content Load Time + Render Time = FCP
Because FCP is so reliant on TTFB, it is the most important factor to optimize in order to improve First Contentful Paint.
There are numerous methods for reducing TTFB in WordPress. The three simplest ways to reduce TTFB, as detailed in the article, are:
- Select a Reliable Hosting Company
You can read WP Rocket’s article on web hosting to learn about the factors to consider when selecting a great web hosting solution. Choose a host with servers in close proximity to your users. - Use a High-Quality CDN.
A good CDN can help speed up the delivery of static resources like images, videos, and scripts on your website. This reduces network latency between your server and your users significantly. - Allow Caching on Your Website
Caching reduces TTFB by shortening the server processing time. Most of the top managed WordPress hosting providers enable server-level caching, so contact them to see what they have to offer.
2. Eliminate Render-Blocking Resources
The browser renders a webpage by putting together numerous components like markup languages, style sheets, scripting languages, and HTML imports.
The HTML document itself has tags, but most browsers can easily read and interpret them. In contrast, parsing CSS and JS is not like that at all.
A typical web browser will attempt to download every element of the page, parse it, and then render it. HTML documents are typically much smaller in size compared to CSS stylesheets and JS scripts. Similarly, there tends to be a large amount of CSS and JS files.
Since the browser has already received the HTML content prior to the user’s request, it will only need to wait for the remaining resources to load before rendering the page. They are known as render-blocking resources because of this.
The FCP is drastically lowered by this action. Consequently, removing these render-blocking resources is necessary to enhance FCP. The following methods will help you accomplish this:
- Inline Critical Resources
First, identify the critical scripts and styles required to render the FCP of your website. Google has provided a simple guide on how to identify critical resources. Once you’ve identified the critical scripts, remove them from the render-blocking resource and insert them into your HTML page using the <script> and <style> tags. This ensures that the webpage has everything it needs to handle its core functionality when it loads. - Defer Non-Critical Resources
It is recommended that you add the defer attribute to non-critical script URLs. This instructs the browser to run the script file only after the HTML document has been parsed completely. Read this article to learn more on how to nefer non-critical resources. - Remove Unused Code
You may come across code that isn’t being used on the webpage while identifying critical resources. Getting rid of any unused code, such as unused JavaScript, will help you optimize your website even more. You can use plugins such as WP Rocket, WP-Optimize or Autoptimize if you are not comfortable working with code.
3. Generate Critical CSS and Inline It
This allows your page to quickly display essential elements such as your site header and text without having to load your entire CSS file.
Sitelocity offers a free critical CSS generator, and WordPress plugins such as WP Rocket or Swift Performance can also be used. To achieve a smooth page load, you may need to experiment with the CSS elements you include. Do not forget! Before making any changes to your website, make a backup.
4. Avoid Script-Based Elements Above-the-Fold
No matter how well you optimize JavaScript, it will always be slower than processing plain HTML. Anything that requires JS can be detrimental to FCP.
While critical scripts can be inlined, they must still be loaded and parsed. Every millisecond counts when it comes to improving FCP. That’s valuable load time that’s hurting your FCP score.
Too many script-based elements degrade FCP.
Many themes include fancy above-the-fold elements that make extensive use of scripts. The same is true for using Page Builders, which add a lot of extraneous styles and scripts. As a result, choose your website’s theme wisely. Using a well-coded, fast theme like Astra for example, can significantly reduce First Contentful Paint time.
As a general rule, avoid using the following elements above-the-fold on your website:
- Any type of heavy animation
- Plugins for sliders
- Plugins for social media or sharing
- Plugins for mega menus
- Embeds such as Google Ads
5. Avoid Lazy Loading Above-the-Fold Images
Lazy loading images is one of the simplest ways to speed up your website, especially if it contains a lot of images.
Lazy loading is technically a script that delays the loading of images and frames that are not yet visible in the browser’s viewport. As the user scrolls down, the images will load in order of appearance.
However; because lazy loading necessitates the use of JavaScript before the browser can render any images, it can cause your FCP to lag.
As a result, you must exclude images above the fold from lazy loading.
This feature is already present in the majority of popular lazy loading plugins. Look for a lazy loading plugin that allows you to exclude images not only by filenames, but also by other tags like class, id, attribute, or images from a specific domain.
6. Inline Essential Images
HTML and CSS allow you to embed images using the Base64 or SVG formats. They are known as Data URIs.
By inlining all images above the fold, the browser avoids making additional HTTP requests to download them. This can assist in enhancing the FCP. To improve FCP, you need to remove render-blocking resources above the fold such as logos, icons (search, social media, etc.), banner image and background.
7. Optimize Your Site’s DOM Size
The Document Object Model (DOM) represents all of the objects that comprise a webpage. It is represented graphically as a tree with branching nodes and objects.
The structured representation of the DOM makes it simple to modify its elements using a scripting language such as JavaScript.
Nodes are all HTML elements in a DOM tree and can branch out into multiple elements, which can all branch out further, and so on. The node depth describes how far they branch out. Tree depth refers to the node depth of the entire DOM tree. Child elements are all of a node’s immediate branching elements.
A large DOM tree can have a negative impact on your FCP for a variety of reasons, including:
Many nodes in an unoptimized DOM tree are not visible to the user during the initial stages of page load.
A large DOM size necessitates more processing time to compute and style all of the nodes, which can slow down rendering.
Google flags webpages with DOM trees that contain more than, 1500 nodes in total, more than 32 node depth and a parent node with more than 60 child nodes.
Reducing DOM Size
In general, you should only create DOM nodes when they are required and reduce nodes that are no longer required. This tip, however, does not apply to most WordPress sites because the DOM is usually handled by themes, plugins, page builders, and the WordPress core itself.
Here are some suggestions to help you reduce DOM size:
- Divide long pages into smaller ones.
- Lazy load as many HTML elements as possible, including images.
- Comments, posts, products, and so on should be paginated.
- Reduce the number of posts that appear on your homepage and archive pages.
- CSS should not be used to hide unwanted content. Remove it entirely instead.
- Avoid using bloated page builders that add unnecessary tags.
- Select well-optimized themes.
- Don’t use plugins that add an excessive number of tags.
8. Ensure Text Remains Visible During Webfont Load
Fonts are typically large files that take a long time to load. Font URLs that lead to a flash of invisible text are flagged by Lighthouse.
Google flags this behavior for a reason. Some browsers will not render text until all fonts have been loaded. This results in a phenomenon known as Flash of Invisible Text (FOIT).
You can work around this by forcing the browser to display a system font while the custom fonts load. To avoid FOIT in almost all modern browsers, simply add font-display: swap in your @font-facestyle. If you’re importing fonts from a CDN (for example, Google Fonts), you can accomplish the same thing by the &display=swap parameter at the end of the URL.
9. Use Resource Hints
When a user visits a website, the browser fetches the HTML document from the server, parses it, makes separate requests for any additional related resources, and finally renders the web page based on the information it has gathered.
As a developer, you’re well aware of which assets are crucial to your website’s operation. If you know which resources are crucial, you can arrange for them to load in advance, reducing page load times. You can do this with the help of browser Resource Hints.
Some of the page’s resource clues refer to items on the current page, while others point to items on future pages. The <link> tag’s rel attribute is used for all resource hints.
If you’re loading an asset from an external website, the dns-prefetch parameter instructs the browser to resolve the URL’s DNS as soon as possible.
Preconnect is similar to DNS prefetching in that it does more than just resolve the DNS. It will also initiate the TCP handshake and TLS negotiation (if any).
If you are certain that a resource will be used in the future, you can instruct the browser to prefetch it and store it immediately. In contrast to DNS prefetching, you are instructing the browser to begin loading the resource immediately.
In contrast to prefetching, which acts more as a suggestion to the browser, the preload resource hint instructs the browser to load the assets regardless of what it thinks. The preloading directive cannot be ignored by the browser.
The faster your pages load, the earlier the browser begins to request the declared preload links.
When a user visits your website for the first time, resource hints are useless. However, each subsequent page they visit will load much faster. Because Google ranks websites based on real-world usage data, resource hints will help you improve your site’s FCP.
10. Avoid Multiple Page Redirects
When you visit a redirected URL, the server will respond with an HTTP 301 redirect status code response.
A redirect response necessitates the browser to make another HTTP request to the new location. This usually causes the webpage to load hundreds of milliseconds later.
If your page has multiple redirects, it can significantly slow down your FCP.
Lighthouse will detect pages with two or more redirects. Therefore; you should point the flagged resources directly to the final destination to avoid multiple redirects. Furthermore, if a resource is part of your page’s Critical Rendering Path, remove any redirects that originate from it.
Wrapping Up
Improving First Contentful Paint and reducing its time is no longer an option; it is a requirement. A faster FCP, in addition to the three Core Web Vitals metrics, leads to a better user experience and raises your PageSpeed score.
You learned how to improve First Contentful Paint in WordPress using various techniques in this post. It can be difficult to understand and apply all of the technical jargon at times. Fortunately, you can always contact our engineers at Pixagon to get a free consultation on how to improve your current site’s GCWV metrics. You’ll notice a significant improvement in speed and PageSpeed score which will .
