Business Success with Core Web Vitals

1. #SMX BUSINESS SUCCESS WITH CORE WEB VITALS

2. #SMX ABOUT ME ➔ Technical SEO Analyst @ Ryte ◆ Sparring partner ◆ Marketeer ➔ Previously worked in-house & consulting side ➔ Loves giving community talks ➔ Loves cheesy jokes ➔ @izzionﬁre

3. #SMX AGENDA 1. Core Web Vitals in a nutshell 2. Page Experience as a ranking factor 3. How to correctly measure the CWV scores 4. Optimizing Core Web Vitals 5. Becoming a Page Experience advocate! 6. Quick case studies 7. Q&A

4. #SMX Core Web Vitals (CWV) in a nutshell

6. #SMX Largest Contentful Paint (LCP)

7. #SMXCopyright © 2020, Ryte GmbH, All rights reserved The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport. Largest Contentful Paint Largest Element

9. #SMXCopyright © 2020, Ryte GmbH, All rights reserved 1. Pages load in stages, the largest element is subject to change 2. The browser dispatches a PerformanceEntry of type largest-contentful-paint that will identify the element as soon as the browser has painted the ﬁrst frame. 3. It will dispatch another PerformanceEntry as soon as this changes! Largest Elements for a page can change as it loads Here is my H1 Here is my H1 Here is my H1 Here is my H1 Here is my H1 I am a paragraph! I am a paragraph! I am a fun paragraph! I am a cool paragraph! paragraph! I am a section of text about cool things like paragraphs! I am a paragraph! I am a paragraph! I am a fun paragraph! I am a cool paragraph! paragraph! I am a section of text about cool things like paragraphs! I am a paragraph! I am a paragraph! I am a fun paragraph! I am a cool paragraph! paragraph! I am a section of text about cool things like paragraphs! I am a paragraph! I am a paragraph! I am a fun paragraph! I am a cool paragraph! paragraph! I am a section of text about cool things like paragraphs! PerformanceEntry PerformanceEntry PerformanceEntry

12. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Elements considered for LCP (for now) <img> or <image> elements inside an <svg> element The poster image of <video> elements Block-level elements containing text (a typical webpage text element)

13. #SMX First Input Delay (FID)

14. #SMXCopyright © 2020, Ryte GmbH, All rights reserved First Input Delay (FID) helps estimate and measure when a user can ﬁrst interact with a page’s core elements. If the main thread is busy loading other elements, this can impact FID. First Input Delay (interactivity) Polite Cat #1 Politest cats from all over the world. Who are they? Let’s ﬁnd out. Here is the most polite cat of 2020. He’s a very polite lil guy. He is smol. Polite Cats read more

18. #SMX Cumulative Layout Shift (CLS)

19. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Cumulative Layout Shift (visual stability) Cumulative Layout Shift (CLS) helps quantify unexpected layout shifts and therefore we can determine how visually stable a page is!

20. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Cumulative Layout Shift (visual stability) Cumulative Layout Shift (CLS) helps quantify unexpected layout shifts and therefore we can determine how visually stable a page is! 1

21. #SMX

22. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Unexpected movement of page elements can take place when resources are loaded asynchronously of DOM elements get injected above existing content. This results in frustrations and bad user experiences. The common culprits that affect CLS Polite Cat sticker The most politest cat sticker you’ve ever seen. free shipping read more $2 Polite Cat sticker The most politest cat sticker you’ve ever seen. $2 read more buy now Polite Cat sticker Polite Cat sticker The most politest cat sticker you’ve ever seen. Polite Cat sticker The most politest cat sticker you’ve ever seen. $2

24. #SMX CWV as a Ranking Factor

27. #SMX

30. #SMX

41. #SMX Effective measurement of CWV

48. #SMX Real User Monitoring (RUM) data captured from actual users experiencing your pages with their unique network and device. Strengths: ● Captures the real-world experience ● Easier to correlate with business KPIs Weaknesses: ● Restricted set of metrics ● Limited capabilities for debugging ● Requires you to have existing signiﬁcant visits to the site Used by: CrUX Report Page Speed Insights Data collected within a controlled environment with predeﬁned network settings and device. Strengths: ● Reproducible results are more helpful for debugging ● Easier to identify and isolate issues Weaknesses: ● Might not capture “real-world” problems that users face ● Might not be completely representative Used by: Lighthouse Page Speed Insights Lab data Field data Chrome Dev Tools Ryte Google Search Console

51. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Related to FID: Total Blocking Time TBT measures the total amount of time that a page is blocked from responding to user input, such as mouse clicks, screen taps, or keyboard presses.

53. #SMX What are the main causes of poor CWV scores?

54. #SMXCopyright © 2020, Ryte GmbH, All rights reserved The main causes of poor CWV scores: ● Slow server response times ● Render-blocking JavaScript & CSS ● Slow resource load times ● Client-side rendering ● Long tasks on the main thread ● Long JS execution time ● Render-blocking JS ● Images without dimensions ● Dynamically injected content ● Actions waiting for a network response ● Ads & iframes without dimensions

56. #SMX How to improve Largest Contentful Paint

57. #SMX Combat problems that contribute to slow server responses

59. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Optimize your server to improve response times Polite Cat #1 Politest cats from all over the world. Who are they? Let’s ﬁnd out. Here is the most polite cat of 2020. He’s a very polite lil guy. He is smol. Polite Cats read more client server request response 500kb cat.js 300kb sticker.css 200kb login.js

60. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Optimize your server to improve response times Polite Cat #1 Politest cats from all over the world. Who are they? Let’s ﬁnd out. Here is the most polite cat of 2020. He’s a very polite lil guy. He is smol. Polite Cats read more client server request response

61. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Cache static assets that don’t update frequently Polite Cat #1 Politest cats from all over the world. Who are they? Let’s ﬁnd out. Here is the most polite cat of 2020. He’s a very polite lil guy. He is smol. Polite Cats read more client server request response sticker.css cat.js login.js

68. #SMX Deal with render-blocking assets and scripts

70. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Optimizing Critical CSS Polite Cat #1 Politest cats from all over the world. Who are they? Let’s ﬁnd out. Here is the most polite cat of 2020. He’s a very polite lil guy. He is smol. Polite Cats read more Who is polite cat? Height: 183cm Birthday: 18.08.1993 Favourite food: Takoyaki Favourite colour: Green quick facts Above-the-fold CSS is extracted ﬁrst in order to ensure a faster page load. Below-the-fold CSS is deferred.

73. #SMX Speed up resource load times

74. #SMXCopyright © 2020, Ryte GmbH, All rights reserved 1. Run a crawl to test if compression is already in place 2. Choose a compression algorithm (Brotli / GZIP) 3. Compress assets ahead of time during the build process to prevent delays and minimize server overhead Compress resources to improve slow resource load times! Compress Text Files

75. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Compress Image Files 1. Compress images with existing services or plugins (Smush, TinyPNG) 2. Convert images into next gen formats like WebP or JPEG 2000 3. Consider using an image CDN to speed up delivery Compress resources to improve slow resource load times!

78. #SMX How to improve First Input Delay

86. #SMXCopyright © 2020, Ryte GmbH, All rights reserved ● Downloads in the background at a low priority ● Will not interrupt page rendering to be executed ● Executes in a sequence before the DOMContentLoaded event ● Use for JS resources that aren’t too critical to the initial rendering, and can be run later in the process ● Downloads in the background at a low priority ● Can interrupt page rendering to be executed ● Executes ASAP and in no particular order ● Best for high priority resources that should run as early as possible in the loading process Always use defer or async for scripts that are not necessary for the critical path defer async

87. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Code-Splitting bundles into necessary chunks Code splitting is a technique where, rather than loading your scripts as one big ﬁle, you break it up into smaller parts and only load what's needed on that page. For projects with large amounts of JavaScript, this can have a big improvement on performance.

88. #SMX How to improve Cumulative Layout Shift

93. #SMXCopyright © 2020, Ryte GmbH, All rights reserved ● Always include the width and height size attributes on your images and video elements. ● Reserve the required space with aspect ratio boxes so that the browser can allocate the correct amount of space while the image loads. ● Utilize srcset for responsive images to allow the browser to select between the correct image dimension, depending on viewports. Handy tips for providing image dimensions Polite Cat #1 Politest cats from all over the world. Who are they? Let’s ﬁnd out. Here is the most polite cat of 2020. He’s a very polite lil guy. He is smol. Politest cats from all over the world. Who are they? Let’s ﬁnd out. Here is the most polite cat of 2020. He’s a very polite lil guy. He is smol. Polite Cats read more buy stickers <img src="politecat.jpg" width="360" height="640" alt="A very polite cat"> 9:16 360 640

96. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Reserve sufﬁcient space for Ads, Embeds & Dynamic Content Statically style slot DOM elements with the same sizes passed to your tag library. This can help ensure the library doesn't introduce annoying layout shifts when it loads. Polite Cat sticker The most politest cat sticker you’ve ever seen. read more $2 Polite Cat sticker The most politest cat sticker you’ve ever seen. read more $2 Polite Cat sticker $2 Polite Cat sticker Free shipping today

100. #SMX What can we as SEOs do?

101. #SMX Become a Page Experience advocate in your team!

102. #SMX Let’s have a coffee and chat about our CWV optimization

103. #SMXCopyright © 2020, Ryte GmbH, All rights reserved You know you’ve achieved SEO greatness when: I provide technical recommendations that are prioritized and clear My client / boss understands the importance of SEO My developers know who I am and are happy working with me My opinions are trusted by all stakeholders My opinions are valued by my client / boss.

104. #SMX My technical recommendations are not prioritized or clear My client / boss does not understand the importance of SEO My developers don’t know who I am! (My devs don’t like me.) My SEO opinions aren’t trusted by colleagues and stakeholders Improve your Project Management ● Understand the processes of your developers and command chain (Agile, Scrum) ● Learn more about existing projects and roadmaps ● Research into your existing tech stack ● Look into how you can better prioritize SEO issues (using JIRA / Trello) ● Get to know your POs and developers ● Host SEO education workshops or lightning talks Address the Expectation Management ● Provide clear explanation of SEO belongings, challenges, and beneﬁts (conﬂuence, quick meetings) ● Host SEO education workshops that report hard KPI improvements ● Before signing a client: understand and document their existing expectations & challenges ● What existing CMS / tech stack is the client using? Understand if you need a miracle with your time. My work is not valued within my department / company

115. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Discuss your ﬁndings with devs to know their opinions on the matter If we just ordered and delivered the critical CSS we’d make everyone’s lives a bit easier. I made a suggestion here... Good spot! We have this blocker in place right now but I’m sure we can come up with a solution

119. #SMX Quick case studies

154. #SMXCopyright © 2020, Ryte GmbH, All rights reserved ● Removed parallax effect from homepage ● Created new, lightweight logo ● Properly sized images with height and width ● Set-up correct aspect ratio for images ● Compressed images (using Smush) & converted GIFs to WebM ● Configured asset caching using W3 Total Cache ● Updated used plugins, and removed all unnecessary plugins ● Updated to newest version of PHP ● Created critical CSS file for each page ● Merged and minified necessary JS and CSS ● Made sure lazy loading was working fine ● Set key fonts to be preloaded ● Made sure images utilized srcset ● I developed a new love of page experience optimization! My quick fixes of last weekend

156. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Further reading: ● https://web.dev/optimize-lcp/ ● https://web.dev/optimize-ﬁd/ ● https://web.dev/optimize-cls/ ● https://www.onely.com/blog/what-is-ﬁrst-input-delay/ ● https://www.youtube.com/watch?v=AQqFZ5t8uNc&feature=emb_title ● https://developers.google.com/web/fundamentals/performance/speed-tools ● https://css-tricks.com/aspect-ratio-boxes/ ● https://defaced.dev/tools/layout-shift-gif-generator/ ● https://en.ryte.com/product-insights/web-vitals

157. #SMXCopyright © 2020, Ryte GmbH, All rights reserved ❏ Do your best to get up-to-scratch on Core Web Vitals technicalities ❏ Assess your website’s pages in bulk ﬁrst to ﬁnd commonalities and affected subfolders ❏ Get involved in conversations with your website POs and developers! ❏ Provide educated hypotheses as to what is impacting the Vital, and how you can work together with development teams to improve that ❏ See whether you need to improve Project Management skills or address the Expectation Management. ❏ If you can, test and play around with some principles on your own websites My key learnings for you all

158. #SMX Thanks! Happy optimizing

Business Success with Core Web Vitals

Business Success with Core Web Vitals

Recommended

More Related Content

What's hot

What's hot(19)

Similar to Business Success with Core Web Vitals

Similar to Business Success with Core Web Vitals(20)

More from Izzi Smith

More from Izzi Smith(10)

Recently uploaded

Recently uploaded(20)

Business Success with Core Web Vitals