Come ottimizzare la pittura più ricca di contenuti e posizionarsi più in alto su Google

Come misurare la più grande vernice di contenuto del tuo sito web

Esegui un test di velocità del sito Web gratuito per scoprirlo. La tua velocità LCP verrà visualizzata immediatamente.

I risultati del tuo test di velocità ti diranno se:

• La soglia LCP è soddisfatta.
• Devi ottimizzare qualsiasi altro Core Web Vital.

Come viene calcolata la vernice con contenuto più grande?

Google esamina il 75° percentile delle esperienze, il che significa che il 25% dei visitatori reali del sito web sperimenta tempi di caricamento LCP di 3,09 secondi o superiori, mentre per il 75% degli utenti l'LCP è inferiore a 3,09 secondi.

In questo esempio, l'LCP dell'utente reale è mostrato come 3,09 secondi.

Quali sono i risultati dei test di laboratorio sui miei dati vitali Web principali?

Con questo specifico test della velocità web, vedrai anche le metriche di laboratorio che sono state raccolte in un ambiente di test controllato. Sebbene queste metriche non influiscano direttamente sulle classifiche di Google, ci sono due vantaggi di questi dati:

1. Le metriche si aggiornano non appena migliori il tuo sito web, mentre i dati in tempo reale di Google impiegheranno 28 giorni per l'aggiornamento completo.
2. Ottieni report dettagliati oltre alle metriche, che possono aiutarti a ottimizzare il tuo sito web.

Inoltre, PageSpeed ​​Insights fornisce anche dati di laboratorio, ma tieni presente che i dati che riporta a volte possono essere fuorvianti a causa della limitazione simulata che utilizza per emulare una connessione di rete più lenta.

Come trovi il tuo più grande elemento di pittura contenuto?

Quando esegui un test della velocità della pagina con DebugBear, l'elemento LCP viene evidenziato nel risultato del test.

A volte, l'elemento LCP può essere un'immagine di grandi dimensioni e altre volte potrebbe essere una grande porzione di testo.

Indipendentemente dal fatto che l'elemento LCP sia un'immagine o una parte di testo, il contenuto LCP non verrà visualizzato fino a quando non inizia il rendering della pagina.

Ad esempio, nella pagina sottostante, un'immagine di sfondo è responsabile della vernice più grande.

Al contrario, l'LCP di questa pagina è un paragrafo di testo.

Per migliorare il Largest Contentful Paint (LCP) del tuo sito web devi assicurarti che l'elemento HTML responsabile dell'LCP appaia rapidamente.

Come migliorare la più grande vernice contenta

Per migliorare l'LCP è necessario:

1. Scopri quali risorse sono necessarie per far apparire l'elemento LCP.
2. Scopri come puoi caricare quelle risorse più velocemente (o non caricarle affatto).

Ad esempio, se l'elemento LCP è una foto, puoi ridurre le dimensioni del file dell'immagine.

Dopo aver eseguito un test di velocità DebugBear, puoi fare clic su ciascuna metrica delle prestazioni per visualizzare ulteriori informazioni su come potrebbe essere ottimizzata.

Le risorse comuni che interessano l'LCP sono:

• Risorse che bloccano il rendering.
• Immagini non ottimizzate.
• Formati immagine obsoleti.
• Font non ottimizzati.

Come ridurre le risorse di blocco del rendering

Le risorse di blocco del rendering sono file che devono essere scaricati prima che il browser possa iniziare a disegnare il contenuto della pagina sullo schermo. I fogli di stile CSS in genere bloccano il rendering, così come molti tag di script.

Per ridurre l'impatto sulle prestazioni delle risorse che bloccano il rendering, puoi:

1. Identifica quali risorse stanno bloccando il rendering.
2. Verificare se la risorsa è necessaria.
3. Verificare se la risorsa deve bloccare il rendering.
4. Verifica se la risorsa può essere caricata più rapidamente, ad esempio utilizzando la compressione.

Il modo più semplice: nella cascata delle richieste di DebugBear, le richieste di risorse che bloccano il rendering sono contrassegnate con un tag "Blocco".

Come dare priorità e velocizzare le richieste di immagini LCP

Per questa sezione, sfrutteremo il nuovo attributo "fetchpriority" sulle immagini per aiutare i browser dei tuoi visitatori a identificare rapidamente quale immagine deve essere caricata per prima.

Usa questo attributo sul tuo elemento LCP.

Come mai?

Quando si guarda solo l'HTML, i browser spesso non sono in grado di dire immediatamente quali immagini sono importanti. Un'immagine potrebbe finire per essere una grande immagine di sfondo, mentre un'altra potrebbe essere una piccola parte del piè di pagina del sito web.

Di conseguenza, tutte le immagini sono inizialmente considerate di bassa priorità, fino a quando la pagina non è stata visualizzata e il browser sa dove appare l'immagine.

Tuttavia, ciò può significare che il browser inizia a scaricare l'immagine LCP solo piuttosto tardi.

Il nuovo standard Web Priority Hints consente ai proprietari di siti Web di fornire maggiori informazioni per aiutare i browser a dare la priorità alle immagini e ad altre risorse.

Nell'esempio seguente, possiamo vedere che il browser trascorre molto tempo in attesa, come indicato dalla barra grigia.

Sceglieremmo questa immagine LCP per aggiungere l'attributo "fetchpriority".

Come aggiungere l'attributo "FetchPriority" alle immagini

Aggiungendo semplicemente l'attributo fetchpriority="high" a un tag HTML img, il browser darà la priorità al download di quell'immagine il più rapidamente possibile.

<img src="photo.jpg" fetchpriority="high" />

Come utilizzare formati di immagine moderni e ridimensionare le immagini in modo appropriato

Le immagini ad alta risoluzione possono spesso avere file di grandi dimensioni, il che significa che il download richiede molto tempo.

Nel risultato del test di velocità qui sotto puoi vederlo osservando le aree ombreggiate blu scuro. Ogni riga indica una parte dell'immagine che arriva nel browser.

Esistono due approcci per ridurre le dimensioni delle immagini:

1. Assicurarsi che la risoluzione dell'immagine sia la più bassa possibile. Prendi in considerazione la pubblicazione di immagini con risoluzioni diverse a seconda delle dimensioni del dispositivo dell'utente.
2. Usa un formato di immagine moderno come WebP, che può archiviare immagini della stessa qualità con dimensioni di file inferiori.

Come ottimizzare i tempi di caricamento dei caratteri

Se l'elemento LCP è un'intestazione o un paragrafo HTML, è importante caricare rapidamente il carattere per questa porzione di testo.

Un modo per raggiungere questo obiettivo sarebbe utilizzare i tag di precaricamento che possono dire al browser di caricare i caratteri in anticipo.

La regola CSS font-display: swap può anche garantire un rendering più veloce, poiché il browser eseguirà immediatamente il rendering del testo con un carattere predefinito prima di passare successivamente al carattere web.

Monitora il tuo sito web per mantenere veloce l'LCP

Il monitoraggio continuo del tuo sito Web non solo ti consente di verificare che le tue ottimizzazioni LCP funzionino, ma ti assicura anche di essere avvisato se il tuo LCP peggiora.

DebugBear può monitorare i Core Web Vitals e altre metriche sulla velocità del sito nel tempo. Oltre a eseguire test di laboratorio approfonditi, il prodotto tiene anche traccia delle metriche dell'utente reale da Google.

Prova DebugBear con una prova gratuita di 14 giorni.