Prestazioni Migliori per Migliori Posizionamenti: 10 Consigli per Migliorare i Core Web Vitals

Costruisci un bellissimo sito web con contenuti coinvolgenti e inizia a inviare clienti.

Sei in una situazione eccitante, specialmente se stai iniziando online.

Ma dopo una settimana online, hai notato che il tuo sito si carica più lentamente di un bradipo in una domenica pigra, e i visitatori vanno via più velocemente di un canguro sotto caffeina.

Suona familiare? Bene, devi iniziare a pensare a quello che Google definisce i Core Web Vitals (CWV).

Secondo gli ultimi rapporti di Chrome, oltre il 50,1% dei siti web ha già ottenuto buoni punteggi nei Core Web Vitals. E questo numero continua a crescere mese dopo mese, il che significa che sempre più proprietari di siti attenti stanno scoprendo questo segreto per migliorare le prestazioni.

Ecco il bello: se non fai ancora parte di quel 50%, stai rischiando il tuo posizionamento su Google, frustrando i tuoi visitatori e potenzialmente perdendo denaro.

Cambiamo, che ne dici?

Cosa Sono i Core Web Vitals, Comunque?

Pensa ai Core Web Vitals come al pagellino del tuo sito web.

Mentre attiri traffico verso il tuo sito web, Google utilizza queste metriche per valutare quanto il tuo sito sia facile da usare. Fondamentalmente, sta misurando la velocità, la reattività e la stabilità visiva del tuo sito web.

Ci sono tre metriche dei Core Web Vitals:

1. Largest Contentful Paint (LCP)
2. Cumulative Layout Shift (CLS)
3. Interaction to Next Paint (INP)

Questi potrebbero non avere senso adesso — Cerchiamo di capirli uno per uno.

Largest Contentful Paint (LCP)

Immagina di essere in un ristorante e il cameriere ti porta l’antipasto quasi immediatamente.

Questo è ciò che un buon LCP fa per il tuo sito web.

Misura la rapidità con cui l’elemento di contenuto più grande — l’immagine principale, un grande video o un grosso blocco di testo — si carica sulla tua pagina.

Secondo lo stesso rapporto Chrome Core Web Vitals, il 64.8% dei siti web ha già raggiunto i propri punteggi LCP. E ogni mese nuovi siti offrono i loro contenuti principali più velocemente.

Se vuoi entrare nella hall of fame di LCP, devi puntare a un tempo di caricamento di 2,5 secondi o meno per aumentare il tasso di conversione del tuo sito web.

Tutto ciò che supera i quattro secondi, e stai perdendo clienti.

Spostamento Cumulativo dell’Impaginazione (CLS)

Pensa ai momenti in cui potresti aver cliccato un pulsante su un sito mobile — e un altro elemento è stato caricato al suo posto, facendo sparire il pulsante — e hai cliccato quell’elemento invece.

Non è divertente. Il punteggio CLS mira a eliminarlo.

Misura quanto si muovono gli elementi della tua pagina durante il caricamento. Un punteggio CLS basso indica che il tuo layout rimane abbastanza stabile per tutto il processo di caricamento.

Puoi considerare il tuo sito ottimizzato per mobile se il layout non cambia durante il caricamento.

A partire da settembre 2024, il 78,2% dei siti web ha ottenuto buoni punteggi CLS, con un aumento costante dei numeri mese dopo mese. Questo dimostra che sempre più sviluppatori stanno dando priorità a un’esperienza utente fluida e senza scosse.

Allora, se desideri un’esperienza utente stabile, punta a un punteggio CLS di 0,1 o inferiore. Qualsiasi cosa sopra 0,25, e i tuoi utenti avranno l’impressione che l’intera pagina si stia muovendo.

Interazione al Prossimo Disegno (INP)

INP è stato aggiunto il 12 marzo 2024 al framework dei Core Web Vitals, sostituendo la vecchia metrica del First Input Delay (FID). Mentre FID misura solo la prima interazione dell’utente, INP considera tutte le interazioni durante una visita alla pagina.

I dati del report di Chrome indicano che l’85% dei siti web ottiene già buoni punteggi INP. È probabile che, se stai ottimizzando il tuo sito bene per i due punteggi precedenti, anche l’INP si allineerà.

Per mantenere i tuoi utenti felici e coinvolti, punta a un INP di 200 millisecondi o meno. Se oscilla tra 200 e 500 millisecondi, c’è del lavoro da fare.

Qualsiasi cosa sopra i 500 millisecondi, e stai offrendo ai tuoi visitatori l’esperienza di connessione via modem.

Come Misurare I Core Web Vitals

Prima di iniziare a lavorare sul miglioramento dei tuoi punteggi Core Web Vitals, è saggio farsi un’idea della situazione attuale del tuo sito. In questo modo, sarai in grado di misurare i tuoi progressi. Valutare regolarmente i tuoi punteggi può essere una parte preziosa della tua manutenzione del sito.

Diamo un’occhiata a alcuni modi diversi per misurare le prestazioni del tuo sito web.

Insight Velocità Pagina

Ci sono alcuni strumenti online che puoi utilizzare per misurare i Core Web Vitals, inclusi Pingdom e GTmetrix. Tuttavia, noi consigliamo di usare Google PageSpeed Insights.

Per iniziare, inserisci l’URL del tuo sito web e poi clicca sul pulsante Analyze.

Quando avrà finito di analizzare il tuo sito, fornirà un riepilogo di alcuni dei dati chiave e dei dati sui Core Web Vitals del sito. Come puoi vedere nell’immagine sopra, il sito web Google predefinito ha:

• LCP: 0,7 secondi
• INP: 63 millisecondi 
• CLS: 0

PageSpeed Insights testa contemporaneamente i punteggi per mobile e desktop, e puoi passare da uno all’altro proprio sotto dove hai inserito il sito web.

Se scorri più in basso, troverai anche alcune diagnosi e suggerimenti per miglioramenti. In base al punteggio del tuo sito, PageSpeed Insights offre una serie di raccomandazioni che puoi utilizzare per aumentare il tuo punteggio e migliorare le prestazioni del tuo sito.

Rapporto Sull’Esperienza Utente di Chrome

Puoi anche accedere ai tuoi Core Web Vitals tramite il tuo Rapporto sull’Esperienza Utente di Chrome. Questo può essere particolarmente utile per sviluppatori e webmaster.

Questo rapporto è disponibile tramite Google Search Console e fornisce dati reali e approfondimenti dai tuoi visitatori. Ti aiuta a capire come i tuoi utenti utilizzano il web e interagiscono con il tuo sito.

Per visualizzarlo, devi recarti nella dashboard della tua Google Search Console. Quindi, naviga fino a Core Web Vitals, che si trova sotto la sezione “Experience”.

Estensione Chrome per i Core Web Vitals

Se sei un utente Chrome, puoi utilizzare l’estensione Chrome Web Vitals per valutare i tuoi Core Web Vitals per qualsiasi sito web su cui ti trovi.

Aggiungi semplicemente l’estensione a Chrome, e sei pronto per partire!

La prossima volta che sei su un sito web, clicca semplicemente sull’icona dell’estensione in alto nella tua pagina e vedrai il punteggio Core Web Vitals di quel sito web.

Ecco come appare l’output dell’estensione:

Vedrai i punteggi LCP, CLS e INP a colpo d’occhio senza visitare ogni volta la pagina degli insight di PageSpeed.

Come Migliorare i Core Web Vitals per Ottenere Punteggi Migliori su Google?

Ora che abbiamo chiarito le basi, immergiamoci in alcune delle migliori pratiche per migliorare i punteggi dei Core Web Vitals della tua pagina. Ricorda, non si tratta solo di fare colpo su Google — è questione di creare un sito web che i tuoi visitatori adoreranno usare.

1. Utilizza Formati di Immagine Moderni

Siamo esseri visivi, ma quelle belle immagini ad alta risoluzione possono compromettere le prestazioni del sito web se non compresse adeguatamente.

Devi ottimizzare le immagini e poi caricare le immagini ottimizzate sul tuo sito web invece di utilizzare soluzioni lato server.

Per risolvere questo problema e rendere il web più veloce, Google ha lanciato il formato WebP. Mantiene molti dettagli dell’immagine riducendo significativamente le dimensioni delle immagini.

WebP può essere il formato di riferimento per fotografie e immagini complesse. Offre una migliore compressione rispetto a JPEG o PNG, il che significa che puoi avere dimensioni di file più piccole senza sacrificare la qualità. Le immagini WebP sono circa il 30% più piccole rispetto alle loro controparti JPEG. Quindi, stai risparmiando molta larghezza di banda e tempo necessario per caricare la pagina.

Da DreamHost, amiamo usare Squoosh per convertire le immagini in WebP o semplicemente comprimerle per risparmiare spazio.

Ecco alcuni plugin di ottimizzazione delle immagini aggiuntivi da considerare:

• ShortPixel Image Optimizer
• EWWW Image Optimizer
• Imagify
• Smush

Oltre a WebP, ti consigliamo di usare SVG per icone, loghi e illustrazioni.

Gli SVG (Scalable Vector Graphics) non sono propriamente immagini. Rispetto ai formati di immagine regolari come JPEG, PNG, WebP, ecc., gli SVG sono un linguaggio di markup basato su XML che descrive l’immagine su un piano geometrico 2D.

Questo testo descrittivo viene poi inviato all’utente, e il browser dell’utente lo converte in un’“immagine” dopo aver ricevuto l’intero markup SVG.

Tutto ciò rende gli SVG estremamente leggeri — dato che sono essenzialmente solo piccoli blocchi di testo.

Inoltre, poiché sono creati sulla base di calcoli matematici, le immagini SVG possono essere ridimensionate all’infinito senza perdere qualità e appaiono nitide su qualsiasi dispositivo, da uno smartphone piccolissimo fino a un enorme monitor 4K.

Gli SVG sono chiamati formati vettoriali mentre il WebP è un formato raster, e puoi vedere come entrambi reagiscono all’ingrandimento.

Il font è un eccellente esempio di vettore usato quotidianamente. Puoi ingrandire i font quanto vuoi, ma non si pixeleranno. Mentre parliamo di font, un altro modo per ottimizzare il tuo sito web per i Core Web Vitals è usare meno font.

2. Ottimizzazione dei Caratteri per la Prestazione CWV

I font possono migliorare o rovinare il design del tuo sito web. Ma quando si tratta di ottimizzare i font per le prestazioni, meno font sono spesso migliori.

Ecco alcuni consigli per ottimizzare i font per il tuo sito web:

• Limita il numero di font: Utilizza solo due font principali per il tuo sito web—uno per i titoli e uno per il testo del corpo. Questo riduce il numero di richieste HTTP e semplifica il tuo design. Inoltre, sii selettivo con i pesi del font; include solo quelli di cui hai bisogno.
• Quando possibile, utilizza i font di sistema: La maggior parte dei dispositivi ha già installati font di sistema come Arial, Helvetica o Georgia. Si caricano istantaneamente ed eliminano la necessità di scaricare font aggiuntivi.
• Precarica i font critici: Aggiungendo un link di precarica nel tuo HTML puoi istruire il browser a recuperare i tuoi font più importanti all’inizio del processo di caricamento. Questo può migliorare significativamente i tempi di rendering del testo. 
• Ottimizza i font personalizzati per prevenire il CLS: Il browser non conosce le dimensioni esatte dei font personalizzati finché non li scarica, causando spostamenti del layout. Alcuni strumenti open-source, come Font Pie, aiutano a generare CSS che elimina o almeno riduce il CLS.
• Suddividi i tuoi font: Rimuovi i caratteri inutilizzati dai tuoi file di font—come i caratteri non latini se il tuo sito non li utilizza. Questo riduce le dimensioni dei file e accelera i tempi di caricamento.

Noi copriremo alcune strategie avanzate per l’ottimizzazione dei caratteri in futuro, ma per ora, utilizzare questa breve lista dovrebbe aiutarti a preparare i caratteri del sito web per ottenere punteggi migliori.

3. Rifletti Bene Prima di Usare Google Tag Manager

Lo sappiamo cosa stai pensando: “Ma Google Tag Manager rende la mia vita così facile!”

E non ti sbagli.

È uno strumento fantastico per gestire più tag senza dover entrare nel codice. Tuttavia, può presentare sia vantaggi che svantaggi quando si tratta di Core Web Vitals.

Mentre Google Tag Manager è eccellente per organizzare i tuoi tag, può potenzialmente rallentare il tuo sito se non utilizzato con giudizio. Ogni tag aggiunge un po’ di tempo di caricamento, e quei millisecondi possono accumularsi più velocemente della tua bolletta del caffè in una conferenza per sviluppatori.

Chiediti: hai davvero bisogno che tutti quei tag vengano attivati ad ogni caricamento della pagina? Alcuni di essi potrebbero essere implementati manualmente per avere un controllo migliore su quando si caricano?

Come regola generale, utilizza Google Tag Manager solo per tag essenziali e validi per tutto il sito, e implementa manualmente i tag meno critici o specifici per pagina.

4. Implementa una Soluzione di Caching

Pensa alla cache come alla memoria a breve termine del tuo sito web. Invece di generare ogni pagina da zero per ogni visitatore, la cache memorizza una copia della pagina e la serve rapidamente come un fulmine.

Implementare la cache può migliorare notevolmente i tuoi punteggi LCP, soprattutto per i siti web dinamici. Esistono vari livelli di cache che puoi considerare:

• Cache del browser: Dice ai browser di memorizzare localmente determinati file.
• Cache lato server: Memorizza pagine generate o interrogazioni al database.
• Cache degli oggetti: Memorizza elementi individuali come widget o menu.

A seconda del tuo web host, potresti essere in grado di sfruttare la cache a livello di server.

Di default, i piani DreamPress includono una cache integrata per ridurre il carico delle visite non memorizzate nella cache senza la necessità di aggiungere personalmente alcun plugin di cache al tuo sito.

Inoltre, se stai usando WordPress come sistema di gestione dei contenuti (CMS) del tuo sito web, plugin come W3 Total Cache o WP Super Cache possono aiutarti a implementare ulteriori livelli di cache, inclusa la cache del browser e degli oggetti, migliorando ulteriormente la velocità del sito.

5. Elimina le Risorse che Bloccano il Rendering

Gli elementi che bloccano il rendering si riferiscono ai file HTML, CSS e JavaScript statici necessari per visualizzare una pagina sul tuo sito. Ciascuno di questi file contiene script che possono impedire ai tuoi utenti di visualizzare i contenuti.

Di solito, sono creati da plugin di terze parti e strumenti come Google Analytics.

Tuttavia, un modo per evitare che questi script danneggino la tua UX (e, di conseguenza, aiutino a migliorare i Core Web Vitals) è eliminare le risorse che bloccano il rendering e ridurre al minimo e rimuovere qualsiasi CSS o script inutilizzato.

Ci sono diverse tecniche che puoi utilizzare per questo.

Uno dei metodi consiste nel minimizzare il tuo JavaScript e CSS eliminando gli spazi vuoti o i commenti non necessari.

Puoi utilizzare uno strumento come CSS Minifier per semplificare questo processo:

Inserisci il tuo CSS e seleziona il pulsante Minify. Quindi, puoi copiare e incollare l’output per scaricare e sostituire il tuo codice.

Un altro metodo consiste nel condensare i tuoi JavaScript e CSS combinando i file. Questo è un altro compito con cui la funzione di ottimizzazione dei file in WP Rocket può aiutarti.

6. Rimanda il Caricamento del JavaScript

Se vuoi migliorare i tuoi punteggi FID, puoi utilizzare la tecnica nota come posticipazione del caricamento di JavaScript. Questo è un altro modo per eliminare gli elementi che bloccano il rendering.

Questo processo rende il caricamento delle tue pagine web più veloce perché ritarda il caricamento del JavaScript. In altre parole, carica altri contenuti sulla pagina una volta che un visitatore arriva, invece di aspettare che tutti i file JavaScript finiscano di caricarsi.

I tuoi file saranno costretti ad attendere per caricarsi fino a quando tutto il resto nella tua pagina web non sarà pronto.

Inoltre, puoi configurare le impostazioni del tuo sito in modo che il CSS critico carichi i contenuti “above the fold” più velocemente. “Above the fold” si riferisce agli elementi nella pagina web che appaiono per primi.

Puoi farlo estraendo il contenuto dal file CSS principale e inserendolo direttamente nel tuo codice. Questo aiuterà a caricarlo più velocemente, migliorando così l’UX. Alcuni plugin di cache come WP Rocket offrono una funzionalità Ottimizza la Consegna CSS che può essere utile per questo.

7. Utilizza una Rete di Distribuzione dei Contenuti

Immagina che il tuo sito web avesse un clone di sé stesso in ogni grande città del mondo. Questo è essenzialmente ciò che fa una Content Delivery Network (CDN).

Distribuisce copie dei tuoi asset statici (come immagini, CSS e file JavaScript) su server in tutto il mondo, così i tuoi visitatori possono scaricarli dalla posizione più vicina.

Il risultato? Tempi di caricamento più veloci, miglioramento dei punteggi LCP e un’esperienza utente migliore per il tuo pubblico globale. Può anche aiutare a ridurre il Tempo al Primo Byte (TTFB).

Ci sono diversi strumenti di terze parti che puoi sfruttare per il tuo sito WordPress. Una delle opzioni più popolari è Cloudflare.

Come per la cache, alcuni fornitori di hosting offrono CDN integrate o almeno integrazione con le CDN. Ad esempio, su DreamHost, noi abbiamo DreamSpeed, una potente CDN che sfrutta la nostra infrastruttura esistente e ti offre siti web velocissimi con il minimo sforzo.

8. Dimensiona Correttamente le Immagini

Le immagini più grandi hanno una dimensione del file maggiore.

Quindi, è intelligente assicurarsi di non utilizzare immagini eccessivamente grandi ovunque. Ad esempio, non c’è motivo di usare immagini HD per le tue miniature. Puoi lavorare con immagini molto più piccole e a bassa risoluzione qui.

Per ottimizzare ulteriormente le tue immagini, puoi usare l’attributo srcset nel tuo codice HTML. Con questo tag, puoi specificare le posizioni di immagini di diverse dimensioni, e i browser moderni possono automaticamente servire immagini della dimensione corretta in base alla risoluzione del dispositivo, migliorando i punteggi LCP.

Oltre a ciò, puoi sempre specificare gli attributi di larghezza e altezza per i tuoi tag delle immagini o riservare lo spazio necessario con il rapporto d’aspetto CSS per garantire che l’utente veda automaticamente immagini più piccole.

Tuttavia, ti consigliamo sempre di utilizzare uno strumento come Sqoosh per ridimensionare le immagini prima di caricarle.

9. Implementa il Lazy Loading

Ti raccomandiamo anche di implementare il caricamento lazy. Questo aiuta a garantire che le tue immagini vengano caricate esattamente quando gli utenti arrivano a quella sezione della pagina web, anziché caricarsi contemporaneamente a tutto il resto sulla pagina.

Il lazy-loading delle immagini può aiutare a migliorare il tuo LCP e la velocità di caricamento. La parte migliore è che è abbastanza facile da implementare.

I browser moderni supportano il caricamento pigro nativo con l’attributo loading=”lazy” sui tag <img>.

È così semplice aggiungere un singolo attributo e la tua pagina è pronta per il caricamento pigro.

Per gli utenti WordPress, hai solo bisogno di un plugin come Jetpack o Smush per attivare il caricamento lazy.

10. Aggiorna Il Tuo Hosting

A volte, puoi fare tutto nel modo giusto e avere comunque punteggi bassi nei Core Web Vitals. In questo caso, ha senso considerare l’aggiornamento dei piani del tuo provider di hosting.

Ad esempio, se hai recentemente iniziato a ricevere molti visitatori o hai aggiunto molti nuovi prodotti con molte immagini, potresti essere vicino ai limiti massimi del tuo web host.

In questi casi, se sei su un piano di Hosting Condiviso, puoi passare a un hosting virtuale privato (VPS) o hosting dedicato gestito.

Per gli utenti di WordPress, l’Hosting WordPress Gestito può dare una buona spinta alle prestazioni del tuo sito senza essere troppo costoso. Ad esempio, in DreamHost, offriamo piani DreamPress destinati ai proprietari di siti WordPress che cercano di ottenere un sito ad alte prestazioni senza spendere una fortuna.

Qualsiasi tipo di hosting tu scelga, o stia già utilizzando, il consenso è che aggiornare il tuo fornitore di hosting o il piano è il modo più rapido per velocizzare il tuo sito web.

Consigliamo di scegliere un host gestito con server ottimizzati specificamente per WordPress che possano gestire i vari aspetti tecnici delle prestazioni del sito.

Migliora l’Esperienza Utente e Raccogli i Benefici

Ora possiedi le conoscenze necessarie per unirti al 50,1% dei siti web che già soddisfano i punteggi dei Core Web Vitals e offrono un’ottima esperienza ai loro visitatori.

È vero che alcune modifiche necessarie per migliorare i punteggi possono essere complesse, forse anche tecniche, richiedendo il supporto di uno sviluppatore per ottimizzare completamente il tuo sito web.

Se vuoi alleggerire il lavoro di ottimizzazione, prova i servizi di sviluppo web di DreamHost.

I nostri sviluppatori lavorano con te per ottimizzare i siti web esistenti e possono anche creare un sito web da zero per offrire un’ottima esperienza utente e migliorare i punteggi dei Core Web Vitals.

Con DreamHost, investi in una strategia di performance a lungo termine. I nostri esperti:

• Verifica i Core Web Vitals del tuo sito.
• Usa le tecniche di ottimizzazione più recenti.
• Costruisci il tuo sito su una base solida e scalabile.
• Fornisci un supporto continuativo per mantenere il tuo sito efficiente.

Puoi concentrarti sulla gestione della tua attività e sulla creazione di contenuti di qualità mentre noi ottimizziamo il tuo sito. Quindi, se desideri che DreamHost costruisca o ottimizzi il tuo sito web, prenota una consulenza o chatta con noi oggi stesso!