Core Web Vitals (CWV) is a set of metrics designed by Google to measure essential aspects of web page performance. Better performing pages provide a better overall user experience and encourage higher rankings for websites in search engine results. You can test any web page using this free tool at https://pagespeed.web.dev/  I was asked recently to review a site for one of our clients.   I was struck that some of the information provided by CWV was directly actionable (e.g. reduce third-party javascript) whereas some items seemed more informational ( e.g. Largest Contentful Paint element).

The informational items give you something to improve but do not necessarily tell you what is holding up the LCP from loading quickly. I asked for a little help from AI in exploring this concept. Much of what is below is the result of that inquiry.

Overall CWV measures a web page's:

• Performance: Measures how quickly a site loads and responds, impacting user experience and engagement.

• Search Engine Optimization: Focuses on improving site visibility and ranking in search engine results to attract more organic traffic.

• Best Practices: Involves following industry standards and guidelines for web development to enhance security, speed, and usability.

• Accessibility: Ensures that websites are usable by all individuals, including those with disabilities, through inclusive design and functionality.

As our platform of choice, Joomla handles all four out of the box very well. In a typical build the one that tends to slip the fastest is Performance. Every bit of javascript or call to a third party service slows down website performance. Ironically using Google Services within a site tends to present some of the biggest challenges to page speed. Embedding a youtube video, using Google Fonts, Google Tag Manager, Google Analytics, and Google Ads all take a toll on site performance. In addition, other third party tools come into play. They can include things like Facebook or other social media platform integration, ad services, donation platforms, etc. all have an impact. Basically anytime you are adding javascript either directly on the site or pulled in from a third party you are introducing a performance problem.

There are strategies that can mitigate some of the problems. Google Fonts should be served from the same server that is hosting the website rather than serving them from Google. If you are building your website with Joomla's default Cassiopeia template you should create all of your CSS as SCSS and then process it when the site is ready to launch. Use of a CDN can also help greatly.

By focusing on how users experience a site, CWV metrics play a pivotal role in determining a site’s ranking and user satisfaction. However, understanding which Core Web Vitals metrics provide actionable insights versus those that primarily reflect resulting performance can help developers and website owners target improvements effectively. Let’s delve into each CWV metric and determine where actionable opportunities lie and where metrics serve primarily as performance reflections.

Key Metrics in Core Web Vitals

The three Core Web Vitals are:

1. Largest Contentful Paint (LCP)
2. First Input Delay (FID)
3. Cumulative Layout Shift (CLS)

Each metric represents a specific aspect of user experience, with some metrics pointing directly to actionable items and others showing outcomes that indicate the overall quality of user interactions.

Actionable Metrics in Core Web Vitals

These metrics not only provide insight into how users experience a site but also include areas where developers can make adjustments for measurable improvement.

1. Largest Contentful Paint (LCP)

   • What it Measures: LCP measures the time taken for the largest content element on the page (e.g., an image or block of text) to become visible within the viewport. Ideally, it should happen within 2.5 seconds for optimal user experience.
   • Why It’s Actionable: LCP is directly influenced by several controllable factors, making it a key metric for actionable improvements.
   • Actionable Items:
     • Optimize Server Response Time: Improve your backend infrastructure or consider using a Content Delivery Network (CDN).
     • Reduce JavaScript and CSS Blocking: Minimize, delay, or asynchronously load render-blocking resources.
     • Optimize Resource Load Times: Compress images, lazy-load non-critical elements, and prefetch important assets.

2. First Input Delay (FID)

   • What it Measures: FID measures the time it takes for a browser to respond to a user's first interaction (like clicking a button or link). A fast FID (under 100 ms) ensures a responsive experience.
   • Why It’s Actionable: High FID often points to JavaScript-heavy pages that lock the main thread and prevent it from responding to user actions.
   • Actionable Items:
     • Minimize JavaScript Execution: Break up long tasks, defer unnecessary scripts, and reduce third-party JavaScript.
     • Optimize Main Thread Work: Consider code-splitting, tree-shaking, or lazy-loading to decrease time spent executing JavaScript.
     • Reduce Impact of Third-Party Scripts: Remove or optimize third-party code to ensure it doesn’t block the main thread.

3. Cumulative Layout Shift (CLS)

   • What it Measures: CLS measures the visual stability of a page, scoring it based on unexpected layout shifts during page load.
   • Why It’s Actionable: CLS often occurs due to images without specified dimensions or dynamically loaded content that pushes other elements around.
   • Actionable Items:
     • Specify Dimensions for Media: Ensure images and videos have width and height attributes.
     • Use Placeholder Elements for Dynamic Content: Reserve space for ads, banners, or dynamic elements to prevent sudden layout shifts.
     • Improve Font Loading: Use font-display properties to prevent layout shifts due to font loading.

Metrics as Indicators of Resulting Performance

While the above metrics are often tied to actionable improvements, several other metrics serve primarily as indicators of resulting performance. These metrics reveal how well the site performs but generally require deeper investigation to identify the root causes of any issues.

1. Time to First Byte (TTFB)

   • What it Measures: TTFB measures the time taken for the browser to receive the first byte of data from the server after a request is sent.
   • Resulting Performance Indicator: TTFB reflects backend and network performance rather than frontend factors. While it's an indicator of how quickly the server responds, improving it might require server-level adjustments or a move to a more efficient hosting environment.

2. Total Blocking Time (TBT)

   • What it Measures: TBT is a lab metric (primarily used in tools like Lighthouse) that sums up the time during which the main thread was blocked for more than 50 ms. TBT correlates strongly with FID, providing insights into how long tasks block the main thread.
   • Resulting Performance Indicator: High TBT suggests that the page has long-running scripts. While it can point to areas where JavaScript optimization might be beneficial, it’s a secondary measure that mainly supports diagnosing FID issues.

3. Speed Index

   • What it Measures: Speed Index measures how quickly content is visually displayed during page load.
   • Resulting Performance Indicator: This is more of a visual performance metric than an actionable guide. It gives an overview of user-perceived load speed but doesn’t pinpoint specific optimization areas, so it’s typically used as a high-level summary of load speed.

Key Takeaways: Prioritizing Actionable Metrics

For developers aiming to improve Core Web Vitals, focusing on LCP, FID, and CLS offers the most actionable pathways. These metrics highlight specific areas, such as image optimization, JavaScript management, and layout stability, that directly impact user experience. Meanwhile, secondary metrics like TTFB, TBT, and Speed Index provide performance insights but don’t always yield direct solutions without further investigation.

When optimizing for Core Web Vitals, prioritize:

• LCP for faster page load,
• FID for interactivity, and
• CLS for layout stability.

These metrics not only reflect user experience but also offer clear, actionable strategies for improvement, ultimately leading to a better-performing, user-friendly website.