Performance Optimization: tecniche avanzate di ottimizzazione delle prestazioni

Nellʼera digitale odierna, dove lʼattenzione degli utenti è al minimo storico: ovvero una media di 8,25 secondi, lʼottimizzazione delle prestazioni web è catalogabile come una delle priorità maggiori per le aziende, specialmente in termini di vendite.

Quante volte ci capita di cercare qualcosa su Google, aprire un sito e dopo pochi secondi di caricamento chiuderlo e passare al prossimo?

Google stima che anche un ritardo di un secondo nei tempi di caricamento della pagina può ridurre le conversioni del 7%. Dalle piccole imprese ai giganti del web come Amazon o Reddit, lʼobiettivo comune è lo stesso: offrire contenuti velocemente e in modo efficiente, indipendentemente dalla complessità che cʼè dietro.

Tra le strategie più utilizzate per raggiungere questo obiettivo, possiamo trovare tre principali metriche (Core Web Vitals) per misurare la velocità di caricamento percepita.

1. LCP Largest Contentful Paint: per gli sviluppatori web misurare la velocità di caricamento dei contenuti può essere più difficile del previsto, in quanto strumenti come load o DOMContentLoaded non corrispondono precisamente a ciò che lʼutente vede sullo schermo. Dunque, si è arrivati alla soluzione che ciò che è importante non è lʼinizio dellʼesperienza di caricamento First Contentful Paint, piuttosto il tempo di rendering del blocco di immagine o testo più grande nellʼarea visibile, relativo alla prima vista dellʼutente.


Google ci notifica che tutto ciò che carica entro 2,5 secondi risulta in una buona esperienza utente, oltre i 4 secondi è negativa.

Delle possibili soluzioni potrebbero essere:

• Ridurre il tempo di caricamento delle risorse: ciò è possibile in fase di configurazione di un sito, con tecnologie come imagemin il quale comprime e minimizza immagini PNG, JPEG, GIF e SVG in produzione.
• Utilizzare il minor numero di font.
  Utilizzare risorse con formati moderni come webp e svg.
• Sfruttare le Content Delivery Networks CDN per fornire assets, come immagini, video, fogli di stile, JS agli utenti nel modo più efficiente.

Un altro ostacolo è il blocking JS, ossia interrompere il caricamento dellʼinterità della pagina per aspettare la compilazione di altro codice: questo è il motivo per cui server-side framework come Next.js stanno prendendo sempre più spazio a discapito dei classici single-page applications come React.


2. FID First Input Delay: così come nella vita ci impegniamo a fare una buona prima impressione col prossimo, così è anche sul web. Infatti, è qui che entra in gioco la FID che consente di misurare lʼimpressione dellʼutente circa lʼinterattività e la reattività del sito.

Per Google, quando lʼutente interagisce con il sito, ad esempio clicca su un bottone e lʼelaborazione dellʼevento avviene entro 100 millisecondi ciò è indicativo di una performance soddisfacente, mentre non si può dire lo stesso se va oltre i 300 millisecondi.

L'unico modo per ottimizzare questo aspetto è riducendo il tempo di esecuzione di Javascript in vari modi: uno tra questi è il Lazy Loading.

Lazy Loading

Perché caricare unʼimmagine o un intero componente che lʼutente non può nemmeno ancora visualizzare?

Il "caricamento pigroˮ è una tecnica che consiste nel ritardare il caricamento di determinate risorse fino al momento in cui esse siano effettivamente necessarie; ciò porta a diversi vantaggi tra cui:

• miglioramento delle prestazioni: riducendo la quantità di dati caricati durante l'accesso iniziale a una pagina, il lazy loading può diminuire significativamente i tempi di caricamento, offrendo un'esperienza utente più rapida e fluida.
• risparmio di bandwidth: particolarmente utile per gli utenti con connessioni a internet limitate o lente, poiché riduce la quantità di dati consumati per il caricamento di pagine o app non completamente esplorate.
• risorse on-demand: come detto in precedenza, caricando le risorse solo quando sono necessarie, si evita lo spreco di risorse del server e del dispositivo client, ottimizzando l'uso della memoria e della CPU.

Ma come si mette in pratica?

Nel caso delle immagini, il metodo più semplice è quello di sfruttare lʼattributo nativo di HTML5 "loadingˮ, ormai supportato da ogni browser moderno.

    <img src="immagine.jpg" loading="lazy" alt="descrizione">

    <iframe src="pagina.html" loading="lazy">

Con React invece, possiamo utilizzare la funzionalità "React.lazy()ˮ.

Supponiamo di avere un componente MyComponent che desideri caricare pigramente. Invece di importarlo normalmente, utilizzerai React.lazy() per importarlo come un componente pigro.

    import React, { Suspense } from 'react';

    const LazyComponent = React.lazy(() => import('./MyComponent'))

Suspense ti consente di avvolgere i componenti pigri e specificare un contenuto di fallback da visualizzare mentre il componente è in fase di caricamento (ad esempio, un indicatore di caricamento).

    function App() { 

        return (

        <div> 

            <Suspense fallback={ <div>Caricamento... </div>}> 

                <LazyComponent />

            </Suspense>

        </div>

        );

    } 

3. CLS Cumulative Layout Shift): questa metrica si incentra sulla misurazione della stabilità visiva e serve a quantificare il numero di volte in cui lʼutente riscontra variazioni di layout impreviste.

Minore è il valore CLS, più piacevole sarà lʼesperienza dellʼutente.


Articolo completo su web.dev

Uno spostamento improvviso può compromettere drasticamente lʼesperienza utente e arrecare gravi danni; esso accade per diversi motivi: delle risorse caricano in modo asincrono, elementi del DOM vengono aggiunti dinamicamente successivamente al caricamento della pagina, etc.

Una delle cause più comuni sono le immagini e i video che mancano di dimensioni specifiche:

    <img src="img_jpg" alt="image example" width="500" height="600">

Un'alternativa è la proprietà CSS aspect-ratio, oppure lʼattributo HTML srcset che permette di inserire immagini di grandezze diverse per differenti viewport.

Anche i widget per le pubblicità e animazioni mal progettate sfociano in un punteggio CLS più alto e dunque negativo.

Strumenti per Sviluppatori

Adesso che abbiamo individuato i parametri che determinano lʼefficienza di un sito web, vediamo i mezzi di cui uno sviluppatore non può sottrarsi per verificarli.

Recentemente il team di Chrome che lavora a Google ha rilasciato una nuova estensione: Web Vitals

N.B Eʼ importante navigare nelle impostazioni e attivare Console logging.

Grazie a questa estensione è possibile aprire la console in qualsiasi sito web e poter visualizzare i valori menzionati in precedenza. Ma il vero punto di forza è individuare facilmente gli elementi che più nello specifico influenzano, in positivo o in negativo, i parametri e in questo modo andare a modificarli

Dʼaltro canto, può essere un lavoraccio dover analizzare pagina per pagina gli elementi che potenzialmente causano problemi allʼapplicazione, ed è qui che entra in gioco lighthouse, o meglio, unlighthouse.

La prima è unʼestensione di Google che permette la scannerizzazione della pagina attuale in cui ti trovi, mentre la seconda può addirittura scansionare lʼintero sito e ogni sua possibile pagina e lo fa in parallelo, ciò significa che impiega solo qualche minuto ad analizzare centinaia di pagine.
Per utilizzarla, bisogna lanciare il comando:

npx unlighthouse —site <your-site>

Tirando le somme

In conclusione, abbiamo esplorato diverse tecniche per ottimizzare le prestazioni, dal monitoraggio delle risorse, allʼimplementazione lato codice. Eʼ chiaro che non esiste una soluzione universale ma piuttosto una serie di strumenti di cui i devs devono armarsi per adattarsi alle specifiche esigenze di un sito web, in quanto è fondamentale non solo per quanto riguarda scalare la famosissima "classificaˮ di Google in termini di SEO, ma anche per garantire unʼesperienza utente fluida e godibile.