WordPress è il sistema di gestione dei contenuti (CMS) più diffuso al mondo, grazie alla sua semplicità d'uso e flessibilità. Le ampie opzioni di personalizzazione di WordPress consentono agli editori di creare siti web che incontrano profondamente il loro pubblico.
Eppure, nonostante le potenti funzionalità del CMS, è ancora possibile creare siti dall'aspetto accattivante ma che faticano ad aumentare il numero di utenti. Sebbene un audit dei contenuti sia certamente consigliabile, gli editori dovrebbero prima valutare un audit tecnico per assicurarsi che non vi siano elementi in background nel loro sito che ne ostacolino la visibilità.
Tra i parametri di performance che dovrebbero misurare ci sono principalmente i Google Core Web Vitals (CWV).
Queste metriche, che Google ha convertito in segnali di ranking subito dopo la loro introduzione nel 2020 , svolgono un ruolo fondamentale nella misurazione dell'esperienza utente (UX) di una pagina web.
I CWV comprendono tre parametri distinti ma collegati:
- Vernice con contenuto più grande (LCP)
- Ritardo del primo ingresso (FID)
- Spostamento cumulativo del layout (CLS)
Questi segnali misurano rispettivamente la velocità di caricamento percepita, l'interattività e la stabilità visiva di una pagina web.
Diamo un'occhiata più da vicino a questi CWV per capire perché sono così importanti, come misurarli con precisione e poi valutare le misure concrete che possiamo adottare per aumentarne i punteggi.
Cosa sono le metriche Core Web Vitals?
I tre Core Web Vitals (CWV) di Google valutano la qualità dell'esperienza utente (UX) di un sito web, fornendo informazioni sulle prestazioni delle pagine web in termini di velocità di caricamento, interattività e stabilità visiva.
- Largest Contentful Paint (LCP): misura la velocità di caricamento del sito e si riferisce specificamente al punto del processo di caricamento in cui è probabile che il contenuto principale venga caricato.
Prendiamo, ad esempio, un post di un blog su un nuovo gadget tecnologico. Se l'immagine principale, ad esempio una foto del gadget, e il testo introduttivo si caricano rapidamente (entro 2,5 secondi è la soglia consigliata da Google per LCP), è più probabile che i visitatori rimangano, leggano e interagiscano con il contenuto.
Al contrario, tempi di caricamento lenti possono portare i visitatori ad abbandonare la pagina, con conseguente riduzione del traffico.
- First Input Delay (FID): rappresenta un'istantanea della reattività di una pagina web alla prima interazione dell'utente, come il clic su un link o la pressione di un pulsante, misurando il tempo che intercorre tra questa azione e il momento in cui il browser può iniziare a elaborare i gestori di eventi in risposta.
Si consideri un pulsante "Iscriviti ora". Se un visitatore clicca su questo pulsante e riscontra un ritardo prima che il sito risponda (un ritardo superiore a 100 millisecondi è considerato un risultato scadente), il visitatore potrebbe pensare che il sito non sia reattivo, con conseguente scarsa esperienza utente e potenzialmente la perdita dell'abbonamento.
Google si sta preparando a introdurre una nuova metrica chiamata Interaction to Next Paint (INP) a marzo 2024 , che sostituirà il FID come CWV.
- Spostamento Cumulativo del Layout (CLS): quantifica la stabilità visiva, ovvero l'entità dello spostamento inaspettato del layout dei contenuti visibili su una pagina web.
Se un sito web di notizie presenta testo, immagini o annunci che cambiano improvvisamente durante il caricamento completo della pagina, i visitatori potrebbero perdere il segno o cliccare accidentalmente su un link o un pulsante indesiderato. Questa è un'esperienza frustrante e potrebbe scoraggiarli dal tornare sul sito.
Fonte: Web.dev - Interaction to Next Paint (INP): valuta la reattività complessiva di una pagina alle interazioni dell'utente. Monitora la latenza di tutte le interazioni con mouse e tastiera durante la visita di un utente a una pagina web, con l'interazione più lunga osservata (ignorando i valori anomali) che determina il valore INP finale.
Ottenere un punteggio INP ideale può rappresentare una sfida a causa dell'ampia variabilità nella capacità dei dispositivi. Tuttavia, sarà comunque ragionevole per gli editori puntare a un punteggio INP nel 75° percentile dei caricamenti di pagina, segmentato tra dispositivi mobili e desktop.
Un sito web con un INP pari o inferiore a 200 millisecondi è considerato dotato di buona reattività. Se l'INP è compreso tra 200 millisecondi e 500 millisecondi, la reattività del sito necessita di qualche miglioramento. Infine, se l'INP è superiore a 500 millisecondi, la sua reattività è considerata scarsa.
Fonte: Web.dev
Perché il punteggio Core Web Vitals è importante?
Gli utenti richiedono velocità di caricamento elevate, interattività fluida e un ambiente visivamente stabile. Una valutazione dei Core Web Vitals è fondamentale per aiutare gli editori a comprendere come i loro siti web si comportano in questo ambito.
Google ha scoperto che la probabilità di rimbalzo aumentava del 32% quando i tempi di caricamento delle pagine passavano da 1 a 3 secondi. Allo stesso tempo, i siti di notizie che superavano il test CWV registravano un tasso di abbandono inferiore del 22% rispetto a quelli che non lo superavano.
1. Influenzare i risultati della ricerca
I CWV servono a Google come parametro di riferimento per misurare le prestazioni di un sito web. Forniscono a Google informazioni su come un sito web soddisfa le esigenze degli utenti, il che influisce direttamente sul suo posizionamento nei risultati di ricerca.
In parole povere, un punteggio CWV migliore può aiutare un sito web WordPress a comparire più in alto nei risultati di ricerca di Google.
2. Aumenta il traffico
I siti con CWV ottimizzati possono registrare un aumento del traffico. Ad esempio, il popolare sito di orientamento professionale LearnHowToBecome.org ha ridotto il tempo medio di caricamento da 7 a 2,9 secondi e ha visto il suo traffico mensile aumentare da 500.000 a 750.000.
3. Aumentare i ricavi
È meno probabile che un utente legga un articolo se riscontra un tempo di caricamento lungo (LCP), una risposta ritardata all'interazione (FID) o un layout instabile (CLS). I siti web che eccellono in tutte e tre le metriche non solo catturano l'attenzione dell'utente, ma possono anche guidarlo lungo il funnel di conversione, generando in definitiva maggiori ricavi per l'azienda.
In sostanza, le metriche CWV sono più di semplici numeri. Forniscono informazioni sulle prestazioni di un sito dal punto di vista dell'utente, consentendo al brand di migliorare gli aspetti più importanti per i propri visitatori.
Come controllare i punteggi Core Web Vitals di un sito WordPress
Capire come controllare i punteggi CWV è il primo passo per migliorare le prestazioni di un sito web. Esistono due modi per misurare questi punteggi: internamente, utilizzando gli strumenti proprietari di Google, oppure con l'aiuto di uno specialista WordPress esperto nell'ottimizzazione delle metriche delle prestazioni.
Per coloro che scelgono di seguire la strada interna, è importante capire che la misurazione dei CWV richiede l'utilizzo di un mix di dati sul campo e di dati di laboratorio.
I dati sul campo sono dati reali sull'esperienza utente, raccolti in ambienti reali. Questo tipo di dati offre una migliore comprensione di come gli utenti interagiscono con un sito web su una varietà di dispositivi, connessioni e altre condizioni reali.
Ad esempio, se gli utenti accedono principalmente a un sito WordPress su dispositivi mobili su reti 3G, i dati sul campo possono rivelare problemi di prestazioni che potrebbero non presentarsi in un ambiente di laboratorio controllato.
D'altro canto, i dati di laboratorio vengono generati in un ambiente controllato e utilizzati per risolvere problemi di prestazioni. Non catturano l'intero spettro delle esperienze utente reali, ma forniscono risultati riproducibili per il debug e l'ottimizzazione delle prestazioni di un sito web.
Utilizzando uno strumento come Lighthouse in un ambiente di sviluppo è possibile simulare una rete lenta per identificare i colli di bottiglia nelle prestazioni.
Tutti gli strumenti per sviluppatori più diffusi di Google, da Google Search Console (GSC) a Google Analytics (GA), possono misurare i punteggi CWV.
Fonte: Web.dev
Per oggi, tuttavia, daremo un'occhiata allo PageSpeed Insights per il semplice motivo che è uno degli strumenti più semplici e completi con cui iniziare.
Come scoprire e migliorare FID e TBT con PageSpeed Insights
Finora abbiamo parlato del First Input Delay (FID) come mezzo per misurare la reattività di un sito, ma nella prossima sezione esamineremo sia il FID sia il Total Blocking Time (TBT).
Entrambe sono misure delle interazioni degli utenti e la misurazione e l'ottimizzazione di entrambe può avere effetti positivi sull'esperienza utente di un sito.
1. Che cos'è il TBT e in che cosa differisce dal FID
Il TBT indica l'intervallo di tempo durante il quale un sito web è troppo impegnato per reagire alle interazioni dell'utente, come i clic sui pulsanti. Il TBT misura la durata totale per cui una pagina web è "bloccata", un po' come se la pagina web dicesse: "Aspetta, sono occupato" mentre elabora altre attività.
TBT è una metrica di laboratorio utilizzata per la valutazione delle prestazioni durante la fase di sviluppo, mentre FID è una metrica sul campo che fornisce informazioni sulle esperienze utente reali.
In uno scenario in cui un utente clicca su un pulsante su una pagina web, FID misura il ritardo che intercorre tra l'azione dell'utente e la risposta del sito web.
Queste due metriche sono interconnesse: se un editore riesce a ottimizzare il TBT durante i test, è probabile che osservi un impatto positivo sui punteggi FID in circostanze reali.
2. Come misurare FID e TBT con PageSpeed Insights
Per misurare queste metriche con PageSpeed Insights, segui questi passaggi:
- Vai allo strumento PageSpeed Insights
- Analizza la pagina web desiderata
- Scorri per trovare i punteggi FID e TBT del sito
3. Come migliorare il FID e il TBT di un sito WordPress
Per migliorare FID e TBT è necessario ottimizzare la reattività e l'interattività di un sito. Ecco alcuni suggerimenti:
- Comprimi e ottimizza il codice CSS e JavaScript: questo aiuta a ridurre le dimensioni dei file e migliora la reattività del sito. Molti strumenti, come WPRocket, offrono una scheda di ottimizzazione dei file che consente di comprimere il codice, con un potenziale miglioramento significativo nei punteggi FID e TBT.
- Eliminare le attività lunghe: le attività lunghe sono quelle che bloccano il thread principale per 50 millisecondi o più. Suddividere queste attività lunghe in attività più piccole e asincrone può liberare il thread principale e migliorare sia FID che TBT.
- Ottimizzare l'esecuzione di JavaScript: l'analisi, la compilazione e l'esecuzione di JavaScript possono contribuire in modo significativo a FID e TBT elevati. Rinviare il codice JavaScript inutilizzato, caricare in modo asincrono i file di grandi dimensioni necessari, ridurre al minimo i polyfill inutilizzati e garantire che JavaScript venga eseguito in modo efficiente può ridurre FID e TBT.
- Sfrutta le impostazioni di performance del tema WordPress: molti temi WordPress sono dotati di impostazioni di performance integrate. Sfrutta al massimo queste impostazioni per ottimizzare il sito.
- Precaricamento e postcaricamento delle risorse: tecniche quali il caricamento differito delle immagini, il differimento dei CSS non critici, il precaricamento delle risorse critiche e il precaricamento delle risorse di terze parti possono migliorare le prestazioni TBT e, di conseguenza, anche il FID.
Consiglio: durante l'ottimizzazione, concentratevi sull'esperienza utente complessiva piuttosto che sui singoli punteggi delle metriche. Questo approccio olistico può produrre risultati migliori nel migliorare le prestazioni del sito.
Migliorare i punteggi FID è un processo complesso, poiché coinvolge il codice del sito web. Pertanto, la prima cosa che gli editori dovrebbero fare è limitare l'esecuzione di codice JavaScript pesante ed eliminare i file JS non necessari, consentendo al browser di rispondere rapidamente alle interazioni dell'utente.
Affrontando i problemi chiave che incidono sull'interattività di un sito WordPress, gli editori possono migliorare efficacemente sia FID che TBT, migliorando l'esperienza utente e le prestazioni complessive.
Come scoprire e migliorare LCP con PageSpeed Insights
Punteggi LCP bassi fanno sì che il visitatore debba attendere più a lungo prima che il contenuto venga visualizzato, il che in genere si traduce in tassi di rimbalzo più elevati.
1. Cosa sono gli elementi LCP?
LCP valuta il tempo impiegato dal contenuto principale di una pagina web per caricarsi: più velocemente questo contenuto appare sullo schermo, migliore sarà l'esperienza utente.
I principali fattori che contribuiscono al punteggio LCP sono prevalentemente elementi di grandi dimensioni, come elementi immagine, elementi video o elementi con immagini di sfondo caricati tramite funzioni URL.
Inoltre, anche gli elementi a livello di blocco, come titoli, sottotitoli e tabelle, e gli elementi basati su blocchi come il testo, svolgono un ruolo fondamentale nella definizione dell'LCP.
2. Come misurare l'LCP con PageSpeed Insights
Per misurare il punteggio LCP, seguire questi passaggi:
- Vai a PageSpeed Insights
- Analizza la pagina web desiderata
- Scorrere fino alla sezione "Diagnostica problemi di prestazioni"
- Impostare "Mostra audit rilevanti per" su LCP
- Gli utenti possono ora visualizzare le Opportunità e le Diagnostiche pertinenti.
Gli editori possono anche identificare l'elemento LCP nel report PageSpeed Insights individuando la raccomandazione dell'elemento Largest Contentful Paint nella sezione Diagnostica ed espandendola per ulteriori dettagli.
3. Come migliorare l'LCP di un sito WordPress
Il miglioramento dell'LCP prevede diversi passaggi, ognuno dei quali contribuisce a rendere l'esperienza del sito web più veloce e snella. Ecco alcune strategie chiave:
- Ottimizzazione dell'elemento LCP: questo passaggio dipende dalla natura dell'elemento LCP. Ad esempio, un elemento LCP che è un'immagine può essere compresso (senza comprometterne la qualità). Altre soluzioni includono il precaricamento di immagini above-the-fold e segnaposto, la pubblicazione di immagini responsive tramite srcset in base alle dimensioni dello schermo dell'utente e l'assenza di caricamento differito delle immagini above-the-fold.
- Migliorare i tempi di risposta del server: LCP misura il tempo che intercorre tra l'arrivo di un utente su una pagina e il momento in cui il suo browser riceve una risposta dal server. Investire in un piano di web hosting di qualità superiore, implementare un meccanismo di caching adeguato sia a livello di server che di browser e passare a una piattaforma CMS affidabile come WordPress può contribuire a ridurre i tempi di risposta del server.
- Ridurre gli elementi che bloccano la visualizzazione: gli elementi che bloccano la visualizzazione, come HTML, font e CSS, sono file statici che il browser elabora prima di caricare il contenuto. Un minor numero di fonti che bloccano la visualizzazione significa che i browser impiegheranno meno tempo a renderizzare questi elementi, accelerando i tempi di caricamento e migliorando i punteggi LCP. Ad esempio, gli editori possono utilizzare un font semplice per le loro pagine web o precaricare font web modulari.
- Rimuovere i plugin inutilizzati: i siti WordPress possono utilizzare i plugin per gestire molti dei loro aspetti tecnici. Tuttavia, è importante mantenere solo i plugin e le loro funzionalità che contribuiscono direttamente alla funzionalità di un sito, rimuovendo quelli inutilizzati. Questo può riordinare il sito e migliorare il punteggio LCP.
Suggerimento: la memorizzazione nella cache è un processo potente che può migliorare significativamente il punteggio LCP. Implementa una soluzione di memorizzazione nella cache che salvi una copia statica delle pagine web sui dispositivi dei visitatori, eliminando la necessità di scaricare gli stessi dati ogni volta che visitano il sito.
È importante comprendere che LCP è di gran lunga la metrica CWV più difficile da migliorare. Questo perché LCP dipende dal TTFB (Time to First Byte), che a sua volta determina la velocità di risposta del server. A seconda del framework utilizzato, può essere difficile ridurre il tempo di risposta del server.
Gli editori devono tenere presente che il margine di miglioramento può variare in base all'infrastruttura con cui lavorano.
Concentrandosi sull'ottimizzazione degli elementi del contenuto della pagina principale, migliorando i tempi di risposta del server, riducendo i tempi di blocco di JavaScript e CSS ed essendo giudiziosi nell'uso dei plugin, gli editori possono migliorare significativamente i loro punteggi LCP.
Come scoprire e migliorare CLS con PageSpeed Insights
Il Cumulative Layout Shift (CLS) si basa sulla stabilità visiva, misurando eventuali variazioni inaspettate nel contenuto visivo di una pagina web durante il caricamento. Le pagine web visivamente instabili possono comprometterne l'esperienza utente, contribuendo all'aumento del tasso di rimbalzo.
1. Cosa sono gli elementi CLS?
Il CLS misura la stabilità visiva, quindi gli elementi che contribuiscono a questo parametro sono quelli che potrebbero potenzialmente cambiare posizione inaspettatamente durante il caricamento della pagina. Questi potrebbero essere immagini senza dimensioni specifiche, annunci pubblicitari, elementi incorporati e iframe senza dimensioni fisse.
In sostanza, qualsiasi elemento che può muoversi durante il caricamento della pagina può influire negativamente sul punteggio CLS.
2. Come misurare il CLS con PageSpeed Insights
Utilizza PageSpeed Insights per identificare e misurare il CLS di una pagina web seguendo questi passaggi:
- Vai a PageSpeed Insights
- Analizza la pagina web desiderata
- Scorrere fino alla sezione "Diagnostica problemi di prestazioni"
- Imposta "Mostra audit rilevanti per" su CLS
Questo approccio ci consente di concentrarci sugli elementi responsabili dei cambiamenti di layout, fornendo un punto di partenza per il miglioramento.
3. Come migliorare il CLS di un sito WordPress
Migliorare il CLS di un sito WordPress implica misure strategiche che possono migliorare significativamente la stabilità visiva di una pagina:
- Modifica il layout degli elementi: rivedi e modifica il layout degli elementi per assicurarti che non si spostino durante il caricamento della pagina. Questo passaggio prevede l'impostazione di attributi specifici di larghezza e altezza per immagini e video e la riserva statica di spazio per annunci o iframe caricati in modalità lazyload utilizzando un segnaposto.
- Utilizza CSS critico o rimuovi CSS non utilizzato: i CSS non utilizzati possono contribuire a cambiamenti nel layout. Valuta l'implementazione di CSS critico che contenga solo gli stili utilizzati above the fold o elimina il codice CSS ridondante per evitare cambiamenti non necessari. Anche l'inlining di stili più piccoli e il precaricamento di stili importanti contribuiranno a migliorare CLS.
- Evita i plugin Sliders: gli Sliders possono innescare cambiamenti di layout a causa della loro natura dinamica. Se possibile, evitali.
- Applica le dimensioni corrette di immagini e div: dimensioni precise e l'utilizzo di immagini responsive con le stesse proporzioni possono impedire che gli elementi si spostino durante il caricamento della pagina. Specifica sempre le dimensioni di questi elementi nella CDN (rete di distribuzione dei contenuti) delle immagini.
- Spostare il CSS dall'editor del tema al tema figlio style.css: trasferire il CSS a un tema figlio può aiutare a ridurre le variazioni di layout assicurando che gli stili vengano caricati correttamente.
- Utilizza temi e plugin che utilizzano animazioni di trasformazione: questi strumenti hanno un impatto minore sulle modifiche del layout rispetto ad altri tipi di animazioni.
Eseguendo queste modifiche, i proprietari di siti WordPress possono ridurre considerevolmente il punteggio CLS delle loro pagine, ottenendo così un'esperienza utente più stabile e piacevole.
Suggerimento: implementa il caricamento differito per le immagini fuori dallo schermo. Questa strategia consente alle immagini di caricarsi solo quando stanno per entrare nella finestra, evitando così cambiamenti di layout causati da immagini caricate in ritardo.
Tieni presente che il CLS è una metrica fondamentale incentrata sull'utente che misura in che misura il contenuto di un sito cambia durante il caricamento della pagina. Più basso è il punteggio CLS, migliore è l'esperienza utente.
In definitiva, il miglioramento dei punteggi CLS richiede un approccio multidisciplinare. Controlli regolari con strumenti come PageSpeed Insights, pratiche di layout coerenti e un utilizzo diligente di temi e plugin possono contribuire a ridurre il punteggio CLS e a ottenere un sito web più stabile e intuitivo.
Conclusione
Gli editori che misurano i Core Web Vitals (CWV) saranno in una posizione migliore per ottimizzare l'esperienza utente dei loro siti.
L'ottimizzazione dei CWV non solo contribuirà a migliorare significativamente l'esperienza del lettore, ma contribuirà anche alla SEO. Le pagine che si caricano rapidamente, sono visivamente stabili e rispondono rapidamente agli input degli utenti non sono solo attraenti per gli utenti, ma anche per gli algoritmi dei motori di ricerca.
Oltre a imparare a usare strumenti come PageSpeed Insights, gli editori dovrebbero anche monitorare attentamente le tendenze dell'editoria digitale , gli aggiornamenti degli algoritmi dei motori di ricerca e le opinioni degli esperti per offrire costantemente un'esperienza di lettura di livello mondiale.
