Home Blogs In che modo gli sviluppatori Frontend possono correggere la variazione cumulativa del layout
Applications

In che modo gli sviluppatori Frontend possono correggere la variazione cumulativa del layout

About The Author

Outline

Google sta ancora una volta aggiornando il suo algoritmo – ed è grande. L’ aggiornamento Core Web Vitals viene lanciato a maggio, ed è tutto sulla velocità e l’esperienza utente. Più specificamente, Google inizierà a misurare tutti i seguenti elementi: LCP (Large Contentful Pain), FID (First input Delay) e CLS (Cumulative Layout Shift).

Per questo post del blog, ci concentreremo solo su uno di questi elementi: Cumulative Layout Shift e cosa puoi fare come sviluppatore frontend per risolverlo.

Come si fa a sapere se sono presenti spostamenti cumulativi del layout

Utilizzate Page Speed Insights per visualizzare quantitativamente lo spostamento dei contenuti del vostro sito Web (insieme ad altre metriche come LCP e FID).

Poiché Core Web Vitals riguarda l’esperienza 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 della tua applicazione con funzionalità che misurano Apdex Score, latenza, 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 per rimanere cinque passi avanti.

Una volta che sai dove si trova il tuo sito web per quanto riguarda il suo UX e CLS, è il momento di risolverlo.

In che modo gli sviluppatori frontend possono correggere gli spostamenti cumulativi del layout

Hai mai provato a fare clic su un articolo su un sito Web, solo per farlo muovere improvvisamente e finisci per fare clic su qualcos’altro? O, forse, sei nel bel mezzo della lettura di un articolo, e tutto cambia. Sì, questi sono esempi di turni di layout cumulativi. Uno spostamento cumulativo del layout si verifica quando un elemento del sito Web viene caricato dopo che tutto il resto è stato caricato. Può essere molto fastidioso per gli utenti. Non solo Google ti farà sapere su questo, ma perderai potenziali utenti che preferirebbero andare a un sito Web diverso piuttosto che aspettare che il tuo venga caricato. Prevenite questo problema dedicandovi a risolvere i problemi CLS prima che abbiano un impatto sugli utenti.

In qualità di sviluppatore Frontend, ecco quattro azioni che puoi intraprendere per ridurre lo spostamento cumulativo del 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 fare affidamento su FOIT, è necessario utilizzare il metodo FOUT (flash of unstyled text). Il modo più semplice per modificare il testo del sito Web in FOUT è con il seguente metodo:

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” comunica immediatamente al font di visualizzazione API t0 utilizzando un font di sistema.” Una volta caricato il file del font, lo sostituirà con il font desiderato sul sito Web.

Sfortunatamente, 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 un dettaglio di questi comportamenti utilizzando questo strumento.

Il secondo metodo che è possibile utilizzare per eliminare lunghi tempi di caricamento per i 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, quindi cambialo per un font personalizzato. La differenza è che dovrai immergerti sia nel codice CSS che JavaScript del tuo sito web.

Innanzitutto, è consigliabile evitare di utilizzare font personalizzati al caricamento iniziale della pagina aggiornando il 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 consente di monitorare e notificare quando viene caricato un font Web. Utilizzando gli eventi di scorrimento, font Face Observer può caricare rapidamente i font. Per la guida completa, consulta la pagina GitHub di fontfaceobserver .

In qualità di sviluppatore frontend, queste sono alcune semplici modifiche che puoi apportare per migliorare i tempi di caricamento dei font.

Correggere le immagini sul sito Web

Il modo in cui le immagini vengono caricate sul vostro sito Web avrà un impatto significativo e ridurrà gli spostamenti cumulativi del layout. Le immagini caricate senza attributi tendono a causare enormi spostamenti. Ecco perché è meglio utilizzare le seguenti pratiche quando si aggiungono immagini al tuo sito web:

Utilizzare gli attributi delle dimensioni sulle immagini e sugli elementi video

Prima di questo aggiornamento, l’aggiunta di attributi “larghezza” e “altezza” alle tue immagini ha avuto un impatto minimo o nullo sul posizionamento del tuo sito Web su Google. Ora, con il Core Vitals Update, farà una differenza significativa. Da qui in poi, vorrai dedicare del tempo in più per includere gli attributi alle tue immagini.

Quando si carica un’immagine come tale:

Es.: <Il monitoraggio degli errori h1>è eccezionale</h1>

<p>trova e correggi rapidamente il codice guasto</p>

<img src=”Erron_image.jpg” alt=””>

<p>con il giusto software di monitoraggio degli errori, è possibile mantenere il codice privo di bug.</p>

Accade quanto segue: Il browser dell’utente leggerà e scaricherà prima l’HTML. Una volta fatto questo, finalmente scaricherà l’immagine. Ciò che finisce per accadere è uno spostamento dei contenuti sulla pagina Web, in quanto il browser lascia spazio all’immagine.

Risolvere questo problema CLS è semplice: Tutto ciò che devi fare è aggiungere i tag di attributo di altezza e larghezza all’immagine.

Es.: <Il monitoraggio degli errori h1>è eccezionale</h1>

<p>trova e correggi rapidamente il codice guasto</p>

larghezza=”450” altezza=”450”>

<p>con il giusto software di monitoraggio degli errori, è possibile mantenere il codice privo di bug.</p>

Quando aggiungete la larghezza e l’altezza all’immagine, state dicendo al browser di lasciare spazio sulla pagina Web mentre il resto del documento HTML viene scaricato.

Per un approccio meno rigoroso, è possibile utilizzare anche le caselle formato CSS.

Nessuno dei due approcci è errato, ma è imperativo che si utilizza uno o l’altro per evitare spostamenti cumulativi di layout sul vostro sito web.

Posiziona con cura annunci pubblicitari dinamici

Gli annunci sono terribili quando si tratta di cambiamenti di layout dei contenuti. Avranno i tuoi contenuti che vanno in tutto il luogo se non stai attento con loro.

Quando pubblichi 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 abbastanza spazio riservato sul tuo sito Web.

  • Non inserire annunci nella parte superiore della tua pagina web. C’è una possibilità che questo causi uno spostamento di contenuto per tutti i contenuti sotto di esso.

  • Posiziona gli annunci vicino al centro o alla parte inferiore di una pagina Web.

Queste sono le BEST practice per gli annunci dinamici. Non solo miglioreranno drasticamente l’esperienza utente, ma anche variazioni cumulative del layout.

Diffidate dei widget incorporati

I widget incorporati rivoluzionano i siti Web. Ti consentono di creare contenuti interessanti e portatili per il tuo sito Web, ma hanno degli svantaggi significativi. A differenza di immagini e annunci pubblicitari, può essere difficile riservare spazio sul tuo sito Web per un widget.

Supponiamo di avere un widget per Twitter. A volte un tweet può essere lungo solo pochi caratteri; altre volte può includere immagini e collegamenti, quindi come si fa a sapere quanto spazio è necessario riservare quando lo spazio richiesto è in continua evoluzione?

Puoi risolvere questo problema caricando un segnaposto per i tuoi incorporati riservando spazio sul tuo sito Web. Ma come si fa?

Dovrai creare un “GlobalKey” e assegnarlo al tuo widget. Una volta che hai una chiave, sarai in grado di trovare le dimensioni del widget e riservare la quantità di spazio appropriata sul tuo sito Web per i widget.

Conclusione

Esistono solo pochi metodi che potete utilizzare per ridurre le variazioni cumulative del layout sul vostro sito Web. Molti problemi relativi a CLS riguardano lo spazio e riservare spazio sufficiente sul tuo sito Web per immagini, annunci e widget. Il modo in cui caricate i font influisce in modo significativo anche sulla velocità del vostro sito Web.

Ricorda che con il lancio di Core Web Vitals a maggio, dovresti iniziare a fare queste modifiche ora per evitare di cadere nelle classifiche di Google.