Rimanda il rendering dei contenuti pesanti

Le pagine web con contenuti estesi, come scorrimenti continui, dashboard complesse o articoli densi, possono risentire di un rendering iniziale lento e di interazioni lente. Le moderne tecnologie web ti consentono di posticipare il carico di lavoro di rendering per i contenuti che non sono immediatamente visibili, migliorando notevolmente le prestazioni senza compromettere l'accessibilità o le aspettative degli utenti.

Per ottimizzare il rendering, puoi utilizzare la proprietà CSS content-visibility e l'attributo HTML hidden="until-found". Sebbene entrambi migliorino le prestazioni, servono casi d'uso distinti.

Quando utilizzare una soluzione o l'altra

Come implementare content-visibility: auto

Scelta di contenuti fuori schermo

OBBLIGATORIO: DEVI identificare con attenzione gli elementi che ricevono content-visibility: auto.

• SÌ: scegli come target blocchi di layout di grandi dimensioni e autonomi che si trovano rigorosamente sotto la piega iniziale (ad es. elementi di schede in un feed infinito, commenti finali o sezioni di layout con molti elementi in basso).
• NON applicare questa proprietà agli elementi all'interno dell'area visibile iniziale above the fold. In questo modo, il browser è costretto a valutare i limiti di visibilità prima del rendering, il che, paradossalmente, ritarda le prestazioni critiche di caricamento pagina.
• SÌ: scegli come target elementi con strutture DOM interne profonde o complesse per massimizzare i risparmi sui costi di rendering.

Procedura di implementazione

1. OBBLIGATORIO: identifica le sezioni pesanti che sono confermate come fuori schermo al caricamento iniziale.
2. OBBLIGATORIO: applica content-visibility: auto a ciascuno di questi elementi fuori schermo.
3. OBBLIGATORIO: fornisci una dimensione stimata della struttura del layout utilizzando contain-intrinsic-size su ogni elemento.

Come usare contain-intrinsic-size

OBBLIGATORIO: DEVI accoppiare content-visibility: auto con contain-intrinsic-size. In caso contrario, il browser è costretto a comprimere l'elemento a un'altezza di 0 px quando non è visibile sullo schermo, causando gravi variazioni del layout e salti della barra di scorrimento durante lo scorrimento da parte dell'utente.

La proprietà CSS abbreviata contain-intrinsic-size funge da dimensione segnaposto. L'utilizzo della parola chiave auto consente al browser di "ricordare" le dimensioni esatte una volta che l'elemento viene finalmente visualizzato, utilizzando le dimensioni calcolate rispetto al segnaposto se l'elemento esce di nuovo dallo schermo.

Esempio di codice

/* DO ONLY apply this class to items OUTSIDE the initial layout viewport */
.heavy-section-deferred {
  /* MANDATORY: Skips rendering calculations when off-screen */
  content-visibility: auto;
  
  /* Mandatory: Provide an estimated size to prevent layouts shifts.
    - 'auto' is optional and enables the browser to remember the actual size
      once rendered. It must be paired with a <length> value to be used for
      the first render.
    - 'none' tells the browser not to apply any intrinsic width to this element.
      It can be used for either the height or the width value.
    - '150px' is the estimated height of this element. This can be any valid
      CSS <length> value.
   */
  contain-intrinsic-size: auto none auto 150px; 
}

Come implementare content-visibility: hidden

1. Identifica le sezioni pesanti: individua i blocchi di layout inizialmente nascosti (ad es. righe aggiuntive in una tabella di dati di grandi dimensioni).
2. Applica CSS: aggiungi content-visibility: hidden all'elemento.
3. Mostra l'elemento: quando l'elemento deve essere mostrato, modifica la proprietà content-visibility in visible o auto.

Esempio di codice

.cached-view {
  /* Hides content but caches rendering state */
  content-visibility: hidden;
}

.cached-view.is-active {
  content-visibility: visible;
}

Poiché content-visibility: hidden esclude l'elemento e i relativi elementi secondari dall'albero di accessibilità e dalla ricerca in-page, NON utilizzarlo se i contenuti devono rimanere rilevabili anche se nascosti. Se hai bisogno che i contenuti nascosti rimangano ricercabili tramite la funzionalità nativa Trova nella pagina, utilizza hidden="until-found" come descritto in Contenuti nascosti della Ricerca.

Best practice

• USA contain-intrinsic-size con content-visibility: auto. In caso contrario, l'altezza viene ricalcolata durante lo scorrimento, causando salti nel layout dell'area visibile o problemi visivi.
• NON applicare content-visibility: auto agli elementi all'interno dell'area visibile iniziale, in quanto ciò ritarda il rendering delle pagine critiche.
• Verifica dell'accessibilità OBBLIGATORIA: quando applichi content-visibility: auto, DEVI verificare la raggiungibilità sequenziale della tastiera. In alcune configurazioni di tecnologie per la disabilità, i nodi fuori schermo che utilizzano content-visibility: auto potrebbero essere esclusi dall'albero di accessibilità o dai percorsi di navigazione sequenziali finché lo stato attivo non viene spostato forzatamente al loro interno. Testa la navigazione lineare oltre i limiti fuori schermo utilizzando solo la tastiera.

Strategie di riserva

content-visibility di riserva

Se content-visibility non è supportato, verrà ignorato dal browser. Nella maggior parte dei casi, content-visibility: auto non avrà bisogno di un comportamento di riserva, anche se senza di questo i miglioramenti del rendimento andranno persi. Un browser non supportato lascerà gli elementi content-visibility: hidden completamente visibili. Utilizza il rilevamento delle funzionalità per implementare un comportamento di riserva.

/* Default for everyone */
.inactive {
  display: none;
}

/* Modern Browsers only */
@supports (content-visibility: hidden) {
 .inactive {
    display: block; /* Turn the layout box back on */
    content-visibility: hidden;
  }
}