Improving Largest Contentful Paint (LCP) is the first and foremost step to optimize your web pages for visitors next to First Input Delay and Cumulative Layout Shift How to & When to Inline Images using Base64/SVG in WordPress October 7, 2019 One of my primary goals in optimizing a website is to improve first contentful paint and first meaningfu. First Contentful Paint (FCP): measures the time from when the page starts loading to when any part of the page’s content is rendered on the screen. ( lab, field ) Largest Contentful Paint (LCP): measures the time from when the page starts loading to when the largest text block or image element is rendered on the screen.
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 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
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
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.
In this article, you’ll learn everything you need to know about FirstContentful Paint (FCP), including:
What FCP Is;
Why Measuring FCP Alone Isn’t Enough;
How To Reduce Your FCP Time.
If you want to improve your PageSpeed Insights (PSI) score and the user experience on your website, read on.
What is First Contentful Paint (FCP)?
First Contentful Paint (FCP) measures the time it takes for the browser to visualize the first piece of DOM content (e.g., image, SVG, non-blank canvas element) on a page. According to PSI, that should happen in under 2 seconds.
For example, a loading animation can trigger FCP:
Or your company logo:
These elements might seem insignificant, but they’re crucial for the user experience. They tell your visitors: “Hey, your input is being processed and the site is loading. The result will be ready in a second”.
That’s why FCP is a perceived load speed metric.
More importantly, FCP is a good indicator of the first impression your website makes.
And as I said in our article on First Input Delay (FID), first impressions are everything. You likely won’t get a second chance if you disappoint a first time visitor.
That’s why optimizing your FCP (and FID) is a must.
But while important, FCP doesn’t tell the whole story of how users experience load time. In fact, FCP (like all metrics) has some significant gaps.
Let me explain.
Why Measuring LCP Alone Isn’t Enough
Imagine opening a website and watching a white screen for a few seconds before anything is rendered.
During these few seconds, nothing indicates to you that the website is loading.
That’s not a great experience. In fact, this blank screen alone can cause a ton of page abandonment.
This is where First Paint (FP) comes in.
FP measures how long it takes for the browser to render anything on the page, not just DOM content.
This could be a background change, for example.
This change alerts the user that something is happening. The content might not be there, but the visitor knows it’s coming.
In an ideal situation, your FP and FCP should occur at the same time, or with an unnoticeably small delay.
So, FP and FCP are great at measuring the beginning of the loading experience. But we also need to track its culmination.
Enter: Largest Contentful Paint (LCP).
LCP measures the time it takes for the largest above the fold content element to load.
That might be the breaking story on a news website or a product picture in an eCommerce store.
In most cases, your visitors came to see precisely that element. That’s the culmination of their loading experience.
To recap:
At the start of the loading experience, FP and FCP assure your visitors that their input is being processed;
At culmination of the loading experience, LCP gives your visitors what they came for - the largest content element.
The only way to put yourself in the shoes of your visitors is to analyze all 3 paint metrics.
You can find your FP, FCP and LCP times with Chrome’s DevTools.
Open a page you want to analyze, right-click and select “Inspect”.
From there, go to “Performance”.
And click the “Reload” button.
Chrome will analyze your page and give you a detailed report. In the “Timings” section, you can find information about your FP, FCP and LCP.
From there, it’s about finding specific issues and solving them.
For now, let’s talk about reducing your FCP time.
How To Reduce Your FCP Time
If you open PSI (or the Lighthouse audit), you’ll likely get the following Opportunities:
And Diagnostics:
A lot of these suggestions can help you improve your FCP (and the other two paint metrics).
In general, you should aim to resolve all of them, not just to please PSI, but to achieve excellent user experience.
For now, let’s stick to reducing FCP.
Improve font load time
A common issue when working with custom fonts is the “flash of invisible text” or FOIT.
FOIT occurs when the browser can’t download a font file quickly. When that happens, the browser doesn’t show any text until the entire font file is loaded.
The easiest solution is to temporarily show a system font before the custom font is loaded.
The font-display: swap property can help you achieve this effect. The property tells the browser to use the fallback (swap) font until the custom font is ready.
Check out this article by the Lighthouse team for more details on this topic.
Eliminate render-blocking CSS and JavaScript
CSS and JavaScript (JS) files are render-blocking by default.
The browser can’t render anything on the page until it processess them. That’s why you need to improve their delivery.
To solve this issue, you have to inline critical resources and defer non-critical ones.
For example, you should set up Critical CSS, so above-the-fold content can appear instantly. Meanwhile, the rest of the page can load asynchronously.
That’s one form of inlining critical resources. And it’s a great way to start resolving the entire render-blocking problem.
Optimize Your Images
Image optimization means reducing the size of each image without affecting the quality.
It’s a simple idea, but a difficult one to implement.
Choosing the right image type is a great place to start.
The classic image formats (JPEG, GIF and PNG) all have their pros and cons. But right now, the newer WebP format is your best bet for a few reasons.
First, WebP is currently developed by Google. The almighty search engine will be happy to see you using this format.
On top of that, WebP produces better results than both JPEG and PNG. According to Google, WebP images are 26% smaller than PNGs and 25-34% smaller than JPEGs.
In short, choosing WebP is a win-win.
Besides the file type, it’s also good to review all the pictures on your website and delete the unnecessary ones. Trust me, they’re there.
An image that doesn’t contribute to the overall goal of the page shouldn’t be there. Plain and simple.
If you want to get more advanced, check out this comprehensive guide on responsive images by Mozilla.
Minify and combine your code files
Minifying and combining code files is an essential part of optimizing your website’s CSS and JS.
On one hand, minifying the code removes the unnecessary bits of information like whitespace, comments and line-breaks. The browser doesn’t need that data to render the page.
On the other hand, combining code files reduces their total number. The fewer the files, the easier it is for the browser to find and download them.
Again, this is a simple idea that’s not easy to implement.
Check out our article on this topic to learn how you can optimize your website’s code.
Avoid Excessive JS Usage
JS is usually the biggest threat to your website’s performance.
As Addy Osmani puts in his annual talk on web performance, JS is the most expensive part of most websites:
There are many reasons why this problem is so widespread.
First, there are tons of JS frameworks out there.
Each of them helps developers but adds more JS to the website or application. That certainly doesn’t help with website performance.
In fact, Backlinko’s research on page speed found that the fastest JS frameworks (Wink and Gatsby) are 213% faster than the slowest ones (Meteor and Tweenmax).
Second, WordPress’s popularity also contributes to this problem.
As of 2020, WordPress powers around 39% of all websites on the Internet.
All WordPress websites have a theme and 2-3 additional plugins. These themes and plugins often have a huge amount of JS (and CSS) baked into them.
The only way to achieve great performance with a WordPress website is to analyze and choose your theme very carefully.
Besides that, you can go through your website and search for excessive JS usage. A few elements you can look out for are:
Unnecessary sliders (especially above the fold);
Images and videos that can be served with HTML & CSS instead of JS;
Animations.
These elements aren’t bad by design. But if they add a lot of JS overhead and don’t contribute to the user experience, they shouldn’t be there.
Don’t be afraid to remove them.
Fix Your Caching, Hosting and CDN
These 3 factors are a pass/fail type of deal.
You have to take care of them and there’s no way around that.
Let’s start with your hosting and CDN.
You should consider 3 key factors when choosing your hosting and CDN provider:
Your Website’s Type - blog, eCommerce store, personal portfolio, etc.;
Your Budget;
Your Website’s Traffic.
But there’s one rule that applies to everyone:
Largest Contentful Paint
Free hosting and CDN services suck. Sorry to say it, but it’s true.
If you’re serious about website performance, you need a paid plan from a reputable company.
That doesn’t mean you should spend hundreds of dollars on hosting every month. You can find affordable plans with excellent performance.
Check out Quicksprout’s guide to the best hosting companies in 2021 to find a hosting provider that’s right for you.
Most hosting providers also offer CDN services, so you can get both in one swing.
On the other hand, your caching policy will depend on highly individual factors. For example, how often you update the content on your website.
If you want to learn more, our in-depth guide on web caching is a great place to start.
Optimizing Beyond FCP
Optimizing your FCP will vastly improve the user experience on your website.
It’s not easy, but it’s worth it.
However, that’s not the only metric to work on.
As I said, you should analyze FCP in combination with LCP and LP.
At the same time, LCP is also a part of Google’s Core Web Vitals, along with Cumulative Layout Shift (CLS) and First Input Delay (FID).
These 3 metrics (LCP, CLS and FID) will soon become a part of Google’s ranking algorithm.
Paint Time
So, a great next step is to learn everything you can about LCP, CLS and FID. You can get started with our guide on Google’s Core Web Vitals.