Weergave van zware content uitstellen

Webpagina's met uitgebreide content, zoals oneindig scrollen, complexe dashboards of dichte artikelen, kunnen last hebben van een trage eerste weergave en trage interacties. Met moderne webtechnologieën kun je de weergave van content die niet onmiddellijk zichtbaar is, uitstellen. Zo verbeter je de prestaties aanzienlijk zonder de toegankelijkheid of de verwachtingen van gebruikers te schaden.

Als u de weergave wilt optimaliseren, kunt u de CSS-eigenschap content-visibility en het HTML-kenmerk hidden="until-found" gebruiken. Beide tools verbeteren de prestaties, maar ze hebben verschillende toepassingen.

Wanneer u welke gebruikt

content-visibility: auto implementeren

Content buiten het scherm kiezen

VERPLICHT: Je MOET zorgvuldig bepalen welke elementen content-visibility: auto krijgen.

• WEL grote, op zichzelf staande opmaakblokken targeten die strikt onder de eerste vouw staan (bijvoorbeeld kaartitems in een oneindige feed, reacties aan het einde of opmaakgedeelten onderaan).
• Pas deze property NIET toe op elementen in de eerste viewport boven de vouw. Hierdoor wordt de browser gedwongen om de zichtbaarheidsgrenzen te evalueren voordat de pagina wordt gerenderd, wat paradoxaal genoeg de laadprestaties van de pagina vertraagt.
• DO target elements with deep or complex internal DOM structures to maximize rendering cost savings.

Stapsgewijze implementatie

1. VERPLICHT: Identificeer zware gedeelten waarvan is bevestigd dat ze buiten het scherm vallen bij de eerste keer laden.
2. VERPLICHT: Pas content-visibility: auto toe op elk van deze elementen buiten het scherm.
3. VERPLICHT: Geef een geschatte grootte van de vormgevingsstructuur op met contain-intrinsic-size voor elk element.

contain-intrinsic-size gebruiken

VERPLICHT: Je MOET content-visibility: auto koppelen aan contain-intrinsic-size. Als u dit niet doet, dwingt u de browser om het element samen te vouwen tot een hoogte van 0 px als het buiten het scherm valt. Dit leidt tot ernstige indelingsverschuivingen en scrollbalksprongen als de gebruiker scrollt.

De CSS-shorthand-property contain-intrinsic-size fungeert als een placeholderdimensie. Als je het zoekwoord auto gebruikt, kan de browser de exacte grootte 'onthouden' nadat het element is gerenderd. De berekende grootte wordt dan gebruikt in plaats van de tijdelijke aanduiding als het element weer buiten het scherm valt.

Voorbeeldcode

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

content-visibility: hidden implementeren

1. Zware gedeelten identificeren: Zoek vormgevingsblokken die in eerste instantie verborgen zijn (bijvoorbeeld extra rijen in een grote gegevenstabel).
2. CSS toepassen: Voeg content-visibility: hidden toe aan het element.
3. Het element onthullen: Als het element moet worden onthuld, wijzigt u de eigenschap content-visibility in visible of auto.

Voorbeeldcode

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

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

Omdat content-visibility: hidden het element en de onderliggende elementen uitsluit van de toegankelijkheidsstructuur en de zoekfunctie op de pagina, moet je dit NIET gebruiken als de content vindbaar moet blijven terwijl deze verborgen is. Als je wilt dat verborgen content doorzoekbaar blijft via de systeemeigen functie Zoeken op pagina, gebruik je hidden="until-found" zoals beschreven in Verborgen content zoeken.

Praktische tips

• WEL DOEN: Gebruik contain-intrinsic-size met content-visibility: auto. Als u dit niet doet, wordt de hoogte opnieuw berekend tijdens het scrollen, waardoor de indeling van het weergavegebied verspringt of visuele fouten optreden.
• Pas content-visibility: auto NIET toe op elementen in de viewport boven de vouw, omdat dit de weergave van essentiële pagina's vertraagt.
• VERPLICHTE toegankelijkheidsverificatie: Als je content-visibility: auto toepast, MOET je de opeenvolgende bereikbaarheid van het toetsenbord verifiëren. In bepaalde configuraties van ondersteunende technologie kunnen offscreen-nodes die content-visibility: auto gebruiken, worden uitgesloten van de toegankelijkheidsstructuur of opeenvolgende navigatieroutes totdat de focus geforceerd naar binnen wordt verplaatst. Test lineaire navigatie over grenzen buiten het scherm met alleen het toetsenbord.

Reservestrategieën

content-visibility-reserve

Als content-visibility niet wordt ondersteund, wordt dit genegeerd door de browser. In de meeste gevallen heeft content-visibility: auto geen fallback nodig, maar zonder fallback gaan de prestatieverbeteringen verloren. In een niet-ondersteunde browser blijven content-visibility: hidden-elementen volledig zichtbaar. Gebruik functiedetectie om een fallback te implementeren.

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