FCP stands for First Contentful Paint. Without getting too deep into tech stuff. it’s when the first element or piece of content on your page shows to the visitor.
We want this timing ideally at or under 1 second. And on almost all sites, the logo is the first element drawn on the page. While this isn’t a “core web vital,” Google wants to see this under 1.8 seconds.
Most content around the web on this topic is written by writers who’ve never optimized a site and are just copying what everyone else is saying. We’ll share the exact process we use to get this metric under 1 second in this post.
What Is FCP, or First Contentful Paint Time?
First contentful paint (FCP) time is needed for the first part of a webpage to appear in the browser. In other words, it’s a time interval between the visitor opening a page and actually seeing something such as text, image, video, etc., actually appearing on the screen.
Why Is FCP Time Important?
While FCP is not a core web vital (it probably should be). FCP timing has a huge impact on the first impression. Your site makes because it answers the visitor’s initial question:” Is the page loading or not?”. This makes it an important speed metric.
What Should My FCP Timing Be?
Your first contentful paint time depends on the page and the geographical locations of both the hosting and the visitor. Ideally, this timing should be under 1 second. Google’s metrics will say that anything around 1.5 seconds or below is good FCP time. But if you follow this guide, you should be able to reduce it for almost any site significantly.
If you have good hosting, by using the technique from this article. You should cut your FCP time down to the 0.6 – 0.8 seconds range in the country your site is hosted in, and probably around 1 second internationally.
Keep in mind that first contentful paint time will vary from location to location. Meaning that the further away the visitor is from the host location, the slower the page is going to load. Normally, it’s expected for the page load to be between 0.5 – 1 second slower for a visitor from a different continent. This is because the international visitor’s load has to travel a long distance through cables under the ocean.
Step-by-Step Guide – How to Improve First Contentful Paint Time
Below, you’ll find the process we use to squeeze the FCP time under that 1-second mark.
Test FCP Before Doing Anything
Before doing anything, make sure you test FCP time to compare the results from before and after the work.
Google PageSpeed Insights is also useful, but keep in mind that it only tests from the US. So in case your site is hosted elsewhere, it will not give you accurate numbers of FCP time from other locations.
Another important tip here is always to run several tests because the internet functions like a highway. The speed and the amount of data sent to you heavily depend on how busy the internet connection is. You will probably notice that if you run a test at 9 pm. The speed might be a little faster than during the daytime when there’s a lot more load on the internet. Different times of day and different locations will cause the timing to move up and down. So before making, make sure to run a few tests and find an average result.
Step 1 – Reduce TTFB First
To fix FCP time, you need to improve the time to the first byte (TTFB). TTFB is also known as “server response time” in tools like Google PageSpeed Insights. That metric represents the time the server takes to deliver the first byte to the browser after the user requests.
FCP time heavily depends on the TTFB timing because TTFB comes first. As a target, TTFB or server response time should be sitting around 0.1 – 0.2 seconds in the country where the site is hosted and around 0.2 – 0.5 seconds internationally.
If your TTFB is above those ranges, you should do some work on reducing it. In the following paragraphs, we will list the most important factors that influence TTFB. Keep in mind that this article is mainly focused on improving WordPress performance. But the same principles apply to any other CMSs, including Shopify.
Use a Good DNS Host Like Cloudflare
The first step has a good DNS host, and we use Cloudflare because they’re typically the fastest DNS host in the world as per https://dnsperf.com.
DNS hosting is the service responsible for translating web addresses to IP addresses. This means that each time you type an address into your browser’s URL bar, the browser first does a DNS lookup that converts a web address into an IP address and, by doing so, locates the server that hosts the website.
Use Page Caching and Edge Caching
The next essential feature that your site should have is called page caching. Website pages are HTML files, And page caching prebuilds these HTML files in advance, so they’re ready to go when the visitor hits the website.
This reduces TTFB dramatically as the pages are prebuilt. Without page caching on every visit, the web hosting has to do the database lookups and PHP processing from scratch, typically taking 1-3 seconds and even longer for some pages.
The plugin we usually recommend for page caching services on WordPress sites is WP Rocket.
If you are targeting an international audience, Cloudflare’s APO service is a no-brainer too.
It provides another level of caching called edge caching. This feature stores entire HTML pages at Cloudflare’s edge nodes on their servers worldwide. So when a visitor requests to open a page, it gets served to him from geographically the nearest server. This is similar to page caching. Except that the pre-built HTML file sits on Cloudflare’s infrastructure and is closer to the visitor.
With site speed, geography and location matter a lot. So the shorter the distance that data has to travel is, the better the TTFB and FCP timings will be.
Because edge caching does a lot of the work. It also reduces a lot of load off the web hosting, which can also help improve your site’s performance. Cloudflare has its servers in more than 160 locations worldwide, and their APO service costs only $5 a month.
Step 2 – Disable Lazy Loading On the Logo
In most cases, the logo is the first element that appears on the page, so here are a few simple techniques that will speed up its loading.
Step 3 – Other Speed Optimizations That Help FCP
-
Compress the Logo Image
Always make sure to run the logo through some sort of compression, so its file size is as small as possible, and adjust the dimensions, so the size fits its placement on the screen.
Usually, the size of a logo is around 5-10 KB, but it can be a lot bigger in some cases. We’ve even seen logos as wide as 500-1000 pixels, which makes the file size 100-300kb (0.1-0.3 MB), which is enormous if you consider the placement on the page. Most logos are typically around 100 or 200 pixels wide.
-
Fix 404 Errors
Making sure there are no 404 errors on the page can also help. When a browser encounters a 404 error, such as a file that doesn’t load or doesn’t exist, it will cause a delay in rendering the page. SiteSpeedBot will help you detect any 404 errors happening under the surface. Still, generally, it’s worth running an SEO audit tool on the entire website once a month and resolving all 404 errors, as they’ll often occur naturally over time.
Want it done for you?
We’ve optimized over 4000 WordPress sites and can help make yours load lightning fast too! If you’re looking for someone to do this for you, complete the form on our homepage and one of the team will review your site and tell you what’s doable in terms of site speed.
