Web Performance & Web Vitals - Develop - Design System

Providing a great experience for our customers is essential to us, and having a fast website is a crucial part of that. It affects how users perceive our site and has an impact on our business metrics. Many case studies have shown the importance of fast web performance, such as those found on WPO Stats.

As UX expert Jakob Nielsen emphasizes with his quote:

"A snappy experience beats a glamarous one, for the simple reason that people engage more with a site when they can move more freely and focus on the content instead of their endless wait."

#Goals

#Good Performance

We define a good performance as the psychological thresholds where a user does not experience any annoying delays. We base ourselves on long established performance values (see Nielsen Norman Group guidance).

100ms >> the threshold for humans to percieve delay
1000ms >> the theshold for humans to percieve a waiting period

We should achieve a performance that matches psychological threshold for a great usability.

#Bad Performance

Google and the Core Web Vitals set performance standards that affect our SEO ranking. SEO ranking is important for our business, so we have a second objective that we must achieve. Google uses metrics like Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS) to determine rankings. If our competitors have similar relevancy, page experience can be the deciding factor.

We must achieve "good" ratings on all Core Web Vitals metrics measured by Google to avoid penalties on SEO rankings.

#Treshold Values

	LCP	INP	CLS
Good	<1000ms	<100ms	<0.1
OK	<2500ms	<200ms	<0.1
BAD	> 2500ms	>200ms	>0.1

See key metrics section for explanation of the metrics.

#Key Metrics & Best Practices

We have specific metrics to measure the performance of our pages and components. These metrics fall into three categories: Initial Load, Interactivity and Layout Stability. We also have guidelines and best practices to improve each of these metrics, which are customized for our technology stack.

#Initial Load

Initial Load metrics measure how long it takes for our shop to display relevant content to the user on their first request. The largest contentful paint metric measures the time it takes for the largest element to be displayed, which is often the first thing users notice. For pages with a lot of text and content but no large central element, the first contentful paint metric is often more useful.

Largest Contentful Paint (LCP)

#Interactivity

Interactivity metrics focus on how quickly our shop responds to user interactions. Interaction to Next Paint measures the time it takes for the shop to react to an interaction and display something, even if it's just partial information or loading states. The client navigation duration measures how long it takes for the shop to display the content on the next page after a user clicks on a link.

Interaction to Next Paint (INP)

#Layout Stability

The cumulative layout shift as a layout stability measure which measures how stable our layout is without user interactions while the page renders.

Cumulative Layout Shift (CLS)

#Responsibilities

#Page Performance

Performance is measured at the page level. The page owner is responsible for ensuring the performance of the page. They may fix issues themselves or instruct teams to fix component issues.

The page owner also holds the responsibility to prioritise how fast a page should respond, based on importance of the page to the user journey and commercial value.

Each team must ensure a good / ok performance for their pages.

#Component Performance

Some performance metrics can be measured at the component level. If a component is used on multiple pages owned by different teams, it is collaborative behavior for the component owner to monitor and ensure good performance. If a page owner requests a performance improvement, the component owner must take action.

Each team should ensure a good / ok performance for their frontend components.

#Application Performance

In addition to team ownership, there is the framework team who is the owners of the shop frontend application where they ensure application-level performance. They act as facilitators and last resort.

#External Resources & Courses

Both the Chrome Team (web.dev) and the Mozilla Firefox Team (MDN) provide very good and also very detailed resources and courses on web performance. In case you want to dive deeper into the topic of web performance in general take a look at their resources: