isotropic-2022
Share
Blog
Search
Menu

8 Actionable Ways To Improve FCP In WordPress

By James LePage
 on January 18, 2021
Last modified on January 6th, 2022

8 Actionable Ways To Improve FCP In WordPress

By James LePage
 on January 18, 2021
Last modified on January 6th, 2022

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.

What is FCP?

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.

Testing And Understanding First Contentful Paint

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.

Focus On Time To First Byte

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.

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.

Eliminate Render Blocking Resources

The next actionable thing that you can do to minimize your FCP time is eliminate render blocking resources. Render blocking resources are elements of a website, typically CSS and JavaScript, that are called in during the rendering process of your WebPage.

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.

The best way to eliminate render blocking resources is by using a third party plugin called Asset Cleanup to defer and asynchronously load JavaScript and CSS. You can even disable various scripts on a web page where they aren't used, minimizing unused CSS, which is something that we talk about at a later point in this article.

Inline Critical CSS

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.

Eliminated Unused CSS

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.

Remove Script Elements Above The Fold (Like JS Ads)

In terms of the actual makeup of your website, removing script based elements that are above the fold is a surefire way to improve your First Contentful Paint of a WordPress website. JavaScript can be optimized as much as possible, but due to its makeup, it will always be slower to render than straight up HTML and inline critical CSS.

So, if you have any JavaScript that would be considered the First Contentful Paint of a web page (essentially anything located above the fold, or in the initial viewport that loads to the visitor), you definitely want to get rid of it and replace it with pure HTML.

This typically is an issue on content websites that utilized JavaScript based advertisements which load in above the fold. These scripts can also have a major negative impact on your cumulative layout shift.

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.

Disable Lazy Load Above The Fold (crazy, I know)

Continuing this purge of any JavaScript based elements, if you are lazy loading any images that are displayed above the fold, you will want to actually disable this feature.

Lazy loading images is a great way to increase the performance of your WordPress website, but they actually have a negative impact on the First Contentful Paint, as they utilize JavaScript libraries to enable that functionality.

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.

Inline Images (SVG or Base64)

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.

Focus on DOM Size

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.

Conclusion

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.

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of CodeWP.ai, a venture backed startup bringing AI to WordPress creators.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram