How to Improve First Contentful Paint (FCP) in WordPress (2024)

A First Contentful Paint (FCP) score gives you an indication of how much time it takes your site to render. A poor score means your visitors are likely having to wait longer than they should.

Fortunately, there are steps you can take to improve this. By optimizing your website’s resources, you can ensure that your content loads quickly and keeps users engaged.

In this guide, we’ll explain what FCP is, why it’s important, and how to test your website for this metric. Then, we’ll show you how to improve a poor FCP score in WordPress.

What is First Contentful Paint (FCP)?

First Contentful Paint (FCP) is a measurement of the amount of time it takes a browser to load the first text or image on the page. Put simply, this is the delay between the start of the loading process to when the page begins to display content.

FCP is one of the six metrics tracked in the performance section of the Lighthouse report. These metrics evaluate the user experience of a website, and include:

• Largest Contentful Paint (LCP): A measurement of loading performance.
• First Input Delay (FID): A measurement of interactivity.
• Cumulative Layout Shift (CLS): A measurement of visual stability.

You should work towards improving all of these metrics in order to give users the best possible experience. And while it’s not a primary core web vital, First Contentful Paint is a supplemental metric that can help you identify and improve upon loading issues.

Google wants to send searchers to sites that deliver an excellent experience, so great scores are not only a goal for a quality user experience but may result in an improvement in search rankings.

How FCP impacts user experience

When a visitor first clicks on a website, they expect it to load quickly. If your website is too slow, they might leave the page and find the information they’re looking for from a competitor.

First Contentful Paint marks the time it takes for a visitor to see the first element on a page.

This is important because, even if the page takes a while to load everything or become fully interactive, as long as a visitor can see some sort of progress, they may be more likely to give a few extra seconds to finish. If, instead, all they see is a blank screen, they’ll probably just leave completely.

Potential causes of a poor FCP score

According to Google, the ideal FCP score should be under 1.8 seconds. If you have a poor score, this could be the result of a few factors:

• Slow server response time: If your website has a high Time to First Byte (TTFB) score, this can impact First Contentful Paint.
• Render-blocking JavaScript and CSS: An inefficient script queue can halt the rendering process until heavy scripts are processed.
• Script-dependent elements above the fold: Since JavaScript loads from top to bottom, it’s important to avoid JavaScript-heavy elements above the fold.
• Lazy loading images above the fold: Although lazy loading images can improve page speed, this process uses JavaScript, which can increase FCP.
• Inefficient font loading: Fonts can have bulky files that delay the text from rendering.
• An excessive Document Object Model (DOM) size: Having too many nodes in your DOM can cause inefficient loading.

As you can see, there are several things that can affect your website’s First Contentful Paint. Most performance analysis tools will help you identify a specific cause. This can make it easier to target the source of the issue and implement the right solution.

How to measure your website’s First Contentful Paint

Before you start implementing measures that will affect your FCP score, it’s important to evaluate your site speed and performance. Let’s look at a few different tools that you can use.

PageSpeed Insights

First Contentful Paint can be measured in both the lab and the field. With a field tool, you can track how your page performs for real users. But lab tools just simulate results.

PageSpeed Insights is a tool that can evaluate your website using both lab and field results. You can simply enter your site’s URL and instantly analyze its Core Web Vitals metrics.

At the top of the page, you’ll see your Core Web Vitals Assessment. This will indicate whether you passed or failed tests like LCP, FID, CLS, and more.

You’ll find your First Contentful Paint score under Other Notable Metrics. If it’s 1.8 seconds or less, you’ll achieve a ‘Good’ rating. Any score over 1.8 seconds will require some improvements.

These results will automatically be set to Mobile. You can click on Desktop to view your FCP score for those devices.

If you see a ‘Poor’ or ‘Needs Improvement’ rating for the FCP section, you’ll need to implement some optimization methods.

Lighthouse

Lighthouse is a lab tool that can audit any web page for accessibility, Core Web Vitals, and more. This software will compare your FCP time to other websites.

To use Lighthouse, right-click on the page you want to analyze in the Google Chrome browser and select Inspect.

In the Chrome DevTools window, find the double arrow icon. Then, select Lighthouse from the resulting dropdown menu.

Next, you can select the elements that you want to include in your Lighthouse report. When you’re finished, click on Analyze page load.

After Lighthouse processes your website, you’ll see your overall performance score. Below this, you’ll find your First Contentful Paint.

If you see a green circle next to this section, you have a good FCP score. If you get a yellow square or red triangle, your content takes too long to render.

GTmetrix

Another free tool you can use to measure FCP is GTmetrix. Using Lighthouse data and audits, GTmetrix provides a detailed analysis of your website’s performance.

First, paste your URL into the search bar and click on Test your site.

Then, you can view your First Contentful Paint score in the Speed Visualization graph.

If your FCP is too slow, it will be under Top Issues. In this FCP audit, you can see how specific resources are impacting your score.

By identifying the cause of the problem, you can implement the right solution. Plus, GTmetrix will provide suggestions to help you improve your FCP score.

How to reduce First Contentful Paint time in WordPress

Don’t worry if your site has a poor FCP score — there are several things you can do to boost your performance. Let’s look at some effective ways to improve this metric.

1. Install a core web vitals optimization plugin

There are many different WordPress plugins that you could use to improve your First Contentful Paint score. Although you can install different tools to minify site files or get rid of render-blocking resources, it’s best to find an all-in-one Core Web Vitals plugin.

Jetpack Boost is a free tool that can optimize your site’s performance in many ways. Developed by Automattic, the company behind WordPress.com, this plugin can help you improve your WordPress Core Web Vitals scores with just a few clicks.

First, install and activate Jetpack Boost. Then, you’ll receive an automatic evaluation of your page speed on desktop and mobile devices.

It will also give you a few performance optimization options. By enabling these settings, you can easily optimize CSS, defer non-essential JavaScript, and implement lazy image loading.

You can then run another speed test to see if your performance score has improved. As you can see, using Jetpack can be one of the fastest and easiest ways to improve First Contentful Paint in WordPress.

2. Reduce server response time

Server response time, or Time to First Byte (TTFB), is the time it takes the server to send the first byte of information back to a browser. This measures the delay between the start of a request and the beginning of the response.

First Contentful Paint depends on TTFB. Here’s an example of how FCP and TTFB work together in the loading process:

FCP = TTFB + Render Time

This means that reducing server response time can be an effective way to improve First Contentful Paint in WordPress. One of the easiest ways to do this is by finding a quality web hosting service.

Often, it’s best to choose a host that’s configured specifically for WordPress. A WordPress hosting service can optimize your dynamic content and improve your server response time. This may, in turn, boost your FCP score.

It also helps to have servers close to your audience. Therefore, when you’re evaluating a web host, you’ll want to check its server locations. If your audience is spread out geographically, you may also want to invest in a WordPress CDN so visitors can access your site from a server closer to them.

Once you choose your new hosting provider, you can easily migrate your WordPress site. Then, you can enjoy faster loading speeds, reduced server response time, and improved FCP.

3. Eliminate render-blocking resources

When someone tries to visit your website, all the elements on the page have to render. During this process, your site’s code downloads from top to bottom. Before your content appears, the browser needs to read this entire queue of scripts.

Unfortunately, there may be render-blocking resources that prevent the page from loading. In this case, an unnecessary HTML, CSS, or JavaScript file has to be rendered, which stops the browser from loading important content.

These files are usually large and don’t contain vital information. When render-blocking resources are processed at the top of the queue, your images, text, or other essential visual elements can take longer to appear. As you can imagine, this can negatively affect your FCP, as well as LCP and Total Blocking Time (TBT).

Using PageSpeed Insights, you can easily check to see if this is a problem for your site. In the Opportunities section, look for an Eliminate render-blocking resources alert.

To fix this problem, you can use the Jetpack Boost plugin to optimize CSS, defer non-essential JavaScript, and defer off-screen images. This will improve your file structure for faster loading.

If you want to edit your scripts manually, you can install the Async JavaScript plugin.

This tool enables you to add async or defer attributes to specific files, but the process can be a little complicated. With Jetpack Boost, you can easily optimize your site files without working with code.

4. Optimize your CSS structure

When you write code, you may include spaces so that people can easily understand it. The problem is that these additional characters can take up more disk space. Plus, browsers don’t need white spaces to process coding.

CSS optimization involves taking out extra spaces and characters from your CSS files. By eliminating unnecessary information, you can decrease a page’s size. This can make it easier for a browser to read it, and can therefore improve your FCP score.

Jetpack Boost lets you do this in one simple step. By enabling the Optimize CSS Loading setting, the plugin will minify your files to only load critical CSS.

With Jetpack Boost, you can also generate the Critical Path CSS for the page with the click of a button. This is the minimum amount of CSS coding needed to display above-the-fold content.

Creating Critical Path CSS manually can be a daunting task, but you can use a tool like Pegasaas to automate the process. By simply entering your site’s URL, you can access this code.

Then, you can add this CSS inside the <head> section of your HTML. When done correctly, this will immediately render the above-the-fold content without asynchronous stylesheets.

5. Avoid JavaScript-dependent elements above the fold

Even after you optimize your JavaScript, it can still take more time to load than HTML. Since FCP measures the amount of time it takes the first element to render on a page, it’s important to make sure that these aren’t JavaScript-heavy.

When structuring your website, you’ll want to avoid making your layout dependent on JavaScript above the fold. To improve First Contentful Paint, many people choose to delay or eliminate JavaScript. If your first elements depend on heavy scripts, your page won’t load very quickly.

Here are some JavaScript elements that should be moved below the fold:

• Heavy animations
• Sliders
• Social media widgets
• Google Ads

Since JavaScript code is executed from top to bottom, it can be beneficial to move these elements further down the page. If they are below the fold, visitors can see your content much faster.

6. Avoid lazy loading images above the fold

One of the best ways to speed up your website is to implement lazy loading for images. Essentially, this involves processing images once they appear on the screen. If someone is looking at the top of the page, any images below it won’t have to load yet.

Although lazy loading images can have many benefits, they may actually harm First Contentful Paint. Lazy loading implements a script that defers images from loading. Since it uses JavaScript, it can delay your FCP score.

When using a lazy loading plugin like Jetpack Boost, you can specify which images to exclude from lazy loading. For images above the fold, you can add the CSS class skip-lazy.

You can also apply the jetpack_lazy_images_blocked_classes filter. This will inform Jetpack to avoid applying lazy loading to any image with a certain class.

Here’s what that code looks like in practice:

function mysite_customize_lazy_images( $blocked_classes ) {$blocked_classes[] = 'my-header-image-classname';return $blocked_classes;}add_filter( 'jetpack_lazy_images_blocked_classes', 'mysite_customize_lazy_images' );

It can also be a good idea to disable lazy loading for your site logo. By doing this, your logo will be rendered faster, encouraging users to stay on the page.

7. Optimize and compress images

Usually, images aren’t the first elements to render on a page. For this reason, you might not have to optimize and compress your images to improve FCP. Still, you’ll want to consider performing this step to reduce your loading time and put less strain on your server resources.

First, you can switch your file format to SVG or WebP. Your site is likely using JPG, PNG, or GIF image files. By using a format with better compression, you can possibly decrease First Contentful Paint.

You can also use an image compression plugin. With a tool like TinyPNG, you can automatically optimize JPEG, PNG, and WebP images as you upload them to WordPress.

If certain images don’t need high-quality resolution, you can inline them. This can be useful for above-the-fold images like logos, icons, and banner images. When you inline these elements, the browser won’t use as many requests to download them.

To inline an image, you have to convert it into a Base64 or SVG format. The Base64 Image tool can automatically change JPG, PNG, GIF, WebP, SVG, and BMP files into a Base64 file.

Then, you can add your Base64 images to your website. Here’s the HTML code you can use:

<img src="data:image/jpeg;base64,/uj/…[content]..." width="100" height="50" alt="this is a base64 image">

For CSS, here’s how you can insert a Base64 file:

.custom-class {background: url('data:image/jpeg;base64,/9j/…[content]...');}

If you’re using an SVG file, you can inline the image in HTML:

<body><!-- Insert SVG code here, and the image will show up! --><svg xmlns="http://www.w3.org/2000/svg"><circle cx='50' cy='25' r='20'/></svg></body>

Keep in mind that inlining images can increase their size, as well as the overall page size. Plus, these images can’t be delivered by your Content Delivery Network (CDN).

8. Leverage server-level caching

Once someone clicks on your website, their browser requests data from your server. Then, the server processes the requests and sends back the relevant resources.

With server-level caching, your server temporarily stores these files for reuse. After the same user sends the request a second time, your server will send the saved copy of the web page.

By using a cache, your server won’t have to generate the content from scratch every time. This can effectively reduce the strain on your server and enable users to view content sooner.

To start using a server-level cache, you can install a caching plugin like WP Super Cache. Then, your server will deliver generated static HTML files instead of processing PHP scripts.

Plus, you can easily set up your cache in the WP Super Cache settings. All you have to do is select Caching On.

This can be one of the simplest ways to decrease your server processing time. With caching, you can ensure a fast and pleasant experience for repeat visitors.

9. Use a Content Delivery Network (CDN)

Another way to improve your FCP score is to use a Content Delivery Network (CDN). A CDN is a network of servers that can deliver online content across large distances. When someone visits your site, the CDN delivers your content from the server that’s closest to their location.

By implementing a CDN, you can decrease the distance between your server and visitors. As a result, these visitors can experience faster loading times.

Fortunately, Jetpack comes with a free built-in WordPress CDN. After activation, you can go to Jetpack → Settings → Performance & speed and enable the site accelerator.

This can effectively speed up the delivery of your images and static files. No matter their location, visitors will be able to access your content without a significant delay.

10. Reduce your DOM size

The Document Object Model (DOM) is an interface that represents the structure and content of a web document. If you have overly-complicated pages on your website, it can increase your DOM size. This can harm your performance, including your First Contentful Paint.

Lighthouse will let you know if you have an excessive DOM size. In general, you’ll only be warned if the body element has more than 800 nodes. If there are more than 1,400 nodes, you’ll receive an error message.

If you’re editing your DOM yourself, you’ll want to make sure that you only create necessary nodes and delete non-essential ones. If you have a WordPress site, these tasks will be completed by themes, plugins, core software, and page builders.

Here are some alternative ways to reduce your DOM size in WordPress:

• Separate long pages into smaller ones
• Reduce the number of posts in your archive and home page
• Avoids using unnecessary <div> tags
• Use fewer CSS selectors

It can also be beneficial to choose an optimized WordPress theme. Using a fast and lightweight option like Twenty Twenty-Two can help you decrease your DOM size.

11. Ensure text remains visible during webfont load

Often, fonts have large files that take a long time to load. In some cases, a browser will delay rendering the text until the font is fully loaded. This is known as a Flash of Invisible Text (FOIT).

To prevent this from happening, you can temporarily show a system font. This involves including a font-display: swap in the @font-face style.

Here’s what that can look like:

@font-face {font-family: 'Pacifico';font-style: normal;font-weight: 400;src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');font-display: swap;}

Alternatively, you may want to import a font from Google Fonts. In this case, you can apply the &display=swap parameter to your Google Fonts link:

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">

Instead of showing a flash of invisible text, your website will reveal a Flash of Unstyled Text (FOUT). This can enable your website to display content immediately, improving First Contentful Paint.

Frequently asked questions (FAQs) about First Contentful Paint

Let’s look at some common questions about First Contentful Paint.

How can I measure my WordPress website’s FCP score?

You can use a few different tools to measure your First Contentful Paint. With PageSpeed Insights, Lighthouse, or GTmetrix, you’ll be able to identify your FCP score and troubleshoot specific issues.

What is a good FCP score?

A good FCP score should be 1.8 seconds or less. A metric between 1.8 and 3 seconds will likely need improvement. Anything higher than 3 seconds will require immediate attention.

How can I easily optimize my FCP score?

One of the simplest ways to improve your FCP score is to use the Jetpack Boost plugin. This free tool can optimize your Core Web Vitals all in one place.

First, install and activate Jetpack Boost. Then, click on Jetpack to start upgrading your website’s performance.

Here, you can optimize CSS loading, defer non-essential JavaScript, and use lazy image loading. By simply enabling each feature, you can automatically improve your First Contentful Paint in WordPress.

Display your online content right away

By improving your First Contentful Paint, you can make sure that your content loads more quickly for visitors. Without this measure, you could experience a much higher bounce rate.

To measure your FCP, you can analyze your website with PageSpeed Insights. If you receive a poor score, you can use Jetpack Boost to optimize your scripts and image files. Additionally, you can use the plugin to enable lazy loading and use a CDN.

Once you implement these measures, your visitors can start experiencing faster loading times. This means a lower bounce rate and more engaged audience!