Core Web Vitals nella progettazione di siti Web (come migliorarli)

Il tuo sito web è mai caduto nelle classifiche SEO e ti sei chiesto cosa è andato storto? In questi casi, dopo aver esaminato i principali fattori SEO come contenuti di qualità, interlinking naturale e backlink, ottimizzazione mobile e così via, dovresti prendere in considerazione la ricerca di un altro rapporto vitale sul sito Web: i tuoi Core Web Vitals.

Google utilizza segnali di ranking specifici per misurare l'affidabilità, l'efficienza e l'esperienza utente del sito web. I Core Web Vitals sono i punteggi dell'esperienza di pagina che Google assegna ai siti web. Questi sono fattori vitali che misurano quanto è ottimizzato il tuo sito e quanto è buona l'esperienza dell'utente. Quando progetti il ​​tuo sito web, assicurati che sia ottimizzato per queste metriche. Altrimenti, potresti finire per danneggiare il tuo posizionamento su Google e anche l'esperienza utente complessiva.

Troppo tecnico? In questo articolo, abbiamo cercato di semplificare cosa significano i core web vitals del tuo sito, come sono influenzati dal design del tuo sito e come puoi migliorarli. Migliorare il tuo punteggio di base web vitals è fondamentale per il posizionamento del tuo sito, quindi puoi anche richiedere l'aiuto di web designer professionisti se sembra troppo difficile.

Cosa sono e perché sono importanti?

Google utilizza determinati indicatori chiave di prestazione per misurare la salute e la qualità del tuo sito web. Questi sono chiamati Core Web Vitals. Oltre ai vecchi segnali di ranking come l'ottimizzazione delle parole chiave, i contenuti, i metadati, ecc., Google utilizza questi web vitals per determinare le prestazioni del tuo sito web.

Core Web Vitals può aiutarti a migliorare notevolmente le prestazioni dei risultati di ricerca. Analizzano la velocità di caricamento del tuo sito e l'esperienza utente e consentono a Google di determinare il rendimento del tuo sito web. Ti aiutano anche a identificare le aree in cui è possibile migliorare il design e la codifica del tuo sito web. Ci sono in particolare 3 cose che Core Web Vitals considera: tempo di caricamento, stabilità visiva e interattività. Queste metriche sono definite come:

• La più grande pittura contenta (LCP)
• Spostamento cumulativo del layout (CLS)
• Primo ritardo di ingresso (FID)

Queste metriche sono facilmente misurabili con l'aiuto di strumenti come Google Lighthouse, PageSpeed ​​Insights, GTMetrix e Reddico SERP Speed ​​Tool. Se il tuo sito web riesce a ottenere un punteggio all'interno di una soglia specifica, potresti ricevere un aumento del ranking. In caso contrario, saprai dove è richiesta l'ottimizzazione. Ripassiamo questi termini.

La più grande pittura contenta (LCP)

L'LCP generalmente misura le prestazioni di caricamento del tuo sito Web dal punto di vista di un utente reale. Non è la stessa cosa delle misurazioni in cui usiamo i numeri per tenere conto della velocità di caricamento di un sito, come 2-3 secondi. Questa non è una misura accurata, poiché non tutti gli elementi di una pagina web vengono caricati alla stessa velocità. Alcuni degli elementi più pesanti, come immagini e video di grandi dimensioni, impiegheranno più tempo a caricarsi rispetto al logo e al contenuto.

Se un sito impiega più di 4-5 secondi per caricarsi, i visitatori di solito se ne vanno e cercano un sito più veloce. Se il tempo di caricamento della pagina è di circa 10 secondi, la frequenza di rimbalzo della pagina aumenta fino al 123% (Google). Questo è ciò che rende LCP così cruciale per i Core Web Vitals. LCP misura il tempo necessario per caricare l'elemento più grande della pagina Web, o meglio quanto tempo impiega una pagina per completare il caricamento. Se il tuo LCP scende sotto i 2,5 secondi, non hai nulla di cui preoccuparti. Se è di 4 secondi o più, la tua pagina ha ancora bisogno di lavoro.

Per migliorare l'LCP della tua pagina web, dovresti tenere a mente i seguenti punti:

• Gli script di terze parti non necessari dovrebbero essere rimossi, poiché possono rallentare notevolmente la pagina.
• Passa a un host web che aumenterà la velocità di caricamento.
• Se nella tua pagina è presente un elemento di grandi dimensioni che non è così importante, valuta la possibilità di rimuoverlo.
• I CSS ingombranti possono anche causare tempi di caricamento lenti.

Spostamento cumulativo del layout (CLS)

CLS misura la stabilità visiva, ovvero quanto è stabile il layout della tua pagina e come si muovono gli elementi in essa contenuti. In altre parole, CLS cerca di analizzare la stabilità degli elementi che si caricano sullo schermo. Può capitare spesso che elementi di una pagina come pulsanti e immagini vengano spostati durante il caricamento della pagina. Questo accade quando uno sfondo di grandi dimensioni è ancora in fase di caricamento. Può anche accadere a causa degli annunci. Sebbene gli annunci siano l'ancora di salvezza di numerosi siti Web, spesso possono essere piuttosto lenti da caricare. Alcuni motivi più comuni per una metrica CLS scadente sono iframe, immagini e video incorporati, contenuti con script pesanti, ecc. Di conseguenza, elementi come caratteri, testo, pulsanti e immagini si spostano nella pagina in modo casuale e inaspettato e questo viene quindi contrassegnato da Google come esperienza utente scadente.

La metrica CLS confronta i frame della tua pagina web per misurare il movimento degli elementi. La gravità dei movimenti viene calcolata confrontando i singoli punti in cui avviene lo spostamento. I punteggi di 0,1 e inferiori sono considerati "buoni". Se il tuo punteggio è più alto, considera quanto segue:

• Includi gli attributi delle dimensioni nelle tue immagini e nei tuoi video.
• Puoi utilizzare le caselle delle proporzioni CSS per specificare lo spazio che sarà richiesto anche da immagini o video. Ciò consentirà al browser di allocare immediatamente la quantità corretta di spazio per gli elementi e non appariranno all'improvviso e allontaneranno altro contenuto.
• Evita di far apparire nuovi contenuti sopra quelli esistenti quando un utente interagisce.
• Aggiungi nuovi elementi alla tua pagina web sotto tutti i contenuti esistenti.

Primo ritardo di ingresso (FID)

FID misura la quantità di tempo necessaria a un utente per essere effettivamente in grado di interagire con il tuo sito. C'è un piccolo intervallo di tempo tra il momento in cui un utente interagisce per la prima volta con la tua pagina e il momento in cui il browser inizia effettivamente a elaborare una risposta all'interazione. Questo divario viene misurato tramite FID. Google afferma che questo tempo dovrebbe essere di 100 ms o inferiore. Se il tuo FID rientra nell'intervallo di 100-300 ms, allora ha bisogno di lavoro. Se il punteggio è superiore a 300, le prestazioni del tuo sito sono considerate scarse.

In parole semplici, FID misura l'interattività del tuo sito. Ciò include tutti i tipi di interazioni, dalla selezione di un'opzione di menu, al clic su un collegamento, alla digitazione di qualcosa in un campo (lo scorrimento e lo zoom non rientrano in questa categoria di metriche).

Quando un browser è occupato, potrebbe non essere in grado di elaborare rapidamente una richiesta o un'interazione dell'utente, con conseguente latenza. Questo di solito accade quando la pagina contiene una quantità elevata di codice JavaScript che richiede l'esecuzione. Per migliorare il tuo FID, considera i seguenti punti:

• Le attività lunghe tendono a bloccare il thread principale, impedendogli temporaneamente di elaborare gli input dell'utente. Pertanto, dovresti suddividere le attività lunghe in attività più piccole e asincrone. Ciò consentirà al browser di elaborare le azioni dell'utente tra queste attività. Inoltre, assicurati che il tempo impiegato da queste attività non superi i 50 ms.
• Riduci al minimo la quantità di post-elaborazione richiesta sul lato client. Ciò ridurrà notevolmente il carico sul loro browser.
• Prendi in considerazione l'utilizzo di web worker per ridurre il carico sul thread principale.
• Rimuovi tutti gli script di terze parti non critici.

Strumenti e tecniche che puoi usare

Di seguito sono riportati alcuni strumenti e tecniche che ti aiuteranno a risolvere la maggior parte dei problemi relativi ai core web vitals.

• Controlla il tuo hosting. Con l'aiuto di host Web veloci con maggiore potenza di elaborazione, la maggior parte dei problemi con LCP e FID dovrebbe essere risolta. Identifica il tipo di hosting richiesto dal tuo sito, quindi fai la scelta migliore.
• Imposta la memorizzazione nella cache per il tuo sito. WP Rocket è un ottimo strumento che può configurarlo per i siti Web WordPress con problemi trascurabili.
• Implementa il caricamento lento. Ciò garantisce che venga caricata solo la parte visibile della pagina Web anziché la sua interezza. Ciò manterrà veloce la velocità di caricamento sul tuo sito web. WP Rocket e Autoptimize sono buoni strumenti per impostare questo.
• Configura una rete CDN o Cloud Delivery. Ciò imposta server virtuali in tutto il mondo per il tuo sito Web, il che significa che le persone in tutto il mondo possono visitarlo senza problemi di velocità.
• Comprimi le tue immagini. Se offri solo immagini di altissima qualità, il caricamento del tuo sito richiederà un tempo inutilmente lungo. Utilizza strumenti come ShortPixel e io per ridurre le dimensioni delle immagini senza compromettere la qualità. Prova a utilizzare le immagini nel formato .webp, poiché sono le più adatte al web.
• Pulisci i tuoi script e rimuovi quelli che non ti servono. Se il tuo sito web è leggermente più vecchio, sei destinato ad avere alcuni plugin che non usi più. Disinstallali e rimuovili.
• Esegui l'upgrade a HTTPS se non l'hai già fatto. È più veloce.

Conclusione

Se segui tutte le migliori pratiche di progettazione di siti Web, tenendo a mente tutti i punti precedenti, i tuoi punteggi ne trarranno grandi benefici. Riguarda i tuoi visitatori e la loro esperienza sul web. Finché puoi continuare a migliorare l'esperienza dei tuoi utenti sul nostro sito, non dovresti avere problemi a mantenere un sito web efficace e di successo.