La performance del sito, oltre ad essere uno dei parametri dei tools di Google indica la velocità di caricamento di una pagina.

Nel caso di un’analisi fornitaci da Lighthouse, uno strumento presente su Chrome e su web.dev, la performance segnala le velocità di caricamento in una delle modalità di connessione (3G, e altro) emulabile.

In particolare, sebbene solitamente si presti attenzione più al valore numerico che agli effetti sulla esperienza dell’utente, alcune metriche ci aiutano a comprendere quando il codice diventa visibile, e in che ordine.

Analisi su Lighthouse delle peformance del sito

Per un’analisi precisa di come e in che ordine i file vengano caricati basta utilizzare il pannello network presente tra i servizi di Chrome.

Alla stessa maniera, è possibile visualizzare in maniera altrettanto dettagliata il waterfall (l’elenco a discesa dei file del sito caricati dal browser) da gtmetrix.com.

Effetto waterfallo visualizzato tramite Chrome

La performance del sito e il performance budget

Pagespeed Insight, un tool dedicato completamente alla scansione dei siti, segnala alla voce Keep request counts low and transfer sizes small la gestione del numero e della dimensione dei file caricati nella pagina.

L’indicazione segnala gli elementi suddividendoli per categoria (script, immagini, script di terze parti…), segnando per ognuna la dimensione e segnalando eventuali errori di gestione.

Per gestire manualmente la dimensione delle singole categorie su chrome, Google consiglia la creazione e la compilazione di un file budget.json (il nome può variare ma la sostanza no). Di seguito un esempio:

 [
  {
    "resourceSizes": [
      {
        "resourceType": "script",
        "budget": 300
      },
      {
        "resourceType": "image",
        "budget": 100
      },
      {
        "resourceType": "third-party",
        "budget": 200
      },
      {
        "resourceType": "total",
        "budget": 1000
      }
    ],
    "resourceCounts": [
      {
        "resourceType": "third-party",
        "budget": 10
      },
      {
        "resourceType": "total",
        "budget": 50
      }
    ]
  }
]

Il file è di facile lettura, e per ogni tipologia di elemento (resourceType appunto) bisogna segnalare un budget massimo previso.

Il valore numerico del budget può indicare il numero massimo di kilobyte permessi o il numero massimo di file caricabili.

Per avere un’idea più precisa sulle caratteristiche degli elementi, vi consiglio la lettura di questo articolo.

Come gestire il budget della performance.

Se realizzare un file per la gestione della performance del sito è semplice, non lo è ragionare in merito all’ottimizzazione del file.

Esistono degli strumenti che forniscono una valutazione di massima sulla gestione dei tipi di elementi, ma in linea di massima la loro efficacia dipende all’esperienza di chi li usa.

Quando ci si prepara a lavorare sulle prestazioni, la prima occhiata deve essere rivolta all’esperienza dell’utente, piuttosto che al valore numerico.

Da questo punto di vista, è buona abitudine controllare i parametri di pagespeed insight First Contentful Paint (dopo quanti secondi è visibile la prima immagine o il primo testo), First Meaningful Paint (quando diventa visibile il contenuto principale) e Time to Interactive (il tempo che passa prima che la pagina diventi interattiva).

Si tratta dunque di dati relativi alla User Experience.

Per gestire al meglio il caricamento degli script è possibile usare speedcurve, o bundlesize da aggiungere a package.json.

Lo scopo delle nostre azioni deve essere quella di rendere visibili e interattivi gli elementi della pagina anche per i caricamenti da 3G sul mobile, in modo da aumentare l’usabilità del sito, ma sopratutto diminuire i clic degli utenti impazienti.

Il rapporto tra visibilità e interattività

La lettura delle metriche non è lineare come si può immaginare.

La velocità di caricamento degli elementi e la loro relativa visibilità non è sintomo di funzionalità del sito.

Un classico esempio è il caricamento della pagina che non permette l’interazione con pulsanti, accordion e tab, nonostante metriche come Time to First Interactive segnalino un valore ottimale.

Parliamo dunque di introdurre il Time To Consistently Interactive, un valore che segnala la reattività ad un input dell’utente.

Si tratta sempre, dunque, di mediare il rapporto tra “godibilità” del sito per i motori di ricerca e per gli utenti.

starstarstarstarstar3.50 / 2 voto / i


Related Posts

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.