SEO e realizzazione siti web Udine a misura di PMI
Il Largest Contentful Paint è la metrica che ti consente di misurare il tempo di caricamento dell’elemento visivo più grande di un sito. Ha lo scopo di fornire una buona esperienza utente ed è considerato uno dei parametri più significativi dei Core Web Vitals. Si è sentito nominare per prima volta quando è stato rilasciato l’algoritmo Page Experience Update, insieme a First Input Delay (FID e Cumulative Layout Shift (CLS).
La velocità di caricamento di una pagina web è un fattore che ogni sito web deve considerare, soprattutto quando si parla di ottimizzazione per i motori di ricerca (SEO). Google richiede aggiustamenti relativi all’esperienza dell’utente, che influiscono anche sul ranking dei siti.
Con questo in mente, l’azienda ha creato una nuova metrica: Largest Contentful Paint (LCP). L’obiettivo di questo parametro è garantire che gli utenti che visitano i siti siano soddisfatti di ciò che trovano. Ciò riguarda non solo il contenuto, ma anche la performance e la presentazione. Se il sito impiega molto tempo per presentare ciò che ha da offrire, ci sono ottime possibilità che il visitatore lasci la pagina. Per Google, questo significa che l’esperienza non è stata delle più appropriate.
Largest Contentful Paint è la metrica che misura il tempo impiegato da un sito Web per mostrare all’utente il contenuto più grande sullo schermo, completo e pronto per l’interazione. Google definisce che questa metrica considera solo il contenuto above the page fold, ovvero tutto ciò che appare senza scorrere la pagina. C’è un altro punto rilevante, che è legato al tipo di contenuto considerato. La metrica conta solo il tempo di caricamento di ciò che è rilevante per l’esperienza dell’utente, ovvero:
LCP è uno dei Core Web Vitals, un insieme di tre metriche che Google utilizza per misurare le prestazioni di un sito Web nel contesto della UX. Gli altri due sono:
LCP, FID e CLS sono interconnessi e ciascuno ha un impatto sugli altri due. Ad esempio, avere un LCP elevato potrebbe anche portare a un FID elevato poiché il browser Web non è in grado di rispondere all’input di un utente finché non carica l’elemento LCP.
Le persone si aspettano che i siti web si carichino velocemente. Migliorare il tuo punteggio LCP significa che il tuo sito web verrà caricato più velocemente e sarà pronto per consentire agli utenti di interagire più rapidamente. Un punteggio LCP più alto può aiutarti a ottenere:
Nota: migliorare il tuo punteggio LCP non porta automaticamente ai vantaggi di cui sopra. Ci sono molti fattori coinvolti nel miglioramento del ranking, nella riduzione della frequenza di rimbalzo e nell’aumento del tasso di conversione. Il tuo punteggio LCP è solo uno di questi. Se ti interessa l’ottimizzazione dei tassi di conversione leggi questo libro.
Non confondere LCP con First Contentful Paint (FCP). Sono due parametri molto diversi.
Mentre LCP misura il tempo di caricamento dell’elemento più grande sulla pagina, FCP misura il tempo che intercorre tra l’inizio del caricamento della pagina e il rendering del primo elemento visivo (non necessariamente il più grande) sullo schermo.
LCP è un indicatore migliore di quando una pagina web è pronta per interagire. FCP può essere un po’ fuorviante, dal momento che il primo elemento caricato potrebbe essere qualcosa di molto piccolo, come un tag immagine vuoto, invece del contenuto principale della pagina.
LCP viene misurato in secondi.
Quattro fattori possono abbassare un punteggio LCP:
Ci sono vari modi per misurare il LCP. Qui di seguito ti elencherà i test che puoi eseguire sia con suite SEO a pagamento sia con SEO Tool gratuiti.
Un report del passaggio precedente indica che il tuo sito web presenta problemi con il LCP? Ecco come risolverli.
Prima di poter migliorare il tuo punteggio LCP, devi identificare l’elemento che stai cercando di ottimizzare. Puoi trovare l’elemento LCP su qualsiasi pagina con lo strumento PageSpeed Insights di Google. Basta digitare l’URL della pagina e fare clic su “Analizza”.
Una volta che lo strumento ha generato il rapporto, scorri verso il basso fino alla sezione “Diagnostica” e fai clic su “Elemento LPC”. Ti mostrerà l’elemento LCP per quella pagina. Gli elementi LCP varieranno da una pagina all’altra. In alcuni casi, potrebbe trattarsi di un’intestazione o di un paragrafo di testo. In altri casi, potrebbe trattarsi di un’immagine o dell’immagine del poster di un video. Sapere qual è l’elemento LCP di una pagina ti consentirà di implementare le giuste tattiche di ottimizzazione per migliorare il tuo punteggio LCP.
Il caricamento delle immagini, soprattutto quelle di grandi dimensioni e ad alta definizione, può richiedere del tempo. Ciò può influire negativamente sul tuo punteggio LCP.
Per consentire alle immagini sul tuo sito web di caricarsi più velocemente, valuta la possibilità di ridimensionarle a dimensioni più piccole e quindi di comprimerle utilizzando strumenti come Kraken o Optimizilla.
Oltre a ridimensionare e comprimere le immagini PNG e JPG, valuta la possibilità di optare per un formato immagine più performante, come WebP.
Le immagini WebP possono essere fino al 34% più piccole delle immagini PNG e JPG, con una perdita di qualità minima o nulla.
Prima che qualsiasi testo su una pagina possa essere visualizzato, è necessario caricare i caratteri utilizzati nella pagina. Quali caratteri utilizzi e come li fornisci al dispositivo dell’utente possono avere un effetto sul tuo punteggio LCP se l’elemento più grande di contenuto nella tua pagina è il testo.
Se ritieni che i caratteri causino problemi LCP, prova questi suggerimenti:
Nota: i caratteri self-hosting non sempre portano a prestazioni migliori. In alcuni casi, l’utilizzo di caratteri esterni può portare a prestazioni migliori. Pertanto, dovrai testare e vedere quale opzione si traduce in prestazioni migliori per il tuo sito web.
Nota: sebbene i suggerimenti sopra riportati siano utili per le pagine in cui l’elemento LCP è testo, sono anche buone pratiche per le prestazioni del sito Web in generale.
La minimizzazione è il processo di ottimizzazione del codice per renderlo più compatto. Quando minimizzi il codice, rimuovi elementi come interruzioni di riga, spazi vuoti non necessari e commenti fatti dagli sviluppatori.
Ciò si traduce in script e file più piccoli che vengono caricati più rapidamente.
Puoi utilizzare uno strumento come Minifier per minimizzare i tuoi file JavaScript, CSS e HTML. Se il tuo sito web è basato su WordPress, ci sono plugin di WP che possono farlo per te.
Risorse come determinati codici JavaScript e fogli di stile CSS devono essere scaricati dal browser dell’utente prima che il contenuto della pagina possa essere visualizzato.
Ecco come funziona:
Un browser Web inizia ad analizzare un file HTML e deve interrompersi quando incontra un file CSS o JavaScript. Quindi, recupera il file prima di continuare ad analizzare il codice HTML.
Ciò può rallentare il tuo sito web e comportare un punteggio LCP basso.
Per ridurre l’effetto delle risorse che bloccano il rendering, inizia identificando quali risorse stanno effettivamente bloccando il rendering.
Quindi, controlla se queste risorse sono necessarie.
A volte i siti web possono caricare inutilmente grandi quantità di file JavaScript e CSS. Ad esempio, potrebbe esserci del codice residuo che non viene più utilizzato.
Se una specifica funzione JavaScript non è necessaria su una pagina, o il CSS può essere scaricato in un secondo momento (perché non è necessario eseguire il rendering del contenuto della pagina), non è necessario forzare il browser dell’utente a scaricarlo.
Dovresti dividere il tuo CSS in critico (critical CSS) e non critico.
I CSS critici sono necessari per visualizzare contenuti visibili non appena la pagina viene caricata (ad esempio, contenuti sopra la above).
Il CSS non critico è qualsiasi CSS necessario per visualizzare il contenuto posizionato below the fold
Poiché i contenuti sotto il fold non devono essere visibili immediatamente, puoi posticipare il CSS necessario per visualizzarli e caricarli dopo aver caricato tutto ciò che è necessario per visualizzare i contenuti sopra la piega.
Il precaricamento è una tecnica in cui risorse specifiche hanno la priorità e vengono caricate in background durante il rendering della pagina. Queste risorse precaricate vengono quindi archiviate nella cache del browser, pronte per essere utilizzate quando richiesto.
Utilizzando il precaricamento per risorse critiche (come CSS, caratteri e immagini Above-the-fold), puoi evitare ritardi e migliorare il tuo punteggio LCP.
L’aggiornamento del tuo hosting web può aiutare a migliorare i tempi di risposta del server, che, a sua volta, può migliorare il tuo punteggio LCP.
In molti casi, i tempi di risposta lenti del server sono il risultato di siti web che utilizzano hosting condiviso.
L’hosting condiviso avviene quando più siti web sono ospitati sullo stesso server, spesso per risparmiare sui costi. Ciò significa che le prestazioni del tuo sito web potrebbero essere influenzate negativamente se altri siti web sullo stesso server riscontrano grandi picchi di traffico.
Per ottenere le migliori prestazioni, opta per l’hosting di un server dedicato da un provider di hosting affidabile.
La memorizzazione nella cache è il processo di archiviazione dei dati in un archivio temporaneo (chiamato “cache”) in modo che possano essere recuperati più rapidamente nelle richieste successive. Esistono diversi tipi di memorizzazione nella cache, tra cui pagina, browser e server.
Il page caching è un tipo di caching in cui una pagina del sito web viene archiviata sul server come file HTML statico dopo essere stata caricata per la prima volta. Ciò evita che vengano effettuate più query al database del tuo sito web ogni volta che la pagina viene caricata.
Tieni presente che questo tipo di memorizzazione nella cache non è adatto a tutti i tipi di siti Web. Ma se le pagine del tuo sito web non si basano su informazioni dinamiche (ad esempio, il fuso orario dell’utente, la lingua, ecc.) o non vengono aggiornate molto spesso, probabilmente trarrai vantaggio dalla memorizzazione nella cache delle pagine.
Una rete per la distribuzione di contenuti (CDN) velocizza il caricamento del tuo sito web memorizzando nella cache i contenuti del tuo sito web su server diversi e quindi offrendoli agli utenti da server fisicamente più vicini alla posizione dell’utente.
Ciò riduce la latenza, ovvero il tempo che intercorre tra la richiesta dell’utente e la risposta del server.
Le soluzioni CDN più diffuse includono:
Il rendering lato client è una tecnica in cui il contenuto di una pagina viene visualizzato nel browser utilizzando JavaScript.
Sebbene il rendering lato client possa migliorare le prestazioni del sito Web in alcuni casi, diventa un problema quando si aggiunge una grande quantità di JavaScript al mix.
Ciò è particolarmente vero se non comprimi e minimizzi il tuo codice JavaScript.
Per migliorare le prestazioni del sito web e il punteggio LCP, prova a limitare il rendering lato client.
Puoi anche provare a combinarlo con il rendering lato server. Con questo approccio, generi dinamicamente la pagina sul server invece di renderla sul lato client.
Il lazy load è una tecnica in cui il caricamento delle risorse (più comunemente immagini) viene rinviato finché non sono necessarie (ovvero finché un utente non scorre verso quella parte della pagina). I siti web spesso lo utilizzano per migliorare la velocità della pagina.
Sebbene il lazy load possa migliorare il tempo di caricamento della pagina, può peggiorare il tuo punteggio LCP.
Perché?
Perché se l’elemento Largest Content Paint della pagina è un’immagine, l’utilizzo del caricamento lento ritarderà il caricamento di quell’immagine rispetto ad altre risorse. Ciò può avere un impatto negativo sul tuo punteggio LCP.
Nota: questo si applica solo agli elementi above the fold. Il caricamento lento degli elementi Below the Fold non influisce su LCP.
Web Designer e SEO Freelance a Udine o se preferite web designer SEO. Nel 2001 decisi di sezionare un sito web per vedere cosa c’era dentro, da allora creo e gestisco siti web. Lettrice onnivora, con un fisiologico bisogno di scrivere e di ballare.
In questa sezione propongo periodicamente approfondimenti a tema SEO e web marketing. Segnalo anche gli ultimi lavori di creazione siti web ad Udine e di posizionamento sui motori di ricerca.