Ci siamo tutti sentiti frustrati quando una pagina web si carica a passo di lumaca, o un pulsante si sposta proprio mentre stai per cliccarlo. Noi di WPBeginner siamo ossessionati dalla velocità del sito perché sappiamo che questi piccoli momenti fanno un'enorme differenza nell'esperienza utente.
Quando Google ha introdotto le Core Web Vitals, ha dato un nome a questi problemi di prestazioni, ma il gergo tecnico può sembrare opprimente. Potresti preoccuparti che il tuo SEO ne risenta se non hai una laurea in informatica.
La buona notizia è che non devi essere uno sviluppatore per ottenere ottimi punteggi. Abbiamo seguito noi stessi questo esatto processo di ottimizzazione e lo abbiamo ridotto all'essenziale per te.
In questa guida, ti illustreremo passaggi semplici e pratici per migliorare le tue Core Web Vitals per un sito WordPress più veloce e fluido.
Ecco una rapida panoramica di ciò che tratteremo in questa guida:
- Cosa sono le Core Web Vitals di Google?
- Come testare il tuo punteggio Core Web Vitals di Google
- Perché le Core Web Vitals sono importanti?
- Come migliorare le tue Core Web Vitals in WordPress (7 consigli)
- Domande frequenti sulle Core Web Vitals
- Guide esperte sulla misurazione e il miglioramento delle prestazioni di WordPress
Cosa sono le Core Web Vitals di Google?
Le Core Web Vitals di Google sono metriche di prestazioni specifiche che il motore di ricerca utilizza per misurare l'esperienza utente complessiva di un sito web. Questi punteggi fanno parte dei segnali di esperienza della pagina di Google, che possono influenzare i tuoi ranking SEO.
La verità è che a nessuno piace un sito web lento, e questo include Google. Le Core Web Vitals ti aiutano a misurare quanto velocemente il tuo sito diventa visibile, interattivo e stabile per i tuoi visitatori.
Per fare ciò, Google utilizza tre test chiave:
- Largest Contentful Paint (LCP)
- Interaction to Next Paint (INP)
- Cumulative Layout Shift (CLS)
Nota: Fino a marzo 2024, Google utilizzava il First Input Delay (FID) invece dell'INP. Potresti ancora vedere questa metrica precedente riportata in alcuni strumenti di test delle prestazioni.
I nomi di questi test potrebbero sembrare tecnici, ma ciò che misurano è piuttosto semplice da capire. Vediamo come funziona ciascuno di essi.
Largest Contentful Paint (LCP)
Largest Contentful Paint misura la rapidità con cui il contenuto principale della tua pagina diventa visibile agli utenti. Potrebbe trattarsi di un'immagine in primo piano, di un ampio blocco di testo o di un altro elemento prominente.
Una pagina potrebbe caricarsi velocemente nel complesso, ma se il contenuto più importante appare per ultimo, la pagina sembrerà comunque lenta all'utente. LCP ti aiuta a individuare e risolvere questo problema.
Interaction to Next Paint (INP)
Interaction to Next Paint misura quanto tempo impiega il tuo sito a fornire un feedback visivo dopo che un utente ha interagito con esso. Questa interazione potrebbe essere un clic, un tocco o la pressione di un tasto.
Ad esempio, quando qualcuno fa clic sul pulsante 'Invia' nel tuo modulo di contatto, INP misura il tempo fino a quando qualcosa non cambia visivamente sullo schermo per confermare quell'azione.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift misura la stabilità visiva della tua pagina durante il caricamento. Un punteggio CLS basso significa che gli elementi saltano sullo schermo mentre la pagina viene renderizzata.
Questo è frustrante quando un utente cerca di fare clic su un pulsante, solo per vederlo spostarsi all'ultimo secondo perché un annuncio o un'immagine caricata sopra di esso. Un buon punteggio CLS significa che il tuo layout è stabile e prevedibile.
Come testare il tuo punteggio Core Web Vitals di Google
Il modo più semplice per testare il tuo punteggio Core Web Vitals è con lo strumento PageSpeed Insights di Google. Inserisci semplicemente l'URL che desideri controllare e fai clic sul pulsante 'Analizza'.
I risultati vengono mostrati nella sezione 'Valutazione Core Web Vitals'. Un voto sufficiente sarà indicato in verde accanto all'intestazione.
Sotto, puoi vedere i punteggi specifici per ciascuna delle tre funzioni vitali. Per superare la valutazione, devi raggiungere questi obiettivi:
- Largest Contentful Paint (LCP): 2,5 secondi o meno
- Interaction to Next Paint (INP): 200 millisecondi o meno
- Cumulative Layout Shift (CLS): 0,1 o meno
Come visualizzare le Core Web Vitals per il tuo sito web completo
Per visualizzare un punteggio medio per l'intero sito web, puoi utilizzare il report Core Web Vitals nel tuo account Google Search Console.
Questo report ti mostra quali URL del tuo sito hanno punteggi buoni, da migliorare o scarsi, permettendoti di dare priorità ai tuoi sforzi di ottimizzazione.
Per report ancora più dettagliati, puoi utilizzare il test Lighthouse integrato direttamente nel browser Chrome. Apri semplicemente un sito web, fai clic destro ovunque e seleziona l'opzione 'Ispeziona'.
Nota: Devi eseguire i test di Chrome in modalità Incognito per ottenere i risultati più accurati. Altrimenti, le tue estensioni del browser potrebbero influire negativamente sui punteggi.
Perché le Core Web Vitals sono importanti?
Le Core Web Vitals sono importanti perché riflettono direttamente l'esperienza degli utenti sul tuo sito web. Si concentrano non solo sulla velocità pura, ma su quanto rapidamente i visitatori possono effettivamente vedere e interagire con i tuoi contenuti.
Uno studio ha rilevato che un ritardo di un secondo nel tempo di caricamento della pagina può causare una perdita del 7% nelle conversioni e il 11% in meno di visualizzazioni di pagina. Un sito web più veloce con un'esperienza utente scadente sta comunque danneggiando i tuoi profitti.
Migliorare le Core Web Vitals ti aiuta ad affrontare questo problema. Poiché l'esperienza utente è un fattore di SEO ranking confermato da Google, un buon punteggio può darti un vantaggio sui tuoi concorrenti.
Come migliorare le tue Core Web Vitals in WordPress (7 consigli)
Migliorare il tuo punteggio Core Web Vitals in WordPress non è così difficile. Seguendo alcuni suggerimenti essenziali per l'ottimizzazione delle prestazioni, puoi superare facilmente la valutazione.
1. Ottimizzare il tuo hosting WordPress
Il tuo provider di hosting WordPress gioca il ruolo più importante nelle prestazioni del tuo sito web. Un host di qualità ottimizza i propri server specificamente per WordPress, il che offre al tuo sito una piattaforma solida su cui costruire.
Su WPBeginner, utilizziamo SiteGround per questo preciso motivo. Sono uno dei pochi host ufficialmente raccomandati da WordPress.org e le loro prestazioni sono eccellenti.
La loro piattaforma funziona su Google Cloud e include il loro potente plugin SG Optimizer. Gestisce automaticamente tutte le ottimizzazioni avanzate di caching e prestazioni, che è uno dei motivi principali per cui il nostro sito è così veloce.
Se stai utilizzando un altro host, allora WP Rocket è la migliore alternativa. È il plugin di caching che raccomandiamo per i nostri altri progetti, e rende molto più facile ottenere un punteggio migliore nei Core Web Vitals.
2. Migliorare il punteggio Largest Contentful Paint (LCP)
Come accennato, LCP è il tempo impiegato dall'elemento di contenuto più grande per apparire sullo schermo. In un tipico post del blog, questa è spesso l'immagine in evidenza o il testo dell'articolo.
Per scoprire quale elemento viene misurato, scorri i risultati di PageSpeed Insights ed espandi la scheda 'Elemento Largest Contentful Paint'.
Se si tratta di un'immagine di grandi dimensioni, prova a sostituirla con un file più piccolo. Puoi saperne di più nella nostra guida su come ottimizzare le immagini per il web.
3. Migliorare il punteggio Interaction to Next Paint (INP)
Il punteggio Interaction to Next Paint misura il tempo tra il momento in cui un utente fa clic su qualcosa sul tuo sito e il momento in cui vede una risposta visiva. Un lungo ritardo qui può far sembrare il tuo sito lento e poco reattivo.
Ad esempio, immagina che un visitatore compili un modulo di contatto e faccia clic sul pulsante ‘Invia’. Sui nostri siti, utilizziamo WPForms perché è progettato per la velocità ed elabora le richieste senza ritardi, creando un'esperienza fluida.
Una delle cause principali di un INP scadente è il JavaScript che viene caricato prima del resto della pagina. Il modo più semplice per risolvere questo problema è utilizzare un plugin come WP Rocket, che ti mostreremo come configurare.
Innanzitutto, devi installare e attivare il plugin. Dopodiché, vai su Impostazioni » WP Rocket e passa alla scheda ‘Ottimizzazione file’.
Scorri fino in fondo e seleziona la casella accanto a ‘Carica JavaScript in differita’. Non dimenticare di salvare le modifiche.
Questa semplice impostazione dice al tuo sito web di caricare prima il contenuto visibile e di attendere il JavaScript. Questa singola modifica può migliorare drasticamente il tuo punteggio INP.
4. Migliorare il punteggio Cumulative Layout Shift (CLS)
Un punteggio CLS scadente è causato da elementi della pagina che si spostano durante il caricamento. Per vedere quali elementi causano problemi, espandi la scheda ‘Evita grandi spostamenti di layout’ nel tuo report PageSpeed.
Per evitare ciò, devi indicare ai browser le dimensioni (larghezza e altezza) delle tue immagini, degli embed video e degli annunci. Ciò consente al browser di riservare la quantità corretta di spazio per l'elemento prima che venga caricato.
WordPress aggiunge automaticamente le dimensioni alle tue immagini, ma dovresti controllare altri embed multimediali. Puoi farlo utilizzando lo Strumento di ispezione nel tuo browser per verificare se un elemento ha attributi di larghezza e altezza definiti.
5. Eliminare gli elementi che bloccano il rendering
Gli elementi che bloccano il rendering sono file, solitamente JavaScript o CSS, che devono essere caricati prima che il resto della tua pagina possa essere visualizzato. Questo rallenta la velocità percepita della pagina e danneggia i tuoi punteggi Core Web Vitals.
PageSpeed Insights elencherà questi file problematici per te. Spesso provengono da plugin e strumenti di terze parti come Google Analytics o Facebook Pixel.
Correggere questo manualmente può essere complicato per i principianti. Abbiamo una guida passo passo su come eliminare facilmente le risorse che bloccano il rendering senza toccare alcun codice.
6. Ridimensionare correttamente le immagini in WordPress
Caricare immagini inutilmente grandi è un errore comune che rallenta i siti web. Le foto ad alta risoluzione impiegano molto più tempo a caricarsi e spesso non sono necessarie per la visualizzazione sul web.
Questo è particolarmente problematico per gli utenti mobili. Anche se il tuo tema ridurrà l'immagine per adattarla a uno schermo più piccolo, il browser del visitatore dovrà comunque scaricare il file a dimensione intera.
Abbiamo una guida dettagliata su come ottimizzare correttamente le immagini per il tuo sito WordPress senza perdere qualità.
7. Utilizzare una CDN per migliorare il tuo punteggio Core Web Vitals
Una CDN, o Content Delivery Network, è un servizio che rende il tuo sito più veloce per i visitatori di tutto il mondo. Lo fa memorizzando copie dei tuoi file statici (come immagini e CSS) su server in diverse posizioni geografiche.
Ciò consente agli utenti di scaricare tali file dal server più vicino a loro, riducendo i tempi di caricamento. Inoltre, alleggerisce molto il carico sul tuo server di hosting principale.
Per WPBeginner, ci affidiamo alla CDN enterprise di Cloudflare. Non solo aumenta la nostra velocità, ma fornisce anche un potente firewall che blocca milioni di richieste di spam e attacchi dannosi ogni giorno.
Per la maggior parte delle aziende, anche il piano gratuito di Cloudflare offre un eccellente servizio CDN e una protezione firewall di base. È uno dei modi più efficaci per migliorare i punteggi dei Core Web Vitals.
Domande frequenti sulle Core Web Vitals
Avendo aiutato migliaia di utenti ad accelerare i loro siti web, riceviamo molte domande sui Core Web Vitals. Ecco le risposte ad alcune delle più comuni.
D: Quali sono i tre Core Web Vitals?
R: Le tre metriche principali sono Largest Contentful Paint (LCP) per le prestazioni di caricamento, Interaction to Next Paint (INP) per l'interattività del sito web e Cumulative Layout Shift (CLS) per la stabilità visiva.
D: Qual è un buon punteggio Core Web Vitals?
R: Dovresti puntare a un LCP di 2,5 secondi o meno e a un INP di 200 millisecondi o meno. Per il CLS, un punteggio di 0,1 o inferiore è considerato buono.
D: Un buon tema può correggere automaticamente le mie Core Web Vitals?
R: Un tema ben codificato fornisce un'eccellente base, ma non è una bacchetta magica. I tuoi punteggi sono anche fortemente influenzati dal tuo provider di hosting, dalle dimensioni delle immagini e dal numero di plugin che utilizzi.
D: Ogni quanto dovrei controllare i miei punteggi Core Web Vitals?
R: Si consiglia di controllare i punteggi almeno una volta al mese. È anche una buona idea testarli dopo aver installato un nuovo plugin, modificato il tema o aggiunto nuove funzionalità importanti al tuo sito.
Guide esperte sulla misurazione e il miglioramento delle prestazioni di WordPress
Ora che sai come ottimizzare le Core Web Vitals, potresti voler vedere altri articoli relativi alla misurazione e al miglioramento delle prestazioni di WordPress:
- La guida definitiva per aumentare la velocità e le prestazioni di WordPress
- Come velocizzare le prestazioni di WooCommerce
- Come eseguire correttamente un test di velocità del sito web (i migliori strumenti)
- Come stress testare un sito web WordPress
- Cos'è il punteggio INP di Google e come migliorarlo in WordPress
- Come utilizzare il plugin GTmetrix per migliorare le prestazioni del sito WordPress
- Hosting WordPress più veloce (test di prestazioni)
Speriamo che questa guida ti abbia aiutato a imparare come ottimizzare le Core Web Vitals per WordPress. Un'altra parte fondamentale dell'esperienza utente è la sicurezza, quindi ti consigliamo di seguire la nostra lista di controllo per la sicurezza di WordPress per proteggere il tuo sito.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Olaf
L'ottimizzazione generale del sito web potrebbe sembrare semplice sulla “carta”, ma in pratica, di solito è una storia diversa. Ottenere numeri e velocità impressionanti può a volte sembrare un lavoro meticoloso. Dipende dallo stato del sito web che erediti e da quanto bene il precedente proprietario lo ha mantenuto, o dalle tecnologie che ha utilizzato per costruirlo. A volte, se un sito è costruito su un page builder e si basa su più plugin per ogni piccola funzione, è difficile ideare qualsiasi strategia per migliorare le core web vitals. Questo elenco fornisce un solido punto di partenza, una guida su cosa controllare, cosa migliorare e come procedere. Un'ottima base per i principianti.
Samuel
È facile lasciarsi trasportare da altri aspetti della SEO e dimenticare i Core Web Vitals. Sebbene io sia a conoscenza dell'esistenza dei Core Web Vitals per gli utenti, non ci ho prestato molta attenzione. Ogni volta che progetto un nuovo sito WordPress, la mia attenzione è sempre rivolta a quanto velocemente si posizionerà su Google o su qualsiasi altro motore di ricerca. La lettura di questo articolo sta informando i miei pensieri per includere i Web Vitals nei miei flussi di lavoro come sviluppatore web. Grazie per questa guida dettagliata. Ho appena finito un sito web per un nuovo cliente e questo articolo verrà messo in pratica seguendo tutte le istruzioni qui presenti. Grazie mille.
Dayo Olobayo
Stavo lottando con i tempi di caricamento lenti del mio sito WordPress finché non ho implementato le strategie delineate in questa guida. Le istruzioni hanno reso facile ottimizzare i miei Core Web Vitals e ora il mio sito è velocissimo. Grazie!
Supporto WPBeginner
Prego!
Amministratore
Jiří Vaněk
Inizialmente, ho lottato molto con la velocità di WordPress. Ho un sito web sul mio server con 4 vCPU e 8 GB di RAM. Anche così, continuavo a vedere cifre rosse. Con questo, intendo dire che molto spesso l'ottimizzazione non riguarda solo le prestazioni del server o l'hosting, ma anche come si ottimizza WordPress stesso. In questo contesto, devo dire che il plugin WP Rocket mi ha aiutato di più. Solo dopo aver implementato questo plugin sono finalmente entrato nei numeri verdi. Probabilmente ciò che ha aiutato di più è stato il precaricamento dei link URL e una cache relativamente sofisticata. Probabilmente nessun plugin di cache è veramente buono come WP Rocket. Per quanto riguarda la SEO, ho iniziato a ottenere posizioni migliori solo dopo che il sito web è stato correttamente ottimizzato.
Supporto WPBeginner
Thank you for sharing what you use for your site
Amministratore
Mohammed Haider
Ho un sito web su WordPress. Non riesco a superare i Core Web Vitals. Esiste un plugin WordPress gratuito che possa aiutarmi a raggiungere questo obiettivo?
Supporto WPBeginner
Ci sono molte parti diverse del punteggio Core Web Vitals, ti consigliamo di dare un'occhiata alla sezione "Come migliorare i tuoi Core Web Vitals in WordPress" per i nostri consigli.
Amministratore
Jiří Vaněk
Il plugin Autooptimize con un qualche tipo di plugin di cache è gratuito e può aiutare molto.
Ladyson
Non dimenticare che molti creatori di temi drag-n-drop creano problemi con il loro codice.
Aggiornandoli regolarmente puoi anche risolvere il problema dei punteggi bassi. Stanno ottimizzando il loro codice per i Web Vitals.
Supporto WPBeginner
That is certainly something to keep in mind as well
Amministratore
miamiatz
Google è brava a inventare cose utili. Il problema del Cumulative Layout Shift è critico nella maggior parte dei dispositivi digitali.
Vuoi fare clic su qualcosa solo per accorgerti che il link/icona/pulsante su cui intendevi fare clic si è spostato in un'altra posizione e finisci per fare clic su qualcos'altro.
Questo problema si riscontra anche nelle app Android di base e nelle app non di base, comprese le app di social media, le app di notizie, persino le app finanziarie. È ridicolo.
Pollice in su per Google per aver inventato questi Core Web Vitals.
Ho uno o due punti da fare a coloro che sono interessati ai web vitals:
La maggior parte dei temi WordPress viene fornita con fogli di stile che vengono caricati uno dopo l'altro.
Il CSS personalizzato dichiarato utilizzando il customizer del tema viene caricato per ultimo.
Ora, se dichiari la dimensione o la forma di qualcosa (anche i font) nel CSS personalizzato che è stato dichiarato diversamente nei file CSS del tema, l'elemento verrà caricato prima con lo stile predefinito del tema, quindi adattato per obbedire alla dichiarazione CSS trovata nel CSS personalizzato.
Questo causa spostamenti di layout.
Staff editoriale
Grazie per aver condiviso queste informazioni. Sì, ottimizzare la consegna del CSS può aiutare insieme al caricamento lazy degli elementi.
Amministratore
Ackson Mwape
Grazie mille per l'articolo tempestivo.
Staff editoriale
Always a pleasure Ackson
Amministratore