Successfully reported this slideshow.
Your SlideShare is downloading. ×

New Ranking Metrics by Google

Ad

New ranking factors
by Google
…at least those starting May 2021

Ad

Hi there! 👋
Phil Marx
IT specialist
Works with WordPress since 2009
Working with WordPress and Clients since 2018
Twitter:...

Ad

Agenda
● One important prerequisite
● Core Web Vitals
○ Cumulative Layout Shift
○ Largest Contentful Paint
○ First Input D...

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Upcoming SlideShare
GG SEO Ideas
GG SEO Ideas
Loading in …3
×

Check these out next

1 of 31 Ad
1 of 31 Ad

New Ranking Metrics by Google

Download to read offline

On 31 March 2021 I held a talk about the new ranking factory by Google called Core Web Vitals. In this talk I gave a short explanation about Cumulative Layout Shift (CLS), First Input Delay (FID) and Largest Contentful Point (LCP).

On 31 March 2021 I held a talk about the new ranking factory by Google called Core Web Vitals. In this talk I gave a short explanation about Cumulative Layout Shift (CLS), First Input Delay (FID) and Largest Contentful Point (LCP).

More Related Content

New Ranking Metrics by Google

  1. 1. New ranking factors by Google …at least those starting May 2021
  2. 2. Hi there! 👋 Phil Marx IT specialist Works with WordPress since 2009 Working with WordPress and Clients since 2018 Twitter: @JustPhilMarx 2
  3. 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. 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. 5. Core Web Vitals: Cumulative Layout Shift Wait? Where‘s my content?! 14 3
  6. 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. 7. Whoooops! See Cumulative Layout Shift at its worst 16 Video: Google, CC BY 4.0
  8. 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. 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. 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. 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. 12. Core Web Vitals: Largest Contentful Paint When you‘re waiting for the page hero… 21 4
  13. 13. Largest Contentful Paint ● Describes the time until the largest element in the initial viewport is loaded https://web.dev/lcp/ 22
  14. 14. Bad LCP 23 Bild: Google, CC BY 4.0
  15. 15. Good LCP 24 Bild: Google, CC BY 4.0
  16. 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. 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. 18. Core Web Vitals: First Input Delay Dang, my browser is stuck… 27 5
  19. 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. 20. FID – graphical 29 Bild: Google, CC BY 4.0
  21. 21. Rating ● Time between interaction and reaction of the browser ○ <= 100ms: „Good“ ○ 100ms – 300ms: „Needs Improvement“ ○ > 300ms: „Poor“ 30 https://web.dev/fid/
  22. 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. 23. Determine Google Core Vitals by yourself Metrics! Diagrams! Numbers! 32 6
  24. 24. Lighthouse ● Provided by Chromium-based browsers (Google Chrome, Microsoft Edge, Opera) ● Part of developer tools (Strg + Shift + I / Cmd + Shift + I) 33
  25. 25. Create Assessment 34
  26. 26. Simulate browsers 35
  27. 27. Alternative: PageSpeed Insights ● https://developers.google.com/speed/pagespeed/insights/ 36
  28. 28. General hints for optimizing It‘s not witchcraft… 37 7
  29. 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. 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. 31. 40 Thanks! 👋 Quetions? Just ask! @JustPhilMarx / webfalken.de Thanks to SlidesCarnival for Slides template and Icons (CC BY 4.0)

Editor's Notes

  • BERT: Bidirectional Encoder Representations from Transformers / Neurales Netz für Natural Language Processing
  • Moto G4 seit Chrome v81 (Mai 2020) Standard in Entwicklungs-Tools/Lighthouse

×