Différer l'affichage des contenus lourds

Les pages Web au contenu volumineux, comme celles qui utilisent le défilement infini, les tableaux de bord complexes ou les articles denses, peuvent souffrir d'un rendu initial lent et d'interactions poussives. Les technologies Web modernes vous permettent de différer la charge de travail de rendu pour le contenu qui n'est pas immédiatement visible, ce qui améliore considérablement les performances sans nuire à l'accessibilité ni aux attentes des utilisateurs.

Pour optimiser l'affichage, vous pouvez utiliser la propriété CSS content-visibility et l'attribut HTML hidden="until-found". Bien que les deux améliorent les performances, ils répondent à des cas d'utilisation distincts.

Quand utiliser l'un ou l'autre ?

Comment implémenter content-visibility: auto

Choisir du contenu hors écran

OBLIGATOIRE : Vous DEVEZ identifier avec précision les éléments qui reçoivent content-visibility: auto.

• À FAIRE : ciblez des blocs de mise en page volumineux et autonomes qui se trouvent strictement en dessous de la ligne de flottaison initiale (par exemple, des fiches dans un flux infini, des commentaires à la fin ou des sections de mise en page en bas de page).
• N'appliquez PAS cette propriété aux éléments de la fenêtre d'affichage initiale au-dessus de la ligne de flottaison. Cela force le navigateur à évaluer les limites de visibilité avant d'afficher la page, ce qui, paradoxalement, retarde le chargement de page essentiel.
• À FAIRE : ciblez les éléments avec des structures DOM internes profondes ou complexes pour maximiser les économies sur les coûts de rendu.

Procédure d'implémentation

1. OBLIGATOIRE : identifiez les sections lourdes qui sont confirmées comme étant hors écran lors du chargement initial.
2. OBLIGATOIRE : appliquez content-visibility: auto à chacun de ces éléments hors écran.
3. OBLIGATOIRE : indiquez une taille de structure de mise en page estimée à l'aide de contain-intrinsic-size sur chaque élément.

Comment utiliser contain-intrinsic-size

OBLIGATOIRE : vous DEVEZ associer content-visibility: auto à contain-intrinsic-size. Sinon, le navigateur est obligé de réduire l'élément à une hauteur de 0 px lorsqu'il est hors de l'écran, ce qui entraîne un décalage important de la mise en page et un saut de la barre de défilement lorsque l'utilisateur fait défiler la page.

La propriété CSS abrégée contain-intrinsic-size sert de dimension d'espace réservé. Le mot clé auto permet au navigateur de "mémoriser" la taille exacte une fois l'élément affiché, en utilisant cette taille calculée sur l'espace réservé si l'élément disparaît à nouveau de l'écran.

Exemple de code

/* 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; 
}

Comment implémenter content-visibility: hidden

1. Identifier les sections lourdes : localisez les blocs de mise en page initialement masqués (par exemple, les lignes supplémentaires dans un grand tableau de données).
2. Appliquer du code CSS : ajoutez content-visibility: hidden à l'élément.
3. Afficher l'élément : lorsque l'élément doit être affiché, remplacez la propriété content-visibility par visible ou auto.

Exemple de code

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

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

Étant donné que content-visibility: hidden exclut l'élément et ses enfants de l'arborescence d'accessibilité et de la recherche sur la page, NE L'UTILISEZ PAS si le contenu doit rester détectable lorsqu'il est masqué. Si vous souhaitez que le contenu masqué reste accessible via la fonctionnalité native "Rechercher sur la page", utilisez hidden="until-found" comme décrit dans Rechercher du contenu masqué.

Bonnes pratiques

• À FAIRE : Utilisez contain-intrinsic-size avec content-visibility: auto. Si vous ne le faites pas, la hauteur sera recalculée lors du défilement, ce qui entraînera des sauts de mise en page ou des problèmes visuels.
• N'appliquez PAS content-visibility: auto aux éléments situés dans la fenêtre d'affichage initiale, car cela retarde l'affichage des pages critiques.
• Validation OBLIGATOIRE de l'accessibilité : lorsque vous appliquez content-visibility: auto, vous DEVEZ valider l'accessibilité séquentielle au clavier. Dans certaines configurations de technologie d'assistance, les nœuds hors écran utilisant content-visibility: auto peuvent être exclus de l'arborescence d'accessibilité ou des itinéraires de navigation séquentiels jusqu'à ce que le curseur soit déplacé de force à l'intérieur. Testez la navigation linéaire au-delà des limites de l'écran en utilisant uniquement le clavier.

Stratégies de remplacement

content-visibility création de remplacement

Lorsque content-visibility n'est pas pris en charge, il est ignoré par le navigateur. Dans la plupart des cas, content-visibility: auto n'aura pas besoin d'un remplacement, même si, sans lui, les gains de performances seront perdus. Un navigateur non compatible laissera les éléments content-visibility: hidden complètement visibles. Utilisez la détection de fonctionnalités pour implémenter une solution de remplacement.

/* 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;
  }
}