Matt Medlyn | Graham and Green | CLSINPWTFBBQ - Misadventures in Core Web Vitals

Summary

In this talk, Matt Medlin, an e-commerce analytics expert, discusses the importance of core web vitals for SEO and user experience. He addresses cumulative layout shift, largest contentful paint, and interaction to next paint, using real-world examples and tools like Lighthouse and real user monitoring to diagnose and fix issues. He also emphasizes the impact of third-party tags and the need for optimization.

Takeaways

• 😀 The speaker, Mat Medlin, is an e-commerce analytics and integrations expert with over 20 years of experience, known for his time at Love Honey and currently at GR and Green.
• 😅 Mat humorously apologizes for his previous presentation's advice, which led to a decrease in page experience due to adding too much code to websites.
• 📈 He discusses the importance of Core Web Vitals (CWV), which are metrics used by Google to measure page experience, including Cumulative Layout Shift, Largest Contentful Paint, and Interaction to Next Paint.
• 🤔 Mat questions the guaranteed ROI of focusing on CWV, noting the varying opinions on the internet and the recent shift in focus to vectorization and vector embedding.
• 🔍 He emphasizes the significance of real user monitoring (RUM) over simulated user experiences like Lighthouse, which do not interact with the page as real users do.
• 🛠️ Mat suggests using Chrome's Performance Analyzer to artificially slow down network connections and processors to better understand user experiences on slower devices.
• 🔍 He identifies Cumulative Layout Shift (CLS) as a major issue, especially with frontend technologies like Algolia, which can cause layout shifts when loading product results.
• 🎨 Mat discusses the challenge of Largest Contentful Paint (LCP), initially caused by a large background image, and how removing it improved the score during a site redesign.
• 📚 He highlights that text can be the largest element on a page, affecting LCP, and suggests using system font fallbacks to improve rendering speed.
• 👮‍♂️ Mat blames third-party tags, particularly Google Tag Manager, for negatively impacting page performance and suggests developers can help by implementing inline events for better data handling.
• 🛑 He warns about the impact of the Meta pixel on CLS and the need to turn it off to improve page experience, concluding with a successful improvement in all Core Web Vitals.

Q & A

Who is the speaker in this talk and what is his area of expertise?

The speaker is Mat Medlin, an e-commerce analytics and integrations expert with over 20 years of experience.

What was the speaker's previous notable position before joining GR and Green?

The speaker was previously known for his time at Love Honey.

What is the speaker's stance on the importance of Core Web Vitals in SEO?

The speaker acknowledges that Core Web Vitals are important, as they are integral and essential to Google's ranking system, despite some ambiguity in the SEO community.

What are the three Core Web Vitals metrics the speaker focuses on in his talk?

The speaker focuses on Cumulative Layout Shift, Largest Contentful Paint, and Interaction to Next Paint.

What is Cumulative Layout Shift and why is it a problem?

Cumulative Layout Shift is a metric that measures the movement of elements on a webpage over one second. It's a problem because it can negatively impact user experience by causing sudden layout changes.

How does the speaker address the issue of Cumulative Layout Shift in his talk?

The speaker discusses the issue of Cumulative Layout Shift caused by Algolia and how he and his team at JH fixed it by understanding the user's view at each step of the code.

What is the largest element on a webpage according to the speaker's example?

In the speaker's example, the largest element on the webpage is the background, which can affect the Largest Contentful Paint metric.

Why is the text element on a webpage a potential issue for Largest Contentful Paint?

The text element can be a problem for Largest Contentful Paint because it might load as a default system font, causing it to wrap and visually become unstable until it finishes rendering.

How does the speaker suggest improving Interaction to Next Paint?

The speaker suggests that developers can help by providing inline events that can be sent to Google Analytics instead of scraping pages, which can reduce the number of tags and variables in Google Tag Manager.

What is the speaker's advice on using third-party tags and how can it affect page performance?

The speaker advises being cautious with third-party tags, as they can negatively impact page performance by adding unnecessary weight and complexity to the website.

What is the speaker's view on the impact of the Meta Pixel on page performance?

The speaker believes that the Meta Pixel has a significant impact on page performance, especially on Cumulative Layout Shift, and suggests turning it off to improve performance.