Google sta ancora una volta aggiornando il suo algoritmo – ed è grande. L’aggiornamento Core Web Vitals verrà lanciato a maggio, e si tratta di velocità e esperienza utente. Più specificamente, Google inizierà a misurare tutti i seguenti elementi: Il più grande dolore contenzioso (LCP), il ritardo del primo input (FID) e lo spostamento cumulativo del layout (CLS).
Per questo post del blog, ci concentreremo solo su uno di questi elementi: Spostamento cumulativo del layout e cosa puoi fare come sviluppatore frontend per correggerlo.
Come si fa a sapere se sono presenti spostamenti cumulativi di layout
Utilizza Page Speed Insights per vedere quantitativamente il cambiamento di contenuto del tuo sito web (insieme ad altre metriche come LCP e FID).
Poiché Core Web Vitals riguarda l’esperienza dell’utente, potrebbe essere utile avere uno strumento come Airbrake Performance Monitoring. Con uno strumento di monitoraggio delle prestazioni progettato per gli sviluppatori, potrai ottenere informazioni immediate sull’UX dell’applicazione con funzionalità che misurano il punteggio Apdex , la latenza, le informazioni di query e routing e molto altro ancora.
Combinate questo con Moovweb, che ottimizza completamente la velocità del vostro sito web, e sarete in un posto eccellente non solo per misurare l’UX della vostra applicazione, ma rimanere cinque passi avanti.
Una volta che sai dove si trova il tuo sito web fino alla sua UX e CLS, è il momento di ripararlo.
In che modo gli sviluppatori frontend possono correggere gli spostamenti cumulativi di layout
Hai mai provato a fare clic su un articolo su un sito Web, solo per farlo muovere improvvisamente e finire per fare clic su un altro articolo? O, forse, sei nel bel mezzo della lettura di un articolo, e tutto si sposta verso il basso. Sì, questi sono esempi di spostamenti cumulativi di layout. Si verifica uno spostamento cumulativo del layout quando un elemento sul sito Web viene caricato dopo che tutto il resto è stato caricato. Può essere molto fastidioso per gli utenti. Non solo Google ti darà su questo, ma perderai potenziali utenti che preferirebbero andare su un sito diverso piuttosto che aspettare il tuo caricamento. Per evitare questo problema, dedicare del tempo alla risoluzione dei problemi CLS prima che abbiano un impatto sugli utenti.
In qualità di sviluppatore Frontend, ecco quattro azioni che puoi intraprendere per ridurre il cambiamento cumulativo di layout sul tuo sito Web:
Aggiornare i font
I font aggiungono carattere e personalità a un sito Web, ma questi font specializzati hanno un costo. A causa della grande natura dei file di font, i browser tendono a compensare utilizzando FOIT, altrimenti noto come flash di testo invisibile. FOIT può rallentare notevolmente i tempi di caricamento delle pagine Web.
Invece di affidarsi al FOIT, dovresti usare il metodo “flash of unstyled text” (FOUT). Il modo più semplice per modificare il testo del sito Web in FOUT è il seguente:
Tradizionalmente, si codifica il font come tale: @Font-face { font-Family: Georgia; }
Invece, dovresti usare il seguente bit di codice: @Font-face { font-Family: Georgia; font-display: Swap; }
“Il “font-display” indica immediatamente al font di visualizzazione API t0 utilizzando un font di sistema.” Una volta caricato, il file dei font verrà sostituito con il font desiderato sul sito Web.
Purtroppo, il metodo FOUT potrebbe non funzionare con tutti i browser. In caso contrario, il browser tornerà ai suoi comportamenti predefiniti per il caricamento dei font. È possibile visualizzare una descrizione dettagliata di questi comportamenti utilizzando questo strumento.
Il secondo metodo che è possibile utilizzare per eliminare i lunghi tempi di caricamento dei file di font funziona con tutti i browser, ma non è semplice come aggiornare una riga di codice.
Proprio come con il metodo precedente, aspetterai che il font predefinito sia completamente caricato e poi lo sostituirai per un font personalizzato. La differenza è che dovrai immergerti sia nel codice CSS che JavaScript del tuo sito web.
Innanzitutto, dovrai evitare di utilizzare font personalizzati al caricamento iniziale della pagina aggiornando il tuo CSS. Utilizzare un font di sistema per scaricare il testo sulla pagina il prima possibile.
Utilizzando il codice JavaScript, è possibile implementare font Face Observer. Questo codice controlla e notifica quando viene caricato un font Web. Utilizzando gli eventi di scorrimento, font Face Observer può caricare i font rapidamente. Per la guida completa, consulta la pagina fontfaceobserver GitHub.
In qualità di sviluppatore frontend, queste sono alcune semplici modifiche che è possibile apportare per migliorare i tempi di caricamento dei caratteri.
Correggere le immagini sul sito Web
Il modo in cui le immagini vengono caricate sul vostro sito Web avrà un impatto significativo e ridurrà i cambiamenti cumulativi di layout. Le immagini caricate senza attributi tendono a causare spostamenti massicci. Ecco perché è meglio utilizzare le seguenti pratiche quando si aggiungono immagini al tuo sito web:
USA attributi di dimensione su immagini ed elementi video
Prima di questo aggiornamento, l’aggiunta di attributi “larghezza” e “altezza” alle immagini ha avuto un impatto minimo o nullo sul posizionamento del sito Web su Google. Ora, con il Core Vitals Update, farà una differenza significativa. Vorrai prenderti il tempo extra per includere attributi alle tue immagini da qui in poi.
Quando si carica un’immagine come tale:
Es.: <>Il monitoraggio degli errori h1 è fantastico</h1>
<p>trova e correggi rapidamente il codice rotto< /p>
<img src=”Erron_image.jpg” alt=””>
<p>con il software di monitoraggio degli errori corretto, è possibile mantenere il codice privo di bug.</p>
Si verifica quanto segue: Il browser dell’utente leggerà e scaricherà prima l’HTML. Una volta fatto questo, finalmente scaricherà l’immagine. Alla fine si verifica un cambiamento di contenuto nella pagina Web, mentre il browser fa spazio all’immagine.
Risolvere questo problema CLS è semplice: Tutto ciò che devi fare è aggiungere i tag di attributo altezza e larghezza all’immagine.
Es.: <>Il monitoraggio degli errori h1 è fantastico</h1>
<p>trova e correggi rapidamente il codice rotto< /p>
larghezza=”450” altezza=”450”>
<p>con il software di monitoraggio degli errori corretto, è possibile mantenere il codice privo di bug.</p>
Quando aggiungete la larghezza e l’altezza all’immagine, state dicendo al browser di lasciare spazio per questa sulla pagina Web mentre il resto del documento HTML viene scaricato.
Per un approccio meno rigoroso, è possibile utilizzare anche le caselle delle proporzioni CSS .
Nessuno dei due approcci è errato, ma è imperativo che tu usi l’uno o l’altro per evitare spostamenti cumulativi di layout sul tuo sito web.
Posizionare con attenzione gli annunci dinamici
Gli annunci sono terribili quando si tratta di cambiamenti di layout dei contenuti. Avranno i tuoi contenuti in tutto il luogo se non stai attento con loro.
Quando inserisci annunci sul tuo sito Web, utilizza questi suggerimenti per evitare cambiamenti nei tuoi contenuti:
-
Proprio come per le immagini, devi assicurarti che gli annunci abbiano spazio riservato sufficiente sul tuo sito Web.
-
Non inserire annunci nella parte superiore della tua pagina Web. C’è una possibilità che questo causerà un cambiamento di contenuto per tutti i contenuti sottostanti.
-
Posiziona gli annunci al centro o in fondo a una pagina Web.
Queste sono le BEST practice per gli annunci dinamici. Non solo miglioreranno drasticamente l’esperienza dell’utente, ma anche i cambiamenti cumulativi di layout.
Diffidate dei widget incorporati
I widget incorporati sono un punto di svolta per i siti Web. Ti consentono di creare contenuti interessanti e portatili per il tuo sito Web, ma presentano notevoli svantaggi. A differenza delle immagini e degli annunci pubblicitari, può essere difficile riservare spazio sul vostro sito Web per un widget.
Supponiamo di avere un widget per Twitter. A volte un tweet può avere solo pochi caratteri; altre volte può includere immagini e collegamenti, quindi come fai a sapere quanto spazio devi riservare quando lo spazio necessario cambia continuamente?
È possibile risolvere il problema caricando un segnaposto per i propri incorporati riservando spazio sul sito Web. Ma come si fa?
Dovrai creare una “GlobalKey” e assegnarla al tuo widget. Una volta ottenuta una chiave, sarete in grado di trovare le dimensioni del widget e riservare la quantità di spazio appropriata sul vostro sito Web per i widget.
Conclusione
Esistono solo pochi metodi che è possibile utilizzare per ridurre gli spostamenti cumulativi di layout sul sito Web. Molti problemi relativi a CLS riguardano lo spazio e riservano spazio sufficiente sul tuo sito Web per immagini, annunci e widget. Anche il modo in cui caricate i font influirà in modo significativo sulla velocità del vostro sito Web.
Ricordate che con l’introduzione di Core Web Vitals a maggio, dovreste iniziare subito ad apportare queste modifiche per evitare di cadere nelle classifiche di Google.
