Come ottimizzare il tuo sito web per Core Web Vitals (Adsense)

Stai provando così tanto a superare i Core Web Vitals? Ecco alcuni modi semplici e pratici per migliorare i tuoi punteggi CWV

La corsa per migliorare Core Web Vitals non è facile. Diventa più difficile se ti affidi a un programma pubblicitario come Google AdSense per monetizzare il tuo sito web.

I siti Web che eseguono Google AdSense hanno una probabilità 10 volte maggiore di non superare il test Core Web Vitals rispetto allo stesso sito Web senza Google AdSense. Ciò è dovuto principalmente al numero di richieste e risorse di terze parti che Google AdSense aggiunge al tuo sito web. La maggior parte di queste risorse non è ottimizzata, di grandi dimensioni e non è facile da usare.

Al di fuori di AdSense e delle piattaforme pubblicitarie, se hai molte immagini, JavaScript e CSS non ottimizzati, specialmente above the fold, è molto probabile che tu non superi il test Core Web Vitals.

Se hai avuto difficoltà a superare il test Core Web Vitals e a migliorare il tuo motore di ricerca classificare i potenziali, troverai soluzioni pratiche in questo articolo.

Cosa sono i principali parametri vitali del web?

I Core Web Vitals sono metriche basate su Google Lighthouse che determinano in che modo un sito offre una buona esperienza di pagina. Sebbene ci siano molte metriche durante l'esecuzione di un test, le metriche più importanti sono il Largest Contentful Paint (LCP), il First Input Delay (FID) e il Cumulative Layout Shift (CLS).

Google ha annunciato che da maggio 2021 queste metriche diventeranno parte dei loro segnali di ranking utilizzati per determinare le posizioni delle pagine web nei risultati di ricerca.

In sintesi, puoi dire che Core Web Vitals non è stato pensato per essere un terrore per i webmaster, ma un mezzo per migliorare l'esperienza delle pagine dei siti web.

La più grande vernice contenta (LCP): LCP misura il tempo necessario per caricare l'immagine più grande visibile o il blocco di testo su una pagina web. Se il testo o l'immagine più grandi visibili si caricano velocemente, si percepisce che il resto delle immagini e del testo verrà caricato velocemente. Il tempo di caricamento richiesto per passare è 2.5 secondi.

La più grande vernice contenta
Crediti: Web.dev

Ritardo primo ingresso (FID): FID misura l'interattività delle pagine web. Ciò è determinato dal tempo impiegato dal browser per avviare l'elaborazione dei gestori di eventi dopo che un utente ha fatto clic sul tuo sito. Questo è ampiamente chiamato la prima impressione del tuo sito web. Il tempo necessario per passare è Millisecondi 100.

Ritardo primo ingresso
Crediti: Web.dev

Spostamento cumulativo del layout (CLS): CLS misura lo spostamento del layout che si verifica su una pagina web. Quando una pagina Web viene caricata e all'improvviso qualcosa appare o scompare e la pagina deve adattarsi a essere più grande o più piccola, quello spostamento è ciò che viene misurato. È terribile per l'esperienza dell'utente e sono d'accordo. Il punteggio che dovresti passare è 0.1.

Spostamento del layout cumulativo
Crediti: Web.dev

Come ottimizzare il tuo sito web per Core Web Vitals

Segui questi passaggi per ottimizzare il tuo sito web:

1. Inizia con un host web veloce

Se hai un host web con un tempo di risposta terribile, qualsiasi altra cosa che elencherò qui potrebbe non dare i risultati desiderati. Più velocemente il tuo server risponde alle richieste, meglio è.

Perché è importante un host web con un Time to first byte (TTFB) veloce? Alcuni sosterranno che TTFB non ha importanza, ma lo fa. Questo è il fondamento di tutto il resto. Se hai utenti in città con Internet lento, la velocità con cui il tuo host web può rispondere significherà tutto. Qualsiasi host web può funzionare bene se hai utenti principalmente da città con Internet superveloce.

Prova a testare come risponderà il tuo host web a 3G o 2G anziché 4G. Perché se molti utenti si connettono tramite 3G o 2G, si aggiunge al punteggio di Core Web Vitals. Quindi, ogni millisecondo conta. La differenza tra ottenere 100 ms nel tuo FID e ottenere 101 ms è che con 100 ms passi ma con 101 ms fallisci. Quindi, se qualcuno ti dice che 1 ms non ha importanza, quella persona potrebbe semplicemente sbagliarsi.

Quando si seleziona un host web, assicurati sempre di avvicinare un datacenter alla maggior parte degli utenti del tuo sito web. Puoi trovare le loro posizioni guardando le tue analisi. Da dove viene la maggior parte dei tuoi utenti? Scegli un data center più vicino a loro. Più vicino è, meglio è.

Personalmente ho notato un cambiamento significativo nei dati sul campo di Core Web Vitals di un sito Web dopo aver cambiato l'host web. Non ho fatto nient'altro.

Se stai cercando un host web veloce, ci sono molti consigli là fuori guidati esclusivamente da affiliati senza sincerità. Se utilizzi WordPress e te lo puoi permettere, lo consiglio vivamente Kinsta. Sono i migliori per WordPress. Se hai bisogno di qualcosa di più economico o non stai usando WordPress, allora CloudWays è anche molto efficace.

2. Usa un tema leggero e ottimizzato per la velocità

Questo suggerimento è particolarmente utile per i non programmatori e anche per i programmatori con meno tempo. Soprattutto se stai utilizzando WordPress dove ci sono così tante opzioni, assicurati di utilizzare un tema leggero e ottimizzato per la velocità.

Poiché il tema è come lo scheletro del tuo sito Web, se lo scheletro è rotto, il corpo sarà rotto. Questo è tutto.

C'è un lungo elenco di best practice che dovresti cercare in un tema. Alcune delle pratiche scorrette più comuni dipendono eccessivamente da JQuery, caricano troppi CSS/JS quando non sono necessari, temi di grandi dimensioni e altro ancora. Puoi sempre usare uno strumento come Laboratori gialli, per testare la demo.

Se stai usando WordPress, puoi controllare l'elenco dei temi WordPress più veloci.

3. Ottimizza le tue immagini

Le immagini sono fantastiche. Rendono i contenuti così attraenti. Ma possono essere un peso se non sono ottimizzati. Avere immagini di grandi dimensioni come 3 MB influenzerà sicuramente la tua velocità. E se queste immagini sono visibili quando il tuo sito viene visitato prima di scorrere, influenzeranno sicuramente la tua metrica LCP.

La verità è che le immagini non ottimizzate aumentano le dimensioni della tua pagina. Maggiore è la dimensione della pagina, maggiore è il tempo necessario per il caricamento.

Personalmente preferisco ottimizzare ogni immagine prima di caricarla. Non utilizzo alcun servizio esterno per l'ottimizzazione delle immagini. Tuttavia, se usi WordPress o simili CMS, Vi sono i plugin e soluzioni per ottimizzare automaticamente le immagini. Esistono anche soluzioni cloud indipendentemente da ciò che utilizzi.

4. Rimuovere o ridurre le dimensioni delle immagini di sfondo

Le immagini di sfondo sono generalmente molto grandi. E può rallentare il tempo di caricamento poiché deve essere caricato prima che venga visualizzato contenuto significativo.

Puoi rimuovere completamente l'immagine di sfondo per avere un sito web più veloce. Se sono così importanti, prendi in considerazione la possibilità di ottimizzarli alla dimensione più piccola possibile o di utilizzare modelli anziché immagini.

5. Usa la memorizzazione nella cache del browser

Se hai molti lettori fedeli, dovresti considerare la memorizzazione nella cache del browser. Quando un utente visita il tuo sito web per la prima volta, il browser memorizzerà nella cache quel sito web. Per ogni altra visita, si caricherà in un istante. Questo può migliorare notevolmente FID e LCP dalla seconda visita in su.

Per gli utenti di WordPress, la maggior parte dei plug-in di memorizzazione nella cache può aiutarti a raggiungere questo obiettivo.

6. Minimizza JavaScript e rinvia JavaScript inutilizzato

Sebbene JavaScript sia sorprendente, spesso blocca il rendering. Ciò significa che può influire sul tempo di caricamento e, in definitiva, sul FID.

Prova a minimizzare JavaScript rimuovendo gli spazi bianchi e i commenti per ridurre le dimensioni del file. Inoltre, assicurati di rinviare JavaScript non critico. Questo dovrebbe migliorare il tuo FID.

Per gli utenti di WordPress, ci sono plugin come Autoptimize, WP Rocket e altri che possono farlo per te.

7. Imposta l'attributo della dimensione di AdSense

Se stai eseguendo AdSense sul tuo sito web e stai lottando con CLS, allora questo può risolvere tutti i tuoi problemi. Lo ha fatto per me e dovrebbe per te.

Se hai un'unità pubblicitaria vicino all'intestazione che è visibile quando un utente visita, un problema è che l'annuncio potrebbe non caricarsi immediatamente. Potrebbe caricarsi dopo che la pagina è già stata caricata e, quando lo fa, c'è uno spostamento nel layout. Questo è molto comune per le unità pubblicitarie adattabili. Con ciò, è impossibile superare la metrica CLS.

Il modo migliore per gestirlo è modificare un po' il codice AdSense. Nessun problema, è molto legittimo. Basta specificare l'attributo size per l'annuncio, in particolare l'altezza. Dopo averlo fatto, non noterai più uno spostamento del layout ogni volta che l'annuncio viene caricato.

Di seguito è riportato un esempio di un'unità pubblicitaria reattiva che ho utilizzato sul mio blog appena sotto l'intestazione. Ho sostituito il mio ID editore e l'area annuncio con XXXXXX. Ho notato che ho aggiunto l'attributo altezza (altezza minima: 300px). Nel momento in cui l’ho fatto, tutti i problemi di CLS sono scomparsi per sempre.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Header ad -->
<ins class="adsbygoogle"
     style="display:block; min-height: 300px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Ciò che fa è prenotare quella dimensione sulla pagina. Quindi, ogni volta che vengono visualizzati gli annunci, non c'è alcun cambiamento di layout, poiché avevi già impostato la dimensione.

8. Imposta l'attributo della dimensione per le tue immagini e altri media

Proprio come con gli annunci, le immagini e altri media possono causare cambiamenti di layout quando vengono caricati sul tuo sito web. Potresti semplicemente leggere qualcosa, quindi un'immagine viene caricata e all'improvviso c'è uno spostamento del layout, ciò che stavi leggendo non è visibile e tutto ciò che vedi è qualcos'altro o fai clic su qualcos'altro per errore.

Puoi evitarli tutti impostando l'attributo size ai tuoi file multimediali. La tua metrica CLS sarà felice di averlo fatto.

9. Caricamento pigro immagini.

Potresti aver visto i consigli su PageSpeed ​​Insight per rimandare le immagini fuori schermo. Ciò che significa semplicemente è caricare in modo pigro le tue immagini.

Quello che fa il caricamento lento è ridurre le dimensioni della pagina e anche il tempo di caricamento della tua pagina quando un utente visita. Il che è buono per le metriche CWV.

Ciò contribuirà in particolare a migliorare l'LCP.

10. Ottimizza i CSS minimizzando e generando CSS critici

CSS è ciò che rende interessante un sito Web, ma un file CSS di grandi dimensioni può essere un grosso problema perché ritarderà il rendering della pagina per l'utente.

Quando un utente visita il tuo sito web, il browser in base al comportamento normale ritarderà il rendering della tua pagina web per l'utente fino a quando non avrà caricato, analizzato ed eseguito tutti i CSS a cui si fa riferimento nell'intestazione della tua pagina web. Se hai un file CSS di grandi dimensioni, questo può essere un grosso problema. Rallenta il tuo sito.

I CSS critici possono aiutare caricando solo il CSS necessario per caricare la pagina. Mentre il resto del CSS può essere caricato in modo asincrono.

Può essere d'aiuto anche ridurre al minimo il tuo CSS rimuovendo spazi bianchi e commenti per ridurre le dimensioni del file.

Puoi anche rimuovi CSS inutilizzati. Se un servizio che utilizzi sta spingendo CSS che non vengono utilizzati, è sicuro rimuoverli.

Se usi WordPress, ci sono plugin come WP Rocket, LiteSpeed ​​Cache, FlyingPress e altri che possono aiutarti a raggiungere questo obiettivo.

11. Implementa il caricamento intelligente di AdSense

Questo metodo può eliminare quasi completamente tutte le sfide se AdSense è responsabile del rallentamento del tuo sito web.

Si tratta di caricare AdSense in modo intelligente. AdSense non verrà caricato finché un utente non esegue un'azione come scorrere o fare clic. Ciò migliorerà notevolmente il tempo di caricamento e tutti gli elementi vitali web principali interessati da AdSense.

Ci sono molti plugin per WordPress che possono aiutarti a farlo, WP Rocket e Flying Scripts sono un esempio. Per quanto ne so, questo metodo non viola le norme di Google AdSense.

Nota: Sebbene questo metodo possa aiutare a migliorare la velocità percepita e i punteggi delle pagine, potrebbe influire sulle tue entrate AdSense. Ti consiglio di eseguire un esperimento per essere sicuro che ne valga la pena

12. Usa il font System Stack se puoi

I caratteri aggiungono tempo di caricamento extra su qualsiasi sito web. E per le pagine web senza immagini, il tuo blocco di testo potrebbe essere responsabile della tua valutazione LCP. In tal caso, il tuo punteggio LCP sarà direttamente influenzato dal tuo font.

Mentre Google Font e Font Awesome continuano a migliorare, l'utilizzo del font stack di sistema offre un miglioramento significativo. Anche se non così fantasioso a seconda del dispositivo.

13. Utilizzare un CDN

Se hai utenti provenienti da diverse parti del mondo, utilizzare a CDN può aiutarti a migliorare la tua velocità e indirettamente i tuoi parametri Core Web Vitals.

Un CDN in una semplice spiegazione crea molte copie del tuo sito Web e le archivia in vari punti di presenza (POP) in diverse parti del mondo. Quando qualcuno richiede il tuo sito web, questo serve il tuo sito web dalla posizione più vicina.

Ad esempio, se il tuo sito è ospitato negli Stati Uniti e hai un visitatore dal Regno Unito, invece di recuperare il tuo sito dagli Stati Uniti, la CDN servirà il tuo sito dal Regno Unito. L'effetto di ciò sarà una consegna rapida. Velocità.

Puoi controllare il migliori CDN là fuori.

14. Configurare il prelettura DNS

Se ti affidi a un servizio esterno come un CDN per la consegna del tuo sito Web, potrebbe essere necessario impostare una prelettura DNS per ridurre al minimo il ritardo dovuto alla ricerca DNS.

Il precaricamento DNS preleverà il DNS prima che venga chiamato. In modo che si carichi in un istante quando viene finalmente chiamato.

15. Ottimizza gli script di terze parti

Verifica che alcuni dei servizi che utilizzi sul tuo sito non aggiungano script di terze parti che potrebbero rallentare i tuoi siti.

Puoi sostituire la soluzione con richieste di terze parti che rallentano il tuo sito con una soluzione migliore.

Quando si tratta di Google AdSense, un altro script di terze parti, c'è poco che puoi fare. La best practice consiste nell'utilizzare un massimo di 3 annunci uniti in una pagina. Evita i contenuti abbinati in quanto porta un reddito basso ma aumenta il tempo di caricamento.

16. Rimuovere AdSense da above the fold

Questo consiglio si basa su esperimenti. Se tutte le tue metriche sono valide nel rapporto della console di ricerca tranne LCP, assicurati innanzitutto che le tue immagini e i tuoi caratteri siano ottimizzati. Se sono ottimizzati e continui a non superare l'LCP, AdSense potrebbe essere responsabile.

Se puoi permettertelo, rimuovi AdSense da above the fold per un mese e verifica se il problema scompare.

Se non vuoi rimuoverlo, puoi ritardarlo manualmente o con l'aiuto di un plugin come Flying Scripts.

17. Passa a AMP

AMP significa Pagine mobili accelerate. L'idea di AMP è ottimizzare le pagine Web per caricarle più velocemente sui dispositivi mobili. E, naturalmente, l'AMP open source progetto è stato avviato da Google.

Sebbene AMP fosse originariamente destinato a velocizzare le pagine mobili, può anche velocizzare le pagine desktop.

Le pagine AMP sono costantemente più veloci delle pagine mobili o desktop, a volte di oltre il 100% secondo la nostra osservazione.

Se l'unica strategia di monetizzazione del tuo sito web è Google AdSense, allora potresti considerare di passare tutto il tuo sito web ad AMP. Ho notato personalmente che su un blog che possiedo, AdSense sulle pagine AMP a volte converte di più che su dispositivi mobili e desktop!

Conclusione

Il Core Web vitals può aiutarti a migliorare il tuo sito web per i tuoi utenti non solo per Google. È molto comune avere un buon punteggio del test dei dati di laboratorio ma un punteggio pessimo dei dati sul campo.

Ciò è dovuto alla composizione dei tuoi utenti. Se la maggior parte dei tuoi utenti proviene da luoghi con Internet lento, potresti aver fatto un buon lavoro nell'ottimizzazione ma ancora non riesci a trovare i dati sul campo.

Mfon Abel Ekene

Mfon Abel Ekene

Mi piace creare contenuti utili. La mia passione è aiutare la popolazione di Internet a trovare ciò di cui ha bisogno, indirizzandola nella giusta direzione. È quello che amo fare e ho dedicato molte ore di ricerca e test per assicurarmi di farlo attraverso i miei contenuti su TargetTrend.

Articoli: 51

Ricevi materiale tecnico

Tendenze tecnologiche, tendenze di avvio, recensioni, entrate online, strumenti web e marketing una o due volte al mese