New Ranking Metrics by Google
Download as PPTX, PDF0 likes594 views
The document discusses Google's new ranking factors as of May 2021, focusing on Core Web Vitals: Cumulative Layout Shift (CLS), Largest Contentful Paint (LCP), and First Input Delay (FID). It provides guidelines for optimizing web performance, including loading strategies and file management to improve these metrics. Tools like Lighthouse and PageSpeed Insights are recommended for assessing site performance, alongside general optimization tips.
New Ranking Metrics by Google
- 1. New ranking factors by Google …at least those starting May 2021
- 2. Hi there! 👋 Phil Marx IT specialist Works with WordPress since 2009 Working with WordPress and Clients since 2018 Twitter: @JustPhilMarx 2
- 3. Agenda ● One important prerequisite ● Core Web Vitals ○ Cumulative Layout Shift ○ Largest Contentful Paint ○ First Input Delay ● Check your own Core Web Vitals ● General notes for optimizing your site 3
- 4. Basis for webpage rating by Google ● Google (likely) uses an Moto G4-engine with slow network connection (3G) ● Motorola Moto G4: ○ First release: May 2016 ○ 360 x 640 Pixel screen size 13
- 5. Core Web Vitals: Cumulative Layout Shift Wait? Where‘s my content?! 14 3
- 6. Cumulative Layout Shift ● Describes the shift of contents after initial design ○ Dynamic loading of contents ○ Dynamic resizing of widgets ○ Big images without dimension specification https://web.dev/cls/ 15
- 7. Whoooops! See Cumulative Layout Shift at its worst 16 Video: Google, CC BY 4.0
- 8. Basis of calculation ● Which percentage of the viewport is affected by the moving element (impact fraction)? ● By what percentage does the element move (distance fraction)? ● Values get multiplied and summed up 17
- 9. Example ● Element takes 50% of viewport; 75% of viewport is changed after move (Impact Fraction: 0,75) ● Element moved by 25% (Distance Fraction: 0,25) ● 0,75 x 0,25 = 0,1875 18 Bild: Google, CC BY 4.0
- 10. Rating ● Rating: ○ <= 0,1: „Good Experience“ ○ 0,1 – 0,25: „Needs improvement“ ○ > 0,25: „Poor Experience“ ● Layout shifts based on user interactions have no impact (max. 500ms between interaction and shift) 19 https://web.dev/cls/
- 11. How to avoid CLS? ● Load relevant JS/JavaScript as soon as possible (or inline) ● Define sizes for every picture/content box ● Avoid dynamic layouts with JavaScript (Mansonry!) ● Use dynamic design definitions with CSS (Flexbox / Grid) ● Use CSS animations instead of JavaScript (transform(), scale()) 20 https://web.dev/optimize-cls/
- 12. Core Web Vitals: Largest Contentful Paint When you‘re waiting for the page hero… 21 4
- 13. Largest Contentful Paint ● Describes the time until the largest element in the initial viewport is loaded https://web.dev/lcp/ 22
- 14. Bad LCP 23 Bild: Google, CC BY 4.0
- 15. Good LCP 24 Bild: Google, CC BY 4.0
- 16. Rating ● Largest element loaded: ○ <= 2,5 seconds: „Good“ ○ 2,5 – 4,0 seconds: „Needs Improvement“ ○ > 4,0 seconds: „Poor“ 25 https://web.dev/lcp/
- 17. How to improve LCP? ● Arrange elements with specific values in the viewport instead dynamically, where possible (Flexbox/Grid) ● Use small file sizes (for pictures use srcset) ● Use Caching / CDN for big sites ● Preload critical elements ( <link rel=„preload“ …> ) ● Load non-critical CSS/JavaScript in footer 26 https://web.dev/optimize-lcp/
- 18. Core Web Vitals: First Input Delay Dang, my browser is stuck… 27 5
- 19. First Input Delay ● Describes the delay between user interaction and reaction of your browser ○ Browser has to process JavaScript / CSS ○ Main Thread can only handle one task ○ If Javascript / CSS is processed, a click on a link can‘t be processed https://web.dev/fid/ 28
- 20. FID – graphical 29 Bild: Google, CC BY 4.0
- 21. Rating ● Time between interaction and reaction of the browser ○ <= 100ms: „Good“ ○ 100ms – 300ms: „Needs Improvement“ ○ > 300ms: „Poor“ 30 https://web.dev/fid/
- 22. How to improve FID? ● Keep your site structure simple ● Avoid complex JavaScript / CSS files ● Split up big files to smaller chunks ● Avoid external contents like Like-Button ● Load uncritical files in footer 31 https://web.dev/optimize-fid/
- 23. Determine Google Core Vitals by yourself Metrics! Diagrams! Numbers! 32 6
- 24. Lighthouse ● Provided by Chromium-based browsers (Google Chrome, Microsoft Edge, Opera) ● Part of developer tools (Strg + Shift + I / Cmd + Shift + I) 33
- 27. Alternative: PageSpeed Insights ● https://developers.google.com/speed/pagespeed/insights/ 36
- 28. General hints for optimizing It‘s not witchcraft… 37 7
- 29. Have a good basis ● Fast webserver / database ● Only use necessary CSS / JavaScript files ● Use CSS animation or Vanilla JavaScript instead of complex librarys (jQuery) ● Avoid external libraries ● Avoid unnecessary plugins / multi purpose themes ● Optimize your pictures for web usage ● Keep your code streamlined 38
- 30. Plugin-Tipps ● Caching / Optimization plugins (WP Rocket / Autoptimize) ● Select which JavaScript to load (Asset Cleanup) ● WP CLI -> Profile-Command ● No plugin can enhance a bad basis / bad code significantly 39
- 31. 40 Thanks! 👋 Quetions? Just ask! @JustPhilMarx / webfalken.de Thanks to SlidesCarnival for Slides template and Icons (CC BY 4.0)