How do you know if you’re delivering a quality user experience on your website? You’re probably tracking a number of website metrics already, but you might also consider monitoring Google’s Core Web Vitals to get a better idea of your website’s performance. Below, we’re taking a closer look at what Core Web Vitals are and how you can use them to improve your website optimization.
- What Are Google’s Core Web Vitals?
- Why Do Core Web Vitals Matter?
- How Can You Track & Measure Core Web Vitals?
- How Can You Improve Core Web Vitals?
What Are Google’s Core Web Vitals?
Core Web Vitals are particular factors that Google considers essential to a webpage’s user experience. Factors like mobile-friendliness, HTTPS, and website content are obviously still important, but Google has also identified three elements that carry additional weight: Loading, Interactivity, and Visual Stability.
Loading (Largest Contentful Paint)
When users click on your link, they don’t want to have to wait for all of the content to appear. Largest Contentful Paint (LCP) measures the amount of time between activating a link and seeing the majority of the page’s content, which should be under 2.5 seconds. If you stay at or under that threshold, users are 24% less likely to abandon the page. If it takes longer than four seconds, you need to make some serious webpage adjustments to really bring site speed back down. It’s recommended that you run website speed tests on multiple devices to ensure your pages are loading quickly, regardless of the device being used.
Interactivity (First Input Delay)
First Input Delay (FID) tracks the time from when a user first interacts with a page to the time when the browser is able to respond to the interaction. Examples of interactions include clicking a link, entering text in a field, choosing an option from a menu, and more. To provide a good user experience, sites should strive to have a First Input Delay of less than 100 milliseconds (ms). An FID of more than 300 ms is a warning sign that elements are too slow to respond and user experience is faltering. Fortunately, FID isn’t as critical on content-heavy pages where the user’s main interaction is typically just scrolling.
Visual Stability (Cumulative Layout Shift)
There are few things more annoying than loading a webpage and attempting to interact with it only to have page elements “jump” on you, such as images shaking, ads showing up, and buttons moving to places they weren’t before. This agitating unexpected layout shift greatly hurts page experience, and Google is less likely to recommend pages with poor visual stability. That’s why Google has determined that pages should maintain a Cumulative Layout Shift (CLS) of less than 0.1 and no more than 0.25.
Why Do Core Web Vitals Matter?
Core Web Vitals help you measure your website’s user experience on a page-by-page basis. Not all webpages are going to be the same, so you need to ensure each delivers an excellent user experience, as this can help you stay in good positions in SERPs. From what experts have seen, Google favors webpages with:
- User-friendly experiences
- Short load times
- Excellent desktop and mobile experiences
- Page stability
By maintaining a website that adheres to the best practices set out by Google—whether that’s tracking metrics like bounce rate, pages visited, average time on page, and others—along with Core Web Vitals, you can put your website in the best position to succeed.
How Can You Track & Measure Core Web Vitals?
There are all kinds of free tools you can use to monitor Core Web Vitals, check website speed, look at website responsiveness, and more. Here are just a few of the options available:
- Core Web Vitals Report: The Core Web Vitals report displays URL performance grouped by metric type, status, and URL group. URLs are separated into Poor, Needs Improvement, and Good tabs to help you understand which pages are performing well and which need to be addressed.
- Chrome User Experience Report (CrUX): CrUX allows you to track user experience and performance metrics. These are real-world experiences from actual users, not tests in simulated environments, so they provide helpful insights into website performance.
- PageSpeed Insights: This tool analyzes page performance and gives you a score between 0-100 based on website optimization best practices. It also provides recommendations on how to improve your score and provide a better user experience.
- Lighthouse: An open-source platform, Lighthouse examines both public and private webpages and audits for website performance, accessibility, progressive web apps, SEO, and more.
How Can You Improve Core Web Vitals?
If your website isn’t meeting the recommend Core Web Vitals benchmarks mentioned above, there are several ways you can optimize your webpages and improve user experience for each of the Core Web Vitals.
Loading (Largest Contentful Paint)
- Remove unnecessary third-party scripts. Scripts embedded from third-party vendors, such as widgets, analytics, and ads, can slow down a page by 34ms.
- Cache assets. Store content in temporary storage to allow the content to load more quickly and increase site speed.
- Upgrade your web host. The more powerful your host, the better page’s loading speeds. Check out web hosts like Amazon Web Services, WP Engine, Dreamhost, and SiteGround.
- Set up lazy loading. By loading non-essential assets only when they’re needed, lazy loading decreases initial page payload and load time without weakening the content.
- Remove large page elements. Several hi-res images and videos will increase page load time. Google PageSpeed Insights can help you identify large files slowing your page speed down.
- Minify your CSS. You can include an appropriate plugin to minify CSS files on every page.
Interactivity (First Input Delay)
- Minimize or defer Javascript. Reduce Javascript execution time by compressing your code, removing unused code, and reducing network trips by caching your code.
- Use a web worker. Web workers cut down main thread blocking time by running JavaScript on a background thread.
- Remove non-essential third-party scripts. Many website themes and plugins include unnecessary scripts your site doesn’t need that can also hurt page performance. Remove them.
- Employ a browser cache. By storing some files locally, caching increases browsing speed.
Visual Stability (Cumulative Layout Shift)
- Include dimensions for any media. Define how large you want videos, images, GIFs, infographics, and other visual elements to be. While responsive web design accounts for resizing images across devices, it’s best to manually set parameters to ensure a consistent experience.
- Place ad elements in a reserved space. Statically reserve space for an ad slot so it doesn’t push your content down the page or to the side.
- Preload web fonts. Shifting between fonts and invisible text can affect font size and line-height. Preload web fonts that are needed immediately.
Need help checking Core Web Vitals and improving your website’s overall user experience? Hurrdat Marketing offers web design services and search engine optimization services. Get in touch with us today!
