Come migliorare CWV?
Secondo una ricerca di Google, gli utenti di Internet mobile mantengono la loro attenzione sullo schermo solo per 4-8 secondi alla volta.
Quindi, hai meno di 8 secondi per interessare l’utente al tuo sito.
Vai a Core Web Vitals (CWV)
Core Web Vitals misura il tempo necessario per eseguire le funzioni di script necessarie per disegnare la parte superiore di una pagina web.
Quando la tua pagina è valutata positivamente da CWV, significa che molto probabilmente l’utente non lascerà la pagina a causa del caricamento lento.
Aggiornamento dell’Page experience previsto
CWV diventerà presumibilmente un fattore di ranking.
Il Page Experience Ranking, che probabilmente verrà lanciato gradualmente da metà giugno ad agosto 2021, includerà:
- Core Web Vitals. Il più grande contenuto di vernice (LCP). Ritardo primo ingresso (FID). Stabilità visiva.
- Usabilità mobile.
- Problemi di sicurezza.
- HTTPS.
- Esperienza pubblicitaria.
Nuovo rapporto sul sito in Search Console
Search Console ora include un rapporto sulla qualità della pagina. Include i dati degli ultimi 90 giorni.
Affinché un URL sia considerato “buono”, deve soddisfare i seguenti criteri:
- L’URL ha uno stato Buono nel report Core Web Vitals.
- Secondo il rapporto sulla mobilità, l’URL non ha problemi di usabilità mobile.
- Non ci sono problemi di sicurezza sul sito.
- L’URL viene servito su HTTPS.
- Il sito non ha problemi con gli annunci o il sito non è stato valutato per la qualità degli annunci.
Il nuovo rapporto offre widget con collegamenti ai rapporti per ciascuno dei cinque criteri “Buoni”.
Largest Contentful Paint (LCP)
Misurato dal punto sulla sequenza temporale di caricamento della pagina quando l’immagine o il blocco di testo più grande della pagina viene visualizzato nella finestra.
Le pagine che utilizzano gli stessi modelli di pagina di solito condividono lo stesso nodo LCP.
3/4 delle pagine dovrebbero raggiungere l’LCP in meno di 2,5 secondi.
Cosa potrebbe essere un LCP?
La metrica LCP misura quando è visibile l’elemento di testo o immagine più grande nella finestra.
I possibili elementi che possono essere nodi LCP nella pagina includono:
- Elementi img.
- Elementi dell’immagine all’interno del tag svg.
- elementi video.
- Le immagini di sfondo vengono caricate tramite la funzione CSS url().
- Nodi di testo all’interno di elementi di blocco.Elements img.
In futuro sono previsti elementi aggiuntivi come svg e video.
Cosa potrebbe causare un cattivo LCP?
LCP cattivo causa quattro problemi comuni:
- Tempo di risposta del server lento.
- JavaScript e CSS con rendering bloccante.
- Tempo di caricamento delle risorse lento.
- Rendering lato cliente.
- Diagnosi di LCP non valido a causa di tempi di risposta del server lentiSlow server response time.
Diagnosing bad LCP due to slow server response times
Tempo al primo byte (TTFB)
Se vedi costantemente un cattivo TTFB nei tuoi dati, allora il tempo di risposta del server è lento.
Come risolvere i tempi di risposta del server lenti
Il tempo di risposta del server dipende da molti fattori, a seconda dello stack tecnologico del sito.
Ecco alcuni possibili modi per migliorare TTFB:
- Ottimizza il tuo server.
- Usa un CDN.
- Caching.
Diagnosi di LCP cattivi a causa del blocco del rendering JavaScript e CSS
Come risolvere il blocco del rendering CSS
CSS blocca il rendering e influisce sulle prestazioni del percorso di rendering critico. Per impostazione predefinita, i CSS vengono trattati come una risorsa di blocco del rendering.
Il browser carica tutte le risorse CSS, indipendentemente dal loro comportamento di blocco o non blocco.
Minimizza CSS.
Rinvia CSS non critici.
Rinvia CSS non critici.
Se gli stili vengono utilizzati su un’altra pagina, creare un foglio di stile separato per quelle pagine che lo utilizzano per chiamare.
CSS critico in linea.
Includere il percorso critico CSS utilizzato per il contenuto nella parte superiore della pagina (come indicato nel report di copertura del codice) direttamente in head.
Utilizza query multimediali dinamiche.
Le media query sono semplici filtri che, applicati agli stili CSS, suddividono gli stili in base ai tipi di dispositivi.
L’utilizzo di query multimediali dinamiche significa che invece di calcolare gli stili per tutti i viewport, stai chiamando e calcolando quei valori per il viewport richiedente.
Come correggere il rendering del blocco JavaScript
Minimizza e comprimi i file JavaScript.
La minimizzazione comporta la rimozione di spazi e codice non necessari. È meglio farlo sistematicamente con uno strumento di compressione JavaScript.
La compressione comporta modifiche algoritmiche al formato dei dati per una comunicazione efficiente con il server e il client.
Rinvia JavaScript non utilizzato.
La suddivisione del codice suddivide grandi blocchi di JS per fornire pacchetti più piccoli. Quindi puoi scaricare quelli che contano per primi nella parte superiore della pagina.
Come correggere gli script di terze parti che bloccano il rendering:
Posticipare l’esecuzione degli script.
Se lo script non influisce sul contenuto nella parte superiore della pagina, utilizza gli attributi async o defer.
Rimuovere gli script.
Se lo script utilizza (iframe) nell’intestazione, rimuovilo.
Consolidare gli script.
E analizza il valore degli script di terze parti: quanto è più importante la loro presenza rispetto alle prestazioni del sito web?
Diagnostica di cattivo LCP qualità a causa del caricamento lento delle risorse
Ecco alcuni modi per combattere le cause più comuni del caricamento lento delle risorse:
1. Ottimizza e comprimi le immagini.
Nessuno ha bisogno di un file png da 10 MB.
2. Precaricare le risorse critiche.
Se la risorsa fa parte di un percorso critico, un semplice attributo rel = “preload” indica al browser di recuperarla il più rapidamente possibile.
3. Comprimi i file di testo.
4. Layout reattivo basato sul metodo di connessione di rete.
È improbabile che un dispositivo mobile su una rete 4G debba scaricare risorse orientate alla visualizzazione su un monitor Ultra 4K.
5. Risorse cache
Core Web Vitals è un modo per misurare le prestazioni delle tue strategie di rendering.
Tutte le opzioni di rendering creano pagine Web, ma le metriche CWV misurano quanto velocemente viene fatto ciò che conta di più e quando è importante.
Come correggere il rendering lato client
1. Riduci al minimo JavaScript critico.
Usa la suddivisione del codice e le funzioni inline nell’intestazione per la funzionalità sopra. Gli script in linea devono essere <1 KB.
2. Utilizzare il rendering lato server.
Se i tuoi server eseguono elementi JS, puoi restituire HTML completamente renderizzato. Nota che questo aumenterà il tuo TTFB poiché gli script vengono eseguiti prima che il tuo server risponda.
3. Usa il pre-rendering.
In fase di compilazione, esegui i tuoi script e prepara l’HTML per le richieste in arrivo. Questa opzione fornisce il miglior tempo di risposta del server, ma non funziona per i siti con prodotti o prezzi che cambiano frequentemente.
Per essere chiari: il rendering dinamico non è una soluzione di rendering lato client. Può anche diventare un problema lato client.
First input delay (FID) Ritardo primo ingresso
Indica la reattività all’input dell’utente.
È misurato dal tempo dal momento in cui l’utente interagisce per la prima volta con la pagina fino al momento in cui il browser può effettivamente iniziare l’elaborazione in risposta ad essa.
3/4 pagine devono avere un FID inferiore a 100 millisecondi.
Usa il tempo di blocco totale (TBT) per i test
Poiché il FID è disponibile solo come dati di test, i test devono utilizzare il tempo di blocco totale. Raggiungono lo stesso risultato finale con soglie diverse.
TBT viene misurato dal tempo totale in cui il thread principale è occupato con attività che superano i 50 ms.
Dobbiamo restare entro 300 millisecondi.s.
Quali sono le cause del FID difettoso?
Un FID errato può verificarsi a causa del JS che occupa il thread principale, il che significa che è necessario attendere l’interazione dell’utente.
Quali elementi della pagina sono interessati dal FID?
FID è un modo per misurare l’attività del flusso principale. Prima che gli elementi della pagina possano rispondere all’interazione dell’utente, è necessario completare le attività in esecuzione sul thread principale.
Ecco alcuni degli elementi più comuni che fanno attendere l’utente:
- Campi di testo.
- Banneri.
- Pulsanti di opzione (input e area di testo).
- Elenchi a discesa (selezionare).
- Link
- Come riparare un FID difettoso
Come riparare un FID difettoso
Smetti di caricare molti script di terze parti.
Il codice di terze parti rende le tue prestazioni dipendenti da qualcun altro.
Dipendi dai loro script e dalla loro efficacia.
Libera il thread di download principale suddividendo le attività più grandi.
Ad esempio, se invii un enorme pacchetto JS per pagina, ci sono molte funzionalità in questo pacchetto che non influiscono sulla pagina.
Indipendentemente da ciò, ogni funzione JS deve essere caricata, analizzata, compilata ed eseguita.
Dividendo questo pacchetto di grandi dimensioni in pacchetti più piccoli e inviando solo quelli in uso, si libera il thread principale.
Controlla il tuo manager di tag.
I manager di tag possono essere lunghi gestori di input che bloccano i download.
Esegui i pacchetti JS nell’ordine che desideri
- Usa rel = precarico.
- Aggiungi l’attributo asincrono.
- Rinviare l’esecuzione dello script utilizzando l’attributo di rinvio.
- Cambio layout cumulativo (CLS)
Cumulative Layout Shift (CLS) Cambio layout cumulativo
Responsabile della stabilità visiva.
La misurazione si basa sul numero di fotogrammi in cui l’elemento o gli elementi vengono spostati visivamente e la distanza totale, in pixel, a cui l’elemento o gli elementi vengono spostati.
CLS è l’unico Core Web Vital non misurato nel tempo. Invece, CLS è una metrica calcolata.
¾ le pagine devono avere un punteggio CLS superiore a 0,10.
Diagnosi di CLS cattivo
Cosa si può contare in CLS?
Se un elemento viene visualizzato nella finestra originale, diventa parte del calcolo della metrica.
Se carichi il piè di pagina prima del contenuto principale e questo appare nel viewport, allora il piè di pagina fa parte del tuo (terribile) punteggio CLS.
Quali sono le cause di CLS cattivo?
Questo potrebbe benissimo essere il tuo avviso sui cookie
Come correggere il CLS cattivo
Includi sempre gli attributi di larghezza e altezza nelle immagini e nei video.
Ma il web design reattivo ha meno dichiarazioni di altezza e larghezza. L’effetto è di riordinare le pagine dopo che l’immagine è apparsa sullo schermo.
È meglio utilizzare i fogli di stile del browser dell’utente in base alle proporzioni dell’immagine.
La pubblicità di terze parti sul sito non incide decisamente positivamente sulle prestazioni del sito e di CLS in particolare.
Meglio identificare immediatamente l’annuncio più grande che può essere utilizzato nello spazio pubblicitario e prenotare lo spazio pubblicitario. Se non ci sono ancora annunci, inserisci uno spazio vuoto. Questo è meglio che cambiare il layout in un secondo momento.
.
Evita di incollare nuovi contenuti su contenuti esistenti.
Evita gli annunci nella parte superiore della pagina.
Precarica font e risorse importanti.
Il caricamento tardivo dei caratteri provoca il lampeggiamento e il ricaricamento della pagina.
Il precaricamento indica al browser che desideri ricevere il carattere prima che il browser lo rilevi, perché è importante per la pagina corrente.
Evita catene di risorse necessarie per creare contenuti nella parte superiore della pagina.
Il concatenamento si verifica quando si chiama una risorsa che chiama una risorsa. Se una risorsa critica viene chiamata da uno script, non può essere chiamata finché lo script non viene eseguito..
Evita document.write()
I browser moderni supportano l’analisi lookahead del thread di download principale.
Iniziano a lavorare in anticipo mentre gli script vengono caricati ed eseguiti, ma viene visualizzato document.write() e dichiara che tutto ciò che è stato fatto in precedenza era inutile.
Metriche CWV future
Google intende aggiornare i componenti di Page Experience ogni anno. Le future metriche CWV saranno altrettanto aperte all’uso come lo erano quando sono state originariamente rilasciate.
Ciò consentirà agli specialisti SEO di affrontare con maggiore attenzione il problema dell’ottimizzazione del sito e anticipare i cambiamenti nella classifica dei siti in anticipo.
In qualità di specialisti SEO, possiamo diagnosticare e fornire soluzioni per migliorare l’esperienza dell’utente. Ottimizzazione SEO tecnica: le prestazioni organiche del sito sono un riflesso generale della salute di un sito. Skuteczne pozycjonowanie stron warszawa
