Speculatieregels kunnen worden gebruikt om navigaties van volgende pagina's vooraf op te halen en te renderen, zoals beschreven in de vorige post . Dit kan zorgen voor veel snellere – of zelfs directe – laadtijden van pagina's, wat de Core Web Vitals voor deze extra paginanavigaties aanzienlijk verbetert.
Het debuggen van speculatieregels kan lastig zijn. Dit geldt met name voor vooraf gerenderde pagina's, omdat deze pagina's worden gerenderd in een aparte renderer – een soort verborgen tabblad op de achtergrond dat het huidige tabblad vervangt wanneer het wordt geactiveerd. Daarom kunnen de gebruikelijke DevTools-opties niet altijd worden gebruikt om problemen te debuggen.
Het Chrome-team heeft hard gewerkt aan het verbeteren van de ondersteuning van DevTools voor het debuggen van speculatieregels. In dit bericht ziet u alle verschillende manieren waarop u deze tools kunt gebruiken om de speculatieregels van een pagina te begrijpen, waarom ze mogelijk niet werken en wanneer ontwikkelaars de meer vertrouwde DevTools-opties kunnen gebruiken – en wanneer niet.
Uitleg van "pre-" termen
Er zijn veel "pre-" termen die verwarrend zijn, dus we beginnen met een uitleg hiervan:
- Prefetch : het vooraf ophalen van een resource of document om toekomstige prestaties te verbeteren. Dit bericht behandelt het prefetchen van documenten met behulp van de Speculation Rules API, in plaats van de vergelijkbare, maar oudere
<link rel="prefetch">optie die vaak wordt gebruikt voor het prefetchen van subresources. - Prerender : dit gaat een stap verder dan prefetching en rendert de hele pagina alsof de gebruiker ernaartoe is genavigeerd, maar bewaart deze in een verborgen renderproces op de achtergrond, klaar voor gebruik als de gebruiker er daadwerkelijk naartoe navigeert. Nogmaals, dit document heeft betrekking op de nieuwere versie van de Speculation Rules API, in plaats van de oudere
<link rel="prerender">optie (die geen volledige prerender meer uitvoert ). - Speculatieve navigatie : de verzamelnaam voor de nieuwe prefetch- en prerenderopties die worden geactiveerd door speculatieregels.
- Preload : een overbelaste term die kan verwijzen naar een aantal technologieën en processen, waaronder
<link rel="preload">, de preloadscanner en preloads voor service worker-navigatie . Deze items worden hier niet behandeld, maar de term is opgenomen om deze duidelijk te onderscheiden van de term "speculatieve navigatie".
Speculatieregels voor prefetch
Speculatieregels kunnen worden gebruikt om het document van de volgende navigatie vooraf op te halen. Wanneer u bijvoorbeeld de volgende JSON in een pagina invoegt, worden next.html en next2.html vooraf opgehaald:
<script type="speculationrules">
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "next2.html"],
"tag": "rule-set-tag-1"
}
]
}
</script>
Het gebruik van speculatieregels voor navigatieprefetching heeft enkele voordelen ten opzichte van de oudere <link rel="prefetch"> syntaxis, zoals een expressievere API en het opslaan van de resultaten in de geheugencache in plaats van in de HTTP-schijfcache.
Debug prefetch speculatieregels
Prefetches die door speculatieregels worden geactiveerd, zijn op dezelfde manier als andere fetches zichtbaar in het paneel Netwerk :