×
Try our new Figma plugin! Sample and source thousands of assets without leaving the app.

How to Improve Core Web Vitals: A Guide for Designers

By on Apr 23, 2021 in Design Trends
How to Improve Core Web Vitals: A Guide for Designers

As you iterate through different versions of your client’s website, you inevitably have to consider search engine optimization (SEO) and Google's ranking factors. In other words, the Core Web Vitals that help your client’s site show up in the search engine results pages (SERPs).

As a web designer, you can’t ever look at a website project as merely a visual, front-end affair. Sites are meant to be traffic-receiving and revenue-generating businesses. They can only be all these things once they rank well on the search engine results pages (SERPs) for whatever specific keywords you’re targeting.

That’s why it’ll help your career—and produce more satisfied clients—if you’re able to understand and implement these crucial user experience factors.

In this guide, you’ll learn the long and short of how to improve Core Web Vitals. You’ll be empowered to design and build your clients a site that doesn’t only look beautiful, but also performs strongly from a marketing standpoint.

What Are Core Web Vitals and Why Should You Care?

Core Web Vitals are a subset of Google’s Web Vitals. Think of the latter as some proprietary signals Google has come up with to give web designers, developers, and marketers a sense of what makes for a great user experience (UX) on the Internet. As a designer, your site's user experience should be first and foremost on your mind as you ideate, iterate, and optimize your design.

To eliminate the subjectivity of what constitutes great UX, Google gave us Web Vitals as guidelines. These are further broken down into the most important ones—or core metrics—that the company wants designers to focus on to ensure a pleasant experience for users on sites. The reason Google calls these “vital” is because of two reasons:

  • They are focused on user-centric results.
  • They can be measured with field tools and data.

Adhere to these guidelines and implement them in your site build, and you greatly increase the chances of your client’s site being seen by Google as having great UX. The reward for that is the likelihood of higher SERP rankings, which means more:

  • Visibility in organic search
  • Inbound traffic (estimated monthly site visitors)
  • Conversions
  • Revenue

Despite getting these specific core metrics right, it has to be noted that this still doesn’t automatically guarantee first or even second SERP ranking for your keywords for your site. That’s because these vitals are merely part of the larger picture of the plethora of search signals or ranking factors (more than 200 unique ones, by some estimates) the company looks at when its algorithms calculate your site ranking.

Nonetheless, you can greatly help your site’s marketing performance by getting your Core Web Vitals right.

There are three in total that you must contend with:

  • Largest Contentful Paint (LCP)
  • First Input Delay (FID)
  • Cumulative Layout Shift (CLS)

Let’s explore what each of these means.

Largest Contentful Paint

The LCP is a measurement of your webpage’s loading performance. It measures the perceived load speed of your pages because it marks the point in time when a page’s main content has probably loaded. This metric tells you how long it takes for the biggest text or image block, visible in the viewport, to render based on when the page initially began loading. As a result, LCP tells your client’s site visitors that the page they’re on is useful (i.e., sufficient content has loaded to enable site visitors to engage with it).

Since speed is everything on the Internet, a faster LCP corresponds with better UX. According to Google’s recommendations, aim for an LCP of 2.5 seconds or less. Anything longer than 4 seconds ensures bad UX.

First Input Delay

FID refers to the interactivity of your pages. It measures load responsiveness since it attaches a number to how your users feel as they attempt to interact with unresponsive pages. The longer they have to wait to interact with your content, the worse they feel. Think of this Core Web Vitals test as a determination of the first impression your client’s site makes on its visitors.

Specifically, FID calculates the length of time your client’s users initially interact with a page—such as clicking a call-to-action button or tapping on a link—to the time the browser actually responds to that interaction attempt. Therefore, a low FID number makes for good UX while a higher one makes for bad UX. The lower your FID number, the more usable (i.e., site visitors can interact with the content because the page is not busy) your page is.

Google recommends an FID number of 100 milliseconds or less. While it may not seem like such a problem, an FID number of 300 milliseconds is already considered poor UX.

Cumulative Layout Shift

CLS calculates the visual stability of your pages by measuring how frequently users have to deal with unexpected layout shifts.

You’ve likely already experienced layout shifts—and probably cursed under your breath each time—without knowing it. Essentially, these shifts happen any time that something abruptly happens on a page that you didn’t expect or want.

Some examples can be:

  • You want to click or tap on a link, but it suddenly moves, thereby causing you to click or tap on something else entirely that you didn’t want to.
  • You’re reading a blog post or a news article, and then the line you’re on suddenly moves, making you lose your place.
  • You’re looking at an image to study it when suddenly it shifts, leaving you looking at an ad (or another annoying element) instead.

This phenomenon happens due to either the asynchronous loading of page resources or the dynamic addition of DOM elements over existing content.

Either way, CLS is the score that gives you info to address and prevent this issue from happening. Think of CLS as your sum total of all your individual layout shift scores for each unexpected layout shift that does happen in the whole lifespan of the page.

The lower your CLS, the better the UX. Aim to design your pages so that their CLS score is 0.1 or less. Anything 0.25 or higher is considered bad UX.

Now that you have a rock-solid understanding of these metrics, it’s time to discuss how to optimize your Core Web Vitals.

Tools You Can Use to Improve Core Web Vitals

Since these metrics are benchmarked against Google’s recommendations, it’s possible to always iterate until you meet the best practices. Along the way, you’ll find it particularly helpful to rely on tools to make this easier for you. Unsurprisingly, since Google is the determiner of what makes for great UX, you’ll use their products to gauge if your vitals are up to snuff.

Overall, there are five tools you should familiarize yourself with in your quest for designing your client’s site for stellar UX, split up into field and lab tools.

Field Tools

These tools are used to collect data that comes from real-life situations. In our case, that’s your client’s users interacting with your newly built site in the wild.

Chrome UX Report — It gathers real user data for each Web Vital. You can use this information to efficiently analyze site performance, saving you the trouble of manually measuring your pages.

PageSpeed Insights — It calculates the elements of a page and comes up with suggestions to improve its speed.

Search Console (Core Web Vitals Report) — It reveals how the individual pages of your client’s site are performing, gleaned from actual user data in the field.

You can use all three tools to address and fix LCP, FID, and CLS issues that you discovered earlier on.

Lab Tools

These tools are meant to gather data that comes from controlled environments (i.e., a lab setting), which feature predefined network and device settings. As a result, you’ll see results that you can reproduce, as well as encounter debugging opportunities that aid you to identify, isolate, and then ultimately correct any performance problems.

Chrome DevTools — These are a slew of web development tools included in your Chrome browser. They help you edit pages at a moment’s notice and figure out issues quickly, thereby empowering you to efficiently create better sites and pages.

Lighthouse — This open-source and automated tool helps you to optimize the quality of your pages. You can use it to audit performance, SEO, progressive web apps, accessibility, and other factors.

Chrome DevTools and Lighthouse are only helpful if you want to improve your LCP and CLS scores. However, to improve your FID metric, use Total Blocking Time instead. TBT is an in-lab metric that tells you how non-interactive your page is prior to it becoming properly interactive. As such, this is an indicator of usability. Aim for a TBT that’s less than 300 milliseconds, according to best practices, as anything longer than that is considered bad UX.

Now that you have a good understanding of what the field and lab Core Web Vitals tests are and what they do, you can really apply yourself to improving the actual metrics.

How to Improve Your Core Web Vitals

Let’s look at these vitals each in turn.

What to Do to Improve LCP

It’s crucial to realize that LCP problems usually stem from several potential culprits:

  • Resource load times that are slow
  • Client-side rendering issues
  • Server response times that are slow
  • Render-blocking of CSS and Javascript

You’ll diagnose which specific LCP issue you’re dealing with via the aforementioned tools. Once you have that out of the way, you can start to address and fix your problems.

Here are some tactics to deal with these issues:

  • You can send site visitors to a close-by CDN (content delivery network).
  • You can cache your assets.
  • Ensure 3rd-party connections early on.
  • Streamline your server.
  • Make sure to serve HTML pages cache-first.
  • Minify (minimize the code and markup in your script files and pages) CSS.
  • Eliminate bigger elements on your pages.
  • Use lazy loading.
  • Spend a bit more money for a higher-quality web host.

What to Do to Improve FID

Unlike LCP, your issues surrounding FID can typically be tracked down to just one main cause. This isn’t to say that there aren’t other causes, but the most common reason for FID problems is heavy Javascript execution. That is to say that the browser of your client’s site visitors isn’t able to respond to visitor interactions because the main thread (where the browser is executing Javascript) is busy.

You can troubleshoot this UX problem and improve Core Web Vitals with four tactics:

  • Make sure that you break up longer tasks.
  • Streamline your site’s pages to handle interaction readiness.
  • Utilize a web worker.
  • Simply lessen the execution time of your site’s Javascript.
  • Load your content more quickly with a browser cache.
  • Remove as many non-essential, 3rd-party scripts as you can

What to Do to Improve CLS

Like LCP, CLS can suffer from a few different causes. Here are a few reasons why your CLS on your client’s site is off:

  • Your site images have no dimensions.
  • The ads, iframes, and embeds have no dimensions.
  • Content is dynamically injected.
  • Your web fonts are creating either FOIT (flash of invisible text) or FOUT (flash of unstyled text).
  • There are actions waiting on a network response prior to updating DOM.

It’s incumbent upon you to use the aforementioned diagnostic tools to figure out how to deal with each issue.

Try the following to remedy each of the problems:

  • Add height and width size attributes to video and image elements to make sure your visitors’ browsers can reserve the right amount of space within the document as images are loading.
  • Reserve space, statically, for your ad slots and avoid putting ads close to the top of the viewport.
  • Precompute adequate space for embeds by using a fallback or placeholder.
  • Don’t include new content so that it’s directly above existing content; the only exception is if it’s in direct response to a user interaction—as a result, any layout shifts will be expected.
  • Simply preload optional fonts (from Chrome 83 on).

Don’t Expect This to Be the Magic Cure-All

We can’t stress enough that even improving all of these vitals won’t guarantee first or second SERP placement for your client’s site. You could, for example, go through all of the motions by addressing your LCP, FID, and CLS…and still have your client’s site rank lower than the first or second SERP for its keyword or keywords.

This could be due to any number of factors, some of which may be:

  • The keyword you or your client chose to rank for was too competitive in its niche or industry.
  • There are other vital metrics (remember, there are approximately 200 of them total, of which Core Web Vitals are only a crucial but small part) that you have ignored.
  • You don’t have enough backlinks.
  • You don’t have a link-building strategy in place.
  • Your meta descriptions or title tags are off.

It’s important to understand that these Core Web Vitals help ensure great UX, but that’s only part of the story. While you’ve ensured that your client’s site is now more useful, usable, and maybe even delightful, traffic won’t just magically pour in.

Don’t get us wrong: Optimizing a site’s LCP, FID, and CLS tells Google that a site has satisfied some of the most basic requirements of UX. That will indeed help to make it more discoverable in organic search.

However, without a well-thought-out marketing plan—which may include both organic search and paid search (or search engine marketing)—any site will have a hard time increasing its traffic and conversions.

Intense Optimization That Does Pay Off

The difference between a designer who doesn’t improve a site’s Core Web Vitals and one who does is pride in one’s work. Yes, there’s definitely a lot of ultra-specific work that goes into optimizing a site’s vitals, but the payoff can be huge. You’re literally helping to ensure that your client’s site gets more traffic, conversions, and revenue by increasing its chances of ranking higher in the all-important SERPs.

As a designer, you could naturally design the site and leave it at that, creating a visual masterpiece for your clients. Unfortunately, while your clients will have a gorgeous site, that alone does not guarantee that their leads (in the form of web traffic) will find them and buy their products or services from them.

That’s why it’s crucial for you to master these vitals for your clients. At the end of the project, they’re counting on you not just to craft an aesthetic platform but, just as importantly, to give them an advantage in the SERPs through organic search.


Products Seen In This Post:

Launch with confidence.


Download your checklist

img

Download your checklist

A handy checklist for your new site

Check off these items before you go live and make sure that your visitors get the best possible experience.

No Comments

You must be signed in to post a comment.

Made with Creative Market

Browse a gallery of inspiration made with design assets from Creative Market.

Explore the Gallery →

Meet the Creative Market Authors

Learn more about the talented writers behind the articles.

Meet the Authors →

Download Our FREE Branding eBook

Get a FREE, fun, and friendly guide to design your own brand.

Get your eBook →