Come misurare e ottimizzare il più grande contenuto di pittura per un'esperienza utente superiore

Pubblicato: 2022-02-16

Quando si tratta di successo online, ci sono molti modi per farlo. Un'esperienza utente ottimizzata è uno di questi modi. Google utilizzerà diverse esperienze utente e metriche correlate per classificare i siti Web per la SEO. Ha continuato a produrre più strumenti per migliorare le prestazioni web. Di seguito daremo un'occhiata ad alcuni dei modi in cui Google sta cercando di migliorare l'esperienza utente.

Che cos'è Google Core Web Vitals?

Nel suo recente tentativo di modificare la misura e la comprensione di ciò che si qualifica come esperienza utente decente, Google ha regolato le metriche della pagina. Queste metriche standardizzate sono denominate elementi vitali web principali e facilitano le valutazioni dell'esperienza degli utenti del mondo reale sul tuo sito web.

Qual è la più grande vernice contenta?

Per cominciare, diamo un'occhiata a Largest Contentful Paint (LCP). È una delle metriche fondamentali del web vitals. Misura il tempo di caricamento del componente di contenuto più grande all'interno del viewport quando diventa visibile. Metriche alternative come TTFB e First Contentful Paint facilitano congiuntamente l'esperienza della pagina live, non sono presenti una volta che la pagina è diventata "significativa" per l'utente.

Di solito, a meno che il componente più importante della pagina non diventi completamente visibile, la pagina potrebbe non offrire un contesto sufficiente per l'utente. LCP è, quindi, rappresentativo delle aspettative dell'utente. In quanto metrica di base dei dati vitali del Web, LCP rappresenta il venticinque percento del punteggio di prestazione, motivo per cui è una delle metriche più importanti da ottimizzare.

Controllo del tempo LCP

Secondo Google, le categorie di parti pensate per Largest Contentful Paint sono:

<img> elementi
<image> elementi all'interno di un elemento <svg>
Elementi <video> (immagine poster utilizzata)
Un elemento con un'immagine di sfondo caricata tramite la funzione URL
Elementi a livello di blocco comprendenti nodi di testo e/o altri elementi di testo a livello di linea

Come viene misurato l'LCP?

Naturalmente, ci sono diversi modi per misurare l'LCP della tua pagina web. Il modo più semplice per farlo è utilizzare una delle piattaforme disponibili che include Lighthouse, PageSpeed Insights, Search Console e Chrome User Experience Report. Ad esempio, Google PageSpeed Insights nel suo report indica la componente per il calcolo dell'LCP.

Che cos'è un buon LCP?

Per fornire un'esperienza utente decente, devi cercare di mantenere un LCP di 2,5 secondi o inferiore sul tuo sito. La maggior parte dei caricamenti della tua pagina dovrebbe avvenire al di sotto di questa soglia. Ora che sappiamo tutti cosa sono gli LCP e quale dovrebbe essere il nostro obiettivo, esaminiamo i modi in cui migliorare l'LCP.

(Aggiungi l'immagine denominata La maggior parte delle pagine deve essere caricata a un LCP di 2,5 secondi o inferiore.jpg)

Come ottimizzare Largest Contentful Paint (LCP)

Il sistema alla base della riduzione totale dell'LCP consiste nel ridurre i dati scaricati sul dispositivo dell'utente e ridurre il tempo necessario per gestire quel contenuto e garantire un'esperienza utente senza interruzioni.

Ottimizza le tue foto

Nella maggior parte dei siti, il contenuto above-the-fold contiene in genere un'immagine sovradimensionata richiesta per LCP. Potrebbe essere l'immagine di un eroe, una giostra o uno stendardo. È necessario ottimizzare queste immagini per un LCP più robusto.

Per ottimizzare le tue immagini, devi utilizzare un CDN di immagini di terze parti come ImageKit.io. Il vantaggio dell'utilizzo di una CDN di immagini di terze parti è che ti rivolgi semplicemente alla tua attività effettiva e lasci l'ottimizzazione delle immagini alla CDN di immagini.

Trasformazioni in tempo reale per immagini reattive

Google utilizza la compartimentazione mobile first per quasi tutti i siti. Questo è il motivo per cui è necessario ottimizzare LCP per dispositivi mobili su desktop. Ogni immagine deve essere ridimensionata in base alla richiesta del layout.

Ad esempio, vorresti che l'immagine avesse una dimensione più piccola nella pagina dell'elenco e una dimensione più grande nella pagina dei dettagli del prodotto. Questo ridimensionamento garantisce che non sembri utilizzare alcun byte aggiuntivo rispetto a quello necessario per quella pagina esatta.

Memorizza le immagini nella cache e migliora i tempi di consegna

Le CDN di immagini utilizzano Content Delivery Network (CDN) per fornire le fotografie. L'utilizzo di una CDN garantisce che le immagini vengano caricate da una posizione vicina anziché da un server che potrebbe trovarsi dall'altra parte del mondo.

Precarica risorse essenziali

Ci sono casi in cui il browser potrebbe non caricare un oggetto visivo se influisce su LCP. Ad esempio, un'immagine banner in cima alla piega può essere vista come un'immagine di sfondo all'interno di un file CSS. Poiché il browser non lo saprebbe dell'immagine fino a quando il file CSS non viene scaricato, non lo caricherà.

Ora, se stai chiedendo "Come faccio a precaricare l'immagine di pittura Contentful più grande?", La risposta è semplice. Potrai precaricarli utilizzando un tag con un attributo rel= “preload” nella sezione superiore del tuo documento di linguaggio di markup ipertestuale.

Sebbene sia possibile precaricare più risorse in un documento, è necessario limitarlo a immagini o video above-the-fold, file di caratteri a livello di pagina o file CSS e JS essenziali.

Riduci i tempi di risposta del server

Se il caricamento del tuo server impiega più tempo di quanto ritenuto normale, il tempo necessario per caricare la pagina sullo schermo aumenta. Influisce negativamente su ogni metrica di velocità della pagina, insieme a LCP. Per migliorare i tempi di risposta del tuo server, puoi:

Analizza e ottimizza i tuoi server
Utilizzare una rete di distribuzione di contenuti
Preconnettersi a origini di terze parti
Servire prima la cache dei contenuti con un addetto al servizio
Comprimi file di testo

Migliora i tempi di risposta del dispositivo client

Se la tua pagina impiega molto a caricarsi, può essere scoraggiante per i potenziali clienti. Fortunatamente, ci sono alcune cose che puoi fare per assicurarti che si carichi correttamente e crei un'esperienza utente senza interruzioni. Ciò comprende:

Inline CSS essenziale
Minimizzare e premere il contenuto
Ottimizzazione dell'LCP per il rendering lato client
Utilizzo del rendering lato server
Utilizzo del pre-rendering

LCP è diventato un grande fattore di ranking della ricerca che si correla in modo potente con l'esperienza e il viaggio dell'utente. Pertanto, se gestisci un'attività web, devi ottimizzare questi componenti per garantire il successo dell'impresa.

Biografia dell'autore

Ghia Marnewick è una scrittrice, social media manager e digital manager. Scrive contenuti per Aumcore ed è appassionata di trovare nuovi modi per condividere informazioni con il mondo.