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