Speculatieregels kunnen worden gebruikt om de navigatie naar de volgende pagina vooraf op te halen en te renderen, zoals beschreven in de vorige post. Hierdoor kunnen pagina's veel sneller of zelfs onmiddellijk worden geladen, waardoor de Core Web Vitals voor deze aanvullende paginanavigaties aanzienlijk worden verbeterd.
Het kan lastig zijn om speculatieregels te debuggen. Dit geldt met name voor vooraf gerenderde pagina's, omdat deze pagina's worden gerenderd in een afzonderlijke renderer. Dit is een soort verborgen achtergrondtabblad dat het huidige tabblad vervangt wanneer het wordt geactiveerd. Daarom kunnen de gebruikelijke DevTools-opties niet altijd worden gebruikt om problemen op te lossen.
Het Chrome-team heeft hard gewerkt om de DevTools-ondersteuning voor foutopsporing in speculatieregels te verbeteren. In deze post vind je alle verschillende manieren om deze tools te gebruiken om de speculatieregels van een pagina te begrijpen, waarom ze misschien niet werken en wanneer ontwikkelaars de bekendere DevTools-opties kunnen gebruiken en wanneer niet.
Uitleg van termen met 'pre-'
Er zijn veel termen met 'pre' die verwarrend zijn, dus we beginnen met een uitleg van deze termen:
- Prefetch: een bron of document van tevoren ophalen om toekomstige prestaties te verbeteren. In deze post wordt het vooraf ophalen van documenten behandeld met de Speculation Rules API, in plaats van de vergelijkbare, maar oudere optie
<link rel="prefetch">die vaak wordt gebruikt om subbronnen vooraf op te halen. - Vooraf renderen: Dit gaat een stap verder dan vooraf ophalen en rendert de hele pagina alsof de gebruiker ernaartoe is genavigeerd, maar houdt deze in een verborgen renderingproces op de achtergrond, klaar voor gebruik als de gebruiker er daadwerkelijk naartoe navigeert. Dit document gaat over de nieuwere Speculation Rules API-versie hiervan, niet over de oudere optie
<link rel="prerender">(die geen volledige prerendering meer uitvoert). - Speculatieve navigaties: de verzamelnaam voor de nieuwe opties voor prefetchen en prerenderen die worden geactiveerd door speculatieregels.
- Vooraf laden: een term die voor meerdere technologieën en processen wordt gebruikt, waaronder
<link rel="preload">, de preload-scanner en navigatie vooraf laden van serviceworkers. Deze items worden hier niet behandeld, maar de term is opgenomen om deze duidelijk te onderscheiden van de term 'speculatieve navigaties'.
Speculatieregels voor prefetch
Je kunt speculatieregels gebruiken om het document van de volgende navigatie vooraf op te halen. Als je bijvoorbeeld de volgende JSON invoegt op een pagina, 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 prefetch van navigatie heeft een aantal voordelen ten opzichte van de oudere <link rel="prefetch">-syntaxis, zoals een expressievere API en de resultaten die worden opgeslagen in het geheugencache in plaats van de HTTP-schijfcache.
prefetch speculatieregels debuggen
Prefetches die worden geactiveerd door speculatieregels, zijn op dezelfde manier zichtbaar in het deelvenster Netwerk als andere fetches:
De 2 rood gemarkeerde verzoeken zijn de vooraf opgehaalde bronnen, zoals je kunt zien in de kolom Type. Deze worden opgehaald met de prioriteit Lowest, omdat ze bedoeld zijn voor toekomstige navigaties en Chrome prioriteit geeft aan de bronnen van de huidige pagina.
Als u op een van de rijen klikt, wordt ook de HTTP-header Sec-Purpose: prefetch getoond. Zo kunnen deze verzoeken aan de serverzijde worden geïdentificeerd:
Fouten in prefetch opsporen met de tabbladen voor speculatief laden
Er is een nieuw gedeelte Speculatieve loads toegevoegd aan het deelvenster Applicatie van Chrome DevTools, onder het gedeelte Achtergrondservices, om te helpen bij het debuggen van speculatieregels:
In dit gedeelte zijn 3 tabbladen beschikbaar:
- Speculatieve laadacties, waarin de vooraf gerenderde status van de huidige pagina wordt vermeld.
- Regels: Hier staan alle regelsets die op de huidige pagina zijn gevonden, aangeduid als URL's of regeltags, indien van toepassing.
- Speculaties: Hier staan alle vooraf opgehaalde en vooraf gerenderde URL's uit de regelsets.
Het tabblad Speculaties wordt getoond in het vorige screenshot. We kunnen zien dat deze voorbeeldpagina één set speculatieregels heeft om 3 pagina's te prefetchen. Twee van die prefetch-pogingen zijn geslaagd en één is mislukt. Klik op het icoon naast de regelset om naar de bron van de regelset in het deelvenster Elementen te gaan. U kunt ook op de link Status klikken om naar het tabblad Speculaties te gaan, gefilterd op die regelset.
Op het tabblad Speculaties staan alle doel-URL's, samen met de actie (prefetch of prerender), de regelset waaruit ze afkomstig zijn (omdat er meerdere op een pagina kunnen staan) en de status van elke speculatie:
Boven de URL's staat een dropdownmenu waarmee u URL's van alle regelsets of alleen URL's van een bepaalde regelset kunt tonen. Daaronder staan alle URL's. Als je op een URL klikt, krijg je meer informatie.
In dit screenshot zien we de reden voor de mislukking voor de pagina next3.html (die niet bestaat en daarom een 404 retourneert, een niet-2xx HTTP-statuscode).
Het overzichtstabblad Speculatieve ladingen toont het rapport Speculatieve laadstatus voor deze pagina om aan te geven of er een prefetch of prerender is gebruikt voor deze pagina.
Voor een geprefetchte pagina zie je een bericht dat de prefetch is geslaagd als je naar die pagina gaat:
Niet-overeenkomende speculaties
Als er een navigatie plaatsvindt vanaf een pagina met speculatieregels die niet leidt tot een prefetch of prerender, toont een extra gedeelte van het tabblad meer informatie over waarom de URL niet overeenkomt met een van de speculatie-URL's. Dit is handig om typfouten in je speculatieregels op te sporen.
In dit voorbeeld hebben we naar next4.html genavigeerd, maar alleen next.html, next2.html of next3.html zijn prefetches. We kunnen dus zien dat dit niet helemaal overeenkomt met een van die 3 regels.
De tabbladen Speculatieve ladingen zijn erg handig om de speculatieregels zelf te debuggen en syntaxisfouten in de JSON te vinden.
Het deelvenster Netwerk is waarschijnlijk een bekendere plek voor de prefetch-verzoeken zelf. In het voorbeeld van de mislukte prefetch zie je hier de 404 voor de prefetch:
De tabbladen Speculatieve loads worden veel nuttiger voor speculatieregels voor pre-rendering, die hierna worden behandeld.
Speculatieregels voor prerender
Speculatieregels voor prerenderen volgen dezelfde syntaxis als speculatieregels voor prefetchen. Voorbeeld:
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "next2.html"],
"tag": "rule-set-tag-1"
}
]
}
</script>
Deze regelset activeert een volledige laad- en weergaveactie van de aangegeven pagina's (afhankelijk van bepaalde beperkingen). Dit kan een onmiddellijke laadervaring bieden, hoewel er extra resourcekosten aan verbonden zijn.
In tegenstelling tot prefetches zijn deze niet zichtbaar in het deelvenster Netwerk, omdat ze worden opgehaald en gerenderd in een afzonderlijk renderingproces in Chrome. Hierdoor worden de tabbladen Speculatieve ladingen belangrijker om fouten in prerender-speculatieregels op te sporen.
Fouten in prerender opsporen met de tabbladen Speculatief geladen items
Dezelfde schermen voor Speculatieve loads kunnen worden gebruikt voor speculatieregels voor pre-rendering, zoals wordt getoond op een vergelijkbare demopagina die probeert de 3 pagina's te pre-renderen in plaats van te prefetchen:
Hier zien we opnieuw dat een van de 3 URL's niet vooraf is gerenderd. Ontwikkelaars kunnen de details per URL op het tabblad Speculaties krijgen door op de link 2 gereed, 1 mislukt te klikken.
In Chrome 121 hebben we ondersteuning voor documentregels gelanceerd. Zo kan de browser deze ophalen via links met dezelfde oorsprong op de pagina, in plaats van een specifieke set URL's te vermelden:
<script type="speculationrules">
{
"prerender": [
{
"source": "document",
"where": {
"and": [
{"href_matches": "/*"},
{"not": { "href_matches": "/not-safe-to-prerender/*"}}
]
},
"eagerness": "moderate"
}
]
}
</script>
In dit voorbeeld worden alle links met dezelfde oorsprong geselecteerd, behalve links die beginnen met /not-safe-to-prerender als prerender-kandidaten.
Ook wordt de prerender eagerness ingesteld op moderate. Dit betekent dat de navigaties vooraf worden gerenderd als de gebruiker de muisaanwijzer op de link plaatst (op een desktop), op basis van de viewport (op een mobiel apparaat) of als de gebruiker op de link klikt.
Er zijn vergelijkbare regels zoals deze op de demosite voor speculatieve regels. Als je het nieuwe gedeelte Speculatieve ladingen op deze site gebruikt, zie je hoe nuttig dit nieuwe tabblad is, omdat alle in aanmerking komende URL's die de browser op de pagina heeft gevonden, worden vermeld:
De status is Niet geactiveerd omdat het pre-renderingproces hiervoor niet is gestart. Als we de muisaanwijzer op de links plaatsen, zien we de status veranderen terwijl elke URL vooraf wordt gerenderd:
Chrome heeft limieten ingesteld voor prerenders, waaronder een maximum van 2 prerenders voor de bereidheid moderate. Nadat we de muisaanwijzer op de 3e link hebben geplaatst, zien we de reden voor de fout voor die URL:
prerender debuggen met de andere DevTools-deelvensters
In tegenstelling tot prefetches worden pagina's die vooraf zijn gerenderd, niet getoond in de huidige weergaveprocessen in DevTools-deelvensters zoals het deelvenster Netwerk, omdat ze worden gerenderd in hun eigen renderer achter de schermen.
Het is nu wel mogelijk om de renderer die door de DevTools-deelvensters wordt gebruikt, te wijzigen via het dropdownmenu rechtsboven of door een URL te selecteren in het bovenste deel van het deelvenster en Inspecteren te selecteren:
Dit dropdownmenu (en de geselecteerde waarde) wordt ook gedeeld met alle andere deelvensters, zoals het deelvenster Netwerk, waar je kunt zien dat de pagina die wordt aangevraagd, de vooraf gerenderde pagina is:
Als we de HTTP-headers voor deze bronnen bekijken, zien we dat ze allemaal worden ingesteld met de header Sec-Purpose: prefetch;prerender:
Of het deelvenster Elementen, waar je de paginacontent kunt bekijken, zoals in het volgende screenshot waar we zien dat het element <h1> voor de vooraf gerenderde pagina is:
Of het Console-deelvenster, waar je consolelogboeken kunt bekijken die zijn gegenereerd door de vooraf gerenderde pagina:
Speculatieregels debuggen op de vooraf gerenderde pagina
In de vorige gedeelten wordt besproken hoe je fouten opspoort op vooraf gerenderde pagina's op de pagina die de vooraf gerenderde pagina start. Het is ook mogelijk dat de vooraf gerenderde pagina's zelf foutopsporingsinformatie leveren, door analyseaanroepen te doen of door te loggen in de console (die zichtbaar is zoals beschreven in het vorige gedeelte).
Nadat een vooraf gerenderde pagina is geactiveerd doordat de gebruiker ernaartoe is genavigeerd, toont het tabblad Speculatieve laadacties deze status en of de pagina is vooraf gerenderd of niet. Als de pagina niet vooraf kan worden gerenderd, wordt er een uitleg gegeven waarom dat het geval is:
Daarnaast wordt (zoals het geval is voor prefetches) bij navigatie vanaf een pagina met speculatieregels die niet overeenkomen met de huidige pagina, geprobeerd je op het tabblad Speculatieve loads te tonen waarom de URL's niet overeenkomen met de URL's die worden behandeld in de speculatieregels van de vorige pagina:
Conclusie
In dit bericht hebben we de verschillende manieren getoond waarop ontwikkelaars speculatieregels voor vooraf ophalen en vooraf renderen kunnen debuggen. Het team blijft werken aan tools voor speculatieregels en we horen graag suggesties van ontwikkelaars over andere manieren waarop deze nieuwe API kan worden gedebugd. We raden ontwikkelaars aan een probleem te melden in de Chrome Issue Tracker voor functieverzoeken of gevonden bugs.
Erkenning
Thumbnailafbeelding door Nubelson Fernandes op Unsplash.