Perché sto scrivendo questo

Adesso gestisco alcuni siti web e da quando ho iniziato le mie prestazioni sono state molto altalenanti. L'ho trovato davvero fastidioso a volte. Tutto sembra funzionare molto bene per me a livello locale, ma poi controllo l'analisi del mio server e vedo che per alcuni paesi la mia velocità è stata terribile.

È sempre sembrato che lo fosseCLSOLCPquesto è stato il problema per me. Quindi ho pensato di condividere la mia esperienza e cercare di aiutare gli altri a capirlo, soprattutto se stai attraversando la stessa cosa. O forse hai avuto problemi con questo e hai una prospettiva o una soluzione unica? Mi piacerebbe sentirlo.

SecondoGiornale dei motori di ricerca, l'ottimizzazione di queste due metriche può migliorare in modo significativo la visibilità del tuo sito e la soddisfazione degli utenti. In teoria sembrava fantastico, ma in realtà risolverli è stata una storia diversa. Lascia che ti spieghi ciò che ho imparato.

Cosa sono esattamente CLS e LCP?

Prima di addentrarmi nei miei problemi, lasciatemi spiegare cosa sono realmente, perché quando ho visto questi acronimi per la prima volta in Google Search Console, non avevo idea di cosa significassero.

Spostamento cumulativo del layout (CLS)misura quanto salta il layout della pagina durante il caricamento. Hai presente quando stai per toccare un pulsante e l'intera pagina si sposta, quindi fai clic sulla cosa sbagliata? Questo è un problema di CLS. È incredibilmente frustrante come utente e si scopre che anche i motori di ricerca ti penalizzano per questo.

Pittura con contenuto più grande (LCP)misura il tempo impiegato per caricare l'elemento visibile più grande sulla tua pagina. Di solito si tratta di un'immagine hero o di un grande blocco di testo. Se il tuo LCP è lento, i tuoi visitatori fissano una pagina caricata a metà e molti se ne andranno.

Entrambi ricadono sotto GoogleSegnali Web fondamentali, che influenzano direttamente il tuo posizionamento nelle ricerche. Quindi, anche se i tuoi contenuti sono brillanti, i punteggi CLS e LCP scarsi possono trattenerti.

Ottimizza il tuo sito web per CLS e LCP

🖼️

Imposta le dimensioni dell'immagine
Specificare larghezza e altezza per le immagini

📢

Utilizza gli annunci in modo responsabile
Evita il ridimensionamento imprevisto degli annunci

⚡

Precarica risorse importanti
Garantisci che i contenuti critici vengano caricati rapidamente

🔄

Riduci al minimo i contenuti dinamici
Limita i contenuti che cambiano durante il caricamento

📊

Monitorare regolarmente le prestazioni
Utilizza gli strumenti per tenere traccia dei punteggi CLS e LCP

Il mio incubo CLS

CLS è stato il primo problema che ho riscontrato. Le mie pagine mi sembravano a posto, ma i miei punteggi erano pessimi. Dopo molte ricerche, ho trovato i principali colpevoli:

Immagini senza dimensioni:Non stavo impostando larghezza e altezza sulle mie immagini. Il browser non aveva idea di quanto spazio riservare, quindi tutto è cambiato una volta caricate le immagini.
Caricamento tardivo dei caratteri:I miei caratteri personalizzati venivano caricati dopo il rendering della pagina, causando il salto di tutto il testo mentre il nuovo carattere sostituiva quello di riserva. Questo era sottile ma aggiungeva.
Contenuti dinamici:Avevo alcuni componenti che iniettavano contenuto dopo il caricamento della pagina, spingendo verso il basso tutto ciò che si trovava sotto di essi.

La risoluzione della maggior parte dei miei problemi con CLS è stata sorprendentemente semplice. Ho iniziato a definire dimensioni esplicite per tutte le immagini e i media. Ho aggiunto lo scambio di visualizzazione dei caratteri al caricamento dei caratteri in modo che il rendering di fallback venga eseguito immediatamente. E ho riservato spazio con CSS per qualsiasi contenuto che si carica dinamicamente.

Strumenti comeGoogle PageSpeed Insightssono stati di grande aiuto qui. Ti mostrano esattamente quali elementi stanno causando cambiamenti di layout, quindi non devi indovinare.

Poi è arrivato il problema LCP

Proprio quando pensavo di aver sistemato le cose, mioPunteggi LCPha iniziato a segnalare. La parte frustrante è stata che il mio sito si è caricato velocemente nel Regno Unito, ma le mie analisi hanno mostrato velocità terribili in altri paesi. Questo è il problema di LCP: dipende molto da dove si trovano i tuoi utenti e da quanto sono lontani dal tuo server.

I problemi principali che ho riscontrato sono stati:

Immagini grandi non ottimizzate:Le immagini dei miei eroi erano troppo grandi. Stavo caricando foto alla massima risoluzione senza comprimerle.
Tempo di risposta del server:Senza una CDN, gli utenti lontani dal mio server aspettavano a lungo la prima risposta.
JavaScript per il blocco del rendering:Avevo degli script caricati in testa che bloccavano il rendering della pagina fino al completamento.

COMELo studio di Backlinkomostra che i siti con buoni punteggi LCP hanno un coinvolgimento notevolmente migliore e frequenze di rimbalzo più basse. Una volta che ho iniziato a risolvere questi problemi, ho potuto vedere la differenza nelle mie analisi.

Cosa ha effettivamente aiutato il mio LCP

Ho iniziato a comprimere tutte le mie immagini e a utilizzare il formato WebP ove possibile. Ho anche spostato gli script non essenziali per caricarli in modo asincrono o rinviarli completamente. I miei siti sono ospitati su Vercel, che gestisce per me gran parte delle cose della rete edge, ma se utilizzi un hosting tradizionale, impostando unCDNpuò fare un’enorme differenza per il traffico internazionale.

Una CDN archivia copie del tuo sito in località in tutto il mondo, in modo che i visitatori vengano serviti da un luogo più vicino a loro anziché dal tuo singolo server di origine. Se noti velocità negative in regioni specifiche, questa è una delle prime cose che vale la pena esaminare.

La parte fastidiosa: non è mai veramente "risolta"

Ecco quello che nessuno ti diceCLS e LCP. Non li aggiusti una volta e vai avanti. Ogni volta che aggiungo una nuova funzionalità, una nuova immagine o cambio il layout, i punteggi possono cambiare nuovamente. È una cosa continua.

Ho avuto settimane in cui tutto era verde in Google Search Console, poi aggiungo un nuovo componente e all'improvviso il mio CLS viene nuovamente contrassegnato. È decisamente fastidioso, ma ora ho imparato a controllare i miei Core Web Vitals dopo ogni cambiamento significativo.

Impatto di CLS e LCP sull'esperienza dell'utente

0,1 secondi

Tolleranza dell'utente

32%

Aumento della frequenza di rimbalzo

Calo del tasso di conversione

Segnali Web fondamentali

Importanza del posizionamento SEO

Un rapporto diIl marchio finanziarioevidenzia come i siti web lenti possano portare direttamente alla perdita di entrate. Questa è una motivazione sufficiente per tenerlo sotto controllo, anche quando sembra noioso.

Gli strumenti che mi hanno aiutato di più

Se hai a che fare con gli stessi problemi, ecco gli strumenti che utilizzo effettivamente e che trovo utili:

Console di ricerca di Google:È qui che ho notato per la prima volta i miei problemi. Mostra i tuoi punteggi Core Web Vitals suddivisi per pagina e ti dice esattamente cosa richiede attenzione.
PageSpeed Insights:Eseguo ogni pagina attraverso questo dopo aver apportato le modifiche. Fornisce raccomandazioni specifiche e attuabili piuttosto che consigli vaghi.La guida alle prestazioni web di Shopifyè anche un'ottima risorsa complementare.
Estensione Web Vitals:Questa estensione di Chrome mostra CLS, LCP e altre metriche in tempo reale mentre navighi nel tuo sito. Lo tengo costantemente acceso durante lo sviluppo.

Una volta identificati i problemi di prestazioni, utilizza il nostroStrumento di classificazione AI di Ricerca Googleper verificare se i miglioramenti apportati si traducono effettivamente in una migliore visibilità nella ricerca. Non è possibile fissare punti se ciò non aiuta la tua classifica.

Il mio consiglio se stai attraversando questa situazione

Se la tua performance è stata altalenante come la mia, ecco cosa suggerirei:

Niente panico.I problemi CLS e LCP sono incredibilmente comuni. Non stai sbagliando tutto: questi parametri sono semplicemente sensibili.
Controlla le tue analisi per paese.Il tuo sito potrebbe essere veloce per te ma lento per i visitatori di altri paesi. Un CDN può risolvere questo problema rapidamente.
Correggi prima le immagini.Nella mia esperienza, immagini non ottimizzate e dimensioni mancanti sono la causa della maggior parte dei problemi CLS e LCP.
Testare dopo ogni modifica.Prendi l'abitudine di eseguire PageSpeed Insights ogni volta che apporti aggiornamenti significativi.
Essere pazientare.L'aggiornamento dei dati di Google Search Console può richiedere giorni o settimane. Non dare per scontato che le tue soluzioni non funzionino solo perché la dashboard non è ancora cambiata.

Sto ancora imparando e sto ancora affrontando questo problema. I miei punteggi sono migliori di prima, ma non li definirei perfetti. Se hai trovato soluzioni che hanno funzionato per te, voglio davvero sentirne parlare. Puoi anche provare a visualizzare i dati sulle tue prestazioni con il nostrocreatore di grafici online gratuitoper monitorare i miglioramenti nel tempo.

La conclusione è questa:CLS e LCPnon stanno andando via. Sono importanti per la SEO, sono importanti per l'esperienza dell'utente e, se gestisci siti Web come me, ti terranno all'erta. Ma sono risolvibili e ne vale la pena per ogni miglioramento apportato.