FCP stands for First Contentful Paint. Without getting too deep into tech stuff, it’s the time at which 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 content writers who’ve never optimized a site and are just copying what everyone else is saying. In this post we’ll share our exact process we use that to get this metric under 1 second.
This is a somewhat technical topic so we’ve included an audio version below and also a short video walking through Autoptimize settings that will help improve this timing.
Table of Contents
What Is FCP or First Contentful Paint Time?
First contentful paint (FCP) time is a period 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 itself 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 significantly reduce it for almost any site.
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 is going to 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. The reason for this is that 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 so you can compare the results from before and after the work is done. There are a lot of different tools that you can use to test FCP time, but we suggest you use our tool SiteSpeedBot.
SiteSpeedBot allows testing from a bunch of different locations, so it will bring you a more exact indication of the issues. 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 to always run several tests because the internet kind of 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 are going to cause the timing to move up and down, so before making changes make sure to run a few tests and find an average result.
Step 1 – Reduce TTFB First
To fix FCP time, you will need to improve the time to first byte (TTFB). TTFB, 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 makes a request.
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.
In case your TTFB is above those ranges, you should do some work on reducing it. In the following paragraphs, we are going to 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 is having 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 important 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 which typically takes 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 around the world, so when a visitor requests to open a page, it gets served to him from the geographically nearest server. This is similar to page caching except that pre-built HTML file is sitting on Cloudflare’s infrastructure and closer to the visitor.
With site speed, geography and location matters 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.
To learn more about improving TTFB, read our How To Reduce Server Response Times (aka TTFB) article here which goes into more detail.
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.
What Is Lazy Loading
Lazy loading is a speed optimization technique that delays the loading of some images until the user scrolls down to the point of the page where those images appear. The problem with lazy loading is that when it’s turned on, it lazy loads all the images. This means that lazy loading tags will be assigned to all of the images on the page, including those at the top that are immediately visible to the user.
That creates an issue where those images “above the fold” have to waiting for the lazy load JavaScript library to execute before the images at the top of the page load. Essentially the lazyload javascript library becomes “render blocking”.
Disabling lazy loading on the logo file name or file names is an easy way to fix this problem. Keep in mind that sometimes different logos display on different devices, so you might have to disable lazy loading on multiple file names. There are different ways to exclude files from lazy loading, depending on the lazy loading plugin or method you use.
How to Disable Lazy Logo Loading
In case you are using a plugin such as WP Rocket or Autoptimize, the process is fairly easy: open the image or copy the URL, put it in the tool, and select the setting that will exclude the lazy loading of this particular image, in this case the logo. This action alone can reduce your first contentful paint time to under 1 second.
There’s another step that you can take here which will speed up your FCP even more. It’s something called a preload directive or preload browser hint.
The preload browser hint is a snippet of HTML code that go in the header section of the site to tell the browser to overwrite the default loading order of files on the page.
By implementing a preload tag that contains the logo you are instructing the browser to load the logo earlier than it normally would therefore improving the FCP even further.
The video below walks through this process in a little more detail. Although not shown in the video, right now we use Autoptimize to drive lazy loading and add the image filename into the “Exclude images” section on the images tab and also exclude the first 4 images from lazy loading which also helps LCP timings.
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 in some cases it can be a lot bigger. We’ve even seen logos as wide as 500-1000 pixels which then makes the filesize 100-300kb (0.1-0.3mb) which is enormous if you consider the placement on the page. Most logos are usually 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 bonnet but 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.
Optimize JavaScript – Defer, Delay & Move It Further Down The Page
DEFER:
Optimizing the JavaScript can also help you reduce first contentful paint timing. First, you want to make sure that you are deferring as much JavaScript as possible. Deferring JavaScript is a JS-specific optimization and using a plugin such as WP Rocket can help here.
DELAY/PAUSE JS:
Tools like WP Rocket can help you delay or pause JavaScript files, so they don’t load until the user interacts with the page which can dramatically reduce the impact of javascript on site speed. This optimization is particularly useful for live chat plugins and widgets that don’t need to load initially on the page. It usually doesn’t impact FCP timing, but it’s worth doing anyway.
MOVE IT FURTHER DOWN THE PAGE:
JavaScript code gets executed top to bottom so code higher up on the page gets loaded and executed first.
Optimize Your CSS
Optimizing the CSS can also help you reduce the FCP time, although only slightly. Typically this has more impact if your site is using an older theme with less optimized CSS. CSS optimization or settings in plugins such as WP Rocket or Autoptimize will improve things to a certain degree.
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.