Google Core Web Vitals in WordPress: come ottimizzare il tuo sito

Sei già riuscito a ottimizzare il tuo sito per Google Core Web Vitals?

Puoi dire di no, va bene. Non sei solo. In effetti, Searchmetrics ha rilevato che fino al 96% dei primi 2 milioni di siti^[1] test Core Web Vitals non riusciti. Non sono un matematico, ma sembra molto.

Google Core Web Vitals è l’ultimo strumento per aiutare Google ad analizzare il tuo sito web. Google continuerà a utilizzare cose come velocità, qualità dei contenuti e compatibilità con i dispositivi mobili per classificare i siti web. Quindi, se ti sei classificato bene, puoi rilassarti un po’.

Ma solo un po’ perché i tuoi concorrenti cercano il vantaggio che li porterà in cima. Come puoi stare davanti a loro? Fornisci esperienze utente eccezionali, che è esattamente ciò che desidera anche Google.

E otterrai grandi ricompense se il tuo sito web offre grandi esperienze e ottimo contenuto. In questo articolo, ti aiuteremo a creare un sito Web di questo tipo.

Inizieremo con un’immersione in Google Core Web Vitals, in modo da sapere esattamente cosa significano e cosa misurano. Quindi, condivideremo i nostri migliori suggerimenti per la creazione di pagine che superino sempre i Core Web Vitals.

Anche se c’è stato uno spostamento nella sequenza temporale e l’aggiornamento non verrà implementato fino a metà giugno, abbiamo ancora molto lavoro da fare. Iniziamo!

📚 Sommario:

Cosa sono i Google Core Web Vitals (e perché dovrebbero interessarti)?

Se gli aggiornamenti di Google non fanno per te, probabilmente ti starai chiedendo di cosa si tratti. Diamo una rapida occhiata ai dettagli.

Nel maggio 2020, Google ha annunciato una nuova aggiunta alle classifiche di ricerca, Core Web Vitals. Un annuncio come questo di solito significa molto lavoro per qualcuno. Con oltre 200 fattori unici utilizzati per classificare i siti web^[2]Copertura delle classifiche di Google Tutto quanto.

Scoprirai anche che l’età del tuo dominio ha un ruolo nella tua classifica. In questo caso, Google Core Web Vitals si concentra sull’esperienza dell’utente o su com’è utilizzare il tuo sito web.

In futuro, Google Core Web Vitals avrà una serie di metriche, ma l’aggiornamento del 2021 ne include tre: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) e First Input Delay (FID).

La più grande pittura contenta (LCP)

Il tuo LCP è una misura del tempo necessario per scaricare il contenuto più grande. Potrebbe essere un’immagine o semplicemente un testo. Qualunque cosa sia, una volta caricato, il sito web sente pronto.

Meglio ancora, il più grande Paint Contentful misura solo il contenuto nel viewport dell’utente. Qualsiasi immagine below the fold non verrà conteggiata per il tuo punteggio LCP.

Se vuoi ottenere un risultato positivo, devi avere un LCP inferiore a 2,5 secondi.

Spostamento cumulativo del layout (CLS)

Il CLS misura la stabilità della tua pagina durante il processo di caricamento. Misura tutto lo spostamento che può verificarsi quando le immagini vengono caricate in ritardo o i caratteri cambiano stile. Anche cose come i pulsanti possono creare spostamenti imprevisti sulla pagina.

Se i tuoi elementi si muovono improvvisamente (e più di 0,1), hai un problema CLS da risolvere.

Primo ritardo di ingresso (FID)

Il FID misura quanto velocemente un browser diventa interattivo. Ciò significa che i visitatori sono in grado di fare roba e ottenere una reazione. Include cose come fare clic su collegamenti, premere pulsanti o completare caselle di controllo.

Puoi passare questa metrica se gli utenti possono eseguire operazioni come inserire dati in moduli e sondaggi entro 100 ms.

Come testare (e leggere) il tuo punteggio Google Core Web Vitals

Una delle grandi cose di Core Web Vitals è il loro approccio user-friendly. Questo non è un mucchio di metriche arcane difficili da testare (figuriamoci da capire). Invece tutto potere essere abbastanza facile con una serie di strumenti ufficiali di Google per testare e correggere il tuo sito web.

Quando si tratta di test, è necessario conoscere le due categorie principali: strumenti di test di laboratorio e strumenti di prova sul campo. Gli strumenti di test sul campo sono supportati da dati del mondo reale presi da utenti reali che hanno attivato il rapporto sull’esperienza utente di Chrome. Questo li rende più preziosi per Core Web Vitals. Ci concentreremo su due opzioni:

• Rapporto Google Core Web Vitals dalla Google Search Console.
• Il test Page Speed ​​Insights che ha sia risultati sul campo che in laboratorio.

Iniziamo con il rapporto Google Core Web Vitals perché ci dirà quali URL sono il problema.

Utilizzo della console di ricerca di Google

Una volta che sei nella console, scorri verso il basso per trovare Esperienza → Core Web Vitals. Facendo clic qui si aprirà un rapporto completo del sito con ogni URL classificato come Buono, Da migliorare o Cattivo.

⚠️ Se non hai configurato Google Search Console, prenditi un momento per leggere la nostra guida all’utilizzo di Google Search Console con WordPress.

Clicca su Apri rapporto per ottenere informazioni più specifiche su quale metrica Core Web Vitals sta causando i maggiori problemi.

Se clicchi sul Tipo otterrai un elenco completo di URL che possono quindi essere testati Informazioni sulla velocità della pagina per maggiori informazioni.

Utilizzo di Page Speed ​​Insights

Inserisci l’URL della tua pagina e fai clic Analizzare per iniziare la prova. Non dovrebbe volerci molto tempo per completare l’analisi che per impostazione predefinita visualizzerà prima i risultati per dispositivi mobili. Tuttavia, puoi visualizzare i dati di Core Web Vitals sia da dispositivi mobili che da desktop senza eseguire un nuovo test. Troverai i risultati nella parte superiore della pagina:

Se desideri testare l’intera pagina, fai clic su Sommario dell’origine. Come puoi vedere, i Core Web Vitals sono stati utilmente aggiunti ai segnalibri con percentuali che indicano la frequenza con cui passano. Questa pagina è un buon passaggio, ma cosa possiamo fare per le pagine che falliscono?

Cosa posso fare per migliorare il mio punteggio Google Core Web Vitals?

In realtà, c’è molto che possiamo fare per migliorare i punteggi di Core Web Vitals (anche senza competenze tecniche). Diamo un’occhiata ai nostri migliori consigli per migliorare l’esperienza utente e i Core Web Vitals.

Aggiorna il tuo hosting

Sì, non c’è modo migliore per migliorare la risposta del server che averne una buona. In realtà, cambiare host può essere difficile (per non dire costoso), ma non è necessario passare dall’hosting condiviso all’hosting dedicato. Voglio dire, quel salto risolverà molti problemi di prestazioni, ma anche un piccolo passaggio a un server più veloce può anche fornire notevoli miglioramenti delle prestazioni.

Detto questo, se hai già deciso di apportare la modifica, leggi prima il nostro confronto degli host WordPress con le migliori prestazioni. Ma, se sei davvero di fretta, dai un’occhiata alla tabella qui sotto:

Oltre alle ottimizzazioni standard, ciascuno degli host di cui sopra offre una qualche forma di memorizzazione nella cache lato server. La memorizzazione nella cache è il processo di archiviazione di una versione HTML del tuo sito sul tuo server per facilitarne il recupero. La memorizzazione nella cache lato server può essere complicata da gestire e configurare, quindi dovrai chiedere al tuo potenziale host il suo processo.

Utilizzo di un plug-in di memorizzazione nella cache

Tuttavia, non tutti gli host offrono la memorizzazione nella cache lato server, ma puoi godere di alcuni dei vantaggi con un plug-in di memorizzazione nella cache delle pagine. Anche la memorizzazione nella cache a livello di pagina fornisce contenuti abbastanza velocemente da migliorare la tua più grande pittura di contenuti.

Quando si tratta di utilizzare un plug-in, consiglierei WP Super Cache perché è completamente gratuito (nessun aggiornamento) con opzioni semplici e avanzate (come il precaricamento).

Quanto è facile usare WP Super Cache? Controlla:

Una volta installato e attivato il plugin, apri le impostazioni tramite Impostazioni → WP Super Cache. Clicca su Facile e girare Cache attiva poi Aggiornamento di stato.

Ad un certo punto, ti imbatterai in alcuni problemi con la tua cache. Non solo avrai troppe pagine memorizzate nella cache, ma le nuove modifiche non appariranno sul sito. Se ciò accade, puoi cancellare la cache facendo clic Elimina cache.

WP Super Cache offre anche la possibilità di precaricare le tue pagine più popolari. Tuttavia, il precaricamento richiederà risorse preziose, quindi dovrai scegliere con saggezza e monitorare la tua CPU quotidianamente.

Configurarlo è facile. Clicca il Precarica opzione. È possibile impostare la regolarità dell’aggiornamento della cache e se i vecchi file devono essere eliminati o meno.

Una volta che sei soddisfatto delle impostazioni, premi Precarica la cache ora per iniziare. Una volta terminato il processo di memorizzazione nella cache, i file saranno nel tuo file wp-content/cache cartella sul server.

Ottimizza le tue immagini

La gente ama le immagini. E ne usiamo tutti molti, giusto? Ma le immagini potrebbero danneggiare i tuoi punteggi Core Web Vital. Ci sono alcuni motivi per questo:

• L’immagine potrebbe essere troppo pesante.
• Le dimensioni dell’immagine sono troppo grandi.
• Stai caricando ogni immagine sulla pagina.
• Le immagini vengono inviate dal tuo server a persone in tutto il mondo.

Fortunatamente, esiste un modo semplice per risolvere tutto quanto sopra.

Innanzitutto, considera alcune cose quando si tratta di immagini:

• Hai bisogno di ogni immagine?
• Che dimensioni usi? Puntiamo a >2000px.
• Per gli sfondi, prova a utilizzare motivi, sfumature o SVG.
• Limita le immagini above the fold a un logo e a un’immagine hero.
• Non utilizzare slider o caroselli above the fold.

Dopo aver ripulito le tue immagini, puoi ottimizzare il resto. L’ottimizzazione delle immagini può ridurre le dimensioni delle immagini, migliorarne le dimensioni e distribuirle da una rete di distribuzione dei contenuti (CDN) utilizzando server più vicini ai tuoi utenti. Per tutto questo, mi raccomando Optimole.

Optimole fa risparmiare molto lavoro ai tuoi server facendo tutto quanto sopra nel cloud. Vai a Optimole e registrati per una chiave API (ne hai bisogno per accedere alle operazioni cloud).

Riceverai un’e-mail per convalidare il tuo account tramite la dashboard di Optimole. Prendi la chiave API e vai al tuo sito WordPress.

Dopo aver installato e attivato Optimole, accedi alle impostazioni dal file Media → Optimole menù. Incolla la tua chiave API e premi Connetti.

Dovresti anche abilitare Scala le immagini e Lazy load.

Ridimensionare le immagini significa che Optimole invierà immagini perfettamente dimensionate per il dispositivo (non importa quale sia) per ridurre lo spostamento del layout.

Caricamento lento significa che caricherai solo le immagini che i tuoi utenti possono vedere nel viewport. Con questa configurazione, lascia che Optimole si occupi del resto.

Ottimizzazioni del codice

La cosa con la gestione di un sito WordPress sono tutte le parti mobili. Tra i temi e i plug-in e le lingue che li alimentano, è difficile per una persona non tecnica ottimizzare il codice.

Ovviamente, possiamo optare per temi con basi di codice ottimizzate ed evitare plugin con codice gonfio. Oltre a ciò, possiamo ottimizzare il codice in due modi principali:

Uno svantaggio, Autoptimize ha molte impostazioni, il che significa che non esiste una vera soluzione valida per tutti.

Detto questo, puoi tranquillamente scegliere di farlo Ottimizzare tutto JavaScript, CSS, HTML. Questa impostazione minimizza il tuo codice rimuovendo cose come spazi e interruzioni di riga. Oltre alla minificazione, Autoptimize offre ottime opzioni di prestazioni per chiunque sia disposto a saperne di più e testare molto.

Ad esempio, puoi ottenere significativi aumenti di velocità utilizzando attività avanzate, come precarico CSS e incorporare CSS critico, ma dovrai leggere ogni opzione prima di usarla.

Caratteri e icone

Puoi utilizzare Autoptimize per gestire i tuoi caratteri, in particolare se ti impegni a utilizzare Google Fonts. Puoi anche provare a precaricare i tuoi caratteri Google per evitare il “lampo di testo senza stile” che danneggia il tuo cambio di layout cumulativo.

Ti consiglio di provare alcune opzioni diverse e vedere cosa funziona meglio per il tuo sito. Sfortunatamente, se stai usando Elementor, vedrai comunque lo spostamento del layout. Se questo è il tuo caso, considera di passare ai caratteri di sistema.

Best practice per gli annunci

Quando si tratta di cambiare layout, gli annunci sono uno dei maggiori problemi. Di solito, gli annunci spingono verso il basso i contenuti, il che crea un’esperienza utente scadente. Fortunatamente, è possibile ridurre il cambiamento seguendo le migliori pratiche.

Ancora più importante, il posizionamento dell’annuncio dovrebbe essere bilanciato tra l’ottenimento di più clic e l’impatto sul layout. Ad esempio, non inserire annunci nella parte superiore dell’area visibile. Se la dimensione dell’annuncio finale è più grande del contenitore, spingerà tutti i tuoi contenuti verso il basso. Mira al centro della pagina dove l’annuncio farà meno danni.

Quando hai deciso il posizionamento migliore, riserva uno spazio per l’annuncio. Anche se questo potrebbe lasciarti con uno spazio vuoto, potrebbe valere la pena di fare un compromesso.

Conclusione

Con questi suggerimenti, dovresti vedere un miglioramento immediato dei tuoi risultati. Meglio ancora, ciascuna delle opzioni ti offre un buon punto di partenza per ulteriori ottimizzazioni.

Abbiamo coperto un sacco di terreno, quindi per ricapitolare:

• Aggiornare il tuo piano di hosting potrebbe aiutarti a migliorare i tuoi risultati.
• L’utilizzo di un plug-in di memorizzazione nella cache dovrebbe velocizzare la consegna dei contenuti.
• L’ottimizzazione delle immagini e l’utilizzo di un CDN dovrebbero migliorare le prestazioni del sito.
• Con le ottimizzazioni del codice, puoi controllare come viene caricato il tuo sito.
• Con la selezione e il precaricamento ponderati dei caratteri, potresti godere di aumenti di velocità.
• Seguendo le best practice per gli annunci, puoi ridurre i cambiamenti di layout.