- First Contentful Paint Fcp
- First Contentful Paint Wordpress Download
- What Is First Contentful Paint
- First Contentful Paint Wordpress Plugin
- First Contentful Paint Wordpress Verbessern
Google has been in a ceaseless war with shoddy UX for over a decade now. User experience means pretty much everything to Google, and they have the resources to throw at it. And since Google’s job is to organize and display what the internet has to offer, their crosshairs may be pointed at your site. In the past, we have talked a lot about the different factors that affect Search Engine Optimization and Google ranking. So today we want to continue that discussion by explaining something called first contentful paint. And in explaining first contentful paint, it would help to familiarize and refresh our memory as to what user experience is.
First Contentful Paint or FCP measures the time from the moment the user navigates to the website and when the browser paints the first content on the screen. Google Defines it as the following. “ FCP measures how long it takes the browser to render the first piece of DOM content after a user navigates to your page. First Contentful Paint (FCP) is one of six metrics tracked in the Performance section of the Lighthouse report. Each metric captures some aspect of page load speed. Lighthouse displays FCP in seconds: What FCP measures # FCP measures how long it takes the browser to render the first piece of DOM content after a user navigates to your page.
First Contentful Paint and User Experience
First contentful paint is an important aspect of user experience. First contentful paint has to do with the loading speed of your website. When someone types your URL into their address bar or clicks on your link from a search engine or other source, the first contentful paint is the first element of your website that begins to render on their monitor. Usually, first contentful paint is your website’s header or top navigational menu.
This is the first thing that people see when loading your website and it lets them know that the content that they came in search for is on the way and will render soon. You may be starting to see what first contentful paint and user experience have to do with one another. When your site loads fast – when the first contentful paint shows up quickly and in turn, renders first meaningful paint quickly – Google considers that part of good user experience. When people have to wait multiple seconds for your website to start showing signs of life, Google considers that you guessed it, part of bad user experience.
The New Era of Google Ranking
![First Contentful Paint Wordpress First Contentful Paint Wordpress](/uploads/1/1/9/3/119346334/928076173.jpg)
We are living in a significant era as far as digital marketing and SEO are concerned. On Thursday, May 28, 2020, Google announced that they would be using a set of metrics called “Core Web Vitals” to incorporate into their ranking algorithm. Core Web Vitals are criteria that judge websites based on user experience. This includes “load time, interactivity, and the stability of content” as Google puts it. And while these changes are not set to roll out until 2021, smart marketers will begin to adapt right now so that they are ready to rank when Google officially makes this change.
Introducing upcoming ranking signals for Google Search based on various aspects of page experience–combining Core Web Vitals and previous UX-related signals.
Read our pre-announcementhttps://t.co/L3IrB2dOnM
— Google Webmasters (@googlewmc) May 28, 2020
In essence, though, Google will now be looking at SEO and the overall user experience when ranking websites. That means that first contentful paint is going to be a huge decider on how high your website gets placed on Search Engine Results Pages.
This represents a shift toward more “human-centric” metrics that Google is using to rank websites. You can probably see how this is going to have an effect on the current standards or Search Engine Optimization.
What FCP this Means for SEO
Before you throw out all your SEO textbooks, understand that current SEO practices are still very much valid. As Common Places Interactive lays out in their article, SEO is still going to be the first signifier to the Google bots. In other words, just because Google is getting more UX and human-oriented, doesn’t mean that they are going to start using humans to comb through the millions of search engine hits it pulls up on a single query.
In short, this means that computers are still going to be used to index your website, and what do these computers use to index? That’s right, SEO signals. In 2021 the process of Google rankings is going to go something like this:
- A search is made using keywords
- The Google algorithm will scour the internet in search of those keywords and relevant data
- Google will then comb the sites based on Core Web Vitals and other metrics
- Google will display results based on the relevancy of SEO and Core Web Vitals
First Contentful Paint Fcp
So as you can see, SEO is still very much part of the game. As things stand now, it looks like SEO will still be the initial signifier for the Google algorithm. The results that are indexed in this initial search will then be further scrutinized using Core Web Vitals.
Going Forward With FCP
While this may sound like a bit of frustrating news to a lot of webmasters out there, it should nonetheless come as no surprise. Google’s job since its inception has essentially been to improve the way their system provides relevant content to its users. One just needs to take a look at Google’s update timeline to see how much effort the company has put into improving its search engine. It’s obvious to see that Google is an ever-changing machine. So not only should this latest update come as no surprise to you; you should also expect more changes very soon.
But don’t stress out. There are some very helpful tools out there that you can use for free to improve the speed of your first contentful paint. Google itself launched Lighthouse in 2008 which lets developers test their website loading speed and see how it loads as visitors experience it. Lighthouse will essentially audit your page based on SEO and UX and let you know where and how you can improve.
Adapting to SEO’s Evolution
If you haven’t figured it out by now, it really pays to be adaptive when it comes to digital marketing. The value that Google has placed on first contentful paint and UX, in general, is just another shift that the company has made to keep developers honest and to keep their own users happy. It was preceded by past changes and it will be succeeded by future ones.
Here at Nolen Walker, our job is to help you be adaptive in the ever-changing digital market. With our tools and guidance, you can stay on top of the latest changes in search engine algorithms.
The First Contentful Paint (FCP) metric measures when content first starts appearing on a page. This means the user has something useful to look at, usually text or an image.
FCP contrasts with the overall First Paint (FP), which occurs even if the browser is only rendering empty boxes.
You can find the FCP at the top of the top of the Lighthouse Performance section.
What causes a slow First Contentful Paint, and how can you improve it?
The most common cause of a slow FCP are render-blocking scripts and stylesheets.
Render-blocking stylesheets
For example, take a look at this DevTools recording of the DebugBear homepage. What resources need to load before content starts to appear on the page?
- The HTML document
- Two CSS files
The two CSS files are render-blocking and placed in the document
head
element. You could avoid this by inlining the CSS directly into the document HTML as a style
tag. However, this would mean re-downloading the CSS as part of every document request, rather than using the cache after the first visit.In this case we only have three render-blocking resources. The longest request chain is 2 requests long, because both CSS requests are triggered at the same time and can be made in parallel. So overall the FCP in this example isn't too slow.
Render-blocking scripts
First Contentful Paint Wordpress Download
This chart shows another website, this time for a site with multiple render-blocking scripts. All of these need to be downloaded and executed before any page content starts to show.
On a positive note, this website also doesn't have any long request chains. You can see a CSS file is loaded from Google Fonts. After loading the CSS file the actual font file needs to be fetched.
However, the browser doesn't block rendering until the font is loaded, thanks to the
font-display: swap
CSS property. This property means that if the font isn't available yet, then the browser uses a fall-back font instead. On Google Fonts you can achieve this by appending &display=swap
to the CSS URL.This website does not require the loaded JavaScript code for the initial render, so the
script
tags could be moved further down in the HTML, for example to the end of the body tag. Moving the script
tags there will ensure they are no longer render-blocking. Alternatively, you can add the async
attribute to the script element.If you're loading scripts on your website, keep in mind that they not just need to be downloaded, but also parsed, compiled, and executed.
Reduce server response time
Stylesheets and JavaScript files are static resources, and the server can usually provide a response quickly. However HTML or Ajax responses are generated dynamically, so the server can introduce a significant processing delay. Acceleration of suguri 2.
You can check the response time of your server in the DevTools Network tab. The entry is the request for the initial HTML document. In this case, the server took 2.2s to respond and in total the request took 2.7s from start to finish.
Try to keep your server's response time below 600ms.
Slow server responses are more likely if the backend is responsible for rendering the page content. For example, if you have a Wordpress site with lots of plugins this can cause significant rendering delays. On the flipside, rendering content on the server also reduces processing time in the browser and avoids unnecessary network roundtrips.
Read more about improving server response time.
Do background images count as content?
Yes, if a background image is rendered the paint will be considered contentful.
How to access the FCP value for the current page
You can get the First Contentful Paint for current page from the Paint Timing API:
How does First Contentful Paint affect the Lighthouse performance score?
In Lighthouse 6.1 the First Contentful Paint metrics accounts for 15% of the overall Performance score. This table shows the maximum FCP you'd need to achieve a certain subscore.
FCP subscore | Max FCP (Mobile) | Max FCP (Desktop) |
---|---|---|
100 | 1.3s | 0.5s |
90 | 2.3s | 0.9s |
50 | 4.0s | 1.6s |
10 | 6.9s | 2.7s |
These graphs shows how a given FCP value maps to its Performance subscore:
The initial document request requires at least 4 network roundtrips on an HTTPS connection (DNS, TCP, SSL, and HTTP). Lighthouse simulates a roundtrip time of 150ms, so the minimum FCP you can achieve is 600ms. This does not include your server response time or time the data spends travelling from your ISP to the website's data center.
On desktop Lighthouse uses a roundtrip time of 40s, so the minimum FCP would be 160ms.
First Contentful Paint on DebugBear
What Is First Contentful Paint
You can find the First Contentful Paint metric as well as the Lighthouse Performance score on the page dashboard.
First Contentful Paint Wordpress Plugin
Changes to how Largest Contentful Paint is defined
First Contentful Paint Wordpress Verbessern
Different versions of Chrome measure FCP slightly differently. Google keeps track of changes to the FCP definition here.
Still need help? Contact [email protected] for support.
DebugBear is a website monitoring tool built for front-end teams. Track performance metrics and Lighthouse scores in CI and production. Learn more.