Core Web Vitals - Why You Need to Pay Attention
1 like102 views
The document addresses the importance of Core Web Vitals (CWV) for website performance and SEO, explaining their role in user experience and engagement. It provides insights on measuring and improving CWV using various tools, along with optimization strategies for factors such as server response time and image loading. Ultimately, enhancing CWV is framed as essential not only for SEO but also for increasing conversions and user satisfaction.
Core Web Vitals - Why You Need to Pay Attention
- 1. Core Web Vitals: Why You Need to Pay Attention
- 2. What You Will Learn Today ► What Are Core Web Vitals ► Why They Are Important Today ► Why They Will Be Critical Next Year ► How to Improve Them Now ► The Secret Advantage That No One Is Talking About ► Why This Is All Good News For Your Website
- 3. About Toren Ajk ► I’m the founder of TAC Marketing Group - a digital marketing agency. Over the years we’ve worked with a variety of clients, including Lexus, Lending Club, and Backblaze. ► I was CMO of Line2 from 2009-2011 where I drove over 1.5 million downloads of the app and grew annual revenue from 0-$10 million. ► In January of 2016 we started developing a performance focused framework for WordPress. ► Former member of the AMP Contributor group. ► Email: [email protected] ► Twitter: https://twitter.com/fthead9 ► LinkedIn: https://www.linkedin.com/in/torenajk/
- 4. Page Experience Core Web Vitals assessments and the Page Experience Ranking Signal use Field Data gathered by the Chrome User Experience Report (Crux).
- 5. What Are Core Web Vitals
- 6. New Experimental Metrics ► INP - Interaction to Next Paint: ► It’s being tested as a possible replacement for FID. ► Measures how long it takes to interact with the entire page. ► ► TTFB - Time to First Byte: ► Measures how fast the server responds to a request for a resource.
- 7. What Google Said About CWV When They Launched
- 8. What Google Didn’t Say ► The biggest threat to Google’s ad dominance is apps. Providing incentives to create a better mobile web experience is a critical defense against apps taking over. ► In 2015 Google announced and open sourced AMP to help create faster, cleaner mobile web experiences. ► Google screwed up the rollout of AMP when they introduced paired pages that created essentially two separate websites. ► Despite incentives for using AMP adoption wasn’t easy. ► When you look at the Page Experience elements including Core Web Vitals they match what Google was trying to achieve with AMP. ► Creating better mobile web experiences is critical for Google and Core Web Vitals is their second attempt at achieving it.
- 9. Pass Rates by Metric Google I/O
- 10. Does It Matter Today? ► Advanced Web Ranking - Wattspeed Study: ► Over 600,000 keyword SERPs anayzed. ► Position 1 has the highest % of pages that pass CWV. ► John Mueller: “It is a ranking factor, and it’s more than a tie-breaker, but it also doesn’t replace relevance.”
- 11. Why They Are Important Today For Engagement
- 12. Why They Are Important Today For Ecommerce
- 13. Speed and Mobile Conversion Rates mPulse Mobile
- 14. Slow Pages Hurt Your Conversion Rates Source: Soasta/Akamai State of Online Retail Performance
- 15. Why They Will Be Critical Next Year From Google Search Central: “But publishers should be focused on making those improvements a relative priority over time. This is because as more and more sites continue to improve their page experience, it will be the norm that publishers will want to match.” “In cases where there are multiple pages that have similar content, page experience becomes much more important for visibility in Search.”
- 16. Chances Are Your Site Is Not Passing Core Web Vitals
- 17. How to Measure Core Web Vitals Popular Testing Tools ► PageSpeed Insights ► WebPageTest ► Chrome User Experience Report ► Search Console (Core Web Vitals report) ► Chrome DevTools ► Lighthouse ► GTMetrix ► web-vitals JavaScript library
- 18. Lab Data vs. Field Data Lab Data: ► Lab data is determined by loading a web page in a controlled environment with a predefined set of network and device conditions. ► The particulars of any given lab test may or may not accurately represent the 75th percentile of field data for a given page or site. Field Data: ► Field data is determined by monitoring all users who visit a page and measuring a given set of performance metrics for each one of those users' individual experiences. ► Because field data is based on real-user visits, it reflects the actual devices, network conditions, and geographic locations of your users. ► Field data is based on the previous 28 days of CrUX reports.
- 19. How to Improve Them Now - Low Hanging Fruit
- 20. A Closer Look at LCP Only 53% of sites currently pass the LCP metric. The lowest of the CWV metrics. Why? ► LCP is influenced by multiple factors: ► Server ► Images ► Text blocks ► Videos ► JavaScript ► CSS ► 3rd party resources
- 21. Real World LCP Source: Tim Kadlec Webpagetest.org
- 22. Digging Into LCP Optimization Server: ► Focus on TTFB metric as indicator of server performance issues ► Redirect time ► Service worker startup time (if applicable) ► DNS lookup ► Connection and TLS negotiation ► Request, up until the point at which the first byte of the response has arrived ► Set HTTP cache for 1 year - https://web.dev/http-cache/ ► Utilize bfcache: The bfcache is a snapshot of the entire page in memory (including the JavaScript heap), whereas the HTTP cache contains only the responses for previously made requests. - https://web.dev/bfcache/
- 23. Digging Into LCP Optimization HTML: ► Use Brotli compression algorithm for HTML optimization. ► To avoid a 300ms tab delay issue on a page, always specify a mobile viewport.
- 24. Digging Into LCP Optimization Images: ► Optimize images and use WebP format when possible. Note AVIF is more highly compressed but isn’t supported by Safari so WebP is generally a better choice. ► General best practice: Use a CDN for images other than your LCP image if have one. ► "Switching to an image CDN can yield a 40–80% savings in image file size." - Katie Hempenius from Google. ► Lazy load non-LCP images ► Preload your LCP/hero image and include a priority hint
- 25. Digging Into LCP Optimization CSS/Javascript ► Minify JavaScript and CSS files. ► Defer non-critical CSS and JavaScript. ► Load CSS and JavaScript asynchronously.
- 26. Why the SXG Cache Is Your Secret for Core Web Vitals Success
- 27. What is SXG? From Google: ► Sites built with AMP or that use Signed Exchanges (SXG) can be preloaded by content aggregators like Google Search. This can result in significantly better load performance for users visiting your pages from those platforms. ► In addition to cross-origin preloading, sites themselves can preload content for subsequent pages on their site, which could improve LCP for those pages as well.
- 28. SXG Results ► From past experiments we have observed an average of 300ms to 400ms reduction in LCP from SXG-enabled prefetches. - Google https://web.dev/signed-exchanges/ ► Paper Magazine ► Decrease in LCP: -10.1% ► Decrease in TTFB: -8.4% ► Decrease in FID: -36.9% ► 27% increase in Sessions per user ► More examples: ► Narcity improved LCP by 41% ► MLT Blog decreased Page Load time by 21%
- 29. Why This Is All Good News For Your Website “The impact on user experience is not minimal. In fact, the speed that it takes for a page to load is revealed to be the most important factor in a user’s mobile experience. It’s more important than how easy it is to find what they want, it’s more important than the simplicity of using the site, and interestingly enough, it is three times more important than what a site looks like.” Google Product Manager – Elizabeth Sweeney
- 30. Why This Is All Good News For Your Website
- 31. Better Page Experience = Higher Performance
- 32. Better Page Experience = Higher Performance
- 33. Final Thoughts ► Yes fixing Core Web Vitals can be challenging. ► Improving them is not just for Google. Your website will generate higher conversions and have increased engagement if you achieve CWV success. ► It’s a ranking factor today but more importantly it’s part of the Page Experience set of signals, which include https:// and mobile friendly. Eventually I think CWV will become table stakes for ranking.