Correggere i salti di layout: le cause più frequenti
Un layout che salta è l'errore che i visitatori percepiscono di più e che gli sviluppatori vedono di meno, perché su un computer veloce con la cache piena non salta nulla. Sei cause coprono quasi tutti i casi.
In breve
- Sei cause coprono quasi tutti i casi: immagini senza dimensioni, caratteri caricati in ritardo, contenuti di terzi incorporati, avvisi mostrati dopo il caricamento, CSS servito tardi e contenuti inseriti in modo dinamico.
- Sul proprio computer il valore risulta con regolarità troppo buono: connessione rapida, cache piena, schermo di dimensioni diverse.
- La singola misura più efficace è dare a ogni immagine e a ogni elemento incorporato dimensioni fisse o un rapporto d'aspetto.
- Una barra di avviso che compare dopo il caricamento e spinge in basso il contenuto è la seconda causa più frequente, ed è la più facile da risolvere.
Le sei cause
1. Immagini senza indicazione delle dimensioni
Senza width e height il browser non sa quanto spazio riservare, e il testo scivola non appena l'immagine arriva.
Soluzione: impostare entrambi gli attributi e aggiungere nel CSS height: auto, così la scalatura resta.
2. Caratteri caricati in ritardo
Il testo compare prima nel carattere sostitutivo e salta al cambio, perché i due hanno larghezze diverse.
Soluzione: precaricare il carattere, font-display: swap, e allineare le metriche del sostitutivo a quelle del carattere finale.
3. Contenuti di terzi incorporati
Video, mappe, widget di recensioni arrivano senza un'altezza nota e spingono tutto in basso quando compaiono.
Soluzione: predisporre un segnaposto con rapporto d'aspetto fisso in cui il contenuto viene caricato.
4. Avvisi mostrati dopo
Un banner di consenso o una barra promozionale che compare in alto dopo il caricamento e spinge in basso tutta la pagina.
Soluzione: riservare lo spazio fin dall'inizio, oppure mostrarlo in sovrapposizione invece che a incastro.
5. CSS servito tardi
Se il foglio di stile diventa efficace solo dopo la prima resa, la pagina viene mostrata una volta senza stile e poi con lo stile.
Soluzione: servire presto le regole necessarie all'area visibile, per intero e non in parte.
6. Contenuti inseriti in modo dinamico
Un avviso, un elenco o un'area che JavaScript inserisce dopo il caricamento sopra il contenuto esistente.
Soluzione: inserirli sotto l'area visibile oppure riservare lo spazio.
Lo sapevi?
La causa cinque è la più insidiosa, perché in locale non si presenta quasi mai: su una connessione rapida il foglio di stile arriva prima della prima resa e non salta nulla. Su una connessione lenta arriva dopo, e tutta la pagina si costruisce due volte.
Servire in anticipo una parte del CSS non basta: se lì manca una regola che riguarda l'area visibile, salta proprio quell'elemento. O per intero per l'area visibile o per nulla: le mezze soluzioni qui sono peggio di nessuna.
Misurare in modo corretto
| Modo di misurare | Che cosa mostra | Insidia |
|---|---|---|
| Proprio computer, strumenti per sviluppatori | indicazioni grossolane | troppo rapido, cache piena |
| Test di laboratorio nello strumento di verifica | valore riproducibile | una condizione, non la realtà |
| Dati di campo dei visitatori reali | che cosa succede davvero | serve abbastanza traffico |
| Mobile con connessione rallentata | la prova singola più onesta | va impostata di proposito |
Un caso che resta impresso: una pagina aveva in locale un valore impeccabile e nello strumento di verifica uno pessimo. La causa era un foglio di stile servito in anticipo solo in parte: vi mancavano tre regole per aree dell'area visibile.
In locale non si notava mai, perché il file completo arrivava prima della prima resa. Con la connessione rallentata arrivava dopo, e tre aree saltavano. La lezione: con i salti di layout l'impressione locale non è una controprova, è solo un altro scenario, e di solito il meno realistico.
L'ordine nella risoluzione
- Verificare tutte le immagini.
widtheheightimpostati, nel CSSheight: auto. Di solito è metà del problema. - Incorniciare i contenuti di terzi. Segnaposto con rapporto d'aspetto fisso.
- Verificare gli avvisi mostrati. In sovrapposizione invece che a incastro.
- Verificare il caricamento dei caratteri. Precaricare, allineare il sostitutivo.
- Verificare la consegna del CSS. Per intero per l'area visibile.
- Rimisurare, con la connessione rallentata. E dopo ogni singolo passo, altrimenti non si sa che cosa abbia funzionato.
Aiutami a trovare e risolvere i salti di layout sulla nostra pagina. Dati: - Valore misurato per lo spostamento di layout: [valore, strumento, mobile o desktop] - Elementi che secondo la misurazione si spostano: [elenco, se noto] - Le immagini hanno gli attributi width/height? [sì / no / in parte] - Come viene servito il CSS? [file esterno / incorporato in anticipo / in parte in anticipo] - Contenuti di terzi incorporati: [video, mappe, recensioni, chat] - Dopo il caricamento compare qualcosa? [banner, avviso, barra promozionale] - Come vengono caricati i caratteri? [dato] Compiti: 1. Assegna ogni elemento che si sposta a una delle sei cause: immagini senza dimensioni, caratteri caricati in ritardo, contenuti di terzi incorporati, avvisi mostrati dopo, CSS servito tardi, contenuti inseriti in modo dinamico. 2. Indica per ogni causa la soluzione concreta con un esempio di codice. 3. Se il CSS viene servito in anticipo solo in parte: spiega perché può essere peggio che non farlo affatto, e che cosa verificare. 4. Dammi un ordine per effetto rapportato all'impegno. 5. Dimmi come dovrei misurare dopo ogni passo per sapere che cosa ha funzionato. Non inventare valori misurati.
Conclusione
Sei cause, e la prima — le immagini senza indicazione delle dimensioni — di solito ne fa metà. Si risolve in mezz'ora e funziona subito.
La parte più difficile è misurare: chi verifica in locale misura uno scenario che quasi nessun visitatore vive. Misurare con la connessione rallentata, dopo ogni singolo passo, altrimenti si risolvono tre cose e non si sa quale abbia funzionato.
Domande frequenti
Perché il contenuto salta durante il caricamento di una pagina?
Per lo più per una di sei cause: immagini senza indicazione delle dimensioni, caratteri caricati in ritardo con larghezze diverse, contenuti di terzi incorporati senza altezza nota, barre di avviso mostrate dopo, CSS che diventa efficace tardi, e contenuti inseriti da JavaScript sopra l'area visibile.
Qual è la singola misura più efficace?
Dare a ogni immagine width e height e aggiungere nel CSS height: auto. Il browser riserva così dall'inizio lo spazio giusto mantenendo la scalatura. Nella pratica questa misura fa spesso metà del problema.
Perché in locale il valore è migliore che nello strumento di verifica?
Perché sul proprio computer la connessione è rapida e la cache piena: fogli di stile, caratteri e immagini arrivano prima della prima resa e non salta nulla. In condizioni realistiche arrivano dopo, e per questo va misurato con la connessione rallentata.
Un CSS servito in anticipo solo in parte può fare danno?
Sì. Se nella parte servita in anticipo manca una regola che riguarda un'area visibile, quell'elemento salta non appena arriva il foglio di stile completo. O per intero per l'area visibile o per nulla: le mezze soluzioni qui sono peggio di nessuna.
Come si risolvono i banner di consenso che fanno saltare la pagina?
Mostrandoli in sovrapposizione invece che a incastro, cioè sopra il contenuto senza spingerlo in basso. In alternativa si può riservare lo spazio fin dall'inizio. Questa causa è tra le più frequenti e al tempo stesso la più facile da risolvere.
Un marketing che si configura da solo
La beta di Studio Engine è aperta. Prenota il tuo posto e contribuisci fin dall’inizio.
Partecipa alla beta →