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).

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)