Amazing 5 Core Web Vitals for Optimal Website Performance

Website performance is key to delivering a smooth user experience and driving results. A big part of this is improving Core Web Vitals. These Google-introduced metrics focus on how users experience loading, interactivity, and visual stability on a webpage.

What are Core Web Vitals for Optimal Website?

Google’s Core Web Vitals are essential metrics for a healthy website. They measure how user friendly a website is based on load time, visual stability, and interactivity. Pages that perform well on this set of metrics provide a great user experience, which can reduce bounce rates and improve website performance.

Core Web Vitals Metrics

There are three core web vitals. The other metrics supplement these and help provide a good user experience or diagnose a specific issue.

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) is a core web vital that measures how long it takes for the biggest visible element on a webpage to load. Ideally, every page on your site will load the LCP within 2.5 seconds.

LCP Issues

At Visibility SEO Writing, we know how important LCP is. It measures how long it takes for the main part of a page, like a big image or text block to show up.

If the server takes too long to load the first piece of HTML, the LCP score can drop into the “bad” range.

Why does this happen? Here are the main reasons:

Slow server response times due to budget hosting

Slow server response times can hurt your LCP (Largest Contentful Paint) score. This often happens with shared hosting or crowded servers. When the server is slow, the main parts of your page take longer to load. That delay causes a chain reaction, slowing down the rest of the content.

WordPress sites are dynamic, meaning they pull content from a database. If the server hosting the database is slow, it takes longer to load your page’s biggest element. This drags everything down.

Cheap hosting can also harm your Time to First Byte (TTFB), the time it takes for your server to send the first piece of data to the browser. A slow TTFB often leads to a bad LCP score.

On shared hosting, resources like CPU and RAM are split between many websites. If your site doesn’t get enough of these resources, it won’t load as quickly as it should.

Render-blocking JavaScript and CSS introduced by certain themes and plugins

Render-blocking resources are scripts and stylesheets that stop a web page from loading until they’re fully processed. This slows things down.

When WordPress themes or plugins add elements that block rendering, it delays how fast the main content appears. This can hurt your website’s performance and cause it to fail the LCP (Largest Contentful Paint) test.

For WordPress sites, simple is better. The trick is finding a balance between how your site works and how fast it loads. That’s the key to passing Core Web Vitals and keeping your site running smoothly.

Unoptimized images

According to the Web Almanac, “72% of mobile pages and 82% of desktop pages have images as their largest content.”

High-quality images often have large file sizes. If they’re not optimized, they take longer to load because they need more data. This can slow down your website.

Unoptimized images can also cause other problems. Some browsers may struggle to display certain image formats or need extra processing to decode them. This adds more time to how long it takes your page to fully load.

Techniques to Improve LCP

Largest Contentful Paint (LCP) is one of the hardest Core Web Vitals to fix. We see it all the time at Visibility SEO, 40% of websites in the Chrome UX Report fail to meet the LCP benchmark for a good user experience.

That’s a big deal because slow loading times frustrate users. The good news? The Chrome team has shared some clear tips to improve LCP. These are the strategies we recommend to our clients to make sites faster and keep visitors happy.

Ensure the LCP resource is discoverable from the HTML source and prioritized

What We’ve Learned About LCP (Largest Contentful Paint):

- Most LCP elements on mobile pages are images. About 73% of mobile pages have an image as their LCP element, according to the 2024 Web Almanac.
- Slow loading is a big issue. On sites with poor LCP, less than 10% of the loading time is spent downloading the LCP image, but delays on the client side add over 1,290ms more than half the time needed for a fast load.
- HTML matters. 35% of these images can’t be found in the initial HTML, which delays loading. Simple fixes that can help

  <img src="...">

<link rel="preload" href="...">

- Prioritizing images works. Only 15% of eligible pages use the fetchpriority attribute to load important resources faster, but it makes a big difference.

What Can You Do?

If your LCP is an image, make it easy for browsers to find and load it early. Here’s how:

- Use <img> with src or srcset. Avoid attributes like data-src that need JavaScript to work, they’re slower.
- Use server-side rendering (SSR) instead of client-side rendering (CSR) so images are in the HTML.
- Preload images with <link rel=”preload”> if they’re in CSS/JS files. Inline styles don’t work with the browser preload scanner.

Speed Things Up:

- Add fetchpriority=”high” to or preload tags.

<img fetchpriority="high" src="/path/to/hero-image.webp">

- Remove loading=”lazy” from the LCP image. Lazy loading delays image display.
- Defer non-essential resources like lazy-loaded images or iframes to keep the focus on the LCP image.

At Visibility SEO, we help clients understand these issues and make their sites faster. If you want to improve your LCP and SEO, let’s chat!

Aim for instant navigations

The best user experience means never waiting for a page to load. LCP (Largest Contentful Paint) optimizations like prioritizing resources can help, but there’s only so much you can do to speed up loading times. At some point, making pages even faster takes too much effort for too little gain. To achieve instant loading, we need a new approach.

Instant navigation works by loading pages before you click on them. This way, the page shows up immediately, with almost no LCP delay. There are two main ways to do this: restoring and prerendering.

Restoring works for pages you’ve already visited. It uses something called the back/forward cache (bfcache) to quickly bring back the page as you left it. But to use bfcache, your pages must meet certain rules, like avoiding no-store caching or unload event listeners. Restoring pages doesn’t just load them faster, it also helps with layout stability.

Prerendering is used to prepare the next page you’re likely to visit. However, guess wrong, and you waste time and resources. That’s why it’s important to use data, like analytics, to predict where users will go next.

Both restoring and prerendering can dramatically improve loading speed and user experience when done right.

Use a CDN to optimize TTFB

Sometimes, instant navigation techniques like bfcache and speculative loading don’t work, especially when users click cross-origin links. For example, when someone visits your site, and the HTML response delays loading the page’s key elements (like images or text), it causes a slow experience. This delay is called “Time to First Byte (TTFB)” the time it takes for the browser to get the first byte of data from your server.

To fix this, the two best strategies are:

1. Serve your content from servers close to your users.
2. Cache your content so it loads faster next time.

The easiest way to do both is by using a Content Delivery Network (CDN). CDNs store your files on servers all over the world, reducing how far data has to travel to reach users. They also let you control caching for your site. Surprisingly, only 33% of sites currently use CDNs for HTML, meaning there’s a big chance to improve performance.

Here’s how to make the most of CDNs:

- Cache static HTML, even for a short time. Decide how fresh your content needs to be.
- Consider moving dynamic features to the edge (servers closer to users).

Every time you serve content from the edge instead of your main server, your site gets faster. Even if the CDN still connects to your origin server, it does it faster than most regular setups. With better speed, your users stay happier and that’s what we, as an SEO agency, love to see.

Interaction to Next Paint (INP)

Interaction to Next Paint (INP) measures the time between a user’s action, like clicking or typing, and the next visual update on the screen. It shows how responsive a webpage is to users.

INP Issues

A blocked main thread is one of the main reasons websites feel slow. When too much work gets piled up on the main thread, it makes users wait to interact with the site. That wait? It’s the lag you notice.

Here at Visibility SEO, we see this issue all the time. It’s a common problem that hurts user experience and INP scores. So, what’s causing it? These are the resources that usually block the main thread. Let’s take a closer look.

Heavy JavaScript execution

Heavy JavaScript can slow down how quickly a website reacts when you click or type. Why? Because JavaScript uses the main thread in your browser, which also handles important tasks like processing your actions. If the browser is busy running a lot of JavaScript, it can’t respond right away to what you do. This delay happens because JavaScript doesn’t share the thread, it hogs it.

Poor resource prioritization

Not all website resources are equally important for what you see or do first. If unimportant stuff gets loaded before the important things, it can slow down the page and make it harder to use.

This happens because the main thread is too busy with unnecessary tasks. When resources are loaded in the right order, the website stays fast and responsive. It focuses on what matters most to the user, giving a better experience and keeping interaction delays low.

Running excessive amount of third-party scripts

Third-party plugins can slow down your web pages. These plugins, like scripts, analytics tools, ads, or widgets, add extra tasks for your website to handle.

Many of these plugins aren’t built for speed. For example, analytics or ad tools might not load efficiently, causing your site to lag. Some use too much JavaScript or come with large files that take longer to load.

There’s another problem, too. These plugins often rely on other servers. If those servers are slow to respond, your website will be slowe,r too.

Having large DOM size

The Document Object Model (DOM) is like the blueprint of a web page. It turns an HTML document into a tree structure, where each branch ends in a “node.” These nodes represent different parts of the page like text, elements, or comments.

The DOM is super important for how a web page works. But if it gets too big, it can slow things down. Why?

Because the bigger the DOM, the harder it is for a browser to load and display the page quickly.

Here’s the deal: to keep your web pages fast and responsive, the DOM should stay small and only include what’s necessary.

So, what does “necessary” mean? According to Lighthouse, a DOM with more than 1,400 nodes is considered too large.

Techniques to Improve INP

Interaction to Next Paint (INP) is one of the newest Core Web Vital metrics. It has big room for improvement, but it’s trickier than older metrics. Most websites aren’t meeting the “good” score yet. This makes sense because INP is harder to optimize compared to its older version, FID (First Input Delay).

If you’re just starting to learn how to make interactions faster and smoother, you’re not alone. We know it can feel overwhelming at first. That’s why we’ve broken it down into easy tips. These must-know techniques will help you improve INP and make your site more responsive. Let’s dive right in!

Yield often to break up long tasks

Tasks are the small jobs your browser handles, like showing a webpage, organizing its layout, reading the code, or running scripts. If any task takes more than 50 milliseconds, it’s called a long task. Long tasks can be a problem because they block the main thread, making the page slow to respond when you click or type.

To fix this, try to keep JavaScript work as short as possible. You can also break long tasks into smaller parts. This gives the browser time to catch up with things like showing updates on the screen or reacting to user actions faster.

By breaking tasks into smaller pieces, you give the browser more chances to handle important work quickly. This keeps everything running smoothly for the user.

Avoid unnecessary JavaScript

Websites today are loading more JavaScript than ever before, and this isn’t slowing down. The problem? Too much JavaScript can make your website less responsive, especially when it’s just loading up. It’s like having too many tasks fighting for attention on the main thread. This can lead to a poor user experience.

But don’t worry, there are ways to fix this:

- Use built-in web features instead of adding extra JavaScript that does the same thing.
- Check for unused code in your scripts. By cutting out what you don’t need, pages will load faster and run smoother.
- Split up your code. Keep only the important parts for the first load. Save the rest for later.
- Clean up your tag manager regularly. Remove old or unused tags to cut down on extra code.

By taking these steps, you can make your site faster, smoother, and more enjoyable for everyone.

Avoid large rendering updates

JavaScript isn’t the only thing that affects how fast your website responds. Rendering, which is how the browser updates what you see on the screen, can also slow things down. If there’s a big rendering update, your website might feel even slower when someone tries to click or scroll.

Improving rendering isn’t always simple. It depends on what you’re trying to fix. But here are some tips to stop rendering from slowing down your site:

- Organize your code so it doesn’t constantly force the browser to update layouts. Too many changes at once can cause something called layout thrashing, which makes everything lag.
- Keep your DOM small. When there’s too much stuff for the browser to process, it takes longer to figure out how to display everything.
- Use CSS containment to only load the parts of the site people actually see. This keeps the browser from wasting time on things off-screen.

By being smart about rendering, you can make your website feel faster and easier to use.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) tracks how much elements like images, text, or buttons move unexpectedly while a page loads. Lowering CLS makes the site easier to use and less annoying for visitors.

CLS Issues

When a page’s content moves around unexpectedly, it can make using the website annoying. We’ve all been there trying to click something, and suddenly it jumps! This is what happens when a page has a poor CLS (Cumulative Layout Shift) score. It can frustrate users, cause them to click the wrong thing, or even leave the site altogether.

Images inserted without set dimension

One simple but important step in web development is setting image sizes. Adding width and height to images isn’t just about making them look neat it keeps your webpage steady. Without these size details, the browser doesn’t know how much space to leave for the image. This can cause problems. When the image finally loads, it might be bigger than expected. Suddenly, it pushes nearby content around, creating messy shifts on the page. Simple fix: always define your image sizes!

Ad placements without reserved space

Do you use things like ads, videos, or other content on your web pages? Be careful, they bring some challenges.

One big issue is their size. If you don’t save space for these elements ahead of time, your page loads without knowing how much room they’ll need. This can cause problems when they finally appear.

For example, dynamic ads might end up being larger than the space left for them. When that happens, they push into other parts of the page. This makes everything shift around, which can be frustrating for users.

Unoptimized font delivery

Custom fonts make websites look unique and consistent with their brand. But they also come with some problems, FOIT (Flash of Invisible Text) and FOUT (Flash of Unstyled Text).

Here’s what happens: when custom fonts are being loaded, there’s a short delay. During this time, something strange can happen. FOIT makes text disappear until the font is ready. FOUT, on the other hand, shows the text using a basic fallback font until the custom one loads.

If the custom font looks very different from the fallback font, the text can shift around suddenly. This can be confusing or even annoying for someone trying to read or interact with it.

Techniques to Improve CLS

Most websites do pretty well with CLS, but about a quarter still don’t hit the recommended score. That means there’s a big chance for many sites to make their user experience better. Our experts see this as an opportunity. Improving CLS isn’t just about metrics, it’s about making your site smoother and easier for real people to use. Let’s fix it together!

Set explicit sizes on any content loaded from the page

Layout shifts happen when content moves around as the page loads. To fix this, reserve space for elements before they load.

For images, always set their width and height or use CSS to define their size. Without these, images start with a height of 0px, causing the page to jump when they load. This is a common issue 66% of pages have at least one image without a size, but it’s easy to fix.

img {
  width: 100%; /* or max-width: 100%; */
  height: auto;
}

Images aren’t the only problem. Ads, videos, or other content that loads later can also cause shifts. Using the “aspect-ratio” property helps by letting browsers calculate height automatically based on width.

video {
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

If you don’t know the exact size of dynamic content, set a “min-height.” This prevents elements from starting at 0px height and reduces shifts while still allowing the content to grow as needed. It’s a simple fix for smoother pages!

img {
  min-height: 50px;
}

Ensure pages are eligible for bfcache

The back/forward cache (bfcache) is a browser feature that makes pages load instantly when you go back or forward in your browser history. It works by saving a snapshot of the page in memory. This not only speeds things up but also stops layout shifts completely. When the bfcache was introduced in 2022, it led to the biggest improvement in layout stability that year.

However, many websites can’t use the bfcache because they aren’t set up for it. This means they miss out on a simple way to boost performance. Unless your page has sensitive information that shouldn’t be stored, you should make sure your website can use the bfcache.

Check if your pages are eligible for the bfcache and fix any issues. Chrome has tools in DevTools to help you test this. You can also use the Not Restored Reasons API to find out why your page isn’t working with the bfcache. Making your site bfcache-ready is an easy win for better performance!

Avoid animations and transitions that use layout-inducing CSS properties

Animation can often cause layout shifts, like when cookie banners slide in from the top or bottom. These shifts happen when the banner pushes content around, but even animations that don’t move other content can still impact CLS (Cumulative Layout Shift).

Data shows that pages with animations affecting layout are 15% less likely to have a “good” CLS score. Animating properties like margins or border widths makes CLS worse, with these pages having poor scores almost twice as often as others.

This happens because animating layout-related CSS properties causes layout shifts. If these shifts occur more than 500 milliseconds after a user interacts with the page, they add to CLS. Surprisingly, even absolutely positioned elements that animate top or left can cause shifts, even when they don’t push content. Instead, animating properties like transform:translateX() or translateY() avoids layout shifts since it doesn’t make the browser update the page layout.

#myDiv1 {
  transform: translateX(50px); /* moves the element 50px along the x-axis */
}

Stick to animating properties that work on the browser’s compositor thread, like transform. These are faster and improve CLS. Avoid animating layout-changing properties unless it’s tied to a user action, like a tap or key press. Avoid hover-triggered animations. Use transform for smoother animations and better performance.

Why are Core Web Vitals Important?

Strong Core Web Vitals make your site faster, smoother, and more responsive. This improves SEO, keeps visitors on your site longer, and increases the chance they’ll become customers. Faster-loading sites have lower bounce rates because people prefer websites that respond quickly. Google also uses Core Web Vitals in its rankings, so improving these metrics can help your site rank higher and attract more organic traffic. Focusing on Core Web Vitals leads to better page experience, more user engagement, and better business results.

Other Important Core Vitals to Measure

Besides the three metrics we’ve mentioned above, you should measure and optimize several other core web vitals to ensure optimal website performance and enhance user experience. Let’s explore these metrics in detail.

Time to First Byte (TTFB) – TTFB is the time it takes for a browser to get the first byte of data from the server after making a request. It shows how responsive the server is and affects how quickly a page loads.
Time to Interactive (TTI) – TTI measures how long it takes for a web page to start responding to user actions. It focuses on JavaScript execution, rendering, and resource loading to assess the page’s functionality.
Total Blocking Time (TBT) – TBT measures the time during page load when the main thread is blocked and can’t process user input. It tracks tasks like long JavaScript execution that affect interactivity and responsiveness.
First Contentful Paint (FCP) – FCP measures how long it takes for content to load and show on the screen. It tracks the time from the start to when the first visible part of the page appears, giving a clear picture of users’ initial experience.
First Input Delay (FID) – FID measures how quickly a website responds to user actions. An FID under 100 ms is good. You can measure FID with tools like PageSpeed Insights, the Chrome User Experience Report, or Google’s JavaScript libraries.

Best Practices for Improving Core Web Vitals

Improving Core Web Vitals is key to better website performance and user experience. Here are some straightforward strategies to improve your site’s metrics and make it run smoother.

Prioritize mobile optimization – With Google’s mobile-first indexing, The mobile version of the site takes priority. Ensure your site is responsive and offers a seamless experience on mobile devices to improve performance and rankings.
Leverage a Content Delivery Network (CDN) – A CDN speeds up your site by storing its content across multiple servers worldwide, reducing load times for users regardless of location.
Use preloading techniques – Preloading essential resources helps your page load faster by instructing the browser to fetch critical assets in advance, reducing delays.
Implement server-side rendering (SSR) – SSR improves page speed by delivering fully rendered pages to browsers, enhancing loading times and user experience.
Optimize font delivery – Speed up visual rendering by hosting fonts locally, compressing them, and using modern formats to minimize delays in font loading.
Regularly test and optimize your website – Monitor your site’s performance with tools like Lighthouse or CrUX to identify and fix issues, ensuring consistent optimization over time.

How to Fix Issues in Core Web Vitals

To further enhance your website’s performance and address any issues related to Core Web Vitals, consider implementing the following optimization strategies.

1. Analyze Your Website Performance

Use tools like PageSpeed Insights or Web Vitals Extension to check your site’s performance. These tools pinpoint what needs fixing, focusing on metrics like loading speed and responsiveness.

2. Optimize your images

Large images can slow your site. Compress them, resize for web, and use modern formats like WebP to speed up loading times.

3. Enable browser caching

Browser caching saves parts of your website in a user’s browser, cutting down the time it takes to load pages on repeat visits. This makes your site faster and more efficient.

4. Minimize CSS and JavaScript

Too much CSS or JavaScript can slow down your site. Minimize these files and enable lazy loading for JavaScript to keep things running smoothly.

5. Address layout shifts

Prevent unexpected layout changes by reserving space for images and videos with specified dimensions. Avoid inserting new content above existing elements unless triggered by user actions.

6. Sort issues by label

Fix “Poor” issues first, as these impact key pages the most. Then, tackle “Needs Improvement” items to improve site performance.

7. Make a list

Create a prioritized task list to guide your team. Focus on:

Reducing page size to under 500KB.
Limiting each page to 50 resources for mobile optimization.
Considering AMP for faster loading.

8. Share common fixes

Improve metrics like Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS):

Use faster servers and streamline resource loading for LCP.
Cut down JavaScript execution time to improve FID.
Set dimensions for visual elements to prevent layout shifts and improve CLS.

9. Monitor and adjust

Improving website performance is a continuous task. Track core web vitals, check updates in the Search Console Core Web Vitals report, and stay updated on SEO trends and algorithms.

Boost Your SEO with High Core Web Vitals Scores

Core Web Vitals are important for how Google ranks websites. If your site doesn’t follow best practices, it will rank lower than sites that do. While great content is still the most important factor, improving your Core Web Vitals can give you an edge.

At Visibility SEO, we know how competitive rankings can be. If your content is just as good as your competitors, focusing on Core Web Vitals could be the game-changer you need. A faster, smoother website isn’t just good for rankings, it’s better for your users, too. Let us help you make those improvements and stay ahead of the competition.

FAQs

How to measure Core Web Vitals?

To measure web vitals, use tools from Google like PageSpeed Insights, Search Console, and the Chrome UX Report. These tools track metrics like Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). Reviewing these metrics helps you spot issues and improve your website’s performance to create a better user experience and meet Core Web Vitals standards.

Does Core Web Vitals affect SEO?

Core Web Vitals affect SEO. In May 2021, Google made them a ranking factor for search results. Websites that perform well on these metrics can rank higher as they offer a better user experience. Improving your site’s Core Web Vitals can help increase its visibility and attract more organic traffic. Focusing on these metrics benefits both user experience and SEO.

What is the difference between PageSpeed Insights and Core Web Vitals?

PageSpeed Insights and Core Web Vitals are tools for understanding website performance, but they focus on different areas.

PageSpeed Insights: This Google tool measures a web page’s performance and gives actionable tips to improve speed and user experience. It checks things like server response times, caching, and file optimization. It evaluates both mobile and desktop performance and offers clear recommendations for improvement.
Core Web Vitals: These specific metrics focus on user experience. They include Largest Contentful Paint (LCP) for loading speed, First Input Delay (FID) for interactivity, and Cumulative Layout Shift (CLS) for visual stability. These metrics help ensure websites are fast, interactive, and visually steady.

What are Core Web Vitals’ thresholds?

Core Web Vitals have specific scores that show how well a website is doing. These scores are split into three groups: “good,” “needs improvement,” or “poor.”