This article is going to cover several easy ways that you can improve your FCP or First Contentful Paint in WordPress. By improving this performance metric, your WordPress website will have a better user experience, get ranked higher on Google, and load noticeably quicker. First, let's go over what FCP is very quickly, and then discuss several easy ways to improve that metric on your WordPress website.
FCP, also known as First Contentful Paint is a statistic collected from real users through the Chrome user experience report. This is one of the more realistic measures of real world user experience. It is designed to measure how individual visitors and users perceive the performance of a website. It's also one of the first of many speed statistics that Google will begin using in their website delightfulness campaign, aimed at making user experience for consumers better on all websites.
The First Contentful Paint is the first instance of visual content rendering for the end user. In this example, FCP occurs in the second frame, and it is the first content element that has rendered for the user. Having a faster FCP ensures that the user will remain on your website until all of the content loads, as the perceived time of this content loading is much quicker.
As we stated in our exhaustive writeup of what FCP and LCP are, you should understand that this changes based on the website and the specific page. So your FCP can be one thing on one page and another thing on another page. This adds a bit of complexity to the optimization process, but as long as you understand what FCP is and follow the methods discussed in this article, you should be good to go.
Keep in mind, that Google will begin using these metrics as serious ranking indicators in March 2021, so getting your First Contentful Paint figured out before that point is in your best interest.
Understanding and testing your First Contentful Paint metrics is very easy. All you need to use is the Google pagespeed tool. Simply enter your URL, and one of the first metrics will tell you in seconds, how fast your website loads.
A website that loads in under one second in regards to FCP is classified as fast, a website that loads in under 3 seconds FCP is known as moderate, and a website that has a First Contentful Paint of three seconds or more is known as slow. As you can see, there's not a lot of leeway here, and you definitely need an FCP that is way faster than 3 seconds to rank well on Google.
The good news is that improving your First Contentful Paint on WordPress has several actionable methods that will make an immediate and lasting improvement. The majority of these solutions involve plugins that will automate the optimization process for you, making FCP optimization on WordPress a lot easier.
So, with that FCP introduction out of the way, let's understand how we can improve this metric. Even if you have a good FCP, improving it even by milliseconds could increase your user experience and directly result in increased conversions and a lower bounce rate on your WordPress website.
The first and most actionable thing you can do to reduce your FCP time and increase this score would be to focus on your Time To First Byte. Many websites have a very slow TTFB, or the time taken by a browser to receive the first bite of web page content. TTFB is the summation of the time it takes to get the HTTP request, process that request, and the response time of the HTTP req itself.
In layman's terms, if your website takes longer than average to connect to the server, then the rendering and downloading of content will be slower for the end user, resulting in a slower FCP.
The FCP is the first metric that shows up, so it is almost directly related to the TTFB. The two main ways that you can improve your Time To First Byte on a WordPress website, directly increasing your First Contentful Paint score is by choosing a fast WordPress host, and using a quality CDN.
If you have a fast WordPress host, data is sent to the visitors browser much quicker than normal, increasing TTFB. If you have a user that is loading the website from a geographically far location in regards to the server location, utilizing a CDN which has an individual node that is physically closer to the end user will seriously increase your TFB and lead to a much better First Contentful Paint score.
When recommending a good WordPress host and CDN, we always say that this should be an integrated solution. You shouldn't be looking for an individual CDN and an individual WordPress host, instead you should be looking for a very fast WordPress host that incorporates a CDN in their service. Not only will this save you money, but it will be a lot less complex and due to the integration probably quicker.
So, the first actionable thing you can do to improve your FCP is look at a good host. The best host that has an integrated CDN (Cloudflare enterprise, which includes automatic platform optimization) is Rocket.net.
This is the WordPress host that we used to serve our blog to almost 100,000 visitors per month , and due to its integration with a premium CDN and lightning fast hardware to begin with, as well as a full page cache, the TTFB is incredibly low, meaning that our FCP is not restricted.
Because these block the rendering process, the browser needs to wait to actually display DOM elements to a visitor, download the render blocking resource, parse it, and then continue rendering the entire page.
If you assumed that this blocking of the rendering also blocks the First Contentful element, this would be correct. And the longer that these resources block the rendering process, the longer it takes to render the First Contentful element, leading to a higher FCP times score.
Additionally, inlining critical CSS allows you to defer the loading of your main CSS stylesheet until the end of the rendering process. This can be done with asset cleanup, but we also recommend combining WP Rocket which is a caching and optimization plugin. This has an automatic critical CSS generator, and it works very well in regards to removing render blocking resources.
Next up, as we alluded to would be eliminating unused CSS. If you are loading unused styles on a web page, these can be render blocking, but they simply make your page heavier, resulting in more data transferred, resulting in a slower FCP.
Getting rid of these unused CSS stylesheets is a great way to minimize the amount of data transferred, clearing the way for the critical First Contentful element to be painted on your site. This directly impacts the FC score in a beneficial way.
To do this, there's no automated software, but there is a plugin that helps you remove CSS from individual pages and ranges of pages. That is Asset Cleanup, as we mentioned above, and it allows you to toggle on and off styles and scripts.
You can then test the front end of your website to see if anything breaks, and if it doesn't you have removed unused CSS, resulting in a quicker loading website, and a better FCP score.
By replacing them with quicker loading HTML, you will seriously improve the First Contentful Paint, just due to the nature of HTML and CSS technology.
So, disable the lazy loading of images that load above the fold, but ensure that they are properly optimized. This would include converting them to WebP format (use ShortPixel), as well as completely compressing them to be as small as possible while retaining clarity.
If you want to get even crazier with your image optimization, for smaller images that don't have a major resolution requirement, you can go ahead and inline them. This is good if you have a specific logo or smaller image that loads above the fold. By converting them to SVG or base 64 formats, you inline the image, reducing an extra HTTP request to download them, improving your FCP.
Keep in mind, this advice may only be helpful for specific use cases, and if you have an HTTP2 based server, or a incredibly heavy image that you're trying to in line, it's best to keep it as is.
However, utilizing SVG and base 64 logos, search icons, social media icons, and backgrounds, could be beneficial for your First Contentful Paint, improving your WordPress website score on Google, and benefiting your ranking and user experience.
The final major thing that you can do is focus on your DOM size. The DOM , or document object model is a tree like structure that essentially refers to every element on your page.
So, any divs within the body, span wrappers, paragraphs, headers, metalinks, and more would be considered DOM elements. The more elements on a page, the larger the render time, and the slower your First Contentful Paint is.
So, by reducing the number of DOM elements, you will have a quicker loading website. This can be done by completely rebuilding the page being as lean as possible with any elements placed within, or by utilizing a new theme or page builder.
For example, Elementor wraps its elements in dozens of unnecessary divs, so switching to a page builder with a lower code bloat, could minimize the number of DOM elements on a page, leading to less data transfer, leading to quicker render times, leading to better First Contentful Paint scores on Google.
Because First Contentful Paint is derived from real-world user experience on your WordPress website, you can't skate by with a poor performing asset. Instead, you need to address your first and tackle paint scores head on, incorporating these six methods into your optimization, resulting in a better user experience, increased ranking placement, and lower bounce rate.
There are many other methods that you can use to increase the overall performance of a WordPress website, which will also be beneficial to your First Contentful Paint, but these six methods are the best way to increase your first in temple paint on a WordPress website. If you have any additional optimization recommendations, feel free to leave them in the comments section below.
IsoGroup- Web Dev/Design, WordPress and More