A chi è rivolto

Page Speed Insights è uno strumento rivolto principalmente agli sviluppatori web e ai professionisti del settore IT che possiedono una conoscenza tecnica approfondita. Questo perché i suggerimenti e le raccomandazioni che fornisce presuppongono una comprensione dettagliata della struttura e del funzionamento di un sito web. Gli sviluppatori devono essere familiari con i principali linguaggi di programmazione e markup utilizzati nella costruzione dei siti web, come HTML (HyperText Markup Language), CSS (Cascading Style Sheets) e JavaScript. Questi linguaggi e metalinguaggi sono fondamentali per creare, stilizzare e aggiungere funzionalità interattive ai siti web. Page Speed Insights, quindi, è particolarmente utile per coloro che hanno le competenze necessarie per interpretare i risultati dell’analisi e implementare le modifiche suggerite per ottimizzare le performance del sito.

Perché si usa

L’utilizzo di Page Speed Insights è cruciale per garantire che un sito web offra una velocità di caricamento ottimale, elemento essenziale per una buona esperienza utente. I siti web lenti possono frustrare gli utenti e influire negativamente sul posizionamento nei motori di ricerca. Questo strumento è particolarmente utile per i siti realizzati con CMS (Content Management System) come WordPress, che possono diventare lenti a causa di numerose animazioni, plugin e una configurazione complessa. Page Speed Insights analizza le pagine web, fornendo un punteggio che va da 0 a 100 e una lista dettagliata di problemi tecnici che influiscono negativamente sui tempi di caricamento. Tra i problemi comuni che vengono individuati ci sono immagini non ottimizzate, script JavaScript e CSS non minimizzati, eccessivo uso di risorse del server e tempi di risposta lenti. Risolvendo questi problemi, gli sviluppatori possono migliorare significativamente la velocità e le performance del sito, offrendo un’esperienza utente migliore e potenzialmente migliorando la posizione del sito nei risultati dei motori di ricerca.

Come si usa

Page Speed Insights si usa tramite l’accesso a questa pagina: https://pagespeed.web.dev/. Si inserisce l’URL della pagina che deve essere valutata e si clicca su “analizza”. Dopo un po’ di tempo verrà visualizzato il report relativo alla versione Mobile perché è considerata la più importante visto che negli ultimi anni i siti web vengono visti soprattutto da smartphone. Tuttavia, è comunque presente anche il link per visualizzare la versione desktop.

Il punteggio ottenuto

Il risultato è piuttosto evidente ed è in tre colori: verde, arancione o rosso. Le percentuali necessarie per questi risultati sono:

• Verde: 90-100
• Arancione: 50-89
• Rosso: 0-49

Non spaventarti troppo se vedi che il tuo sito ha un valore basso, in effetti sei in buona compagnia. Moltissimi siti anche piuttosto grossi e importanti hanno valori piuttosto bassi (ad esempio il risultato di amazon.it, come mostrato nell’immagine allegata). Page speed insight è piuttosto spietato…

Sotto c’è un elenco degli elementi che secondo Page Speed Insights sono da migliorare (a meno che non hai ottenuto 100, e nel caso complimenti perché è un risultato notevole). Le aree sono: Prestazioni (quella di cui ci occupiamo in questo articolo), Accessibilità, Best practice e SEO.

Sezioni principali relative alle prestazioni

Le principali parti del risultato sono le Metriche e la Diagnostica, una breve introduzione a questi punti:

METRICHE

La sezione “Metriche” in PageSpeed Insights fornisce una panoramica dei principali indicatori di performance della pagina web analizzata. Questi indicatori sono cruciali per comprendere come la pagina si comporta dal punto di vista dell’utente. Ecco i dettagli delle metriche presenti:

1. Largest Contentful Paint (LCP)
   Misura il tempo impiegato per il caricamento del contenuto più grande visibile nella finestra di visualizzazione. Questo indicatore è fondamentale per valutare la velocità di caricamento percepita dall’utente. Un LCP sotto i 2,5 secondi è considerato buono.
2. Interactivity to Next Paint (INP)
   Valuta la reattività della pagina durante l’interazione dell’utente. Misura il tempo tra un’azione dell’utente e il momento in cui la pagina è pronta a rispondere visivamente a quella azione. Un valore inferiore a 200 ms è ideale.
3. Cumulative Layout Shift (CLS)
   Indica la stabilità visiva della pagina. Misura quanto gli elementi della pagina si spostano durante il caricamento. Un valore CLS inferiore a 0,1 è considerato buono.
4. First Contentful Paint (FCP)
   Misura il tempo impiegato per visualizzare il primo contenuto utile. Questo è il primo punto in cui l’utente può vedere qualcosa di significativo sullo schermo. Un buon FCP è sotto i 2 secondi.
5. Time to First Byte (TTFB)
   Indica il tempo impiegato dal browser per ricevere il primo byte di dati dal server. Questo valore include il tempo di connessione e di risposta del server. Un buon TTFB è sotto i 600 ms.
6. Speed Index (SI)
   Misura la velocità con cui il contenuto visibile della pagina è popolato. Un valore inferiore a 3,4 secondi è considerato buono.

DIAGNOSTICA

La sezione “Diagnostica” fornisce un elenco dettagliato di problemi specifici che possono influire negativamente sulle prestazioni della pagina. Questi problemi sono accompagnati da suggerimenti per la loro risoluzione. Se vuoi migliorare il punteggio devi lavorare su questi punti. Ecco un riassunto delle tipiche problematiche diagnosticate:

1. Elimina risorse che bloccano il rendering
   Identifica le risorse, come i file CSS e JavaScript, che bloccano la visualizzazione iniziale della pagina. Ottimizzare il caricamento di queste risorse può migliorare significativamente il tempo di rendering.
2. Riduci il tempo di esecuzione di JavaScript
   Segnala quanto tempo impiega il JavaScript a essere eseguito. Codici JavaScript pesanti possono rallentare la pagina.
3. Riduci l’impatto del codice di terze parti
   Evidenzia l’impatto delle risorse di terze parti (come plugin e script esterni) sulle prestazioni. Minimizzare queste risorse può ridurre i tempi di caricamento.
4. Assicurati che il testo rimanga visibile durante il caricamento dei caratteri web
   Indica se ci sono problemi nel caricamento dei font che potrebbero rendere il testo invisibile o ritardato.
5. Immagini non ottimizzate
   Rileva immagini che potrebbero essere compresse o ridimensionate per migliorare i tempi di caricamento.
6. Evita lunghi tempi di esecuzione del thread principale
   Indica se il thread principale del browser è bloccato per troppo tempo, impedendo l’interazione con la pagina.
7. Riduci il tempo di risposta del server
   Suggerisce di migliorare i tempi di risposta del server per ridurre il TTFB.

Queste sezioni forniscono un’analisi approfondita dello stato delle prestazioni della pagina web e aiutano gli sviluppatori a identificare e risolvere problemi specifici che possono influire negativamente sull’esperienza utente.

L’analisi e le possibili soluzioni (in particolare per un sito wordpress) eslulano da questo articolo, altrimenti diventerebbe veramente lungo e complesso, ma verranno trattate in futuri articoli dove analizzeremo i  per alcuni specifici punti il dettaglio e sopratutto le possibili soluzioni, in particolare per un sito wordpress, anche per chi non è espertissimo.

Altre sezioni:

Le altre sezioni non incidono direttamente sulle prestazioni ma sono anche queste molto importanti, ecco una breve introduzione:

Accessibilità

Problemi di accessibilità comuni includono testi non leggibili, contrasti insufficienti e problemi di navigazione. Ottimizzare questi aspetti può migliorare l’esperienza utente per tutti, in particolare per le persone con disabilità.

Best Practice

Seguendo le migliori pratiche di sviluppo web, si può migliorare la sicurezza e la performance complessiva del sito.

SEO

Un punteggio SEO alto indica che la pagina è ottimizzata per i motori di ricerca, facilitando così il posizionamento nei risultati di ricerca.