Core Web Vitals se mění a Google bude nově hodnotit i podle rychlosti odezvy na interakce uživatele. Dříve nepříliš relevantní metriku FID právě nahrazuje přísnější Interaction to Next Paint (INP). Ukážeme si, jaké části vašich webů pomohou být problematické a jak se pomalé interakce dají řešit.

1. Martin Michálek
20. 3. 2024
Nová metrika rychlosti INP
a praktické tipy, jak ji zlepšit

2. www.pagespeed.cz

3. @machal
1.Metriky a byznys
2.Interaction to Next Paint
3.Jak jsme na tom?
4.Pojďme měřit
5.Optimalizace
Nová metrika
rychlosti INP

4. @machal
1.Metriky a byznys
2.Interaction to Next Paint
3.Jak jsme na tom?
4.Pojďme měřit
5.Optimalizace
Nová metrika
rychlosti INP

5. Core Web Vitals
Rychlost načtení Rychlost interakce
Stabilita layoutu

6. Konverze
Vliv rychlosti na konverze
Distribuce LCP
(rychlosti načtení)

8. Prostor pro zlepšení konverzí
1 %
4 %

9. @machal
1.Metriky a byznys
2.Interaction to Next Paint
3.Jak jsme na tom?
4.Pojďme měřit
5.Optimalizace
Nová metrika
rychlosti INP

10. �� �� �� �� ��

11. INP technicky

12. INP technicky

13. INP technicky
FID

14. INP technicky
INP

15. 😠
😍

16. INP = Ihned Něco Prosím!
INP

17. @machal
1.Metriky a byznys
2.Interaction to Next Paint
3.Jak jsme na tom?
4.Pojďme měřit
5.Optimalizace
Nová metrika
rychlosti INP

18. „Vždyť už to je
všechno
rychlé, ne?“

19. Performance Inequality Gap
Hi-end
Low-end

20. Rozdělení metrik u uživatelů
:-(
:-(
75p
75p

22. INP: vidíme také vliv na byznys
INP nám často koreluje s bounce rate, ale někdy také
s konverzním poměrem.
Bounce 40 %
Bounce 25 %

23. INP: pozor na JS
frameworky

24. @machal
1.Metriky a byznys
2.Interaction to Next Paint
3.Jak jsme na tom?
4.Pojďme měřit
5.Optimalizace
Nová metrika
rychlosti INP

26. Data od uživatelů Googlu

27. Nezbytnost – monitoring rychlosti

28. @machal
1.Metriky a byznys
2.Interaction to Next Paint
3.Jak jsme na tom?
4.Pojďme měřit
5.Optimalizace
Nová metrika
rychlosti INP

29. Tip: rozšíření Web Vitals

30. Co s tím?
Očekávání

31. Co s tím?
Realita
Co se načítá?
Co se vykresluje?
Jak rychlé jsou interakce?
Jaký kód se spouští?

32. INP ve fázi renderování
LCP DCL
Problém

33. INP v klidové fázi: zlobivé interakce
Problém

34. INP ve filtru na e-shopu
Reakce
Klik

35. DOM se stal důležitým.
Zmenšete jej a šetřete
s operacemi nad ním.
(Optimum je do 1 500 uzlů.)

36. Megamenu

37. Optimalizace megamenu
Po zjednodušení megamenu se zlepšily metriky CLS,
LCP, ale hlavně INP.

38. Pomalá analytika

39. Pomalá interakce
dataLayer.push – úlohy k odložení
Pomalá analytika: dataLayer.push

40. Pomalá analytika: jak
odblokovat prohlížeč?

41. Interakce už je rychlá
Část odložená pomocí setTimeout()

42. Hlavní zásada
optimalizace INP:
Nejprve reagujte v rozhraní,
pak dělejte náročné operace.

43. 💡Optimalizace INP
1. Měření: sledujte data z CrUX nebo RUM.
2. Obecně: dávejte uživateli okamžitou reakci.
3. Obecně: optimalizujte dlouhé úlohy v JS (metrika TBT).
4. Nelze reagovat? Rozdělte kód s pomocí setTimeout().
5. Nedělejte vše na DOMContentLoaded.
6. Odložte náročné JS operace (líná inicializace).
7. Opatrně s nástroji jako HotJar nebo TikTok pixel.
8. Minimalizujte DOM.

44. WebPerf.cz
Potkejme se

45. Děkuji!
→ Testujte rychlost: app.pagespeed.cz
martin.michalek@pagespeed.cz
@machal

46. Dotazy?
→ Testujte rychlost: app.pagespeed.cz
martin.michalek@pagespeed.cz
@machal