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 :
De twee rood gemarkeerde verzoeken zijn de vooraf opgehaalde bronnen, zoals te zien is in de kolom 'Type' . Deze worden opgehaald met Lowest prioriteit, omdat ze bedoeld zijn voor toekomstige navigatie. Chrome geeft prioriteit aan de bronnen van de huidige pagina.
Als u op een van de rijen klikt, wordt ook de HTTP-header Sec-Purpose: prefetch weergegeven. Hiermee kunnen deze verzoeken aan de serverzijde worden geïdentificeerd:
Debug prefetch met de tabbladen Speculatieve belasting
Er is een nieuwe sectie Speculatieve ladingen toegevoegd in het paneel Toepassingen van Chrome DevTools, onder de sectie Achtergrondservices , om te helpen bij het debuggen van speculatieregels:
Er zijn drie tabbladen beschikbaar in deze sectie:
- Speculatieve ladingen die de vooraf gegenereerde status van de huidige pagina weergeven.
- Regels geeft een overzicht van alle regels die op de huidige pagina zijn gevonden, aangegeven als URL's of regeltags , indien van toepassing.
- Speculaties waarin alle vooraf opgehaalde en vooraf gerenderde URL's uit de regels worden vermeld.
Het tabblad Speculaties wordt weergegeven in de vorige schermafbeelding. We zien dat deze voorbeeldpagina één set speculatieregels heeft voor het prefetchen van drie pagina's. Twee van deze prefetchs zijn geslaagd en één is mislukt. U kunt op het pictogram naast de regelset klikken om naar de bron van de regelset in het paneel Elementen te gaan. U kunt ook op de link Status klikken om naar het tabblad Speculaties te gaan dat op die regelset is gefilterd.
Op het tabblad Speculaties worden alle doel-URL's weergegeven, samen met de actie (prefetch of prerender), de regelset waaruit ze afkomstig zijn (aangezien er meerdere op een pagina kunnen zijn) en de status van elke speculatie:
Boven de URL's kunt u een dropdownmenu gebruiken om URL's van alle regelsets te tonen, of alleen URL's van een specifieke regelset. Daaronder worden alle URL's weergegeven. Door op een URL te klikken, krijgt u meer gedetailleerde informatie.
Op deze schermafbeelding zien we de reden waarom de pagina next3.html niet is geopend (deze pagina bestaat niet en retourneert daarom een 404, wat een HTTP-statuscode is die niet 2xx is).
Op het tabblad Samenvatting, Speculatieve ladingen , wordt een rapport weergegeven over de speculatieve laadstatus voor deze pagina . Hierin staat of er een prefetch of prerender is gebruikt voor deze pagina.
Voor een vooraf opgehaalde pagina zou u een succesvol bericht moeten zien wanneer er naar die pagina wordt genavigeerd:
Ongeëvenaarde speculaties
Wanneer er wordt genavigeerd vanaf een pagina met speculatieregels die niet resulteert in het gebruik van een prefetch of prerender, toont een extra sectie van het tabblad meer details over waarom de URL niet overeenkwam met een van de speculatie-URL's. Dit is handig om typefouten in uw speculatieregels op te sporen.
We navigeerden bijvoorbeeld naar next4.html , maar alleen next.html , next2.html of next3.html zijn prefetches, dus we zien dat dit niet helemaal overeenkomt met een van deze drie regels.
De tabbladen Speculatieve ladingen zijn erg handig voor het debuggen van de speculatieregels zelf en het vinden van syntaxisfouten in de JSON.
Wat de prefetching zelf betreft, is het Netwerkpaneel waarschijnlijk een meer vertrouwde plek. Voor het voorbeeld van de mislukte prefetching kunt u hier de 404 voor de prefetching zien:
De tabbladen Speculatieve ladingen zijn echter veel nuttiger voor het vooraf renderen van speculatieregels, wat hieronder wordt behandeld.
Speculatieregels voor prerender
Prerender-speculatieregels volgen dezelfde syntaxis als prefetch-speculatieregels. Bijvoorbeeld:
<script type="speculationrules"> { "prerender": [ { "source": "list", "urls": ["next.html", "next2.html"], "tag": "rule-set-tag-1" } ] } </script> Deze regelset zorgt ervoor dat de opgegeven pagina's volledig worden geladen en weergegeven (onder bepaalde beperkingen). Dit kan direct laden opleveren, maar brengt wel extra kosten met zich mee.
In tegenstelling tot prefetches zijn deze echter niet zichtbaar in het paneel Netwerk , omdat ze worden opgehaald en weergegeven in een apart renderingproces in Chrome. Dit maakt de tabbladen Speculatieve ladingen belangrijker voor het debuggen van prerender-speculatieregels.
Debug prerender met de tabbladen Speculatieve ladingen
Dezelfde schermen voor speculatieve ladingen kunnen worden gebruikt voor pre-render speculatieregels, zoals gedemonstreerd met een vergelijkbare demopagina die probeert de drie pagina's vooraf te renderen in plaats van ze vooraf op te halen:
Hier zien we opnieuw dat het vooraf renderen van een van de drie URL's mislukt. Ontwikkelaars kunnen de details per URL bekijken in het tabblad Speculaties door te klikken op de link 2 Klaar, 1 Mislukt .
In Chrome 121 hebben we ondersteuning voor documentregels geïntroduceerd . Hierdoor kan de browser deze ophalen uit 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 oorspronkelijke links geselecteerd, behalve de links die beginnen met /not-safe-to-prerender als prerenderkandidaten.
Hiermee wordt ook de prerender- eagerness ingesteld op moderate Dit betekent dat de navigatie vooraf wordt weergegeven wanneer de muisaanwijzer over de link beweegt of erop wordt geklikt.
Er zijn vergelijkbare regels als deze op de demosite voor speculatieve regels . Door de nieuwe sectie Speculatieve ladingen op deze site te gebruiken, wordt het nut van dit nieuwe tabblad duidelijk. Alle in aanmerking komende URL's die de browser op de pagina heeft gevonden, worden weergegeven:
De status is 'Niet geactiveerd' omdat het pre-renderproces hiervoor nog niet is gestart. Wanneer we de muisaanwijzer echter boven de links houden, zien we de status veranderen naarmate elke URL wordt gepre-renderd:
Chrome heeft limieten ingesteld voor prerenders , waaronder een maximum van 2 prerenders voor moderate gretigheid. Nadat u met de muis over de 3e link beweegt, zien we de reden voor het mislukken van die URL:
Debug prerender met de andere DevTools-panelen
In tegenstelling tot prefetches worden vooraf gerenderde pagina's niet weergegeven in de huidige renderingprocessen in DevTools-panelen zoals het paneel Netwerk , omdat ze worden gerenderd in hun eigen renderer achter de schermen.
Het is echter nu mogelijk om de renderer die door de DevTools-panelen wordt gebruikt, te wisselen met het dropdownmenu in de rechterbovenhoek of door een URL te selecteren in het bovenste gedeelte van het paneel en Inspecteren te selecteren:
Deze vervolgkeuzelijst (en de geselecteerde waarde) wordt ook gedeeld in alle andere panelen, zoals het paneel Netwerk , waar u kunt zien dat de opgevraagde pagina de vooraf gegenereerde pagina is:
Als we naar de HTTP-headers voor deze bronnen kijken, zien we dat ze allemaal worden ingesteld met de Sec-Purpose: prefetch;prerender header:
Of het Elementenpaneel , waar u de inhoud van de pagina kunt zien, zoals in het volgende screenshot. Hier ziet u dat het <h1> -element voor de vooraf weergegeven pagina is:
Of het consolepaneel , waar u de consolelogs kunt zien die door de vooraf gegenereerde pagina zijn gegenereerd:
Debug-speculatieregels op de vooraf gerenderde pagina
In de voorgaande secties wordt besproken hoe u vooraf gerenderde pagina's kunt debuggen op de pagina die de prerendering initieert. Het is echter ook mogelijk dat de vooraf gerenderde pagina's zelf foutopsporingsinformatie verstrekken, door analyseaanroepen te doen of door te loggen naar de console (die zichtbaar is zoals beschreven in de vorige sectie).
Zodra een vooraf gerenderde pagina wordt geactiveerd door de gebruiker die ernaartoe navigeert, toont het tabblad Speculatieve ladingen deze status en of de pagina succesvol is gerenderd. Als de pagina niet kon worden gerenderd, wordt de reden hiervoor uitgelegd:
Bovendien wordt , net zoals bij prefetches, bij het navigeren vanaf een pagina met speculatieregels die niet overeenkomen met de huidige pagina geprobeerd om te laten zien waarom de URL's niet overeenkwamen met de URL's die onder de speculatieregels van de vorige pagina vielen op het tabblad Speculatieve ladingen :
Conclusie
In dit bericht hebben we de verschillende manieren laten zien waarop ontwikkelaars prefetch- en prerenderspeculatieregels kunnen debuggen. Het team werkt nog steeds aan tools voor speculatieregels en we horen graag suggesties van de ontwikkelaars over andere manieren om deze interessante nieuwe API te debuggen. We moedigen ontwikkelaars aan om een issue te melden via de Chrome issue tracker voor feature requests of bugs die ze tegenkomen.
Dankbetuigingen
Miniatuurafbeelding door Nubelson Fernandes op Unsplash .