First Contentful Paint explained: ways to speed up your work - (r)
-sidebar-toc>
Have you been struggling with First Contentful Paint (FCP) timeouts on your website?
Whether you're not even sure about what First Contentful Paint is or you're looking for some specific suggestions on how you can speed up First Contentful Paint times on your site, this post is the perfect one for the.
Let's begin by explaining what First Contentful Paint is and how you can measure it on your site.
Then, we'll share a bunch of tactics that you can use to increase the speed of FCP speeds on your website. In order to make this blog as easy as it can be as we can, we'll attempt to show the tools that aren't technical and WordPress plugins to aid you with the implementation process.
Let's dig in!
What exactly is First Contentful Paint (FCP)?
First Contentful Paint (often called FCP is a performance that focuses on user-experience. measurement that quantifies the time it takes to get the first portion of the page to be visible to the user's display.
FCP is an important measure because it affects perceived performance. If a user is the first time they visit your site, their browser will display a blank screen, which isn't a good user experience for the visitors.
When content begins to load, the visitor will be able to feel that "something" is taking place as the entire web page content is likely to be loaded soon. Therefore, an extremely fast FCP time will make users feel that your site is speedy, even if it still takes a little longer for all the other pages to load.
In contrast, having an unresponsive FCP speed is extremely frustrating for people who use FCP, because it highlights the fact that your page takes a long time to load. It's not much worse than watching visitors sit there staring at blank screens contemplating if the website actually working.
First Contentful Paint Largest Contentful Paint
Since the metric are similar, it can be difficult to discern the distinctions among First Contentful Paint and the largest Contentful Paint.
This is the main distinction between the two:
- FCP determines how long it takes the first object to be displayed. It could be anything that is in the event that a particular type of content appears within the web page.
- LCP Note: LCP- measures how long it takes the webpage's principal content to be displayed.
Due to this distinction, the page's FCP should always be at least slightly faster than its LCP time. Based on the criteria of measures, it's not possible to expect to have your LCP timing to run any faster than the FCP time. Although they may technically be equal if the "first" element loaded is identical to"main" element, but since they're not the same "main" element, this won't happen on most pages.
To demonstrate this for you, here's an image filmstrip timeline from an WebPageTest analysis that we ran through the homepage.
- FCP is present in the 1.0-second filmstrip (.924 seconds, in exact). This is the first time that it goes from a blank white page to having some visual content.
- LCP appears within the 1.3-second filmstrip (1.217 seconds in actual). This happens where the "main" page's content page is visible.
What is a good First Contentful Painting time?
Google advises you to aim for the First Contentful Paint time of 1.8 seconds or less for the web pages on your website.
Google rates FCP times that fall between 1.8 to 3.0 seconds as "Needs improvement," however FCP times over 3.0 second are "Poor."
The best method to gauge the First Contentful Paint duration?
The great thing of PageSpeed Insights is that it will give you not only test results from simulated tests but and FCP information that comes from actual people ( if your site has enough traffic to warrant inclusion in the Chrome User Experience report).
It also covers both desktop and mobile performance, as your page's FCP time will differ based on the user's device and connection speed.
Here's how to test a webpage:
- Start the PageSpeed Insights page.
- You must enter the URL for the webpage on your website that you would like to test.
- Click on the Analyze button.
After just a few minutes, you'll be able to see the result.
If your site is able to generate enough users to qualify for inclusion within the Chrome User Experience report, you will be able to see 2 distinct FCP times.
- The duration of the "Discover the real experiences your users are feeling" section is the average FCP duration for human visitors to your site.
- The timing that is listed in the "Diagnose problems with performance" section is based on a simulated test. The conditions of the simulation in the gray box below the numbers.
You can also switch between mobile and desktop results with tabs on the top.
If you want to test different pages on your site you could repeat the method for testing other pages.
The FCP timeframes will differ dependent on the specific page you are using We recommend trying multiple pages to get a good feel for your site's performance.
You could, for instance, check out the homepage, list of blog posts, one blog post, and so on. Also, be sure to look at the desktop as well as mobile data.
Another method to determine the First Contentful Paint time
Here are some good places to begin:
- DebugBear-- lets you test your simulated tests on both desktop and mobile devices and includes tons of data along with FCP.
What factors can impact your website's FCP time?
At a high level, there are 2 "buckets" of issues that could slow down FCP:
- A slow server response If it takes your server to long to send your site's information to browsers of users the page may have an FCP response time that is slow. It could be due to things like slow hosting or DNS, not using caching (which requires the server to do more work to serve a page) or not using the content delivery network (CDN) or a content delivery network (CDN), and so on.
- A poorly optimized web page code --even if your server responds fast, you might experience a slower FCP response when your website's code isn't optimized. As an example, your site might have tons of JavaScript that is blocking visible content from loading. It could also cause issues related to CSS images, CSS or other areas of the code on your website.
According to your location, you could be experiencing issues in just one area or in both areas.
How to speed up First Contentful Paint: 10 Tips which work
Now that you understand more about the basics of First Contentful Paint is and what it means, let's dig to some practical tips you can implement to improve the speed of your website.
This is a brief overview of the listand we'll review them in detail below:
1. Move to faster hosting
There's one unavoidable fact when it comes to FCP:
If your website's hosting is slow, the FCP could be slow even if you have a perfectly optimized web site.
Applying the other suggestions on this list will make the FCP time of your website more efficient However, your site's performance will be hampered by the quality of your hosting.
The underlying infrastructure optimised for efficiency it also helps you automatically implement a lot of the strategies listed in this listing, like caching, content delivery networks (CDN) optimization of DNS, optimized image, and much more.
2. Make use of the caching of pages (ideally at the server level)
If your site was built with WordPress the site will have to process dynamically server-side codes for every single visitor (by by default).
It takes a while, particularly with low-powered hosting. This could have an impact on your site's FCP times.
If you host the system will be able to automatically set up pagina caching on your behalf through its Edge Caching feature.
If you're hosting with a different host then you should determine if the host you're using features a server-level cache feature or make use of one of the numerous WordPress caching plugins like WP Rocket and FlyingPress.
3. Implement a content delivery network (CDN)
Once a user comes to your site when a person visits your site, your CDN will provide your website's data from the location that's physically closer to the person who is visiting.
If your hosting is elsewhere, you can implement an CDN yourself by using providers such as Cloudflare, Amazon CloudFront, Fastly as well as others.
4. Use a faster DNS provider
The DNS provider that you've configured your domain name to use will determine how long this process takes and will influence your website's FCP.
As an example, as per DNSPerf, the difference between the fastest and the lagging provider is more than 130 milliseconds which is quite substantial.
If you're hosting on another server, Cloudflare offers one of the top free DNS solutions.
5. Make sure your website's CSS is optimized
After you've resolved the issue with response times for servers, it's time to move towards optimizing your site's code by focusing on its CSS.
Remove unused CSS
First off, you'll want to eliminate any unneeded CSS from websites where it's not required.
One way to do this is to use the manual method. A tool like PurifyCSS will scan your website to find any unusable CSS which you can manually remove that code. PageSpeed Insights will also flag unusable CSS in the "Reduce unused CSS" area of their diagnostics.
However, if you're using WordPress There are a few useful plugins that automate the entire process for you that make the process much easier (especially for those who aren't developers). The best options include WP Rocket, FlyingPress, and Perfmatters.
These plugins are all premium tools. However, we think they're worthwhile because they can also assist you in implementing a number of the other tips in this guide.
Critical CSS inline and put off non-critical CSS
By default, your site will probably wait until it's loaded every bit of the CSS code before rendering content above the fold. This isn't efficient from a users' perspective because you really only need the CSS required for the content above-the-fold -the rest can be put off until when it's later.
The CSS for a page's above-the-fold content is called the crucial CSS.
To speed up your page's FCP as well as other performance indicators, it is possible to insert this CSS in the site's "head" section ( AKA putting it inside the page) rather than using it in an outside stylesheet.
If you're a more experienced user, you can manually generate a page's critical CSS with a tool similar to this.
However, with WordPress, you can automate this process on each specific page on your site using FlyingPress and WP Rocket.
Once you've inlined the critical CSS of a page you are able to safely delay loading the rest of the web page's CSS until later in the page load process ( after the above-the-fold content has already been executed).
Each of WP Rocket and FlyingPress will automatically do this to you, as part of their critical CSS functionality and is another reason you should consider utilizing the two.
Minify CSS code
A third method to add a tiny bit of speed to your website's CSS codes is to reduce it. If you reduce the CSS code, it eliminates any unnecessary whitespaces and characters, and can also add marginal size savings.
Plugins like WP Rocket and FlyingPress can perform this task for you. You can also find minification-specific plugins like Fast Velocity Minify.
6. Optimize your site's JavaScript
Like CSS, there are several ways you can use to lessen the impact of JavaScript on your site's FCP-related time.
Avoid using JavaScript-dependent components above-the-fold
Get rid of any unnecessary JavaScript
While you'll want to put an emphasis on cutting down JavaScript usage in above-the-fold elements however, it's generally an ideal idea to eliminate the most unnecessary JavaScript on every webpage as you can.
Another option is to use an application that manages scripts such as Asset CleanUp or Perfmatters to turn off JavaScript in a per-page basis as well as disable scripts on pages where they're not required, but leaving them enabled for other pages.
Eliminate render-blocking JavaScript (defer or delay)
No matter what, you'll probably still need to install at minimum JavaScript in your site. To make sure this JavaScript isn't a hindrance to loading the above-the-fold content Two commonly used strategies you could use:
- Defer rendering-blocking JavaScript This means that you will not block other web pages from loading by delaying the load of JavaScript until later in the process of rendering pages. There are two options to choose from: defer and async. Additionally, there are WordPress plugins to automate the process.
- Relay JavaScript until user interaction--you can totally delay loading some orall of your site's JavaScript until a user interacts on the site (for example, clicking or scrolling). This offers the best performance improvement, but you may need to manually exclude certain scripts to avoid causing issues.
You can implement either of these methods for WordPress using plugins such as WP Rocket or FlyingPress.
Minify JavaScript code
Like the process of minifying CSS the majority of caching and performance plugins (including WP Rocket and FlyingPress) are able to do this for you. It is also possible to use a targeted plugin like Fast VelocityMinify.
7. Do not allow lazy loading on above-the-fold pictures.
It's generally a good thing for performance when you're loading slow images below the fold. However, lazy loading on over-the-fold images can actually negative impact your site's FCP as well as LCP speeds.
Therefore, you'll want to ensure that you exclude any above-the-fold images from being lazy loaded.
If you're using WordPress's core lazy loading option within WordPress, WordPress should take care of this on its own. But if you're experiencing issues, you can manually adjust this behavior using the wp_omit_loading_attr_threshold function.
In the event that you're using plug-in to load lazy images, the plugin should hopefully provide you with a way to perform this. For example, Perfmatters lets you automatically exclude a certain amount of top images, and manually exclude specific images when needed.
If your software doesn't provide this function, think about switching to one which does.
8. Optimize font delivery
For a better experience To avoid problems, use Font-Display: Optional alternative or Font-Display: Swap CSS descriptors.
With Font-Display: Optional option, you are able to tell the browsers of users to display a fallback font if the custom font does not load fast enough.
If you're not keen to make this happen using your own CSS There are a number of WordPress plugins which can improve the loading of fonts for you for example, WP Rocket, FlyingPress, and Perfmatters.
9. Try to reduce DOM size to the greatest extent is
According to Mozilla, the Document Object Model (DOM) is "the information representation of objects that form the structure and contents of a document on the internet."
While human visitors won't interact with the DOM directly, a page's DOM is crucial to help the web browsers comprehend and show the contents of a web page.
In general, having a larger and more complicated DOM structure will lead to slower FCP times than a shorter, optimized DOM structure.
Here are some tips to decrease your website's DOM size:
- Make use of to use the Page Break block --you could break up a long page using the Page Break block.
10. Avoid redirects (especially multiple redirects)
Redirects let you send visitors from one URL to another one before the page loads. For example, you might redirect someone visiting the HTTP version of the website onto the HTTPS version.
Since the redirection must be completed before the user's browser can load the website, each redirect typically adds hundreds of milliseconds of delay to the FCP time of your website (and other performance metrics).
Here are some helpful tips to prevent unnecessary redirects
- Point URLs to correct WWW or non-WWW versions ensure that all your URLs use the correct version to avoid redirecting from WWW to non-WWW (or reverse).
- Ask other sites to correct broken links (if worthwhile) ---if you're getting a lot of traffic to a broken link on a site owned by a third party, you can reach out to the site owner and request that they fix the link, instead of relieving on redirects.
For example, here you can see that 's redirect checker detected multiple redirects when we entered http://www.wordpress.org as the URL:
- One redirection from HTTP redirects you from HTTP to HTTPS.
- The second redirect is to redirect users from WWW to non-WWWW.
If you notice numerous redirects similar to this, you'll need to correct them.
Summary
First Contentful Paint is a user experience-focused performance measure that allows you to see how long it takes the initial item of content to be visible on your page. It's similar to, but is slightly different from the Largest Contentful Paint.
If you improve the speed of your site's First Contentful Paint duration, this will have the natural effect of also improving your Largest Contentful Paint times, along with the majority of other metrics that measure performance on your website.
For speedier loading times, you'll want to focus on optimizing your website's frontend code and server response time.
Jeremy Holcombe
Content and Marketing Editor at , WordPress Web Developer, and Content writer. Outside of everything related to WordPress I like the ocean, golf as well as movies. Also, I have height problems ;).