Speculatieregels kunnen worden gebruikt om de navigatie op de volgende pagina vooraf op te halen en vooraf weer te geven, zoals beschreven in het vorige bericht . Hierdoor kunnen pagina's veel sneller (of zelfs direct) worden geladen, waardoor de Core Web Vitals voor deze extra paginanavigatie aanzienlijk worden verbeterd.
Het debuggen van speculatieregels kan lastig zijn. Dit geldt met name voor vooraf weergegeven pagina's, omdat deze pagina's worden weergegeven in een afzonderlijke renderer, een beetje zoals een 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 het debuggen van speculatieregels te verbeteren. In dit bericht zie je alle verschillende manieren waarop je deze tools kunt gebruiken om de speculatieregels van een pagina te begrijpen, waarom ze mogelijk niet werken en wanneer ontwikkelaars de meer bekende 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 : vooraf een bron of document ophalen om toekomstige prestaties te verbeteren. Dit bericht behandelt het vooraf ophalen 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 vooraf ophalen van subbronnen. - Prerender : dit gaat een stap verder dan prefetchen en geeft feitelijk de hele pagina weer alsof de gebruiker ernaartoe is genavigeerd, maar houdt deze in een verborgen achtergrondrendererproces klaar om te worden gebruikt als de gebruiker daar daadwerkelijk naartoe navigeert. Nogmaals, dit document heeft betrekking op de nieuwere Speculation Rules API-versie hiervan, in plaats van op de oudere
<link rel="prerender">optie (die niet langer een volledige prerender uitvoert ). - Navigatiespeculaties : de verzamelnaam voor de nieuwe prefetch- en prerender-opties die worden geactiveerd door speculatieregels.
- Preload : een overbelaste term die kan verwijzen naar een aantal technologieën en processen, waaronder
<link rel="preload">, de preload scanner en preloads voor navigatie van servicemedewerkers . Deze items worden hier niet behandeld, maar de term is opgenomen om deze duidelijk te onderscheiden van de term 'navigatiespeculaties'.
Speculatieregels voor prefetch
Speculatieregels kunnen worden gebruikt om het volgende navigatiedocument 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"]
}
]
}
</script>
Het gebruik van speculatieregels voor navigatieprefetches heeft enkele voordelen ten opzichte van de oudere <link rel="prefetch"> syntaxis, zoals een expressievere API en het opslaan van de resultaten in geheugencache in plaats van in de HTTP-schijfcache.
Debug prefetch speculatieregels
Prefetches die door speculatieregels worden geactiveerd, kunnen op dezelfde manier in het netwerkpaneel worden bekeken als andere ophaalacties:
De twee rood gemarkeerde verzoeken zijn de vooraf opgehaalde bronnen, zoals u kunt zien in de kolom Type . Deze worden met Lowest prioriteit opgehaald, net als voor toekomstige navigatie, en Chrome geeft prioriteit aan de bronnen van de huidige pagina.
Als u op een van de rijen klikt, wordt ook de Sec-Purpose: prefetch HTTP-header weergegeven, waarmee deze verzoeken aan de serverzijde kunnen worden geïdentificeerd:
Debug prefetch met de tabbladen Speculatief laden
Er is een nieuwe sectie Speculatieve ladingen toegevoegd in het paneel Applicaties van Chrome DevTools, onder de sectie Achtergrondservices , om te helpen bij het opsporen van fouten in speculatieregels:
Er zijn drie tabbladen beschikbaar in deze sectie:
- Speculatieve ladingen die de vooraf weergegeven status van de huidige pagina weergeven.
- Regels waarin alle regelsets op de huidige pagina worden vermeld.
- Speculaties waarin alle vooraf opgehaalde en vooraf gegenereerde URL's uit de regelsets worden vermeld.
Het tabblad Speculaties wordt weergegeven in de vorige schermafbeelding en we kunnen zien dat deze voorbeeldpagina één enkele set speculatieregels heeft voor het vooraf ophalen van drie pagina's. Twee van die prefetches slaagden en één mislukte. U kunt op het pictogram naast de Regelset klikken om naar de bron van de regelset in het paneel Elementen te gaan. Als alternatief kunt u op de link Status klikken om naar het tabblad Speculaties te gaan, gefilterd op die regelset.
Op het tabblad Speculaties worden alle doel-URL's vermeld, samen met de actie (prefetch of prerender), uit welke regelset ze afkomstig zijn (aangezien er meerdere op een pagina kunnen staan) en de status van elke speculatie:
Boven de URL's kan een vervolgkeuzelijst worden gebruikt om URL's uit alle regelsets weer te geven, of alleen URL's uit een bepaalde regelset. Daaronder worden alle URL's vermeld. Als u op een URL klikt, krijgt u meer gedetailleerde informatie.
In deze schermafbeelding kunnen we de reden voor het falen zien voor de next3.html pagina (die niet bestaat en daarom een 404 retourneert, wat een niet-2xx HTTP-statuscode is).
Het overzichtstabblad, Speculatieve ladingen , toont een Speculatieve laadstatus voor dit paginarapport om aan te geven of er voor deze pagina een prefetch of prerender is gebruikt of niet.
Voor een vooraf opgehaalde pagina zou u een succesvol bericht moeten zien wanneer naar die pagina wordt genavigeerd:
Ongeëvenaarde speculaties
Wanneer een navigatie plaatsvindt vanaf een pagina met speculatieregels die niet resulteert in het gebruik van een prefetch of prerender, worden in een extra sectie van het tabblad meer details weergegeven over waarom de URL niet overeenkomt met een van de speculatie-URL's. Dit is handig voor het opsporen van typefouten in uw speculatieregels.
Hier navigeerden we bijvoorbeeld naar next4.html , maar alleen next.html , next2.html of next3.html zijn prefetches, dus we kunnen zien dat dit niet helemaal overeenkomt met een van deze drie regels.
De tabbladen Speculatieve belastingen zijn erg handig voor het debuggen van de speculatieregels zelf en het vinden van eventuele syntaxisfouten in de JSON.
Wat de prefetches zelf betreft, is het netwerkpaneel waarschijnlijk een meer bekende plek. Voor het voorbeeld van een prefetch-fout kunt u hier de 404 voor de prefetch zien:
De tabbladen Speculatieve ladingen worden echter veel nuttiger voor het vooraf weergeven van speculatieregels, die hierna worden behandeld.
Speculatieregels voor prerender
Prerender-speculatieregels volgen dezelfde syntaxis als prefetch-speculatieregels. Bijvoorbeeld:
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
Deze regelset activeert een volledige belasting en weergave van de opgegeven pagina's (onder voorbehoud van bepaalde beperkingen). Dit kan een onmiddellijke laadervaring opleveren, zij het met extra resourcekosten.
In tegenstelling tot prefetches zijn deze echter niet zichtbaar in het netwerkpaneel , omdat deze worden opgehaald en weergegeven in een afzonderlijk weergaveproces in Chrome. Dit maakt de tabbladen Speculatieve ladingen belangrijker voor het debuggen van speculatieregels vóór weergave.
Debug prerender met de tabbladen Speculatieve ladingen
Dezelfde Speculatieve laadschermen kunnen worden gebruikt voor speculatieregels voor het vooraf weergeven, zoals gedemonstreerd met een vergelijkbare demopagina die probeert vooraf te renderen, in plaats van de drie pagina's vooraf op te halen:
Hier zien we opnieuw dat een van de drie URL's niet vooraf kon worden weergegeven, en ontwikkelaars kunnen de details per URL opvragen op het tabblad Speculaties door op de link 2 gereed, 1 fout te klikken.
In Chrome 121 hebben we ondersteuning voor documentregels gelanceerd . Hierdoor kan de browser deze ophalen van links van dezelfde oorsprong op de pagina, in plaats van een specifieke reeks URL's weer te geven:
<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 van dezelfde oorsprong geselecteerd, behalve de links die beginnen met /not-safe-to-prerender als prerender-kandidaten.
Het stelt ook de pre-render eagerness in op moderate wat betekent dat de navigatie vooraf wordt weergegeven wanneer de link zweeft of erop wordt geklikt.
Er zijn vergelijkbare regels zoals deze op de demosite voor speculatieve regels , en het gebruik van de nieuwe sectie Speculatieve ladingen op deze site toont het nut van dit nieuwe tabblad aan, aangezien alle in aanmerking komende URL's die de browser op de pagina heeft gevonden, worden vermeld:
De status wordt niet geactiveerd omdat het pre-renderproces hiervoor nog niet is gestart. Terwijl we echter de aanwijzer op de links houden, zien we de statusverandering wanneer elke URL vooraf wordt weergegeven:
Chrome heeft limieten ingesteld voor pre-renders , inclusief een maximum van 2 pre-renders voor moderate gretigheid, dus nadat we de muisaanwijzer op de derde link hebben geplaatst, zien we de reden voor het mislukken van die URL:
Debug prerender met de andere DevTools-panelen
In tegenstelling tot prefetches worden pagina's die vooraf zijn gerenderd niet weergegeven in de huidige weergaveprocessen in DevTools-panelen zoals het paneel Netwerk , omdat ze worden weergegeven in hun eigen renderer achter de schermen.
Het is nu echter mogelijk om de renderer die door de DevTools-panelen wordt gebruikt te wisselen met het vervolgkeuzemenu in de vervolgkeuzelijst rechtsboven, of door een URL in het bovenste gedeelte van het paneel te selecteren en Inspecteren te selecteren:
Deze vervolgkeuzelijst (en de geselecteerde waarde) wordt ook gedeeld met alle andere panelen, zoals het netwerkpaneel , waar u kunt zien dat de pagina die wordt opgevraagd de vooraf weergegeven pagina is:
Als we naar de HTTP-headers voor deze bronnen kijken, kunnen we zien dat ze allemaal worden ingesteld met de Sec-Purpose: prefetch;prerender header:
Of het Elementenpaneel , waar u de pagina-inhoud kunt zien, zoals in de volgende schermafbeelding, waar we zien dat het <h1> -element voor de vooraf weergegeven pagina is:
Of het consolepaneel , waar u consolelogboeken kunt zien die door de vooraf weergegeven pagina worden verzonden:
Debug speculatieregels op de vooraf weergegeven pagina
In de voorgaande secties wordt besproken hoe u fouten kunt opsporen in vooraf gerenderde pagina's op de pagina die de pre-rendering initieert. Het is echter ook mogelijk dat de vooraf gegenereerde pagina's zelf foutopsporingsinformatie leveren, door analyseaanroepen te doen of door in te loggen op de console (die kan worden bekeken zoals beschreven in de vorige sectie).
Bovendien zal, zodra een vooraf weergegeven pagina is geactiveerd door de gebruiker die ernaartoe navigeert, het tabblad Speculatieve ladingen deze status weergeven, en of de vooraf weergegeven pagina al dan niet succesvol is weergegeven. Als dit niet vooraf kon worden gedaan, wordt er een verklaring gegeven waarom dat het geval was:
Bovendien , zoals het geval is bij prefetches, zal het navigeren vanaf een pagina met speculatieregels die niet overeenkomen met de huidige pagina, proberen u te laten zien waarom de URL's niet overeenkomen met de URL's die zijn behandeld in de speculatieregels van de vorige pagina op het tabblad Speculatieve ladingen :
Conclusie
In dit bericht hebben we de verschillende manieren laten zien waarop ontwikkelaars prefetch- en prerender-speculatieregels kunnen debuggen. Het team blijft werken aan tools voor speculatieregels, en we horen graag suggesties van de ontwikkelaars over welke andere manieren nuttig zouden zijn voor het debuggen van deze opwindende nieuwe API. We moedigen ontwikkelaars aan om een probleem aan te geven via de Chrome-probleemtracker als er functieverzoeken of bugs worden opgemerkt.
Dankbetuigingen
Miniatuurafbeelding door Nubelson Fernandes op Unsplash .