{"id":45192,"date":"2022-08-23T16:26:31","date_gmt":"2022-08-23T14:26:31","guid":{"rendered":"https:\/\/kinqsta.com\/nl\/?p=45192&#038;preview=true&#038;preview_id=45192"},"modified":"2023-05-22T12:56:30","modified_gmt":"2023-05-22T10:56:30","slug":"performance-api","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/nl\/blog\/performance-api\/","title":{"rendered":"Een inleiding tot de Performance API"},"content":{"rendered":"<p>De <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Performance_API\">Performance API<\/a> meet het reactievermogen van je live web toepassing op echte gebruikers toestellen en netwerkverbindingen. Het kan helpen knelpunten in je client-side en server-side code op te sporen met:<\/p>\n<ul>\n<li><strong>user timing:<\/strong> Aangepaste meting van de prestaties van client-side <a href=\"https:\/\/kinqsta.com\/nl\/blog\/wat-is-javascript\/\">JavaScript functies<\/a><\/li>\n<li><strong>paint timing:<\/strong> Meting browser-rendering<\/li>\n<li><strong>resource timing:<\/strong> Laadprestaties van assets en Ajax-oproepen<\/li>\n<li><strong>navigatie timing:<\/strong> Metrics over het laden van pagina&#8217;s, waaronder omleidingen, DNS look-ups, DOM gereedheid, en meer<\/li>\n<\/ul>\n<p>De API pakt verschillende problemen aan die gepaard gaan met typische prestatie-evaluatie:<\/p>\n<ol>\n<li>Ontwikkelaars testen applicaties vaak op high-end PC&#8217;s die met een snel netwerk verbonden zijn. DevTools kan tragere toestellen emuleren, maar het zal niet altijd echte problemen aan het licht brengen wanneer de meeste cli\u00ebnten een twee jaar oude mobiel gebruiken die verbonden is met luchthaven WiFi.<\/li>\n<li>Opties van derden zoals <a href=\"https:\/\/kinqsta.com\/nl\/blog\/gebruik-google-analytics\/\">Google Analytics<\/a> worden vaak geblokkeerd, wat leidt tot scheve resultaten en veronderstellingen. Ook kun je in sommige landen met privacy-implicaties te maken krijgen.<\/li>\n<li>De Performance API kan verschillende metrieken nauwkeuriger peilen dan methoden als <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Date\"><code>Date()<\/code><\/a>.<\/li>\n<\/ol>\n<p><br \/>\nDe volgende paragrafen beschrijven manieren waarop je de Performance API kunt gebruiken. Enige <a href=\"https:\/\/kinqsta.com\/nl\/onderwerpen\/javascript-tutorials\/\">kennis van JavaScript<\/a> en <a href=\"https:\/\/kinqsta.com\/nl\/blog\/snelheidstest-website\/\">metrics van het laden van pagina&#8217;s<\/a> is aanbevolen.<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Beschikbaarheid van de Performance API<\/h2>\n<p>De meeste moderne browsers ondersteunen de Performance API &#8211; ook IE10 en IE11 (zelfs IE9 heeft beperkte ondersteuning). Je kunt de aanwezigheid van de API opsporen met:<\/p>\n<pre><code>if ('performance' in window) {\n  \/\/ use Performance API\n}<\/code><\/pre>\n<p>Het is niet mogelijk de API volledig te Polyfillen, dus wees op je hoede voor ontbrekende browsers. Als 90% van je gebruikers tevreden surfen met Internet Explorer 8, zou je slechts 10% van de cli\u00ebnten meten met meer bekwame toepassingen.<\/p>\n<p>De API kan gebruikt worden in <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Web_Workers_API\/Using_web_workers\">Web Workers<\/a>, die een manier bieden om complexe berekeningen in een achtergrond thread uit te voeren zonder de browseroperaties te onderbreken.<\/p>\n<p>De meeste API methoden kunnen in server-side Node.js gebruikt worden met de standaard <a href=\"https:\/\/nodejs.org\/dist\/latest\/docs\/api\/perf_hooks.html\">perf_hooks module<\/a>:<\/p>\n<pre><code>\/\/ Node.js performance\nimport { performance } from 'node:perf_hooks';\n\/\/ or in Common JS: const { performance } = require('node:perf_hooks');\n\nconsole.log( performance.now() );<\/code><\/pre>\n<p>Deno biedt de standaard <a href=\"https:\/\/doc.deno.land\/deno\/stable\/~\/Performance\">Performance API<\/a>:<\/p>\n<pre><code>\/\/ Deno performance\nconsole.log( performance.now() );<\/code><\/pre>\n<p>Je moet scripts uitvoeren met de <code>--allow-hrtime<\/code> toestemming om hoge-resolutie tijdmeting mogelijk te maken:<\/p>\n<pre><code>deno run --allow-hrtime index.js<\/code><\/pre>\n<p>Prestaties aan de serverkant zijn meestal gemakkelijker te beoordelen en te beheren omdat ze afhankelijk zijn van belasting, CPU&#8217;s, RAM, harde schijven, en <a href=\"https:\/\/kinqsta.com\/nl\/blog\/disk-space-wordpress-hosting\/\">limieten van cloud diensten<\/a>. Hardware upgrades of procesmanagement opties zoals <a href=\"https:\/\/pm2.keymetrics.io\/\">PM2<\/a>, <a href=\"https:\/\/nodejs.org\/api\/cluster.html\">clustering<\/a>, en <a href=\"https:\/\/kubernetes.io\/\">Kubernetes<\/a> kunnen effectiever zijn dan het refactoren van code.<\/p>\n<p>De volgende secties concentreren zich om deze reden op prestaties aan de client-kant.<\/p>\n<h2>Aangepaste prestatiemeting<\/h2>\n<p>De Performance API kan gebruikt worden om de uitvoeringssnelheid van je toepassingsfuncties te timen. Je hebt misschien wel eens timing functies gebruikt of tegengekomen met <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Date\"><code>Date()<\/code><\/a>:<\/p>\n<pre><code>const timeStart = new Date();\nrunMyCode();\nconst timeTaken = new Date() - timeStart;\n\nconsole.log(`runMyCode() executed in ${ timeTaken }ms`);<\/code><\/pre>\n<p>De Performance API biedt twee primaire voordelen:<\/p>\n<ol>\n<li><strong>Betere nauwkeurigheid:<\/strong> <code>Date()<\/code> meet tot op de milliseconde nauwkeurig, maar de Performance API kan fracties van een milliseconde meten (afhankelijk van de browser).<\/li>\n<li><strong>Betere betrouwbaarheid:<\/strong> De gebruiker of het OS kan de systeemtijd veranderen, zodat op <code>Date()<\/code>-gebaseerde meetgegevens niet altijd nauwkeurig zullen zijn. Dit betekent dat je functies bijzonder traag kunnen lijken als de klokken vooruit gaan!<\/li>\n<\/ol>\n<p>Het <code>Date()<\/code> equivalent is <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Performance\/now\"><code>performance.now()<\/code><\/a> dat een high-resolution timestamp oplevert die op nul wordt gezet als het proces dat verantwoordelijk is voor het maken van het document begint (de pagina is geladen):<\/p>\n<pre><code>const timeStart = performance.now();\nrunMyCode();\nconst timeTaken = performance.now() - timeStart;\n\nconsole.log(`runMyCode() executed in ${ timeTaken }ms`);<\/code><\/pre>\n<p>Een niet-standaard <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Performance\/timeOrigin\"><code>performance.timeOrigin<\/code><\/a> property kan ook een timestamp van 1 januari 1970 teruggeven, hoewel dit niet beschikbaar is in IE en Deno.<\/p>\n<p><code>performance.now()<\/code> wordt onpraktisch als je meer dan een paar metingen doet. De Performance API biedt een buffer waarin je events kunt recorden voor latere analyse door een labelnaam door te geven aan <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Performance\/mark\"><code>performance.mark()<\/code><\/a>:<\/p>\n<pre><code>performance.mark('start:app');\nperformance.mark('start:init');\n\ninit(); \/\/ run initialization functions\n\nperformance.mark('end:init');\nperformance.mark('start:funcX');\n\nfuncX(); \/\/ run another function\n\nperformance.mark('end:funcX');\nperformance.mark('end:app');<\/code><\/pre>\n<p>Een array van alle mark objects in de Performance buffer kan worden ge\u00ebxtraheerd met:<\/p>\n<pre><code>const mark = performance.getEntriesByType('mark');<\/code><\/pre>\n<p>Voorbeeldresultaat:<\/p>\n<pre><code>[\n\n  {\n    detail: null\n    duration: 0\n    entryType: \"mark\"\n    name: \"start:app\"\n    startTime: 1000\n  },\n  {\n    detail: null\n    duration: 0\n    entryType: \"mark\"\n    name: \"start:init\"\n    startTime: 1001\n  },\n  {\n    detail: null\n    duration: 0\n    entryType: \"mark\"\n    name: \"end:init\"\n    startTime: 1100\n  },\n...\n]<\/code><\/pre>\n<p>De <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Performance\/measure\"><code>performance.measure()<\/code><\/a> methode berekent de tijd tussen twee marks en slaat die ook op in de Performance buffer. Je geeft een nieuwe measurenaam door, de de naam van de starting mark (of null om vanaf de paginalading te meten), en de naam van de ending mark (of null om naar de huidige tijd te meten):<\/p>\n<pre><code>performance.measure('init', 'start:init', 'end:init');<\/code><\/pre>\n<p>Een <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/PerformanceMeasure\">PerformanceMeasure object<\/a> wordt aan de buffer toegevoegd met de berekende tijdsduur. Om deze waarde te krijgen kun je ofwel een array van alle measures opvragen:<\/p>\n<pre><code>const measure = performance.getEntriesByType('measure');<\/code><\/pre>\n<p>of een measure opvragen met zijn naam:<\/p>\n<pre><code>performance.getEntriesByName('init');<\/code><\/pre>\n<p>Voorbeeldresultaat:<\/p>\n<pre><code>[\n  {\n    detail: null\n    duration: 99\n    entryType: \"measure\"\n    name: \"init\"\n    startTime: 1001\n  }\n]<\/code><\/pre>\n<h3>Gebruik van de prestatiebuffer<\/h3>\n<p>Behalve marks en measures wordt de prestatiebuffer ook gebruikt om automatisch navigatietiming, resourcetiming, en painttiming te recorden (die we later bespreken). Je kunt een array krijgen van alle entries in de buffer:<\/p>\n<pre><code>performance.getEntries();<\/code><\/pre>\n<p>Standaard bieden de meeste browsers een buffer die tot 150 resource metrics opslaat. Dit zou voldoende moeten zijn voor de meeste beoordelingen, maar je kunt de bufferlimiet verhogen of verlagen als dat nodig is:<\/p>\n<pre><code>\/\/ record 500 metrics\nperformance.setResourceTimingBufferSize(500);<\/code><\/pre>\n<p>Merktekens kunnen op naam gewist worden of je kunt een lege waarde opgeven om alle merktekens te wissen:<\/p>\n<pre><code>performance.clearMarks('start:init');<\/code><\/pre>\n<p>Op dezelfde manier kunnen maatregelen met naam gewist worden of met een lege waarde om alles te wissen:<\/p>\n<pre><code>performance.clearMeasures();<\/code><\/pre>\n<h3>Performancebuffer updates monitoren<\/h3>\n<p>Een <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/PerformanceObserver\"><strong>PerformanceObserver<\/strong><\/a> kan veranderingen in de Performance buffer monitoren en een functie uitvoeren als zich bepaalde events voordoen. De syntaxis zal bekend zijn als je ooit gebruikt hebt <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/MutationObserver\"><strong>MutationObserver<\/strong><\/a> om te reageren op DOM updates of <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/IntersectionObserver\"><strong>IntersectionObserver<\/strong><\/a> om te detecteren wanneer elementen in de viewport worden geschoven.<\/p>\n<p>Je dient een observer functie defini\u00ebren met twee parameters:<\/p>\n<ol>\n<li>een array van observer entries die gedetecteerd zijn, en<\/li>\n<li>het observer object. Indien nodig kan de <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/PerformanceObserver\/disconnect\"><code>disconnect()<\/code><\/a> methode kan worden gecallt om de observer te stoppen.<\/li>\n<\/ol>\n<pre><code>function performanceCallback(list, observer) {\n\n  list.getEntries().forEach(entry =&gt; {\n    console.log(`name    : ${ entry.name }`);\n    console.log(`type    : ${ entry.type }`);\n    console.log(`start   : ${ entry.startTime }`);\n    console.log(`duration: ${ entry.duration }`);\n  });\n\n}<\/code><\/pre>\n<p>De functie wordt doorgegeven aan een nieuw PerformanceObserver object. Zijn <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/PerformanceObserver\/observe\"><code>observe()<\/code><\/a> methode wordt een array van Performance buffer entryTypes en wordt doorgegeven om te observeren:<\/p>\n<pre><code>let observer = new PerformanceObserver( performanceCallback );\nobserver.observe({ entryTypes: ['mark', 'measure'] });<\/code><\/pre>\n<p>In dit voorbeeld wordt door het toevoegen van een nieuwe mark of measurement de functie <code>performanceCallback()<\/code> uitgevoerd. Hoewel het hier alleen berichten logt, zou het gebruikt kunnen worden om een upload van gegevens te starten of verdere berekeningen uit te voeren.<\/p>\n<h3>Meten van paint performance<\/h3>\n<p>De Paint Timing API is alleen beschikbaar in client-side JavaScript en registreert automatisch twee metrics die belangrijk zijn voor <a href=\"https:\/\/kinqsta.com\/nl\/blog\/core-web-vitals\/\">Core Web Vitals<\/a>:<\/p>\n<ol>\n<li><strong>first-paint:<\/strong> De browser is begonnen met het &#8220;schilderen&#8221; van de pagina.<\/li>\n<li><strong>first-contentful-paint:<\/strong> De browser heeft het eerste belangrijke item van de DOM inhoud geschilderd, zoals een kop of een afbeelding.<\/li>\n<\/ol>\n<p>Deze kunnen uit de Performance buffer naar een array ge\u00ebxtraheerd worden:<\/p>\n<pre><code>const paintTimes = performance.getEntriesByType('paint');<\/code><\/pre>\n<p>Wees op je hoede als je dit uitvoert voordat de pagina volledig geladen is; de waarden zijn dan nog niet klaar. Wacht ofwel op de <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Window\/load_event\"><code>window.load<\/code><\/a> event of gebruik een <a href=\"https:\/\/docs.google.com\/document\/d\/1bO-CdqPOUVV0xaZkQMu5f5eHYxmV1RfoYVwPHXDRvyg\/edit#heading=h.y0ea1dh8xmx\"><code>PerformanceObserver<\/code><\/a> om <code>paint<\/code> entryTypes te monitoren.<\/p>\n<p>Voorbeeldresultaat:<\/p>\n<pre><code>[\n  {\n    \"name\": \"first-paint\",\n    \"entryType\": \"paint\",\n    \"startTime\": 812,\n    \"duration\": 0\n  },\n  {\n    \"name\": \"first-contentful-paint\",\n    \"entryType\": \"paint\",\n    \"startTime\": 856,\n    \"duration\": 0\n  }\n]<\/code><\/pre>\n<p>Een trage first-paint wordt vaak veroorzaakt door render-blocking CSS of JavaScript. Het gat naar de first-contentful-paint kan groot zijn als de browser een grote afbeelding moet downloaden of <a href=\"https:\/\/kinqsta.com\/nl\/blog\/render-blocking-javascript-css\/\">complexe elementen moet renderen<\/a>.<\/p>\n<h2>Prestatiemeting van de resources<\/h2>\n<p>Netwerktijden voor resources zoals afbeeldingen, stylesheets, en JavaScript bestanden worden automatisch in de Performance buffer genoteerd. Hoewel je weinig kunt doen om problemen met netwerksnelheid op te lossen (behalve de bestandsgrootte verkleinen), kan het helpen om problemen met grotere resources, trage Ajax reacties, of slecht presterende externe scripts aan het licht te brengen.<\/p>\n<p>Een array van <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/PerformanceResourceTiming\">PerformanceResourceTiming<\/a> metrics kan uit de buffer gehaald worden met:<\/p>\n<pre><code>const resources = performance.getEntriesByType('resource');<\/code><\/pre>\n<p>Als alternatief kun je metrics voor een asset ophalen door zijn volledige URL door te geven:<\/p>\n<pre><code>const resource = performance.getEntriesByName('https:\/\/test.com\/script.js');<\/code><\/pre>\n<p>Voorbeeldresultaat:<\/p>\n<pre><code>[\n  {\n    connectEnd: 195,\n    connectStart: 195,\n    decodedBodySize: 0,\n    domainLookupEnd: 195,\n    domainLookupStart: 195,\n    duration: 2,\n    encodedBodySize: 0,\n    entryType: \"resource\",\n    fetchStart: 195,\n    initiatorType: \"script\",\n    name: \"https:\/\/test.com\/script.js\",\n    nextHopProtocol: \"h3\",\n    redirectEnd: 0,\n    redirectStart: 0,\n    requestStart: 195,\n    responseEnd: 197,\n    responseStart: 197,\n    secureConnectionStart: 195,\n    serverTiming: [],\n    startTime: 195,\n    transferSize: 0,\n    workerStart: 195\n  }\n]<\/code><\/pre>\n<p>De volgende propertieskunnen onderzocht worden:<\/p>\n<ul>\n<li><strong>name<\/strong>: URL van de resource<\/li>\n<li><strong>entryType<\/strong>: &#8220;resource&#8221;<\/li>\n<li><strong>initiatorType<\/strong>: Hoe de resource werd gestart, zoals &#8220;script&#8221; of &#8220;link&#8221;<\/li>\n<li><strong>serverTiming<\/strong>: Een array van <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/PerformanceServerTiming\"><code>PerformanceServerTiming<\/code><\/a> objecten die door de server in de <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/HTTP\/Headers\/Server-Timing\">HTTP Server-Timing header<\/a> worden doorgegeven (je server-side toepassing zou metrics naar de client kunnen sturen voor verdere analyse).<\/li>\n<li><strong>startTime<\/strong>: Timestamp waarop het ophalen begon<\/li>\n<li><strong>nextHopProtocol<\/strong>: Gebruikt netwerkprotocol<\/li>\n<li><strong>workerStart<\/strong>: Timestamp v\u00f3\u00f3r het starten van een Progressive Web App Service Worker (0 als het verzoek niet onderschept wordt door een Service Worker)<\/li>\n<li><strong>redirectStart<\/strong>: Timestamp wanneer een redirect begon<\/li>\n<li><strong>redirectEnd<\/strong>: Timestamp na de laatste byte van het laatste redirect antwoord<\/li>\n<li><strong>fetchStart<\/strong>: Timestamp v\u00f3\u00f3r het ophalen van de resource<\/li>\n<li><strong>domainLookupStart<\/strong>: Timestamp voor een DNS lookup<\/li>\n<li><strong>domainLookupEnd<\/strong>: Timestamp na de DNS lookup<\/li>\n<li><strong>connectStart<\/strong>: Timestamp v\u00f3\u00f3r het tot stand brengen van een serververbinding<\/li>\n<li><strong>connectEnd<\/strong>: Timestamp na het tot stand brengen van een serververbinding<\/li>\n<li><strong>secureConnectionStart<\/strong>: Timestamp v\u00f3\u00f3r de SSL handshake<\/li>\n<li><strong>requestStart<\/strong>: Timestamp voordat de browser de resource aanvraagt<\/li>\n<li><strong>responseStart<\/strong>: Timestamp wanneer de browser de eerste byte gegevens ontvangt<\/li>\n<li><strong>responseEnd<\/strong>: Timestamp na ontvangst van de laatste byte of het sluiten van de verbinding<\/li>\n<li><strong>duration<\/strong>: Het verschil tussen startTime en responseEnd<\/li>\n<li><strong>transferSize<\/strong>: De resourcegrootte in bytes, inclusief de header en de gecomprimeerde body<\/li>\n<li><strong>encodedBodySize<\/strong>: De body van de resource in bytes v\u00f3\u00f3r het uitcomprimeren<\/li>\n<li><strong>decodedBodySize<\/strong>: Het bronlichaam in bytes na het uitcomprimeren<\/li>\n<\/ul>\n<p>Dit voorbeeldscript haalt alle Ajax verzoeken op die door de <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Fetch_API\">Fetch API<\/a> gestart zijn en geeft de totale overdrachtsgrootte en -duur:<\/p>\n<pre><code>const fetchAll = performance.getEntriesByType('resource')\n  .filter( r =&gt; r.initiatorType === 'fetch')\n  .reduce( (sum, current) =&gt; {\n    return {\n      transferSize: sum.transferSize += current.transferSize,\n      duration: sum.duration += current.duration\n    }\n  },\n  { transferSize: 0, duration: 0 }\n);<\/code><\/pre>\n<h2>Navigatie prestatiemeting<\/h2>\n<p>Netwerktijden voor het uitladen van de vorige pagina en het laden van de huidige pagina worden automatisch als een enkel object in de Performance buffer opgenomen, het\u00a0 <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/PerformanceNavigationTiming\"><code>PerformanceNavigationTiming<\/code><\/a> object.<\/p>\n<p>Extract ze tot een array met behulp van:<\/p>\n<pre><code>const pageTime = performance.getEntriesByType('navigation');<\/code><\/pre>\n<p>&#8230;of door de URL van de pagina door te geven aan <code>.getEntriesByName()<\/code>:<\/p>\n<pre><code>const pageTiming = performance.getEntriesByName(window.location);<\/code><\/pre>\n<p>De metric is identiek aan die voor <a href=\"https:\/\/docs.google.com\/document\/d\/1bO-CdqPOUVV0xaZkQMu5f5eHYxmV1RfoYVwPHXDRvyg\/edit#heading=h.k94hcflv9m3o\">resources<\/a>, maar bevat ook pagina-specifieke waarden:<\/p>\n<ul>\n<li><strong>entryType<\/strong>: Bv. &#8220;navigation&#8221;<\/li>\n<li><strong>type<\/strong>: Ofwel &#8220;navigate&#8221;, &#8220;reload&#8221;, &#8220;back_forward&#8221;, of &#8220;prerender&#8221;<\/li>\n<li><strong>redirectCount<\/strong>: Het aantal redirects<\/li>\n<li><strong>unloadEventStart<\/strong>: Timestamp v\u00f3\u00f3r de unload event van het vorige document<\/li>\n<li><strong>unloadEventEnd<\/strong>: Timestamp na de unload event van het vorige document<\/li>\n<li><strong>domInteractive<\/strong>: Timestamp wanneer de browser de HTML heeft geparst en het DOM heeft geconstrueerd<\/li>\n<li><strong>domContentLoadedEventStart<\/strong>: Timestamp voordat de DOMContentLoaded gebeurtenis van het document afgaat<\/li>\n<li><strong>domContentLoadedEventEnd<\/strong>: Timestamp nadat document&#8217;s DOMContentLoaded gebeurtenis afgaat<\/li>\n<li><strong>domComplete<\/strong>: Timestamp nadat DOM constructie en DOMContentLoaded events zijn voltooid<\/li>\n<li><strong>loadEventStart<\/strong>: Timestamp voordat het laadgebeurtenis van de pagina is afgegaan<\/li>\n<li><strong>loadEventEnd<\/strong>: Timestamp nadat het laadevent van de pagina is afgegaan en alle assets beschikbaar zijn<\/li>\n<\/ul>\n<p>Typische zaken zijn:<\/p>\n<ul>\n<li>Een lange vertraging tussen <strong>unloadEventEnd<\/strong> en <strong>domInteractive<\/strong>. Dit kan wijzen op een trage serverrespons.<\/li>\n<li>Een lange vertraging tussen <strong>domContentLoadedEventStart<\/strong> en <strong>domComplete<\/strong>. Dit kan erop wijzen dat de opstartscripts van de pagina te traag zijn.<\/li>\n<li>Een lange vertraging tussen <strong>domComplete<\/strong> en <strong>loadEventEnd<\/strong>. Dit kan erop wijzen dat de pagina te veel assets heeft of dat het te lang duurt voor er verschillende geladen zijn.<\/li>\n<\/ul>\n<h2>Recording en analyse van prestaties<\/h2>\n<p>Met de Performance API kun je real-world gebruiksgegevens verzamelen en die naar een server uploaden voor verdere analyse. Je <i>zou <\/i>een <a href=\"https:\/\/kinqsta.com\/nl\/blog\/google-analytics-alternatieven\/\">externe dienst zoals Google Analytics<\/a> kunnen gebruiken om de gegevens op te slaan, maar het risico bestaat dat het externe script geblokkeerd wordt of nieuwe prestatieproblemen introduceert. Je eigen oplossing kan aan je eisen aangepast worden om ervoor te zorgen dat monitoring geen invloed heeft op andere functionaliteit.<\/p>\n<p>Wees op je hoede voor situaties waarin statistieken niet bepaald kunnen worden &#8211; misschien omdat gebruikers op oude browsers zitten, JavaScript blokkeren, of achter een bedrijfs-proxy zitten. Begrijpen welke gegevens ontbreken kan beter werken dan veronderstellingen maken op basis van onvolledige informatie.<\/p>\n<p>Idealiter zullen je analysescripts de prestaties niet nadelig be\u00efnvloeden door ingewikkelde berekeningen uit te voeren of grote hoeveelheden gegevens te uploaden. Overweeg het gebruik van webworkers en het minimaliseren van het gebruik van synchrone localStorage calls. Het is altijd mogelijk om ruwe gegevens later in batch te verwerken.<\/p>\n<p>Wees tenslotte op je hoede voor uitschieters zoals zeer snelle of zeer trage apparaten en verbindingen die de statistieken nadelig be\u00efnvloeden. Bijvoorbeeld, als negen gebruikers een pagina in twee seconden laden maar de tiende een download van 60 seconden ervaart, komt de gemiddelde vertraging uit op bijna 8 seconden. Een meer realistische maatstaf is de mediaan (2 seconden) of het 90ste percentiel (9 op de 10 gebruikers ervaren een laadtijd van 2 seconden of minder).<\/p>\n<h2>Samenvatting<\/h2>\n<p><a href=\"https:\/\/kinqsta.com\/nl\/blog\/application-performance-monitoring\/\">Webprestaties<\/a> blijven een <a href=\"https:\/\/kinqsta.com\/blog\/frontend-developer\/\">belangrijke factor voor ontwikkelaars<\/a>. Gebruikers verwachten dat sites en toepassingen op de meeste apparaten responsief zijn. Ook zoekmachineoptimalisatie kan eronder lijden, want <a href=\"https:\/\/kinqsta.com\/nl\/blog\/core-web-vitals\/\">tragere sites worden in Google afgestraft<\/a>.<br \/>\n<br \/>\nEr zijn veel <a href=\"https:\/\/kinqsta.com\/nl\/blog\/application-performance-monitoring\/\">prestatie-monitoring tools<\/a>, maar de meeste beoordelen uitvoeringssnelheden aan de kant van de server of gebruiken een beperkt aantal goede clients om de browserrendering te beoordelen. De Performance API biedt een manier om \u00e9chte gebruikerscijfers te verzamelen die op geen enkele andere manier te berekenen zouden zijn.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>De Performance API meet het reactievermogen van je live web toepassing op echte gebruikers toestellen en netwerkverbindingen. Het kan helpen knelpunten in je client-side en server-side &#8230;<\/p>\n","protected":false},"author":188,"featured_media":45282,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[324,419,431,432,267,462],"topic":[848],"class_list":["post-45192","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-api","tag-browsers","tag-javascript","tag-node-js","tag-performance","tag-performance-testing","topic-javascript-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Een inleiding tot de Performance API<\/title>\n<meta name=\"description\" content=\"Leer over de responsiviteit van je live webapplicatie door echte gebruikersapparaten en netwerkverbindingen te meten met behulp van de Performance API.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/nl\/blog\/performance-api\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Een inleiding tot de Performance API\" \/>\n<meta property=\"og:description\" content=\"Leer over de responsiviteit van je live webapplicatie door echte gebruikersapparaten en netwerkverbindingen te meten met behulp van de Performance API.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/nl\/blog\/performance-api\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-23T14:26:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-22T10:56:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/08\/performance-api-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Craig Buckler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Leer over de responsiviteit van je live webapplicatie door echte gebruikersapparaten en netwerkverbindingen te meten met behulp van de Performance API.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/08\/performance-api-1.png\" \/>\n<meta name=\"twitter:creator\" content=\"@craigbuckler\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Craig Buckler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/performance-api\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/performance-api\/\"},\"author\":{\"name\":\"Craig Buckler\",\"@id\":\"https:\/\/kinqsta.com\/nl\/#\/schema\/person\/715d986404b06691ab3014e06596908e\"},\"headline\":\"Een inleiding tot de Performance API\",\"datePublished\":\"2022-08-23T14:26:31+00:00\",\"dateModified\":\"2023-05-22T10:56:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/performance-api\/\"},\"wordCount\":1978,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/performance-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/08\/performance-api-1.png\",\"keywords\":[\"API\",\"Browsers\",\"JavaScript\",\"node.js\",\"performance\",\"performance testing\"],\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/nl\/blog\/performance-api\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/performance-api\/\",\"url\":\"https:\/\/kinqsta.com\/nl\/blog\/performance-api\/\",\"name\":\"Een inleiding tot de Performance API\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/performance-api\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/performance-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/08\/performance-api-1.png\",\"datePublished\":\"2022-08-23T14:26:31+00:00\",\"dateModified\":\"2023-05-22T10:56:30+00:00\",\"description\":\"Leer over de responsiviteit van je live webapplicatie door echte gebruikersapparaten en netwerkverbindingen te meten met behulp van de Performance API.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/performance-api\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/nl\/blog\/performance-api\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/performance-api\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/08\/performance-api-1.png\",\"contentUrl\":\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/08\/performance-api-1.png\",\"width\":1460,\"height\":730,\"caption\":\"Een inleiding tot de Performance API\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/performance-api\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript tutorials\",\"item\":\"https:\/\/kinqsta.com\/nl\/onderwerpen\/javascript-tutorials\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Een inleiding tot de Performance API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/nl\/#website\",\"url\":\"https:\/\/kinqsta.com\/nl\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snelle, veilige, premium hostingoplossingen\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/nl\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinqsta.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\",\"https:\/\/x.com\/Kinsta_NL\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinqsta.com\/nl\/#\/schema\/person\/715d986404b06691ab3014e06596908e\",\"name\":\"Craig Buckler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinqsta.com\/nl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8e76011e66720bd2e3e24e164aa6f0b2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8e76011e66720bd2e3e24e164aa6f0b2?s=96&d=mm&r=g\",\"caption\":\"Craig Buckler\"},\"description\":\"Freelance UK web developer, writer, and speaker. Has been around a long time and rants about standards and performance.\",\"sameAs\":[\"https:\/\/craigbuckler.com\/\",\"https:\/\/www.linkedin.com\/in\/craigbuckler\",\"https:\/\/x.com\/craigbuckler\",\"https:\/\/www.youtube.com\/channel\/UCQwdl5oBTWGhifS6bRGADMQ\"],\"url\":\"https:\/\/kinqsta.com\/nl\/blog\/author\/craigbuckler\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Een inleiding tot de Performance API","description":"Leer over de responsiviteit van je live webapplicatie door echte gebruikersapparaten en netwerkverbindingen te meten met behulp van de Performance API.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinqsta.com\/nl\/blog\/performance-api\/","og_locale":"nl_NL","og_type":"article","og_title":"Een inleiding tot de Performance API","og_description":"Leer over de responsiviteit van je live webapplicatie door echte gebruikersapparaten en netwerkverbindingen te meten met behulp van de Performance API.","og_url":"https:\/\/kinqsta.com\/nl\/blog\/performance-api\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2022-08-23T14:26:31+00:00","article_modified_time":"2023-05-22T10:56:30+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/08\/performance-api-1.png","type":"image\/png"}],"author":"Craig Buckler","twitter_card":"summary_large_image","twitter_description":"Leer over de responsiviteit van je live webapplicatie door echte gebruikersapparaten en netwerkverbindingen te meten met behulp van de Performance API.","twitter_image":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/08\/performance-api-1.png","twitter_creator":"@craigbuckler","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Craig Buckler","Geschatte leestijd":"11 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/nl\/blog\/performance-api\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/nl\/blog\/performance-api\/"},"author":{"name":"Craig Buckler","@id":"https:\/\/kinqsta.com\/nl\/#\/schema\/person\/715d986404b06691ab3014e06596908e"},"headline":"Een inleiding tot de Performance API","datePublished":"2022-08-23T14:26:31+00:00","dateModified":"2023-05-22T10:56:30+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/nl\/blog\/performance-api\/"},"wordCount":1978,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/nl\/blog\/performance-api\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/08\/performance-api-1.png","keywords":["API","Browsers","JavaScript","node.js","performance","performance testing"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/nl\/blog\/performance-api\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/nl\/blog\/performance-api\/","url":"https:\/\/kinqsta.com\/nl\/blog\/performance-api\/","name":"Een inleiding tot de Performance API","isPartOf":{"@id":"https:\/\/kinqsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/nl\/blog\/performance-api\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/nl\/blog\/performance-api\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/08\/performance-api-1.png","datePublished":"2022-08-23T14:26:31+00:00","dateModified":"2023-05-22T10:56:30+00:00","description":"Leer over de responsiviteit van je live webapplicatie door echte gebruikersapparaten en netwerkverbindingen te meten met behulp van de Performance API.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/nl\/blog\/performance-api\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/nl\/blog\/performance-api\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinqsta.com\/nl\/blog\/performance-api\/#primaryimage","url":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/08\/performance-api-1.png","contentUrl":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/08\/performance-api-1.png","width":1460,"height":730,"caption":"Een inleiding tot de Performance API"},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/nl\/blog\/performance-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"JavaScript tutorials","item":"https:\/\/kinqsta.com\/nl\/onderwerpen\/javascript-tutorials\/"},{"@type":"ListItem","position":3,"name":"Een inleiding tot de Performance API"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/nl\/#website","url":"https:\/\/kinqsta.com\/nl\/","name":"Kinsta\u00ae","description":"Snelle, veilige, premium hostingoplossingen","publisher":{"@id":"https:\/\/kinqsta.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/nl\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinqsta.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","https:\/\/x.com\/Kinsta_NL","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinqsta.com\/nl\/#\/schema\/person\/715d986404b06691ab3014e06596908e","name":"Craig Buckler","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinqsta.com\/nl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8e76011e66720bd2e3e24e164aa6f0b2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8e76011e66720bd2e3e24e164aa6f0b2?s=96&d=mm&r=g","caption":"Craig Buckler"},"description":"Freelance UK web developer, writer, and speaker. Has been around a long time and rants about standards and performance.","sameAs":["https:\/\/craigbuckler.com\/","https:\/\/www.linkedin.com\/in\/craigbuckler","https:\/\/x.com\/craigbuckler","https:\/\/www.youtube.com\/channel\/UCQwdl5oBTWGhifS6bRGADMQ"],"url":"https:\/\/kinqsta.com\/nl\/blog\/author\/craigbuckler\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/posts\/45192","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/users\/188"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/comments?post=45192"}],"version-history":[{"count":11,"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/posts\/45192\/revisions"}],"predecessor-version":[{"id":45931,"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/posts\/45192\/revisions\/45931"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/45192\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/45192\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/45192\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/45192\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/45192\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/45192\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/45192\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/45192\/translations\/jp"},{"href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/45192\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/media\/45282"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/media?parent=45192"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/tags?post=45192"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/topic?post=45192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}