Durante questo talk sulle prestazioni web, scoprirai come rendere il tuo sito web più veloce ed usabile, e come questo comporti un miglioramento dell’esperienza utente e l’aumento della visibilità del tuo sito sui motori di ricerca, riducendo persino i costi di marketing digitale. Andrea condividerà la sua esperienza nel campo delle web performance e fornirà suggerimenti pratici, ad alto impatto e facilmente applicabili alla maggior parte dei siti web su come migliorare le performance nel 2023.

1. Come e perché ($)
migliorare le
prestazioni web
Consigli pratici per il 2023
25 Maggio 2023 :: GDG Firenze @ Nana Bianca

3. 3
How do your website users feel?

4. 1 secondo
di tempo di
caricamento
-14%
utenti che
lasciano il sito
all'atterraggio
(frequenza di rimbalzo)
+13%
utenti che raggiungono
gli obiettivi del sito
(tasso di conversione)
Source: How Renault improved its bounce and conversion rates by measuring and optimizing Largest Contentful Paint

6. ● Cosa sono le prestazioni web
● Impatto sul business
● Suggerimenti per il miglioramento
delle prestazioni web

7. Andrea Verlicchi
● Tonnellate di siti
● Sviluppo front-end
● Consulente per le
prestazioni web

8. 8 Google Hackathon, London

9. 1. Prestazioni web, Search Engine
Optimization, impatto business
2. Misurazione web performance
3. Gioco a premi! 🎉
4. Suggerimenti per il 2023

10. Prestazioni web, SEO,
e impatto sul business

11. 11
How do your website users feel?

12. Google Core Web Vitals
Good Ok Poor
2.5 s 4.0 s
Good Ok Poor
100 ms 300 ms
Largest Contentful Paint (LCP)
Caricamento
Buy now
First Input Delay (FID)
Interattività
Buy now
👆
Good Ok Poor
0.10 0.25
Cumulative Layout Shift (CLS)
Stabilità visiva
Ad
Buy now

13. Google Core Web Vitals - Novità!
Good Ok Poor
2.5 s 4.0 s
Good Ok Poor
100 ms 300 ms
Largest Contentful Paint (LCP)
Caricamento
Buy now
First Input Delay (FID)
Interattività
Buy now
👆
Good Ok Poor
0.10 0.25
Cumulative Layout Shift (CLS)
Stabilità visiva
Ad
Buy now
Good Ok Poor
200 ms 500 ms
Interaction to Next Paint (INP)
Marzo 2024

14. Come fa Google a conoscerne i valori?
Chrome User Experience
(CrUX)
Google Chrome CrUX Report

15. I Core Web Vitals impattano il posizionamento in Google Search
Source: https://developers.google.com/search/blog/2020/11/timing-for-page-experience
Core
Web
Vitals
Mobile friendly
HTTPS
No intrusive interstitials
Search signals for
page experience
Loading
Largest Contentful Paint (LCP)
Interactivity
First Input Delay (FCP)
Visual stability
Cumulative Layout Shift (CLS)

16. 2022 © cognizant netcentric
Quanto impattano i Core Web Vitals nella classificazione
SISTRIX
Visibility
Index
90%
95%
100%
105%
15/06/2021 27/06/2021 11/07/2021 25/07/2021
Good domains
110%
Google Update
31/08/2021
22/08/2021
08/08/2021
Poor domains
4%
Increase in
ranking
Source: https://www.sistrix.com/blog/core-web-vitals-is-a-measurable-ranking-factor/
16

17. 2023 © cognizant netcentric / Confidential
Average Google Click-Through Rate (CTR) by Position
Source: https://clictadigital.com/what-is-the-average-google-click-through-rate-by-position/
17
Position
on
SERP
10
10% 20% 30% 50%
40%
43,32%
37,36%
29,90%
19,38%
10,95%
10,00%
5,28%
4,13%
4,13%
3,11%
0%
Percentage of clicks
9
34,2%
Average increase
in organic traffic
by climbing 1 rank
8
7
6
5
4
3
2
1

18. 2022 © cognizant netcentric
Alte conversioni +
Basso costo del
traffico
Buone prestazioni
Basse conversioni +
Alto costo del traffico
Prestazioni scarse
18
Successo =
Traffico ×
Conversioni

19. Misurare le
prestazioni web

20. Sul sito - Real User Monitoring In laboratorio - Synthetic
Quadro generale,
scovare anomalie
Investigarne le cause,
testare le soluzioni

21. Sul sito - Real User Monitoring In laboratorio - Synthetic
Pagespeed
insights
Lighthouse
Chrome User
Experience Report
(CrUX)
Quadro generale,
scovare anomalie
Investigarne le cause,
testare le soluzioni

22. Sul sito - Real User Monitoring In laboratorio - Synthetic
● Su tutte le pagine, mentre
gli utenti navigano
● Utenti reali, dispositivi reali,
connessioni, posizioni reali
● Interazioni utente incluse
● Dati in una dashboard
● Un determinato URL
● Emulazione, singola località
● Dettagli! Fotogrammi, video,
waterfall di rete, CPU, etc.
● Nessuna interazione utente
● Risultati immediati
Quadro generale,
scovare anomalie
Investigarne le cause,
testare le soluzioni

23. Gioco a premi! 🍸
SPONSORED BY

24. Grazie per aver giocato 🎉

25. Suggerimenti per il
miglioramento nel 2023

26. ● Maggiore impatto nel mondo reale
● Pertinenti e applicabili a tutti i siti
● Realistici da implementare

27. Google Core Web Vitals
Good Ok Poor
2.5 s 4.0 s
Good Ok Poor
100 ms 300 ms
Largest Contentful Paint (LCP)
Caricamento
Buy now
First Input Delay (FID)
Interattività
Buy now
👆
Good Ok Poor
0.10 0.25
Cumulative Layout Shift (CLS)
Stabilità visiva
Ad
Buy now

28. Assicurati che la risorsa
LCP sia rilevabile 🔍 dal
sorgente HTML

29. 72% delle pagine, su smartphone,
elemento LCP = un’immagine
39% di queste immagini
non è rilevabile dalla sorgente HTML
Sources: Web Almanac

30. ● Carica l'immagine usando un elemento
<img> con l'attributo src or srcset
● Preferisci il rendering lato server (SSR)
rispetto al rendering lato client (CSR)
● Se la tua immagine deve essere
referenziata da un file CSS o JS esterno,
includila nel sorgente HTML tramite tag
<link rel="preload"> tag.

31. Assicurati che la 🔺
chiamata alla risorsa LCP
abbia la massima priorità

32. ● Aggiungi fetchpriority="high" al
tag <img> della tua immagine LCP
● Non impostare mai loading="lazy"
sul tag <img> della tua immagine LCP
● Rimandare le risorse non critiche, in ogni
caso in cui è possibile farlo

33. Utilizza una CDN 🌐
per ottimizzare il tempo di
risposta del server (TTFB) di
HTML e risorse

34. Servire i tuoi contenuti dal punto più
geograficamente vicino ai tuoi utenti.
Memorizzare nella cache i contenuti
in modo che, quando richiesti nuovamente,
possano essere serviti rapidamente.
Sources: Web Almanac

35. ● Aumenta il tempo per cui i contenuti
vengono memorizzati nella cache.
● Memorizza nella cache il contenuto a
tempo indeterminato e svuota la cache
quando fai gli aggiornamenti.
● Sposta la logica dinamica, dal server di
origine (origin) all'edge server

36. Google Core Web Vitals
Good Ok Poor
2.5 s 4.0 s
Good Ok Poor
100 ms 300 ms
Largest Contentful Paint (LCP)
Caricamento
Buy now
First Input Delay (FID)
Interattività
Buy now
👆
Good Ok Poor
0.10 0.25
Cumulative Layout Shift (CLS)
Stabilità visiva
Ad
Buy now

37. Google Core Web Vitals
Good Ok Poor
2.5 s 4.0 s
Good Ok Poor
200 ms 500 ms
Largest Contentful Paint (LCP)
Caricamento
Buy now
Interaction to Next Paint (INP)
Interattività
Buy now
👆
Good Ok Poor
0.10 0.25
Cumulative Layout Shift (CLS)
Stabilità visiva
Ad
Buy now

38. Evita o spezzetta 🔪
i long task

39. Task = rendering e layouting, oltre ad
analisi, compilazione, esecuzione di script.
50 ms di blocco nel thread principale
soglia per cui un task è considerato “lungo”.
19 è il numero mediano
di long task su mobile
Sources: Web Almanac

40. ● Suddividi le attività lunghe (long task)
in attività più piccole, trasferendo spesso
l’esecuzione al thread principale
● Prendi in considerazione l'utilizzo di API
come isInputPending e Scheduler
Sources: Optimize long tasks

41. Evita codice JavaScript 🟨
non necessario

42. 460 kb/pagina
mediana del peso del codice JS servito
Questo Javascript crea
un ambiente in cui le le attività competono
per l’attenzione del thread principale
Sources: Web Almanac, Optimize LCP / Make it discoverable

43. ● Utilizza lo strumento Coverage in
DevTools per trovare il codice inutilizzato
● Se c’e codice inutilizzato perché verrà
utilizzato in seguito, spostalo in un un
pacchetto separato (code splitting)
● Utilizzi un gestore di tag?
Controlla periodicamente i tuoi tag.
Sources: Coverage, Code splitting, Tag best practices

44. Evita i grandi 🐙
aggiornamenti di
rendering

45. Javascript non è l'unica cosa che può
influenzare la reattività del tuo sito web.
Rendering può essere costoso e può
interferire con la capacità del tuo sito web di
rispondere agli input dell'utente.

46. ● Evita di usare
requestAnimationFrame() per eseguire
lavoro non visivo.
● Mantieni piccole le dimensioni del tuo DOM.
● Usa il contenimento CSS
(proprietà contain)
Sources: Avoid an excessive DOM size, CSS Containment property

47. Google Core Web Vitals
Good Ok Poor
2.5 s 4.0 s
Good Ok Poor
100 ms 300 ms
Largest Contentful Paint (LCP)
Caricamento
Buy now
First Input Delay (FID)
Interattività
Buy now
👆
Good Ok Poor
0.10 0.25
Cumulative Layout Shift (CLS)
Stabilità visiva
Ad
Buy now

48. Imposta dimensioni esplicite
🖼 su ogni contenuto
caricato dalla pagina

49. Sources: Web Almanac,
0px altezza predefinita iniziale
delle immagini non dimensionate
72% delle pagine ha
almeno un'immagine senza dimensioni

50. ● Setta in modo esplicito gli attributi width
e height (or proprietà CSS equivalenti)
nelle immagini
● Usa la proprietà CSS aspect-ratio
per riservare spazio per contenuti caricati
lazy (annunci, video incorporati, ecc.)
● Se aspetto sconosciuto, usa min-
height

51. Assicurati che le pagine
siano idonee per la cache
back/forward 💭 (bfcache)

52. 35% delle pagine
non sono idonee per bfcache
Sources: Web Almanac

53. ● Verifica se le tue pagine sono idonee
utilizzando lo strumento bfcache tester
(in developer tools)
● Lavora sui motivi per cui non lo sono 😊
Sources: bfcache tester in DevTools

54. Evita animazioni/transizioni 🎞
che utilizzano proprietà CSS che
inducono il ricalcolo del layout

55. 15% in meno di probabilità di avere un
buon CLS se animi qualsiasi proprietà CSS
che possa influenzare il layout
Gli elementi posizionati con absolute, di
cui si animano le proprietà top o left,
causano layout shift 🤯
Sources: Web Almanac, Optimize LCP / Make it discoverable

56. ● Mai animare o “transizionare” le proprietà
CSS che richiedono ai browser di
aggiornare il layout della pagina
● Invece di animare le proprietà top o left,
animare transform:translateX() o
transform:translateY()

57. Per concludere

58. 2022 © cognizant netcentric
58

59. 2022 © cognizant netcentric
59

61. ● Percezione del brand
● – frequenza di rimbalzo
● + tasso di conversione
● Miglior posizionamento
● Spendere meglio

62. 2022 © cognizant netcentric

63. Feedback,
please? 👉
Google form