What are Web Vitals? Are they important? How to measure them and how to optimize them? We are going to answer all of these questions in this post.

The Web is suffering:

Let’s make a statement to begin. We are sending more and more kilobytes to users. According to HTTPArchive report, the median mobile webpage is 1900 KB! Comparing to 2011, we are hitting a 1200% evolution. That’s crazy!

What about JavaScript Kilobytes? Same trend. The median mobile web page sends 414 KB of JS. With a 700% evolution in comparison to 2011. According to the Web Almanac report, 37% of shipped JavaScript is UNUSED.

The Web is suffering..isn’t it? Your users, business too!

Slow website causes stress to users:

Bad user experience can cause bad feelings such as stress and anger. Many conducted studies showed that link! In 2010, Foviance conducted an EEG study that concluded that slow website users concentrate harder.

Measuring Alpha waves (an indicator of the level of relaxation a human has), showed that they depress by half when using a throttled (slow) website. Users had to concentrate 50% harder to achieve the same steps!

Other studies showed similar results. Simon Hearne published an aggregation of them in this post.

Web stress is a real thing!

Put yourself in the user’s shoes. If a website causes you anger and stress, would you appreciate the experience? Will you like the brand? Will you stay loyal to the brand? No!

Low performance can seriously undermine brand/business health, reputation and value.

We should all work to improve the Web:

Web performance is not only the work of developers. It is every web worker subject!

Product Owners should include web performance when writing user stories;

Marketing people should talk about web performance and be sensitized about its importance;

Designers should consider design choices on web performance;

SEO needs to work on web performance to provide a better user (and robots experience);

Site owner should prioritize web performance issues;

Hosting and cloud providers should improve performance to reduce costs;

Web browsers should implement tools and share best practices to help with performance;

Smartphone brands should benchmark and provide ways to speed up stuff;

CEOs should understand the impact of slow performance and prioritize topics;

Framework builders should measure, optimize how they run;

Search engines need to educate site owners, SEOs, and webmasters to make the web faster;

QA analysts should add web performance tests;

Internet providers should work to make things better;

Third-party providers need to optimize their bundles and scripts;

Web performance is complex:

But..Web performance is difficult to understand..

someone

Web performance may appear difficult, so technical, and confusing to many of us. It is not a problem. The Web has never been easy and it is part of our lives. And I believe that difficulty comes mainly from the changing nature of web systems, technologies, and approaches.

Many new development languages, frameworks are appearing and gaining popularity. On the non-technical side, project management methods and frameworks are evolving and moving.

Web performance tools and metrics have multiplied making the task more difficult in the majority of cases.

Google itself has 7 tools for measuring Web performance. Metrics are problematic for several reasons:

  • Metric definition : What does it measures? Metric type.
  • Is it measurable ?
  • Is it objective?
  • Is it easy?
  • Is it useful?
  • Is it representative of user experience?
  • Is it easy to understand to business owner?

In addition, at every stage of the Web performance process, I personally struggle to choose the right 4 or 5 metrics that are representative, sufficient, and not “too much”.

Web Vitals or how Google is trying to make things simpler:

With Web Vitals, Google tries to simplify things with these 3 metrics. The goals of this simplification are:

  • Unified target metrics : Almost everyone is talking about the same thing
  • Unified guidance : Community shares the same best practices on measuring, interpreting and optimizing
  • Unified evaluation basis: Talking the same language allows us to compare to others and allows Google to evaluate websites on the same criteria
  • Web Vitals provides also a basic but good representation of user experience

How to measure Web Vitals?

There are two ways to measure web performance and Web Vitals. Lab synthetic tools and field (Real User Monitoring) tools

Lab tools:

They are good for debugging and measuring performance in controlled environments. Often it is a loading of the page with a browser tuned with emulated conditions. Lab tools don’t reflect what real users are facing.

  • Google Lighthouse
  • Chrome DevTools
  • web.dev measure tool
  • WebPageTest
  • DebugBear
  • SpeedCurve
  • PageSpeedInsights

Field tools

They are excellent to capture real-life user experience. Usually, they confirm and deny the trend seen on lab tools. However, field tools are not suitable for debugging performance issues.

  • Chrome User Experience Report (CrUX)
  • Google Search Console
  • Google Analytics
  • PageSpeedInsights

Largest Contentful Paint – LCP

Largest Contentful Paint (LCP) is one of the most important user experience and web performance metrics. It measures the loading performance.

Cumulative Layout Shift – CLS

Cumulative Layout Shift (CLS) is one of the most important user experience and web performance metrics. It measures the layout stability of a web page.

First Input Delay – FID

When Largest Contentful Paint is for loading performance, Cumulative Layout Shifts for visual stability, the pair “Total Blocking Time/First Input Delay” is for page interactivity and responsiveness.

Web Vitals optimization workflow

I always tell my clients that web performance is not a “one-shot project”. And as long as you keep building features, you need to consider performance at every step. To succeed in Web performance, we have to stick to a workflow.

For optimizing existing pages the main steps are

  • Audit in with lab and field tools to see where we start
  • Identify issues and opportunities per page type
  • Write atomic and clear user stories
  • Implement & test 1 optimization at a time in lab
  • Deploy
  • Monitor the impact in the field (PagSpeedInsights gives last 28-days data and CrUX gives monthly data at second Tuesday of each month)
  • Repeat and iterate.

Remember to show and share the results with the stakeholders to keep the Performance a subject on the table!

Final notes:

Web Vitals are a good representation of what users are experiencing on the Web. Stills the beginning of a long journey and we are experimenting with these metrics in real life. Web Vitals are and will evolve over time. What matters the most is continuously improving websites quality. Don’t do Performance for SEO, do it first for users.

Subscribe to my Performance Recipes newsletter

Categories: Resources

Leave a Reply