Take an agile approach to fixing Core Web Vitals

Most web development shops have adopted an agile methodology to deliver websites and applications. Agile takes complex problems and breaks them down into manageable chunks to release incremental changes. This approach allows teams to get smaller wins while advancing toward the larger goal. It is the ideal approach to fixing Core Web Vitals.

Clearly state the results you expect in your theme

The theme is a grouping of smaller epics that together drive towards a common goal. To address Core Web Vitals, the theme delineates the performance problem and identifies requirements for achieving a Good Page Experience rating in Google Search Console.

To accurately assess a page, your theme should compare a real-time audit against the 28-day rolling aggregate score recorded in the Chrome User Experience Report or CrUX. By comparing this data, you can determines if your page passed, failed, regressed, or needs to be validated. The theme summarizes the actual situation and the expected result. Each of these evaluations require a different response.

Example theme from Waterfaller

Using the CrUX data for this page, the problem is that:

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

To get a Good Page Experience rating from Google, this page must pass all 3 requirements.

Divide your theme into manageable epics

Core Web Vitals is too large a problem to be tackled (counter to what some claim). An epic is a collection of user stories that roll up to the broader theme. Using epics, you can identify separate goals to improve LCP, FID, and CLS. The result is a helpful hierarchy of work.

 1├── Theme for Core Web Vitls
 2│   ├── Epic for Largest Contentful Paint
 3│   │   └── Story
 4|   |   ├── Story
 5|   |   ├── Story
 6|   |   ├── Story
 7|   |   ├── Story
 8|   |   └── Story
 9│   ├── Epic for Cumulative Layout Shift
10│   │   └── Story
11│   ├── Epic for First Input Delay
12│   │   └── Story
13|   |   └── Story

Write testable user stories

A story (sometimes called a task or issue or ticket) is the smallest unit of work in agile. In an agile framework, stories roll up to epics which then roll up to the broader theme. For webpage performance, stories focus on predictable improvements.

Stories are added to backlogs, planned in meetings, and worked on during two-week sprints. Epis are completed when all stories are done. They follow a standard formula,

As a user, I want to do something to achieve a measurable result.

In my experience, it is best to write stories that can be measured by counting not by timging. An example of a ineffective story is...I want to load background image file in 200ms. A more testable story is...I want to load the background image in less than 18 kilobytes. This can be tested with a simple yes or no answer. Testing if a file loads in 200ms is not easy and depends on many factors like device and connection speed. Tests that can be counted result in predictable outcomes.

Guarantee that 100% of all your URLs pass Core Web Vitals

While improving CVW is not easy, boosting Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift can be planned. And so expectations can be set that 100% of all your URLs can pass Core Web Vitals, if you use an agile approach, write good themes, epics, and stories, and plan a two-week sprint.

If you do it right, you will know exactly what to expect when you are done. Communicate these expectations to your stakeholders, and you will level up your website's Core Web Vitals. And in the process you will add a new skill for your career.