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

25. Create Assessment
34

26. Simulate browsers
35

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)