Struggling with how to improve First Contentful Paint (FCP) on your website? 😓
If you want to create a great experience for your visitors, you want your First Contentful Paint times (and other associated performance metrics) to be as low as possible.
Thankfully, there are some straightforward solutions for how to improve First Contentful Paint – even if you’re not a developer!
In this post, we’ll take a closer look at FCP and show you how to measure it. Then we’ll explore how to improve First Contentful Paint via six proven methods. Let’s get started!
An introduction to First Contentful Paint
First Contentful Paint is a useful metric that monitors your page loading speed. There are a variety of similar metrics that measure a site’s performance. FCP in particular focuses on the time it takes for the first piece of content to appear on a page. Once the FCP is generated, the user knows that the rest is on its way.
It’s similar to the Largest Contentful Paint (LCP) metric in Google’s Core Web Vitals. But while LCP measures how long it takes a site’s “main” content to load, FCP just focuses on the first piece of content, which may or may not be the main content.
Your FCP score is important because it’s an indicator of your overall website speed. Not only is performance vital to your UX, but it’s also a factor that search engines like Google consider when deciding how to rank your pages. Poor performance can lead to lower search rankings. This means that if you don’t know how to improve First Contentful Paint, it can impact your website’s visibility.
How to measure First Contentful Paint
While FCP gives you a window into user perception, it’s still a metric that can be measured objectively through lab tests and field data. For example, PageSpeed Insights is a tool that enables you to see what your real users are experiencing (as long as your site has enough traffic to be included in the Chrome User Experience report).
Even if your site doesn’t have enough data to see real user experiences, PageSpeed Insights can still help you collect FCP data in its simulated lab tests.
To use it, just enter your URL and get an immediate result:
You can also switch between mobile and desktop views to see how responsive your website is on various devices.
Another useful tool for measuring FCP is WebPageTest, which takes a little longer but can provide a more in-depth analysis.
What is a good FCP time?
According to Chrome, your site has a good FCP score if it’s below 1.8 seconds. When your FCP score exceeds three seconds, that’s a cause for concern.
However, even if your site currently has a strong FCP score, there’s always room for improvement.
How to improve First Contentful Paint in WordPress (6 techniques)
Now that you know a bit more about FCP, let’s take a look at how to improve First Contentful Paint on your site via six effective methods:
- Use a content delivery network (CDN)
- Optimize and compress images
- Eliminate render-blocking resources
- Reduce your DOM size
- Improve server response time
- Avoid too many page redirects
1. Use a content delivery network (CDN)
A content delivery network (CDN) is an easy way to boost overall loading times. Without one, when a user visits your website, they’ll need to wait while the necessary data is transferred between your site’s primary server and their location. This can result in longer wait times for users who are geographically far away from your hosting provider’s servers.
On the other hand, a CDN offers a network of servers that are distributed all across the globe. Therefore, content can be delivered from whichever server is physically closest to each visitor.
One popular example of a CDN is Cloudflare, which has over 275 data centers around the world:
With Cloudflare, you’re able to take advantage of other optimization techniques, such as lossless image optimization.
Typically, CDNs also use caching and other strategies to improve FCP. For instance, your CDN provider might offer minification and file compression to lighten up your website. This helps you reduce latency, improve UX, and alleviate the load on your primary server.
2. Optimize and compress images
Images are rarely the first element to load on your website. However, if you run a media-heavy site, like a portfolio or a photography showcase, it’s important to optimize and compress images to improve your FCP score (and overall performance).
One way to optimize your images is to switch to a different file format. For instance, if you currently rely on JPG/JPEGs or PNGs, you can move to a format with better compression, such as SVG or WebP.
You should also resize images to the smallest dimensions that fit your needs and compress them to further reduce their size.
While you can do all of this manually using online tools, a much simpler way for WordPress users is to use an image optimization plugin.
For example, the free Optimole plugin can automatically resize, compress, and convert your images. Plus, it can also serve them from its built-in CDN, which kills two birds with one stone.
This tool also lets you deliver high-quality images at quick speeds, no matter what device visitors use to access your site. You can use features like lazy loading and image resizing to further perfect your images.
3. Eliminate render-blocking resources
If you’re wondering how to improve First Contentful Paint, there are a few ways to eliminate render-blocking resources. If you’re comfortable with development and you find code that isn’t being used on your page, you can go ahead and delete it. You can also identify your critical resources and “in-line” them inside your page using the <script> and <style> tags.
4. Reduce your DOM size
When a web page is loaded, your browser creates a Document Object Model (DOM). This is a representation of all the objects that make up your page.
If there are too many DOM nodes (HTML tags) on your page, or if they’re nested too deep, it takes longer for the browser to process your page. This can result in slower loading speeds and a poor FCP score.
Therefore, you can improve your FCP by reducing your DOM size. You can do this manually by deleting unnecessary <div> tags, splitting long pages into smaller ones, and limiting the number of posts in your archive or on your home page.
On top of that, you might lazy load your HTML elements using an optimization plugin like Optimole. Lazy loading is a technique that delays the loading of content until it’s needed. Rather than processing everything at once, the browser can focus on delivering those elements that are immediately visible.
Choosing an optimized theme can also help reduce your DOM size, since many themes (and page builders) use too many <div> tags. If you’re in the market for a new theme, we’d suggest checking out Neve, which is fast, lightweight, and only uses quality code.
5. Improve server response time
Server response time is also referred to as time to first byte (TTFB). This metric measures the time it takes between when a user makes a request and when the server sends the first byte of information.
There are many ways to improve your server response time (and as a result, your FCP score).
First, it’s important to choose a quality hosting provider. It’s best to look for a host that caters specifically to WordPress websites, and pay attention to the location of its servers. Ideally, your host should have servers that are close to your primary audience.
If you want to improve your host’s performance, you can choose a provider from our data-backed collection of the fastest WordPress hosting.
However, if your hosting provider doesn’t offer convenient servers, you can always opt for a CDN, which we talked about earlier when discussing how to improve First Contentful Paint.
Caching is a great way to reduce your response times. Some hosts offer built-in caching. Alternatively, you might install a caching plugin such as WP Rocket or WP Fastest Cache.
6. Avoid too many page redirects
When you visit a page that immediately redirects you to another site, your browser has to make another HTTP request to the new location. This can result in a poor FCP score, since it delays the loading of your web page.
The more redirects you have on your page, the worse your FCP score will likely be. Plus, too many page redirects can severely disrupt your UX.
If the issue is happening sitewide, you might want to look into how you manage redirects from www to non-www (or vice versa) and/or from HTTP to HTTPS.
For example, if you redirect from
http://yoursite.com and then again to
https://yoursite.com, it would be more efficient to just do that in one step.
If redirects are only affecting your FCP on a single page, you might want to look into any redirects that you’ve created for that page.
You can manage redirects manually, although that can be time-consuming. It’s usually better to opt for a WordPress plugin like Redirection:
Once installed, you can use this tool to manage redirects easily and quickly.
Improve your site’s FCP time today 🏁
On complex or content-heavy websites, it can be difficult to maintain fast loading times. Fortunately, by targeting key metrics such as First Contentful Paint (FCP), you can evaluate and improve the time it takes for visitors to see your content.
To recap, here’s how to improve First Contentful Paint in WordPress:
- Use a content delivery network (CDN).
- Optimize and compress images.
- Eliminate render-blocking resources.
- Reduce your Document Object Model (DOM) size.
- Improve server response time.
- Avoid too many page redirects.
📢 For some other ways to speed up your site, check out 👉 our collection of different ways to speed up WordPress.
Do you have any questions about improving FCP in WordPress? Let us know in the comments section below!
Don’t forget to join our crash course on speeding up your WordPress site. Learn more below: