MeasureFest 2021: Interactive Core Web Vitals In Data Studio
Download as PPTX, PDF2 likes3,271 views
The presentation discusses utilizing Data Studio for reporting on core web vitals performance, highlighting the significance of web vitals as a ranking factor. It addresses challenges in auditing processes and demonstrates an interactive dashboard approach for easier data visualization and actionable insights. Additionally, the talk offers strategies for enhancing reporting and tracking improvements in site performance.
MeasureFest 2021: Interactive Core Web Vitals In Data Studio
- 1. Interactive Data Studio reporting for Core Web Vitals performance and progress- tracking using Screaming Frog and Sheets LAZARINA STOY Skale @lazarinastoy
- 2. I am here because I love using Data Studio dashboards. Also, because Core Web Vitals is really 🔥 right now. Hi. 2 @lazarinastoy #brightonSEO
- 3. about this talk. a bit of context A (short) intro to Core Web Vitals. Methods and tools for auditing. 3 @lazarinastoy #brightonSEO
- 4. about this talk. the challenge Pain points in the Core Web Vitals auditing process. 4 @lazarinastoy #brightonSEO
- 5. about this talk. 5 the approach Introducing an Auditing Data Studio dashboard Going through different use cases for site-, section-, and page-level reporting at a glance. @lazarinastoy #brightonSEO
- 6. about this talk. 6 the opportunities Different ways to supercharge Core Web Vitals reporting in Data Studio. @lazarinastoy #brightonSEO
- 7. background. Page Experience as a ranking factor is a thing now. So what? 1 7 @lazarinastoy #brightonSEO
- 8. “ 8
- 9. “ 9
- 10. “ 10
- 11. “ 11
- 12. “ 12
- 14. 12% of mobile pages from over 20K URLs pass the Core Web Vitals assessment (💡) 14 @lazarinastoy #brightonSEO
- 15. 15 in short...
- 16. 16
- 17. 17 A (quick) recap of Web Vitals
- 18. Largest Contentful Paint (LCP) ● Measures loading performance 18 @lazarinastoy #brightonSEO
- 19. First Input Delay (FID) ● measures interactivity 19 @lazarinastoy #brightonSEO
- 20. Cumulative Layout Shift (CLS) ● measures visual stability 20 @lazarinastoy #brightonSEO
- 21. Other Web Vitals ● Mobile-friendliness ● Safe Browsing ● HTTPS ● No Intrusive interstitials ...but especially 21 @lazarinastoy #brightonSEO
- 22. Time To First Byte (TTFB) ● measures response speed 22 @lazarinastoy #brightonSEO
- 23. Two types of data to collect. ◉ Field data - i.e. Real user monitoring (RUM) ◉ Lab data - i.e. Emulated data 23 @lazarinastoy #brightonSEO
- 24. Also, different auditing tools we can use. 24 PageSpeed Insights Search Console Lighthouse TestMySite WebPage Test Chrome Dev Tools @lazarinastoy #brightonSEO
- 25. the challenge. With so many tools at our fingertips, what can really be the challenge? 2 25 @lazarinastoy #brightonSEO
- 26. Most tools are not user-friendly for site-wide auditing. 26 @lazarinastoy #brightonSEO
- 27. Getting a complete picture for patterns can be difficult. 27 @lazarinastoy #brightonSEO
- 28. Lack of ability to communicate and prioritize clearly can’t fully observe an issue = difficult prioritization no urgency = backlog The result: slow improvements (1/6) 28 @lazarinastoy #brightonSEO
- 29. 29 Inability to spot the root cause of the issue A template? A widget? @lazarinastoy #brightonSEO The result: slow improvements (2/6)
- 30. 30 Inability to delegate appropriately Organisational silos? Different teams? @lazarinastoy #brightonSEO The result: slow improvements (3/6)
- 31. Imagine this (a quick detour)... 31
- 32. 32
- 33. 33 Slow auditing process Using all tools in practice site-wide is near impossible. @lazarinastoy #brightonSEO The result: slow improvements (4/6)
- 34. 34 Non-actionable Inability to export & easily create actionable sheets for devs @lazarinastoy #brightonSEO The result: slow improvements (5/6)
- 35. 35 Progress and impact tracking of fixes is ad-hoc Site-wide auditing and audit comparison unavailable. Testing is ad-hoc. @lazarinastoy #brightonSEO The result: slow improvements (last one, I promise)
- 36. the approach Let’s make Core Web Vitals auditing and reporting interactive via a Data Studio dashboard. 36 @lazarinastoy #brightonSEO
- 37. Plug-and-play in three steps Bulk-audit CWV with 🐸 connect copy Data Studio dashboard 37 @lazarinastoy #brightonSEO
- 38. (or more like seven) 38 1 3 5 6 4 2 Filter Pagespeed Insights API traffic in GA Automate the crawl by setting it up to reoccur. Connect your data Audit Core Web Vitals with Screaming Frog and export the audit data to a Drive spreadsheet. Access & Copy the dashboard template (optional) Monitor change impact 7 (optional) adjust the calculated fields to your site’s structure @lazarinastoy #brightonSEO
- 39. Filter bots 39
- 40. Audit 40
- 41. 41 Connect
- 42. additional tips get a feel for the site’s categories Find out about different themes on the site check the CMS Enable yourself to provide focused recommendations get access to GA help prioritise on the implementation of recommendations 42 @lazarinastoy #brightonSEO
- 43. 43
- 44. voila! 44
- 45. get an overview of site performance 45 @lazarinastoy #brightonSEO
- 46. view savings opportunities at a glance 46 @lazarinastoy #brightonSEO
- 47. filter pages by metric performance category 47 @lazarinastoy #brightonSEO
- 48. sort + filter pages by saving opportunities & values 48 @lazarinastoy #brightonSEO
- 49. filter pages based on keywords in the URL 49 @lazarinastoy #brightonSEO
- 50. 50
- 51. supercharge the dashboard & make it your own 51 Merge with GA data for prioritisation, based on page visits, new users, or conversion metrics @lazarinastoy #brightonSEO
- 52. supercharge the dashboard & make it your own 52 Create groups of pages, based on website section templates @lazarinastoy #brightonSEO
- 53. supercharge the dashboard & make it your own 53 Incorporate a performance-tracking sheet for changes and map out the impact of changes @lazarinastoy #brightonSEO
- 54. supercharge the dashboard & make it your own 54 Incorporate ChromeUX data for competitors and monitor how they are evolving over time @lazarinastoy #brightonSEO
- 55. 55
- 56. “ Before I wrap up... 56
- 57. 57
- 58. “ 58 Don’t be scared of seeing null values in the Chrome UX report, implement best practices nonetheless
- 59. “ 59 Overcome the data freshness issues via Screaming Frog
- 60. “ Set your crawl to reoccur 60
- 61. “ Be wary of Google Data Studio’s limitations. 61
- 62. “ Ask your devs to include a date for the implementations in the progress tracking sheet. 62
- 63. “ Use dashboards interactively with your stakeholders 63
- 64. Anything you want to add? Ping me at ◉ @lazarinastoy Thank you. 64
- 65. Resources Here are the resources you will need: ◉ Dashboard template ◉ Step-by-step guide on the complete set-up implementation and additional tips ◉ A link to Rachel Anderson’s approach to competitor CWV research 65
- 66. Credits Special thanks to all the people who create awesome resources for free: ◉ Presentation template by SlidesCarnival 66
Editor's Notes
- #25: PageSpeed Insights URL-level user experience metrics Lab + Field data Chrome UX Report real user measurement Search Console provides groupings of pages, based on similar issues Chrome DevTools and Lighthouse provide detailed measurement and guidance on fixing CWV issues WebVitals Extension gives a real-time view of metrics on the desktop.