Migliorare le performance frontend continuano ad essere un tema super caldo e i consigli e i contenuti in rete sono sempre di più. Ma quali di questi dobbiamo prendere in seria considerazione? Nel web moderno è fondamentale misurare, ottimizzare e monitorare le performance, capire se il sito è veloce e se offre un’esperienza di qualità agli utenti, perché queste caratteristiche possono essere decisive per il successo di un progetto online.
“Una campagna di successo deve basarsi su 3 fondamenti: interazione, partecipazione, condivisione. Anche una campagna di Email Marketing, è mal sfruttata se poi non è associata ad una strategia “long-Tale” (coda-lunga) come ad esempio una Display o una strategia Content che inizia quando finisce la DEM. In questo modo si punta sulla coda di ritorno degli utenti.”
– MASSI VIGILANTE – SEO SEOHULK
Migliorare le performance del frontend
Come abbiamo visto, il frontend è costituito da codice HTML, file CSS, JavaScript, font, immagini e in generale da tutti gli elementi che compongono la pagina e incide per oltre l’80% sulla performance complessiva della pagina. Le metriche che useremo per valutare il miglioramento di performance del frontend saranno: First Contentful Paint, Time To Interactive, Dom Content Loaded e Speed Index, ovvero quelle che misurano la velocità percepita dall’utente. Vediamo quindi come velocizzare il sito intervenendo sul frontend.
Aumenta la velocità (percepita)
Per farlo, devi mostrare il più velocemente possibile i contenuti, il che significa ridurre il peso della pagina, il numero di file scaricati e posticipare il caricamento di tutti i file non essenziali ovvero inutili per il rendering dell’area above the fold. Poiché il fold varia in base alla risoluzione del display, per effettuare l’ottimizzazione dovrai basarti sulla risoluzione dello schermo dei tuoi visitatori. Puoi rilevare le risoluzioni dello schermo più frequenti analizzando Google Analytics (Dimensione: Risoluzione dello schermo nel report Pubblico > Tecnologia > Browser e sistema operativo).
Riduci il peso della pagina
Il peso di una pagina è determinato quasi completamente dagli assets, ovvero dalle risorse incluse all’interno della stessa. Per diminuire il peso devi innanzitutto abilitare la compressione HTTP e poi ridurre il numero di richieste HTTP . Quest’ultima indicazione è valida anche se sul tuo server è attivato HTTP/2. Il numero di richieste HTTP può essere ridotto includendo meno file nel codice sorgente della pagina. Bisogna verificare se i file JavaScript e CSS sono tutti necessari e questa analisi va effettuata su tutte le pagine, in quanto pagine differenti possono avere necessità differenti.
Posticipa il caricamento delle risorse
Tutti gli assets che non sono critici al rendering della pagina possono essere caricati in un secondo momento oppure caricati all’occorrenza. Il browser considera critiche (=necessarie) e bloccanti tutte le risorse che trova nell’ <head> e fino a quando non le ha scaricate, non inizia il rendering. L’utente vedrà una pagina bianca fino a quando non ha avuto inizio il rendering.
Critical Rendering Path Il “percorso critico di visualizzazione” è costituito dall’insieme di operazioni assolutamente necessarie al browser per disegnare la parte above the fold, ovvero l’area visibile dall’utente senza effettuare lo scroll. Il percorso eseguito normalmente è il seguente.
1. Il browser scarica il codice HTML.
2. Il browser interpreta l’HTML.
3. Il browser scarica tutti i file CSS (render blocking CSS).
4. Il browser scarica ed esegue i file JavaScript in maniera sincrona (render blocking JS).
5. Una volta eseguiti tutti i JavaScript, il browser procede al rendering della pagina.
6. Il browser scarica tutti gli altri asset nell’ordine di comparizione.
Ottimizza le immagini
Le immagini, soprattutto se usate non correttamente, sono uno degli elementi che impatta di più sulle performance di caricamento delle pagine web. Qual è il formato migliore? Per ottimizzare la compressione delle immagini segui queste linee guida:
• immagine piccola animata (max 10×10 pixel e 3 colori): GIF;
• immagine grande con pochi colori: PNG;
• fotografie e immagini grandi e colorate: JPG;
• evita i formati BMP e TIFF.
