Google Core Web Vitals - Webinar
•Download as PPTX, PDF•
0 likes•319 views
There will be a lot of talk about Core Web Vitals in the next 12 months. Lots of reports, audits, sales emails and numbers in red will follow. In this webinar, we looked at what Google is trying to achieve, what these web vitals look like and what, if anything, you should be doing to protect traffic, rankings and UX.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Google Core Web Vitals - Webinar
Similar to Google Core Web Vitals - Webinar (20)
More from Spike
More from Spike (7)
Recently uploaded
Recently uploaded (20)
Google Core Web Vitals - Webinar
- 1. Google Core Web Vitals – What you need to know An SEO & UX Perspective
- 2. House keeping • 45 mins • Webinar recording • Side deck • Ask us Questions! • Blog post • Feedback
- 3. Steve Bailey Head of Technical SEO 3 Speakers Co-Founder Michael Rippon
- 4. Core Web Vitals • Why is Google introducing Web Vitals? • What does this mean for SEO? • Shouldyou be concerned? • What arethey? • Largest Content Paint (loading) • Cumulative Layout Shift(visual stability) • First Input Delay (interactivity) • Questions
- 5. “The Web Vitals initiative aims to simplify the landscape, and help sites focus on the metrics that matter most, the Core Web Vitals.”
- 7. What will it mean for SEO? Google are explicitly telling us that these page experience signals will effect rankings – alongside other rankings signals. If you aren’t ranking on page 1 right now, great web vital scores will not get you there.
- 10. The biggest objecton a page isdeemed themost important spike.digital |10
- 11. Largest Contentful Paint (second frame) spike.digital |11
- 12. Hownecessary am I? spike.digital |12
- 14. Banner adverts often do not have a set depth spike.digital |14 Space assigned to advert whilst it is waiting to load
- 15. Inspect pages using Chrome webdevelopment tools spike.digital |15
- 17. If the browser is ‘busy’ withbackground tasks, user input is delayed spike.digital |17
- 18. If the browser is ‘busy’ withbackground tasks user input is delayed spike.digital |18
- 19. Where to start?
- 20. Prepare Now You’ve a minimum of six months to address any web vitals issues, with information made available via Google Search Console.
- 22. • Google SearchConsole • WebpageSpeed Test(https://webpagetest.org/) • LighthouseReports(Chromeplugin/devtools) • ChromeDev Toolsperformancereport Other places to get the data spike.digital |22
- 23. https://www.youtube.com/watch?v=AQqFZ5t8uNc&list=PLNYk xOF6rcIDC0-BiwSL52yQ0n9rNozaF&index=4&t=0s
- 24. Questions
- 25. PROJECT DATE CLIENT CONTACT RAINDROP CONTACT Core Web Vitals & UX
- 26. 26 If you are already striving to improve your website you have nothing to ‘fear’
- 27. 27 What does this mean for your efforts in improving your website? from a UX viewpoint, it’s a positive step.
- 28. 28 Core Foundations Have a defined process Make the product / website usable Listen to customers
- 29. 29 Simplifying Core Web Vitals Largest Contentful Paint (LCP) Load Time= First Input Delay (FID) Page Interactivity= Cumulative Layout Shift (CLS) Page Stability=
- 30. 30 Source: Think with Google By improving load time you improve customers experience, and retain them for longer. How to Improve - Use a fast hosting provider with adequate resources. - Reduce Time to query database. - Configure efficient caching. - Minify CSS & JavaScript - Optimise Images Load Time
- 33. 33 Measuring how long it takes the browser to load when a user interacts with the page. What to look for: - The length of time it takes for the page to show useful content. - Length of time the browser responds quickly to users interactions. Page Interactivity
- 34. 34 Page Stability Source: Web.dev ● Changes in visual stability can be ‘frustrating’ for users. ● We should always consider how elements change or move from a user interaction. ● Provide indication of intended layout shifts / or ensure when an element loads it is not unexpected.
- 35. 35 Source: Web.dev Page Stability Common issues for stability: ● Images without dimensions. ● Ads, embeds, and iframes without dimensions. ● Dynamically injected content. ● Expected changes without progress signals
- 37. 37 Cart Popup
- 39. 39 Usability issue + unexpected layout shift
- 40. 40 Finding usability problems ● Identify low performing pages and high drop off points in Google Analytics. ● Setup heatmaps and video recordings of these areas. ● Undertake user feedback and user testing to review how users think and feel when using your website.
- 41. 41 Insight User Behaviour Testing surveymonkey.co.uk typeform.com www.hotjar.com sessioncam.com usabilityhub.com analytics.google.com crazyegg.com optimizely.com vwo.com
- 42. 42 Next Steps Plan for these changes now. Undertake research: ● Speak with your customer service teams ● Use the tools available to test for issue. ● Undertake user research to uncover usability issues. ● Review your code base & involve your development team early.
- 43. Questions An SEO & UX Perspective
Editor's Notes
- Spike are a Leeds based, small (but perfectly formed) online marketing agency with a strong focus on Technical SEO. We’ve got a genuine passion for SEO and the community element that its always had. The content in this webinar is outside of COVID-19 specific recommendations…
- It’s about simplifying what you need to look at. Taking a long list of potential speed issues for example and reducing it down to a more manageable focus. Other factors are considered essential – its important to see that these web vitals don’t stand alone. If you are popping up promo interstitials all over your site that is potentially as significant to google.
- It’s about simplifying what you need to look at. Taking a long list of potential speed issues for example and reducing it down to a more manageable focus.
- This does effect rankings. Explicitly so. But that doesn’t mean they are bigger signals than quality of content for example. From what I can tell these changes will impact sites running heavy scripts and adverts. If there is one sector that should be worried it would be those that rely on ad revenue, more on that in a bit.
- It’s about simplifying what you need to look at. Taking a long list of potential speed issues for example and reducing it down to a more manageable focus.
- If you are already striving to improve your website you have nothing to ‘fear’. But it isn;t always that simple. It is too easy to be trying to improve a website but with mixed code quality and bloated codebases. The foundations have to be there to provide a good baseline for improvement. Core web vitals is aiming to help improve that baseline.
- Core website vitals will help addresses areas of basic web usability; A usable site works better for customers and converts better. If a website doesn’t fundamentally work, the chances of truly understanding your users is difficult. When basic usability of a website is poor, you will spend more time addressing this than getting into the deeper aspects of user behaviour. The ability to affect and change how users use your website is diminished when the website doesn't work well. You could have the best design, content but if it people can't use the website it makes no difference.
- Largest Contentful Paint (LCP) = Load Time How long does the main content take to appear for the user. First Input Delay (FID) = Page Interactivity TIme from a user interacting with an element say a link, button. This doesn’t include scrolling. Cumulative Layout Shift (CLS) = Page Stability Measurement of unexpected layout shifts on the page.
- There are many statistics out there about how load time improvements can increase sales / generate more leads. This is a case by case basis and can get to a point of diminishing returns. Googles speed tests have launched industry benchmarks for many years and an area to keep an eye out is how you can retain users for longer. Especially in Ecommerce where a user can take multiple sessions to browse before purchasing. https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/ Reducing the time it takes to query databases - talk about how configured incorrectly Ensuring you're using a fast hosting provider with adequate hardware resources. Use adequate resources. Avoid shared hosting and ensure your hosting environment is flexible and can scale as your business scales. Configuring caching of content: Cache at server level not application level.
- Looking at these speed tests pre and post web vitals. The website is loading in half the time. The website is still considered very slow but you can see how the last contentful paint is halved. The CLS is very short and can be improved but the major aspect here is contentful paint which still requires optimised images and this would bring the website down into a good level. Use framed example - Website we worked on had a database size of 2gb and 32gb ram but the database only had 128mb allocation.
- Look at how the checkout loads on this website, due to the load time users are presented with error messaging on the shipping methods until the website loads. Provides friction / doubt to the user but also provides them insufficient messaging.
- Measuring how long it takes the browser to load when a user interacts with the page. This is all about how the page loads in front of the user. What to look for: The length of time it takes for the page to show useful content - is javascript or something blocking the rendering of the page. Length of time the browser responds quickly to users interactions - this means you will need to write efficient javascript and ensure low execution times. Many elements on a page can and are powered by Javascript. Having bloated javascript will increase execution time and will increase time the browser responds to what the user does. This is mainly going to be affected by development and the core of the websites code. If non essential JavaScript is loaded it will increase interactivity time. Is there legacy third party tags, or too many third party tags causing issues. We have seen many times when software is not being utilised but the tags are still loading.
- Changes in visual stability can be ‘frustrating’ for users. When you browse a website and click a button or link andthe page moves unexpectedly and you then click the wrong thing. This can be harmful, increase frustration and fricaton for users. Thing about when you go to purchase and a field jumps or moves depending on the user selection this could increase checkout abandonment. We should always consider how an element changes, if there is going to be processing time show clear indication. One of our clients website when you clicked upload photo it didnt provide any indication or what was expected just a file manager. When you then uploaded a file there was a black screen without any indicator of what was happening. When content shifts unexpectedly or abruptly like a mega menu or when a full screen search appears it can creates a poor experience. Many decisions should be made by user feedback through video recordings and user testing to review how users use the website.
- Images without dimensions. When the page loads images without width & height size attributes mean the image can load and drop content and that space is not reserved. Ads, embeds, and iframes without dimensions. Ads are one of the largest contributors to layout shifts on the web. Ad networks and publishers often support dynamic ad sizes. Ad sizes increase performance/revenue due to higher click rates and more ads competing in the auction. Unfortunately, this can lead to a suboptimal user experience due to ads pushing visible content you're viewing down the page. Embeddable widgets for example, videos from YouTube, maps from Google Maps, social media posts, and so on). These embeds often aren't aware in advance just how large an embed will be (for example, in the case of a social media post - does it have an embedded image? video? multiple rows of text?. As a result, platforms offering embeds do not always reserve enough space for their embeds and can cause layout shifts when they finally load. Dynamic Content You've probably experienced layout shifts due to banners and forms that shift the rest of the page's content: "Sign-up to our newsletter!" "Related content" "Install our app" "We're still taking orders" "GDPR notice" Avoid inserting new content above existing content, unless it’s a response of a user interaction. This ensures any layout shifts that occur are expected and are user initiated. If they are not they will be treated as unexpected layout shifts.
- Take a simple photo uploader. Showing a progress indicator would be helpful to users so they know how long it takes.
- Take the following screenshots - there are high amount of taps and clicks on the delivery option. When you use the website it is pre selected and users were clicking continue button but finding there was an error on that checkbox. This shows multiple usability issues: The page reloaded with the error which was not inline. This meant visual stability was affected, It caused friction with the checkout as users were unsure why they had to click the checkbox.
- Use the following: Identify low performing pages and high drop off in Google Analytics. Setup heatmaps and video recordings of these areas. VIdeo recordings: We received a lot of feedback from users of this technique saying its not helpful or a ‘black hole’ as they spend hours watching videos and not gaining any value. Whilst our view point on video recordings is that you need to have a specific purpose or answer to a question. Video recordings are essential as they help narrow down on what / where an issue can be and then you undertake other forms of research to validate your assumptions. Undertake user testing and surveys to review how users think and feel when using your website.
- Plan for these changes now. Undertake research and ensure: Speak with your customer service teams - They speak with customers daily, collate all the knowledge and plan to research the assumptions. Use the tools available to test for issue - measure the Core Web Vitals and highlight areas for improvement. Undertake user research to uncover usability issues - combine research tools and analytics to find usability problems. Involved your development team early - speak with your development team to plan code changes in advance, review your code base and ensure the code is good, clean and optimal.