Chiama Evita significative variazioni di layout
Grandi variazioni di layout possono creare un’esperienza frustrante per i tuoi visitatori poiché rendono la tua pagina visivamente traballante, gli elementi della pagina infatti, appaiono all’improvviso, si spostano e influenzano il modo in cui i tuoi visitatori interagiscono con la pagina, e gli umori che ne derivano.
Evitare significative variazioni di layout è essenziale per creare un’esperienza fluida e ottimizzata per i tuoi visitatori.
In che modo le variazioni di layout influiscono sulle prestazioni della pagina?
Quando un utente visita la tua pagina web, di solito cerca di interagire rapidamente con pulsanti, moduli di contatto, immagini, video o altri tipi di contenuti.
A volte, proprio mentre stanno per fare clic/toccare qualcosa, lo schermo si sposta verso il basso e finiscono per fare clic/toccare su qualcos’altro.
Questa “variazione di layout” influisce sul modo in cui gli utenti interagiscono con il tuo sito web, in particolare sui dispositivi mobili; un punteggio CLS basso indica che la tua pagina è visivamente instabile (nel settore si dice “janky”).
Anche se CLS non ha un impatto elevato sul punteggio di prestazione (solo il 5%), la sua inclusione nei Web Vitals indica la sua importanza come metrica utile che riflette la tua esperienza sulla pagina.
Best practice per evitare grandi variazioni di layout
Che tu stia costruendo un sito web da zero o aiutando un cliente a migliorare le prestazioni complessive del proprio sito, dovrai prestare attenzione ai cambiamenti di layout. Ecco quattro modi per evitarli!
- Assegna dimensioni alle immagini
- Crea segnaposti per annunci pubblicitari e incorporamenti
- Gestisci correttamente il caricamento dei caratteri
- Ottimizza i contenuti dinamici
1. Assegnare dimensioni alle immagini
La maggior parte dei siti Web contiene molte immagini di diverse dimensioni. Questo va bene purché tutte le dimensioni dell’immagine siano definite.
Quando includi gli attributi di altezza e larghezza per un’immagine, questo indica ai browser web quanto spazio riservare per quell’immagine durante il caricamento.
Se il sito web del tuo cliente utilizza molte dimensioni di immagine diverse e le loro dimensioni non sono definite, il browser dovrà prevedere la quantità di spazio di cui avrà bisogno ciascuna immagine.
Ciò può comportare grandi e antiesteticche variazioni di layout.
Fortunatamente, l’editor di blocchi di WordPress definisce automaticamente queste dimensioni quando lo usi per caricare un file:
Quindi, se stai costruendo un sito web nuovo di zecca, puoi utilizzare l’editor a blocchi per evitare qualsiasi problema di layout (e incoraggiare i tuoi clienti a fare lo stesso).
Se invece le immagini sono state aggiunte manualmente o con un plugin, potrebbe essere necessario tornarci sopra per stabilirne le dimensioni.
Se ti senti a tuo agio, puoi aggiungere queste dimensioni dell’immagine mancanti utilizzando il codice Html.
Oppure, se preferisci una soluzione più automatica, puoi anche trovare plugin WordPress che ti consentono di aggiungere le dimensioni mancanti dell’immagine.
Per un plug-in specifico per funzionalità, puoi prendere in considerazione il plug-in gratuito Specify Missing Image Dimensions plugin.
Oppure puoi prendere in considerazione un plugin come Optimole, che offre un modo molto più completo per ottimizzare le immagini del tuo sito, inclusa la compressione/ridimensionamento in tempo reale, immagini adattive, lazy loading e una CDN.
Come parte di ciò, Optimole imposta automaticamente le dimensioni per tutte le tue immagini.
2. Creare segnaposti per pubblicità e incorporazioni
Anche altri tipi di media possono influire sui cambiamenti di layout del tuo sito. Tuttavia, i banner pubblicitari e gli incorporamenti come i video di YouTube sono alcuni dei colpevoli più comuni.
Un modo rapido per evitare grandi cambiamenti di layout causati dagli annunci display e per migliorare CLS è implementare il lazy loading. Tuttavia, questo probabilmente non risolverà completamente i tuoi incubi notturni.
Il modo migliore per mitigare le variazioni di layout sia per gli annunci che per gli incorporamenti è creare manualmente segnaposto utilizzando CSS personalizzati. Google Developers consiglia di affrontare questo problema con semplici attributi min-height e min-width.
Utilizzando questo approccio, potresti definire lo stile del tuo annuncio display in questo modo:
<div id="ad-slot" style="min-width: 400px; altezza minima: 350px;"></div>
Questo creerà un contenitore, riservando una quantità minima di spazio per questi elementi di design. Tuttavia, consentirà comunque al browser di aumentare questo contenitore quando necessario.
Gli annunci dinamici possono rendere tutto questo un po’ più complicato perché non necessariamente conoscerai le dimensioni esatte dell’annuncio prima che venga caricato.
Se desideri eliminare completamente i grandi cambiamenti di layout per gli annunci, devi riservare spazio sufficiente alle dimensioni dell’annuncio più grande. Tuttavia, tieni presente che ciò potrebbe causare la presenza di spazio vuoto se viene caricata una dimensione dell’annuncio più piccola.
3. Gestire correttamente il caricamento dei font
Il modo in cui vengono caricati i caratteri del tuo sito può anche causare problemi con grandi cambiamenti di layout dovuti a FOIT (flash di testo invisibile) e/o FOUT (flash di testo senza stile).
Cosa significa Foit
Un “flash di testo invisibile” (FOIT) è il fenomeno in cui una pagina Web viene caricata senza che la tipografia impostata nei caratteri di sistema venga visualizzata, prima del rendering nei caratteri tipografici previsti. Questo ritardo è causato dal download dei caratteri Web sul dispositivo dell’utente.
Cosa significa Fout?
Un “flash di testo senza stile”. È il fenomeno in cui una pagina Web viene caricata con la tipografia impostata nei caratteri di sistema(quelli del dispositivo utente) prima di passare ai caratteri tipografici desiderati(da chi ha sviluppato il sito web). Questo ritardo è causato dal download dei caratteri Web sul dispositivo dell’utente.
In passato, precaricare i caratteri era un modo semplice e veloce per evitare grandi variazioni di layout. Tuttavia, oggi Google mette in guardia da questo e suggerisce altre strategie più efficaci per gestire correttamente i web font.
La prima cosa che puoi fare è usare le dichiarazioni dei caratteri in linea. Nello specifico, dovrai utilizzare le dichiarazioni @font-face e font-family, che ti danno un maggiore controllo sul modo in cui vengono caricati i caratteri del tuo sito.
Ma prima è importante capire come funzionano.
Per dirla semplicemente @font-face e font-family possono indicare il nome e la posizione di un file di font:
@font-face {
font-family: "Comic Sans";
src: url("https://55e91930.delivery.rocketcdn.me/fonts/ComicSans-Regular-webfont.woff2") format("woff2");
}
Tuttavia, dovrai aggiungere queste dichiarazioni all'<head> del documento principale invece che a un foglio di stile esterno:
@font-face {
font-family: "Comic Sans";
src: url("https://55e91930.delivery.rocketcdn.me/fonts/ComicSans-Regular-webfont.woff2") format("woff2");
}
h1 {
font-family: "Comic Sans"
}
Dovrai anche stabilire a quali elementi si riferiscono queste dichiarazioni. Nell’esempio sopra, @fontface verrà attivato solo quando una pagina contiene intestazioni h1.
Inoltre, se il sito su cui stai lavorando deve caricare caratteri da una fonte di terze parti, potresti voler prestabilire tale connessione. Puoi farlo utilizzando l’hint sulle risorse di preconnessione e il meccanismo CORS (Cross-Origin Resource Sharing).
Questo sarà simile a questo:
La prima riga qui imposta una connessione per caricare un foglio di stile del carattere, mentre la seconda (con l’attributo crossorigin) è specificatamente per il carattere. Tieni presente che alcuni fornitori di caratteri forniscono fogli di stile e caratteri di origini separate.
4. Ottimizzare i contenuti dinamici
Un altro grosso problema quando si tratta di cambiamenti di layout è il contenuto dinamico. Questo materiale non statico si presenta spesso sotto forma di banner contenenti “contenuti correlati”, moduli di iscrizione alla newsletter o anche avvisi GDPR.
Sebbene questo tipo di contenuto possa essere molto efficace nell’aiutarti a coinvolgere i visitatori, può anche spaventarli se causa instabilità visiva. Ad esempio, se un utente stava tentando di fare clic su un articolo nella sezione Notizie dal mondo di questa pagina, il banner “Articoli correlati” a caricamento lento potrebbe rivelarsi fastidioso:
Pertanto, ti consigliamo di ottimizzare qualsiasi contenuto dinamico per evitare grandi cambiamenti di layout.
Un modo per farlo è utilizzare alcune best practice nel processo di progettazione.
Ad esempio, far si che determinate azioni dell’utente attivino elementi dinamici della pagina come i moduli di registrazione, invece di richiederne il caricamento immediato.
Ad esempio, potresti attendere finché l’utente non fa clic su un pulsante per visualizzare un modulo di iscrizione alla newsletter.
Come con altri tipi di media, puoi utilizzare semplici CSS per creare contenitori che fungano da segnaposto per qualsiasi contenuto dinamico che possa causare uno spostamento del layout.
Questo potrebbe essere consigliabile per gli elementi dinamici che appaiono vicino alla parte superiore della pagina.
Infine, se hai assolutamente bisogno di attivare automaticamente un elemento, considera di caricarlo dalla parte inferiore dello schermo. Ad esempio, il caricamento automatico di una barra di notifica nella parte superiore della finestra causerà grandi cambiamenti di layout spingendo verso il basso tutti gli altri contenuti.
Caricando invece la barra delle notifiche nella parte inferiore della finestra, puoi evitarlo.
Ciò può essere particolarmente rilevante per gli avvisi sul consenso dei cookie, motivo per cui vedrai molti siti caricare questi avvisi nella parte inferiore dello schermo.
Evita per sempre grandi variazioni di layout
Il caricamento lento e le pagine difettose possono creare un’esperienza utente negativa, lasciando i tuoi visitatori frustrati o confusi.
Grandi cambiamenti di layout possono essere particolarmente fastidiosi in quanto potrebbero causare errori da parte degli utenti o far perdere la posizione su una pagina.
Pertanto, dovrai implementare alcune buone pratiche nel processo di progettazione per prevenire questo problema.
Per ricapitolare, ecco quattro modi per evitare grandi cambiamenti di layout:
- Assegna dimensioni a tutte le immagini.
- Crea segnaposti per annunci e incorporamenti.
- Gestisci correttamente il caricamento dei caratteri.
- Ottimizza i contenuti dinamici.
Per conoscere altri modi per ottimizzare le prestazioni del tuo sito, potresti essere interessato anche alle nostre guida sulla cache di WordPress e su come minimizzare i Javascript.
