Perché la pagina salta durante il caricamento

Che cos’è lo spostamento del layout

Lo spostamento del layout è contenuto che si muove dopo essere stato disegnato. Il browser dipinge la pagina con le informazioni che ha, poi arriva un’immagine di una dimensione che non conosceva, e tutto ciò che sta sotto scende per farle posto. Oppure si carica un font e ogni riga si ricompone. Oppure una barra degli avvisi si inserisce in cima e spinge in basso la pagina di cinque centimetri.

Si misura con il nome di Cumulative Layout Shift, la somma di ogni movimento inatteso durante il caricamento, e un punteggio sotto 0,1 è considerato buono. I visitatori non conoscono il numero. Sanno di aver toccato un link e di aver colpito quello sotto.

Causa uno: immagini senza dimensioni

È di gran lunga la causa più comune. Un tag img con un src e nient’altro non dice nulla al browser sulla forma dell’immagine, quindi riserva un’altezza pari a zero finché il file non è scaricato. La correzione sta in due attributi: width e height.

Non costringono l’immagine a quella dimensione sullo schermo. Con il consueto CSS max-width 100% e height auto, dicono al browser solo le proporzioni, e il browser riserva il riquadro giusto prima che arrivi il primo byte.

WordPress conosce già questi numeri per ogni file della libreria media. Apra un’immagine qualsiasi in Media e il pannello dei dettagli ne mostra le dimensioni, per esempio 1920 per 1080 pixel. Le immagini inserite dall’editor ricevono automaticamente width e height nel tag.

Il problema nasce nel tema: le immagini principali impostate con un page builder, un campo del personalizzatore o un modello scritto a mano spesso producono solo l’URL. In un modello, chieda l’immagine a WordPress invece di costruire il tag a mano, e gli attributi arrivano insieme:

<?php
// Right: WordPress writes src, srcset, sizes, width, height, and alt for you.
echo wp_get_attachment_image( $hero_id, 'full', false, array(
  'class'         => 'hero-img',
  'fetchpriority' => 'high',
  'loading'       => 'eager',
) );

// If you must build the tag yourself, take the real dimensions from the library:
$img = wp_get_attachment_image_src( $hero_id, 'full' ); // [ url, width, height ]
printf(
  '<img src="%s" width="%d" height="%d" alt="%s" />',
  esc_url( $img[0] ), $img[1], $img[2], esc_attr( get_post_meta( $hero_id, '_wp_attachment_image_alt', true ) )
);

Poi l’unica riga di CSS che fa comportare bene gli attributi su tutte le dimensioni di schermo:

Il CSS che serve

Con width e height presenti, questa regola lascia che l’immagine si adatti al suo contenitore mentre il browser mantiene il riquadro riservato nella forma giusta. La maggior parte dei temi ce l’ha già; verifichi che nulla sostituisca height con un valore fisso.

img {
  max-width: 100%;
  height: auto;
}

/* A hero set as a CSS background can't carry dimensions. Give its box a shape instead: */
.hero {
  aspect-ratio: 16 / 9;
  background-size: cover;
}

Causa due: contenuti incorporati senza spazio riservato

Un iframe di YouTube o di C-SPAN arriva con l’altezza indicata dal codice di incorporamento, spesso 315 pixel per 560 di larghezza, poi un tema responsive allarga la larghezza senza regolare l’altezza, oppure lo script del lettore lo ridimensiona dopo il caricamento. In entrambi i casi, la pagina si sposta.

Racchiuda ogni video incorporato in un riquadro con la forma dichiarata, e lasci che l’iframe lo riempia. Lo spazio è riservato prima che il lettore si carichi, e si adatta alla colonna.

.embed {
  aspect-ratio: 16 / 9;   /* 4 / 3 for older video, or match the embed's own ratio */
  width: 100%;
}
.embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

Causa tre: font che si sostituiscono

Un font web che arriva dopo la visualizzazione della pagina ricompone ogni riga scritta con esso, e se il font di riserva ha una larghezza diversa, interi paragrafi cambiano altezza. Precaricare il file del font lo fa arrivare prima della prima visualizzazione sulla maggior parte delle connessioni. Il descrittore size-adjust permette di regolare il font di riserva perché la sostituzione, quando avviene, non cambi quasi nulla.

<!-- in the head: fetch the font before the page needs it -->
<link rel="preload" href="/fonts/body.woff2" as="font" type="font/woff2" crossorigin />

/* in the CSS: a fallback shaped to match, so the swap barely moves anything */
@font-face {
  font-family: "Body Fallback";
  src: local("Arial");
  size-adjust: 104%;
  ascent-override: 92%;
}
body { font-family: "Body", "Body Fallback", sans-serif; }

Causa quattro: elementi inseriti in cima dopo la visualizzazione

I banner dei cookie, le barre degli avvisi e i banner di allerta iniettati con JavaScript sono l’ultima causa comune, e la più facile da vedere: tutta la pagina scende nell’istante in cui compare la barra. Va bene l’una o l’altra di queste due correzioni. Generi la barra nell’HTML della pagina perché il suo spazio esista fin dalla prima visualizzazione, oppure ne faccia una sovrapposizione che si appoggia sul contenuto invece di spingerlo. Se inserisce un blocco sopra il contenuto dopo che è stato mostrato, la pagina si sposterà di sicuro.

Vederlo con i propri occhi

In Chrome, apra il pannello Performance e registri un caricamento di pagina; ogni spostamento è segnato e l’elemento che si è mosso è indicato per nome. Lighthouse riporta il totale con il nome di Cumulative Layout Shift. L’audit gratuito di questo sito esegue la stessa misurazione sulla sua home page e le dice in linguaggio chiaro se la pagina si sposta.

Se è un cliente, correggere l’immagine principale di un modello o il riquadro di un contenuto incorporato è una piccola attività inclusa nel canone. Un tema che costruisce ogni tag immagine a mano è un progetto, quotato a prezzo fisso. Apra una richiesta e cominceremo trovando l’elemento che si sposta.