{"id":59313,"date":"2024-05-13T17:56:17","date_gmt":"2024-05-13T15:56:17","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=59313&preview=true&preview_id=59313"},"modified":"2024-05-21T10:34:03","modified_gmt":"2024-05-21T08:34:03","slug":"speculative-loading","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/speculative-loading\/","title":{"rendered":"Zo kan Speculative Loading je WordPress pagina’s versnellen"},"content":{"rendered":"

Tegenwoordig staan webpagina’s vol met afbeeldingen, video’s en interactieve elementen die de gebruikerservaring moeten verbeteren. Deze elementen kunnen echter de laadtijd van je pagina vertragen.<\/p>\n

Naarmate de technologie voortschrijdt, blijft \u00e9\u00e9n doel constant: prestaties<\/em>. Iedereen hoopt dat zijn webpagina’s razendsnel laden<\/a>.<\/p>\n

E\u00e9n manier om webpagina’s sneller te laten laden is door ze te prerenderen of prefetchen voordat een gebruiker er naartoe navigeert.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Een korte geschiedenis van prerendering<\/h2>\n

In 2011 introduceerde het Chromium team een vroege vorm van prerendering<\/a> in de Chrome browser via de <link rel=\"prerender\" \u2026 ><\/code> tag.<\/p>\n

Hiermee konden ontwikkelaars<\/a> de browsers<\/a> laten doorschemeren welke pagina(‘s) een gebruiker als volgende zou kunnen bezoeken. De browser zou deze pagina’s dan stilletjes op de achtergrond ophalen en renderen, waardoor de laadtijd drastisch<\/em> werd verkort wanneer de gebruiker naar deze pagina’s navigeerde.<\/p>\n

Ondanks de voordelen gebruikte deze vroege implementatie van prerendering veel bandbreedte en CPU resources en kon het tot privacyproblemen leiden als de gebruiker de vooraf gerenderde pagina’s niet bezocht. Bovendien moest je handmatig selecteren welke links je wilde prerenderen, wat niet altijd effectief of haalbaar was.<\/p>\n

Om een aantal van deze problemen aan te pakken, heeft Chrome het prerenderen met behulp van de link rel=prerender<\/code> hint afgeschaft ten gunste van de NoState Prefetch<\/a> methode, waarbij bronnen binnen een pagina worden opgehaald zonder JavaScript of andere mogelijk privacyschendende acties uit te voeren.<\/p>\n

De NoState Prefetch methode verbeterde het laden van bronnen, maar kon geen onmiddellijke paginalading leveren zoals een volledige prerender.<\/p>\n

Introductie van de Speculation Rules API<\/h2>\n

De Speculation Rules API<\/a> is een nieuwe experimentele in JSON gedefinieerde API die URL’s speculatief prerendert voordat er naartoe wordt genavigeerd, wat leidt tot snellere renderingstijden en verbeterde gebruikerservaringen.<\/p>\n

Met de API kunnen developers regels configureren met een in JSON format gedefinieerde structuur binnen een script type=\"speculationrules\"<\/code> die de browser kan gebruiken om te beslissen welke URL’s vooraf moeten worden geladen.<\/p>\n

<script type=\"speculationrules\">\n{\n  \"prerender\": [\n    {\n      \"source\": \"list\",\n      \"urls\": [\"firstpage.html\", \"secondpage.html\"]\n    }\n  ]\n}\n<\/script><\/code><\/pre>\n
Hetzelfde geldt voor prefetching, wat vaak een goede eerste stap kan zijn op weg naar prerendering:<\/p>\n
<script type=\"speculationrules\">\n{\n  \"prefetch\": [\n    {\n      \"urls\": [\"firstpage.html\", \"secondpage.html\"]\n    }\n  ]\n}\n<\/script><\/code><\/pre>\n
De bovenstaande codefragmenten laten zien hoe de Speculation Rules API werkte door een lijst met URL’s op te geven om te prefetchen of te prerenderen.<\/p>\n
Onlangs kondigde Google nieuwe verbeteringen aan voor de Speculation Rules API<\/a>, die nu de optie biedt voor het automatisch vinden van links met behulp van documentregels<\/em>. Dit werkt door URL’s uit het document te halen op basis van een where<\/code> voorwaarde.<\/p>\n
<script type=\"speculationrules\">\n{\n  \"prerender\": [\n    {\n      \"source\": \"document\",\n      \"where\": {\n        \"and\": [\n          {\n            \"href_matches\": \"\/*\"\n          },\n          {\n            \"not\": {\n              \"href_matches\": [\n                \"\/wp-login.php\",\n                \"\/wp-admin\/*\"\n              ]\n            }\n          }\n        ]\n      },\n      \"eagerness\": \"moderate\"\n    }\n  ]\n}\n<\/script><\/code><\/pre>\n
In dit codefragment worden alle URL’s op de pagina in aanmerking genomen voor prerendering, behalve de URL’s die leiden naar de WordPress inlog<\/a>– en beheerpagina’s. Je specificeert ook een niveau van eagerness<\/code> – eager<\/code> (meteen), moderate<\/code> (bij een hover van 200 ms) en conservative<\/code> (bij muis of aanraking).<\/p>\n
CSS<\/a> selectors kunnen ook worden gebruikt als alternatief of in combinatie met href<\/code> overeenkomsten om links op de huidige pagina te vinden:<\/p>\n
<script type=\"speculationrules\">\n{\n  \"prerender\": [{\n    \"source\": \"document\",\n    \"where\": {\n      \"and\": [\n        { \"selector_matches\": \".prerender\" },\n        { \"not\": {\"selector_matches\": \".do-not-prerender\"}}\n      ]\n    },\n    \"eagerness\": \"moderate\"\n  }]\n}\n<\/script><\/code><\/pre>\n
Wanneer je de Speculation Rules API gebruikt, kun je deze inspecteren met behulp van de Speculative Loading <\/strong>background services in het Chrome Application dashboard <\/b>wanneer je de pagina inspecteert.<\/p>\n
\"Inspecteer
Inspecteer de Speculation Rules API met de background services Speculative Loading in het Application tabblad van Chrome.<\/figcaption><\/figure>\n
Er is nog meer – we zullen dit onderzoeken in de sectie over troubleshooting.<\/p>\n
Browser ondersteuning<\/h3>\n
De Speculation Rules API wordt ondersteund<\/a> in moderne op Chromium gebaseerde browsers<\/a>, waaronder Chrome en Edge, vanaf specifieke versies.<\/p>\n
\"Browserondersteuning
Browserondersteuning voor Speculation Rules API (Bron: Mozilla<\/a>).<\/figcaption><\/figure>\n
Dit zorgt ervoor dat gebruikers op ondersteunde browsers kunnen profiteren van snellere laadtijden, terwijl gebruikers op andere browsers geen negatieve effecten ondervinden, omdat de API een progressieve verbeteringstool is.<\/p>\n
De Speculative Loading WordPress plugin<\/h2>\n
Om te kunnen profiteren van de voordelen van de Speculation Rules API in WordPress, heeft het WordPress performance team<\/a> (met daarin devs van Google) onlangs de Speculative Loading plugin<\/a> gepubliceerd. Deze plugin maakt speculative loading van frontend URL’s die gekoppeld zijn op de pagina.<\/p>\n
Tot nu toe is de plugin weinig gebruikt omdat de API zich nog in de beginfase bevindt, maar hij heeft wel positieve recensies gekregen.<\/p>\n
\"Beoordelingen
Beoordelingen van de WordPress gemeenschap voor de Speculative Loading plugin.<\/figcaption><\/figure>\n
Standaard is de plugin geconfigureerd om WordPress frontend URL’s te prerenderen wanneer de gebruiker met de muisaanwijzer over een relevante link gaat. Dit kan worden aangepast via de Speculative Loading<\/strong> sectie onder Settings <\/b>> Reading<\/strong>.<\/p>\n
\"Pas
Pas de Speculative Loading plugin aan in de WordPress admin instellingen.<\/figcaption><\/figure>\n
Dit betekent dat alle URL’s waarnaar op de pagina wordt gelinkt, worden voorgeladen met een eagerness<\/code> configuratie van moderate<\/code>, die meestal wordt geactiveerd wanneer je met de muis over een link beweegt. Je hoeft dus niets te doen na het activeren van de plugin; het werkt gewoon out of the box<\/em>.<\/p>\n
Als je de Speculative Loading<\/strong> plugin bijvoorbeeld al hebt ge\u00efnstalleerd op een WordPress site, gebruik dan de Chrome DevTools<\/a> om de site te inspecteren en klik op het tabblad Elements<\/strong>. Als je naar beneden scrollt, zie je dat er al een script type=\"speculationrules\"<\/code> voor je is toegevoegd met de verschillende speculative rules.<\/p>\n
\"Inspecteer
Inspecteer WordPress site om te zien dat Speculative Rules automatisch worden toegevoegd met de Speculative Loading plugin.<\/figcaption><\/figure>\n
Het gebruikt een Regex om links te specificeren die moeten worden geprerendered, specificeert links die niet moeten worden geprerendered en stelt de gretigheid in. De volgende secties leggen deze regels in detail uit.<\/p>\n
Limieten om overmatig gebruik te voorkomen<\/h3>\n
Chrome heeft limieten ingesteld om overmatig gebruik van de API te voorkomen:<\/p>\n\n\n\n\n\n
Eagerness<\/strong><\/td>\nPrefecth<\/strong><\/td>\nPrerender<\/strong><\/td>\n<\/tr>\n
immediate\/eager<\/td>\n50<\/td>\n10<\/td>\n<\/tr>\n
moderate\/conservative<\/td>\n2 (FIFO)<\/td>\n2 (FIFO)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Ze voorkomen overmatig gebruik door middel van verschillende instellingen op basis van urgentie en interactie met de gebruiker.<\/p>\n