Accelerate le #webperformance aiuta ad aumentare le opportunità di #guadagno e portare il vostro business su qualsiasi dispositivo, ovunque in tutto il mondo. Minimizzare la #latenza portando i contenuti più vicino agli utenti non solo nelle principali aree metropolitane, ma anche nelle regioni interne. Ottimizzare i percorsi e #minimizzare i #roundtrip per la distribuzione più rapida di contenuti web.  3 secondi di attesa basterebbero all’80% dei visitatori per decidere di abbandonare un sito web lento.  Questo è particolarmente importante in un contesto mobile dove le connessioni possono non essere particolarmente veloci.

1. Web Performance
L'onda perfetta è quella che i surfisti cercano per tutta la vita, a volte senza neppure trovarla

2. https://www.stefanomarchisio.it/
https://www.linkedin.com/in/stefano-marchisio-88b5803a/
Chi sono
Articolo su linkedin: https://www.linkedin.com/pulse/web-
performance-londa-perfetta-per-un-sito-è-avere-tutti-marchisio/

3. Iniziamo
Un volta pensavo che fosse difficile fare WebPerformance per avere tutti gli indicatori in verde
con un buon punteggio.
Poi per caso mi sono trovato a studiare AMP (Accelerated Mobile Pages). Leggendo la
documentazione la cosa che salta all’occhio è che: i css posso essere solo inline e c’e’ un limite
massimo di 50K.
Come faccio a mettere Bootstrap inline quando lui da solo pesa più di 250k???
Prove dopo prove mi sono reso conto che nella maggior parte dei casi utilizziamo solo una
minima parte di Bootstrap.
Ed allora?

4. Lavorare sulle WebPerformance è possibile!
Nelle prossime slide vedremo perché sono così importanti e cosa quali sono le cause di performance scadenti.

5. La definizione di Web Performance
Le Web Performance si riferiscono alla velocità con la
quale le pagine web vengono scaricate e visualizzate
nel browser dell’utente.
Web Performance Optimization (WPO), o meglio le
ottimizzazioni dei siti web, sono come aumentare le
prestazioni web.

6. Ranking e motori di ricerca
Il tempo di caricamento di una pagina è uno dei
fattori che determina il ranking sui motori di ricerca.
Un sito web eccessivamente lento avrà un
posizionamento sui motori di ricerca peggiore
rispetto ad un altro sito web più veloce.

7. Mobile ed Internet / 1
Sempre più persone utilizzano il proprio smartphone per
accedere ad internet. Per questo navigano, fanno acquisti
su siti di e-commerce, etc.
Verificare che il sito web sia adatto per i risultati di
ricerca di Google ottimizzati per i dispositivi mobili.

8. Mobile ed Internet / 2
In passato si navigava usando un pc desktop. Ora
vengono usati una varietà di device (tablet e smartphone)
con schermi di dimensione variabili.
Verificare che il sito web sia responsivo. E con
contenuti adatti allo schermo per non inficiare
l’esperienza utente!

9. Tempi di attesa
«3 secondi di attesa basterebbero all’80% dei visitatori
per decidere di abbandonare un sito web lento.»
State of the Union, 2015
Questo è particolarmente importante in un contesto mobile dove le
connessioni possono non essere particolarmente veloci

10. Tempi di attesa
First Contentful Paint (FCP) misura il tempo che intercorre tra quando inizia il
caricamento della pagina a quando il contenuto inizia ad essere visibile sullo schermo.

11. Tempi di attesa
Nella timeline sovrastante, First Contentful Paint FCP si trova nel secondo
frame (quando per la prima volta appare qualche cosa).
Come si può vedere non tutto è stato renderizzato. Questa è un importante differenza
rispetto a Largest Contentful Paint (LCP) che indica il caricamento della pagina

12. Tempi di attesa
La cosa importante e far vedere qualche cosa
all’utente il prima possibile, in modo che questo non
abbandoni il sito!
Per questo motivo il sito va ottimizzato per diminuire questa
latenza ed ciò che potrebbe causare render-blocking

13. Passi per ottimizzare le prestazioni
Prima si devono misurare le prestazioni attuali del
sito ed individuare i problemi che lo rendono lento.
Fare un ottimizzazione alla volta e misurare nuovamente
le prestazioni per vedere se ci sono vantaggi.
Lavorare per approssimazioni successive.

14. Strumenti per misurare le prestazioni
Google PageSpeed Insights
Google Lighthouse
WebPagetest.org
Google Chrome DevTools
etc…

15. Google Lighthouse / 1

16. Google Lighthouse / 2

17. WebPagetest.org / 1

18. WebPagetest.org / 2

19. Google PageSpeed Insights

20. Google Chrome DevTools
Se si usa Chrome DevTools simulare una connessione mobile: Fast3G o Slow3G

21. Le principali cause di WebPerformance negative
• Utilizzo di troppi font personalizzati (regular, bold, etc …)
• Molte regole CSS inutilizzate nel front-end
• File JavaScript e CSS non minificati
• File testuali (JS e CSS) non compressi con Gzip
• Immagini in formati errati e non ottimizzate
• Video che si caricano in automatico
molti di questi punti posso causare render-blocking!

22. Ottimizzare le WebPerformance
Google Lighthouse annesso al report delle performance
fornisce una lista di punti su cui lavorare (e dei suggerimenti su
come fare le cose).
Oltre a questo nella slide successiva è presente una check-list
con i principali punti da valutare.

23. Alcuni metodi per ottimizzare le WebPerformance
• Mettere CSS nel <head> e JS prima di </body>
• Minificare i file CSS, JS e HTML delle pagine
• Comprimere i file CSS, JS e HTML con Gzip
• Concatenare JS e CSS (può non servire con HTTP/2 ma meglio farlo)
• Utilizzare una Content Delivery Network
• CSS, JS ed immagini meglio se hanno una cache con scadenza
• Caricare le immagini prodotti in modo lazy quando uno scrolla
• Ottimizzare le immagini con qualche tools
• Ridurre le richieste HTTP al minimo e abilitare HTTP/2

24. HTTP/2
L’introduzione della versione http/2 a portato consistenti benefici
alle prestazioni grazie al fatto che è un protocollo multiplexer. Per
questo motivo viene aperta un’unica connessione dalla quale
scaricare tutte le risorse.

25. HTTP/2

26. Cos’è il render-blocking
Una delle maggiori cause di rallentamenti è il render-blocking.
Dopo che la pagina è stata caricata, il browser inizia a parsarla per
renderizzarla. Se trova CSS o JS il browser si ferma ed aspetta che vengano
caricate queste risorse (per poi riprendere).
Per questo motivo dobbiamo gestire in modo opportuno questo tipo di risorse!

27. Cos’è il render-blocking / CSS
Per quanto riguarda i CSS abbiamo un margine minore, visto che senza di loro
la pagina non può essere renderizzata (ma possiamo comunque fare 2 cose)
Minificare e comprimere i CSS in modo da pesare meno e metterli in un unico
file di bundle (anche se con HTTP/2 la cosa è meno importante).
Eventualmente rimuovere i CSS non utilizzati con appositi tools.

28. Cos’è il render-blocking / JS
Questo accade quando abbiamo JS all’interno del tag <head>
Dobbiamo spostarlo in fondo prima della chiusura del tag </body>
Spostando gli script in fondo non si blocca il parser ed il render della pagina
Nei browser moderni abbiamo gli attributi: «async» e «defer» che
permettono di caricare in modo asincrono uno script senza bloccare il render.

29. Attrinuti «async» e «defer» tag script
Gli attributi «async» e «defer» sono simili e scaricano lo script in modo asincrono. La differenza è
che «async» lancia lo script appena è stato scaricato, «defer» rispetta l’ordine.

30. Considerazioni sui font / 1
I font come i CSS devono essere scaricati. Finche non sono disponibili i
browser possono avere comportamenti differenti: visualizzare testo bianco
piuttosto che usare un font di fallback di sistema.
font-display permette di controllare come i font vengono scambiati con i font di sistema
durante il caricamento del font desiderato.
font-display: swap; indica che la pagina viene renderizzata usando il primo font di
sistema disponibile fino al caricamento di “Open Sans Regular ”.

31. Considerazioni sui font / 2
Non esagerare nell’uso dei font, eventualmente fare il preload dei font.

32. Purificare i CSS (rimuovere i CSS non utilizzati)
Se utilizziamo Bootstrap nella maggior parte dei casi utilizziamo solo
una minima parte delle classi incluse nel file CSS.
Per questo motivo mediante appositi tools dobbiamo PROVARE a
RIMUOVERE ciò che non è utilizzato.
Esistono alcuni tools che fanno ciò: PurifyCSS e UnusedCSS.
La Chrome’s DevTools ha un “Coverage” tab che mostra l’utilizzo di CSS e JS.

33. PurifyCSS
E’ un tools scaricabile da NPM o usufruibile online.
npm install -g purify-css
purifycss <css> <content> [option]

34. UnusedCSS
E’ un tools scaricabile da NPM o usufruibile online (gratuito e pagamento).
npm install -g unusedcss
unusedcss url [url]

35. Chrome’s DevTools “Coverage” tab

36. Immagini / 1
Sempre per lo stesso motivo è consigliabile ottimizzare le
immagini al fine di ridurre il peso.
Le immagini NON sono render-blocking ma influiscono lo stesso
sul tempo di caricamento della pagina.

37. Immagini / 2
Nel caso esita un elenco di prodotti (per esempio) è meglio avere un
caricamento lazy delle immagini quando l’utente scrolla la pagina. Per cui
subito far vedere una sorta di place-holder
Per esempio una libreria che fa una cosa simile è: yall.js

38. Considerazioni per CSS, JS e Immagini
Fornire risorse statiche con un efficiente cache policy (scadenza).
Eventualmente utilizzare una Content Delivery Network / CDN. Spesso
utilizzando un sistema simile è possibile abilitare una cache policy

39. Considerazioni finali
Non è detto che dobbiamo fare tutti questi passi, possiamo farne solo alcuni.
Al completamento di ogni passo, fare un test delle prestazioni e vedere
il miglioramento ottenuto.

40. G R A Z I E !
Stefano Marchisio - Sviluppatore web - Angular / ASP.NET MVC Core
https://www.linkedin.com/in/stefano-marchisio-88b5803a/