Your roadmap to improve Core Web Vitals. Recommendations from Google

This is the second in a series on improving CWV performance metrics.

Previous article:

Getting started with Core Web Vitals optimizations. Motivation

Photo by Gabrielle Henderson on Unsplash

Once we have decided that we want to start working on improving performance metrics, we need a plan to move towards the goal. First, you need to track in some way that making the fix actually has a positive impact on performance. This means that work on improving CWV metrics must start with measuring them.

Having introduced the mechanism for measuring metrics, it will be possible to proceed to the implementation of some tips, the use of which will improve the values of the metrics. Google offers some ready-made tips for optimizing CWV metrics. There are quite a few of them, so I tried to group them according to their impact on each performance metric.

The idea is that you can use the lists below as a checklist and mark the items for yourself that you are not doing. It is important to take into account the specifics of your project, since some of the tips are better suited only for pages that receive traffic from search results.

For example, you can use the notation:

• 🟢 — already implemented
• 🟡 — partially used
• 🔴 — not implemented
• ⚫️ — not applicable (irrelevant to the specific project)

The tips are divided into different groups, most of which have a link to a detailed description.

Largest Contentful Paint (LCP)

Perceived page loading speed.

Slow server response times

• Optimize Server-Side Rendering (SSR) performance (including server calls for data)
• Route users to a nearby CDN (Content Delivery Network)
• Cache assets (e.g., using response header settings in Nginx)
• Use Service Worker for caching
• Establish third-party connections early through content preloading (with special HTML tags)
• Use signed exchanges (SXGs) (for websites receiving the largest traffic from Google Search results)

Render-blocking JavaScript and CSS

• Reduce CSS blocking time
  – Minify CSS
  – Defer non-critical CSS
  – Inline critical CSS
• Reduce JavaScript blocking time
  – Use all the above tips for CSS
  – Minimize unused polyfills

Slow resource load times

• Optimize and compress images
• Preload important resources
• Compress text files (e.g., using Gzip)
• Use adaptive serving (deliver different assets based on a network connection)
• Cache assets using a Service Worker

Client-Side Rendering

• Minimize critical JavaScript
• Use SSR
• Use pre-rendering️

First Input Delay (FID)

Page interactivity.

The high impact of third-party code

• Reduce the impact of third-party code

Reduce JavaScript execution time

• Only send the code that your users need by implementing code splitting
• Minify and compress your code
• Remove unused code
• Reduce network trips by caching your code with the PRPL pattern

Minimize main thread work

• Script evaluation
  – Optimize third-party JavaScript
  – Debounce your input handlers
  – Use Web Workers
• Style and layout
  – Reduce the scope and complexity of style calculations
  – Avoid large, complex layouts and layout thrashing
• Rendering
  – Stick to compositor only properties and manage layer count
  – Simplify paint complexity and reduce paint areas
• Parsing HTML and CSS
  – Extract and inline critical CSS
  – Minify CSS
  – Defer non-critical CSS
• Script parsing and compilation (similar tips are used in the “Reduce JavaScript execution time” section above)
  – Only send the code that your users need by implementing code splitting
  – Remove unused code
• Garbage collection
  – Monitor your web page’s total memory usage

Keep request counts low and transfer sizes small

Cumulative Layout Shift (CLS)

Visual stability.

Optimize for loading images

• Use width and height image attributes to generate CSS aspect-ratio
• Add srcset for responsive images

Ads, embeds and iframes without dimensions

• Statically reserve space for the ad slot
• Take care when placing non-sticky ads near the top of the viewport (avoid the whole page’s shift after asynchronous loading of an ad)
• Avoid collapsing the reserved space if there is no ad returned when the ad slot is visible. Show a placeholder
• Eliminate shifts by reserving the largest possible size for the ad slot, or choose the most likely size for the ad slot based on historical data

Dynamic content

• Avoid inserting new content above existing content, unless in response to user interaction. This ensures any layout shifts that occur are expected

Web fonts causing layout shifts

• Use font-display
• Use Font Loading API to reduce the time it takes to get necessary fonts
• Use tags for preloading

Animations

• Prefer to transform animations to animations of properties that trigger layout changes

Although it contains only the key tips, the list is rather long. Some tips for LCP and FID improvement are repeated. We also mention that this is only a list of general guidelines. You can find out more details specifically for your project by running tools such as Lighthouse.

Thus, a general plan for improving the metrics was drawn up:

1. introducing CWV monitoring system
2. studying the Lighthouse reports and placing marks (🟢, 🟡, 🔴, ⚫) ️in the list of recommendations above
3. implementation of recommendations with marks 🔴, 🟡
4. observing changes in the values of CWV metrics

Additionally, you can monitor not only the change in performance metrics, but also in conversions.

In the next article, we will move on to describing the experience of implementing the plan on a specific project, starting with CWV metrics monitoring system.