De laadprestaties van de volgende pagina verbeteren

Webfuncties: Speculatieregels

Een van de effectiefste manieren om de laadprestaties van pagina's te verbeteren voor gebruikers die op een site navigeren, is het laden van de volgende pagina die ze gaan bezoeken te starten voordat ze deze bezoeken. Dit kan met een techniek die speculatief laden wordt genoemd en die de Speculation Rules API gebruikt.

Hoe het werkt

Speculatief laden werkt door op JSON gebaseerde speculatieregels te gebruiken om de browser te informeren over links die kunnen worden voorgehaald of vooraf gerenderd. Zo worden de prestaties van het laden van de pagina verbeterd als de gebruiker erop klikt.

De regels kunnen een vastgelegde lijst met URL's zijn, een urls-sleutel (een lijstregel genoemd) of een where-sleutel met een set href- en CSS-kiezers die worden gebruikt om links op de pagina te vinden (een document-regel genoemd).

Regels kunnen ook een optionele property eagerness bevatten die aangeeft wanneer de pagina vooraf moet worden opgehaald of gerenderd. De property eagerness kan worden ingesteld op immediate, eager, moderate of conservative. immediate speculeert zo snel mogelijk, terwijl de andere wachten op gebruikerssignalen, zoals een korte tijd de muisaanwijzer op een element plaatsen, een langere tijd de muisaanwijzer op een element plaatsen of op de pagina klikken.

Regels kunnen worden gecombineerd met verschillende instellingen voor gretigheid om gretig te prefetchen en daarna te prerenderen als de gebruiker meer interactie heeft.

Wanneer gebruiken

Speculatief laden is vooral handig voor statische pagina's, waarvan de content waarschijnlijk niet vaak verandert en waarvan de pagina's goedkoper te produceren zijn, vooral als ze in de cache aan de rand worden opgeslagen. Je kunt deze ook gebruiken voor dynamische pagina's, maar wees voorzichtig met de mogelijkheid van verouderde content.

Speculatief laden wordt meestal gebruikt voor links met dezelfde oorsprong, hoewel meer geavanceerde opties cross-origin speculatie mogelijk maken. In deze gids richten we ons op de vaker voorkomende use case met dezelfde oorsprong.

Meer enthousiaste speculatieve laadprocessen zijn een goede keuze voor pagina's die waarschijnlijk als volgende worden bezocht, zoals een artikel met een kop of de volgende pagina in een stapsgewijs proces, zoals een cursus.

Minder gretig speculatief laden is een goede keuze als het minder duidelijk is wat de gebruiker daarna gaat doen, of als er veel links op de pagina staan die allemaal even waarschijnlijk worden bezocht. Door te wachten op meer signalen, zoals de muisaanwijzer op de pagina plaatsen of op de pagina klikken, kun je een voorsprong krijgen op de volgende pagina en de gebruikerservaring verbeteren, zelfs als deze niet volledig vooraf is opgehaald of gerenderd.

Prefetch is een conservatievere keuze dan prerender. Er worden minder resources gebruikt (zowel aan de client- als aan de serverzijde), maar de gebruiker heeft er minder voordeel van. Dit is een goede keuze voor de eerste implementatie. Later kun je uitbreiden naar vooraf renderen als de ontwikkelaar hier expliciet om vraagt.

Instructies voor gebruik

Speculatieregels hebben een json-indeling en kunnen worden opgenomen in een <script type="speculationrules">-tag. De regels kunnen worden opgenomen in de <head> of <body> van het document of dynamisch worden toegevoegd met JavaScript.

U kunt ook een tag gebruiken, op algemeen niveau of per regel. Als deze tag is ingesteld, wordt deze opgenomen in de Sec-Speculation-Tags-header. Zo kun je aan de serverzijde vaststellen welke speculaties zijn gemaakt.

Voorbeeld van een eenvoudige URL-lijstregel om vooraf gedefinieerde URL's vooraf op te halen

<script type="speculationrules">
  {
    "tag": "product-page-speculations",
    "prefetch": [
      {
        "urls": ["/product/1", "/product/2", "/product/3"]
      }
    ]
  }
</script>

Voorbeeld van een eenvoudige documentregel om alle links met dezelfde oorsprong op een pagina vooraf te renderen

<script type="speculationrules">
  {
    "tag": "all-links-speculations",
    "prerender": [{
      "where": { "href_matches": "/*" }
    }]
  }
</script>

<script type="speculationrules">
  {
    "tag": "speculations-with-exclusions",
    "prerender": [{
      "where": {
        "and": [
          { "href_matches": "/*" },
          { "not": {"href_matches": "/wp-admin"}},
          { "not": {"href_matches": "/*\\?*(^|&)add-to-cart=*"}},
          { "not": {"selector_matches": ".do-not-prerender"}},
          { "not": {"selector_matches": "[rel~=nofollow]"}}
        ]
      }
    }]
  }
</script>

Voorbeeld van een gemengde regelset

In dit voorbeeld zie je een regelset die alle links gretig ophaalt en daarna nog verder gaat door diezelfde links vooraf te renderen als er meer signalen met moderate gretigheid binnenkomen.

<script type="speculationrules">
  {
    "prefetch": [{
      "tag": "prefetch-speculations",
      "where": { "href_matches": "/*" },
      "eagerness": "eager"
    }],
    "prerender": [{
      "tag": "prerender-speculations",
      "where": { "href_matches": "/*" },
      "eagerness": "moderate"
    }]
  }
</script>

Praktische tips

  • Gebruik WEL speculatieregels om pagina's vooraf op te halen en te renderen die de gebruiker waarschijnlijk als volgende zal bezoeken.
  • WEL speculatieregels gebruiken voor statische sites, waar de content waarschijnlijk niet vaak verandert en waar pagina's goedkoper te produceren zijn, vooral als ze aan de rand worden gecachet.
  • Wees WEL voorzichtiger als je speculatieregels gebruikt voor dynamische pagina's, waar de content vaker verandert, verouderd kan raken en waar pagina's duurder zijn om te produceren.
  • WEL: Geef de voorkeur aan documentregels boven lijstregels, omdat deze flexibeler zijn, dezelfde regel op meerdere pagina's kunnen worden gedeeld en kunnen worden gebruikt om pagina's die niet van tevoren bekend zijn, vooraf op te halen en vooraf te renderen.
  • WEL: Overweeg de afwegingen tussen prefetchen en pre-rendering en kies de juiste optie voor je use case. Vooraf renderen is duurder dan vooraf ophalen en kan meer onbedoelde bijwerkingen veroorzaken in complexe apps die een dynamische status tonen, maar biedt een betere gebruikerservaring. Vraag de ontwikkelaar naar de voorkeur als je het niet zeker weet.
  • WEL de afwegingen tussen de verschillende eagerness-niveaus overwegen en het juiste niveau kiezen voor je use case. Meer enthousiaste speculatie biedt een betere gebruikerservaring, maar gebruikt meer bronnen en kan meer onbedoelde bijwerkingen veroorzaken in complexe apps die een dynamische status tonen. Vraag de ontwikkelaar naar de voorkeur als je het niet zeker weet.
  • Gebruik speculatieregels NIET te veel, bijvoorbeeld om elke link op de pagina te speculeren. Browsers hebben limieten (2 speculaties voor niet-enthousiaste speculaties). immediate mag alleen worden gebruikt voor een zeer klein aantal links.
  • Speculeer NIET over URL's die waarschijnlijk statuswijzigingen triggeren, zoals /logout of /add-to-cart, en sluit ze expliciet uit van je speculatieregels als ze waarschijnlijk worden opgenomen in documentregels.
  • Gebruik GEEN speculatieregels voor apps met één pagina (SPA's). Speculatieregels zijn ontworpen voor toepassingen met meerdere pagina's (MPA's) waarbij de browser bij elke navigatie naar een nieuw document navigeert. In SPA's navigeert de browser niet naar een nieuw document bij elke navigatie, dus speculatieregels werken niet zoals verwacht.

Browserondersteuning en fallback-strategieën

Speculatief laden is wel een progressive enhancement. Het is volkomen veilig om te gebruiken als verbetering en wordt sterk aanbevolen vanwege de potentiële prestatievoordelen. Als een browser geen speculatieregels ondersteunt, worden ze gewoon genegeerd.