{"id":53219,"date":"2022-08-11T13:29:12","date_gmt":"2022-08-11T12:29:12","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=53219&#038;preview=true&#038;preview_id=53219"},"modified":"2023-08-21T09:10:49","modified_gmt":"2023-08-21T08:10:49","slug":"performance-api","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/performance-api\/","title":{"rendered":"Eine Einf\u00fchrung in die Performance-API"},"content":{"rendered":"<p>Die <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Performance_API\">Performance API<\/a> misst die Reaktionsf\u00e4higkeit deiner Live-Webanwendung auf realen Nutzerger\u00e4ten und Netzwerkverbindungen. Sie kann dabei helfen, Engp\u00e4sse in deinem client- und serverseitigen Code zu identifizieren:<\/p>\n<ul>\n<li><strong>user timing:<\/strong> Benutzerdefinierte Messung der Performance clientseitiger <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/\">JavaScript-Funktionen<\/a><\/li>\n<li><strong>paint timing:<\/strong> Browser-Rendering-Metriken<\/li>\n<li><strong>ressource timing:<\/strong> Ladeleistung von Assets und Ajax-Aufrufen<\/li>\n<li><strong>navigation timing:<\/strong> Metriken zum Laden von Seiten, einschlie\u00dflich Weiterleitungen, DNS-Lookups, DOM-Bereitschaft und mehr<\/li>\n<\/ul>\n<p>Die API l\u00f6st mehrere Probleme, die mit der typischen Performancebewertung verbunden sind:<\/p>\n<ol>\n<li>Entwickler testen ihre Anwendungen oft auf High-End-PCs, die mit einem schnellen Netzwerk verbunden sind. DevTools kann zwar langsamere Ger\u00e4te emulieren, aber es zeigt nicht immer Probleme auf, wenn die meisten Kunden ein zwei Jahre altes Handy benutzen, das mit dem Flughafen-WiFi verbunden ist.<\/li>\n<li>Optionen von Drittanbietern wie <a href=\"https:\/\/kinsta.com\/de\/blog\/verwendung-von-google-analytics\/\">Google Analytics<\/a> sind oft blockiert, was zu verzerrten Ergebnissen und Annahmen f\u00fchrt. Au\u00dferdem kann es in einigen L\u00e4ndern zu Datenschutzproblemen kommen.<\/li>\n<li>Die Performance API kann verschiedene Metriken besser messen als Methoden wie <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Date\"><code>Date()<\/code><\/a>.<\/li>\n<\/ol>\n<p><br \/>\nDie folgenden Abschnitte beschreiben, wie du die Performance API nutzen kannst. Einige <a href=\"https:\/\/kinsta.com\/de\/thema\/javascript-tutorials\/\">Kenntnisse \u00fcber JavaScript<\/a> und <a href=\"https:\/\/kinsta.com\/de\/blog\/webseiten-qeschwindigkeitstest\/\">Seitenlademetriken<\/a> werden empfohlen.<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>Verf\u00fcgbarkeit der Performance API<\/h2>\n<p>Die meisten modernen Browser unterst\u00fctzen die Performance API &#8211; auch IE10 und IE11 (sogar IE9 hat eine begrenzte Unterst\u00fctzung). Du kannst das Vorhandensein der API feststellen, indem du:<\/p>\n<pre><code>if ('performance' in window) {\n  \/\/ use Performance API\n}<\/code><\/pre>\n<p>Es ist nicht m\u00f6glich, die API vollst\u00e4ndig mit Polyfill zu f\u00fcllen, also sei vorsichtig bei fehlenden Browsern. Wenn 90 % deiner Nutzer\/innen mit dem Internet Explorer 8 surfen, w\u00fcrdest du nur 10 % der Kunden mit leistungsf\u00e4higeren Anwendungen messen.<\/p>\n<p>Die API kann in <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Web_Workers_API\/Using_web_workers\">Web Workern<\/a> verwendet werden, die komplexe Berechnungen in einem Hintergrund-Thread ausf\u00fchren, ohne den Browserbetrieb zu unterbrechen.<\/p>\n<p>Die meisten API-Methoden k\u00f6nnen in serverseitigem Node.js mit dem <a href=\"https:\/\/nodejs.org\/dist\/latest\/docs\/api\/perf_hooks.html\">Standardmodul perf_hooks<\/a> verwendet werden:<\/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 bietet die <a href=\"https:\/\/doc.deno.land\/deno\/stable\/~\/Performance\">Standard-Performance-API<\/a>:<\/p>\n<pre><code>\/\/ Deno performance\nconsole.log( performance.now() );<\/code><\/pre>\n<p>Um eine hochaufl\u00f6sende Zeitmessung zu erm\u00f6glichen, musst du Skripte mit der Berechtigung <code>--allow-hrtime<\/code> ausf\u00fchren:<\/p>\n<pre><code>deno run --allow-hrtime index.js<\/code><\/pre>\n<p>Die serverseitige Performance ist in der Regel einfacher zu beurteilen und zu verwalten, da sie von der Last, den CPUs, dem RAM, den Festplatten und den <a href=\"https:\/\/kinsta.com\/de\/blog\/festplatten-speicher-wordpress-hosting\/\">Grenzen der Cloud-Dienste<\/a> abh\u00e4ngt. Hardware-Upgrades oder Prozessmanagement-Optionen wie <a href=\"https:\/\/pm2.keymetrics.io\/\">PM2<\/a>, <a href=\"https:\/\/nodejs.org\/api\/cluster.html\">Clustering<\/a> und <a href=\"https:\/\/kubernetes.io\/\">Kubernetes<\/a> k\u00f6nnen effektiver sein als das Refactoring von Code.<\/p>\n<p>Aus diesem Grund konzentrieren sich die folgenden Abschnitte auf die clientseitige Performance.<\/p>\n<h2>Benutzerdefinierte Performancemessung<\/h2>\n<p>Die Performance API kann verwendet werden, um die Ausf\u00fchrungsgeschwindigkeit deiner Anwendungsfunktionen zu messen. Vielleicht hast du schon einmal Timing-Funktionen verwendet oder bist ihnen begegnet, indem du <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Date\"><code>Date()<\/code><\/a> benutzt hast:<\/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>Die Performance-API bietet zwei Hauptvorteile:<\/p>\n<ol>\n<li><strong>Bessere Genauigkeit:<\/strong> <code>Date()<\/code> misst auf die n\u00e4chste Millisekunde genau, aber die Performance API kann Bruchteile von Millisekunden messen (abh\u00e4ngig vom Browser).<\/li>\n<li><strong>Bessere Zuverl\u00e4ssigkeit:<\/strong> Der Benutzer oder das Betriebssystem k\u00f6nnen die Systemzeit \u00e4ndern, so dass die auf <code>Date()<\/code> basierenden Metriken nicht immer genau sind. Das bedeutet, dass deine Funktionen besonders langsam erscheinen k\u00f6nnen, wenn die Uhren vorgestellt werden!<\/li>\n<\/ol>\n<p>Die <code>Date()<\/code> Entsprechung ist <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Performance\/now\"><code>performance.now()<\/code><\/a> die einen hochaufl\u00f6senden Zeitstempel zur\u00fcckgibt, der auf Null gesetzt wird, wenn der Prozess, der f\u00fcr die Erstellung des Dokuments verantwortlich ist, beginnt (die Seite wurde 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>Eine nicht standardisierte <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Performance\/timeOrigin\"><code>performance.timeOrigin<\/code><\/a> Eigenschaft kann auch einen Zeitstempel vom 1. Januar 1970 zur\u00fcckgeben, obwohl dies im IE und in Deno nicht verf\u00fcgbar ist.<\/p>\n<p><code>performance.now()<\/code> wird unpraktisch, wenn du mehr als ein paar Messungen machst. Die Performance-API bietet einen Puffer, in dem du Ereignisse f\u00fcr eine sp\u00e4tere Analyse aufzeichnen kannst, indem du einen Labelnamen an <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Performance\/mark\"><code>performance.mark()<\/code><\/a> \u00fcbergibst:<\/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>Ein Array mit allen Markierungsobjekten im Performance-Puffer kann mit extrahiert werden:<\/p>\n<pre><code>const mark = performance.getEntriesByType('mark');<\/code><\/pre>\n<p>Beispielergebnis:<\/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>Die <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Performance\/measure\"><code>performance.measure()<\/code><\/a> Methode berechnet die Zeit zwischen zwei Marken und speichert sie ebenfalls im Performance-Puffer. Du \u00fcbergibst einen neuen Taktnamen, den Namen der Startmarke (oder null, um ab dem Laden der Seite zu messen) und den Namen der Endmarke (oder null, um die aktuelle Zeit zu messen):<\/p>\n<pre><code>performance.measure('init', 'start:init', 'end:init');<\/code><\/pre>\n<p>Ein <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/PerformanceMeasure\">PerformanceMeasure-Objekt<\/a> wird an den Puffer mit der berechneten Zeitdauer angeh\u00e4ngt. Um diesen Wert zu erhalten, kannst du entweder ein Array mit allen Messungen anfordern:<\/p>\n<pre><code>const measure = performance.getEntriesByType('measure');<\/code><\/pre>\n<p>oder eine Ma\u00dfnahme anhand ihres Namens abfragen:<\/p>\n<pre><code>performance.getEntriesByName('init');<\/code><\/pre>\n<p>Beispielergebnis:<\/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>Verwendung des Performance-Puffers<\/h3>\n<p>Der Performance-Puffer wird nicht nur f\u00fcr Markierungen und Messungen verwendet, sondern auch f\u00fcr die automatische Aufzeichnung der Navigations-, Ressourcen- und Paint-Zeiten (die wir sp\u00e4ter besprechen werden). Du kannst ein Array mit allen Eintr\u00e4gen im Puffer erhalten:<\/p>\n<pre><code>performance.getEntries();<\/code><\/pre>\n<p>Standardm\u00e4\u00dfig bieten die meisten Browser einen Puffer, der bis zu 150 Ressourcenmetriken speichert. Das sollte f\u00fcr die meisten Bewertungen ausreichen, aber du kannst die Puffergrenze bei Bedarf erh\u00f6hen oder verringern:<\/p>\n<pre><code>\/\/ record 500 metrics\nperformance.setResourceTimingBufferSize(500);<\/code><\/pre>\n<p>Markierungen k\u00f6nnen nach Namen gel\u00f6scht werden oder du kannst einen leeren Wert angeben, um alle Markierungen zu l\u00f6schen:<\/p>\n<pre><code>performance.clearMarks('start:init');<\/code><\/pre>\n<p>Ebenso k\u00f6nnen Ma\u00dfnahmen nach Namen oder mit einem leeren Wert gel\u00f6scht werden, um alle zu l\u00f6schen:<\/p>\n<pre><code>performance.clearMeasures();<\/code><\/pre>\n<h3>\u00dcberwachung von Performance-Puffer-Updates<\/h3>\n<p>Ein <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/PerformanceObserver\"><strong>PerformanceObserver<\/strong><\/a> kann \u00c4nderungen im Performance-Puffer \u00fcberwachen und eine Funktion ausf\u00fchren, wenn bestimmte Ereignisse eintreten. Die Syntax wird dir vertraut sein, wenn du schon einmal mit <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/MutationObserver\"><strong>MutationObserver<\/strong><\/a> gearbeitet hast, um auf DOM-Aktualisierungen zu reagieren oder mit <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/IntersectionObserver\"><strong>IntersectionObserver<\/strong><\/a> um zu erkennen, wenn Elemente in den Viewport gescrollt werden.<\/p>\n<p>Du musst eine Beobachterfunktion mit zwei Parametern definieren:<\/p>\n<ol>\n<li>ein Array von Beobachtereintr\u00e4gen, die erkannt wurden, und<\/li>\n<li>das Beobachterobjekt. Falls n\u00f6tig, kann ihre <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/PerformanceObserver\/disconnect\"><code>disconnect()<\/code><\/a> Methode aufgerufen werden, um den Beobachter zu 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>Die Funktion wird an ein neues PerformanceObserver-Objekt \u00fcbergeben. Seiner <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/PerformanceObserver\/observe\"><code>observe()<\/code><\/a> Methode wird ein Array von Performance-Buffer entryTypes \u00fcbergeben, die beobachtet werden sollen:<\/p>\n<pre><code>let observer = new PerformanceObserver( performanceCallback );\nobserver.observe({ entryTypes: ['mark', 'measure'] });<\/code><\/pre>\n<p>In diesem Beispiel wird beim Hinzuf\u00fcgen einer neuen Marke oder Ma\u00dfnahme die Funktion <code>performanceCallback()<\/code> ausgef\u00fchrt. Sie protokolliert hier zwar nur Meldungen, k\u00f6nnte aber auch dazu verwendet werden, einen Daten-Upload auszul\u00f6sen oder weitere Berechnungen durchzuf\u00fchren.<\/p>\n<h3>Messung der Paint-Performance<\/h3>\n<p>Die Paint Timing API ist nur in clientseitigem JavaScript verf\u00fcgbar und zeichnet automatisch zwei Kennzahlen auf, die f\u00fcr <a href=\"https:\/\/kinsta.com\/de\/blog\/core-web-vitals\/\">Core Web Vitals<\/a> wichtig sind:<\/p>\n<ol>\n<li><strong>first-paint:<\/strong> Der Browser hat begonnen, die Seite zu zeichnen.<\/li>\n<li><strong>first-contentful-paint:<\/strong> Der Browser hat das erste signifikante Element des DOM-Inhalts gezeichnet, z. B. eine \u00dcberschrift oder ein Bild.<\/li>\n<\/ol>\n<p>Diese k\u00f6nnen aus dem Performance-Puffer in ein Array extrahiert werden:<\/p>\n<pre><code>const paintTimes = performance.getEntriesByType('paint');<\/code><\/pre>\n<p>Sei vorsichtig, wenn du diesen Vorgang ausf\u00fchrst, bevor die Seite vollst\u00e4ndig geladen ist; die Werte sind dann noch nicht fertig. Entweder warte auf das <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Window\/load_event\"><code>window.load<\/code><\/a> Ereignis oder verwende einen <a href=\"https:\/\/docs.google.com\/document\/d\/1bO-CdqPOUVV0xaZkQMu5f5eHYxmV1RfoYVwPHXDRvyg\/edit#heading=h.y0ea1dh8xmx\"><code>PerformanceObserver<\/code><\/a> um <code>paint<\/code> entryTypes zu \u00fcberwachen.<\/p>\n<p>Beispielergebnis:<\/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>Ein langsames First-Paint\u00a0 wird oft durch Rendering-blockierende CSS oder JavaScript verursacht. Die L\u00fccke zum First-Contentful-Paint kann gro\u00df sein, wenn der Browser ein gro\u00dfes Bild herunterladen oder <a href=\"https:\/\/kinsta.com\/de\/blog\/render-blocking-javascript-css-eliminieren\/\">komplexe Elemente rendern<\/a> muss.<\/p>\n<h2>Messung der Ressourcen-Performance<\/h2>\n<p>Die Netzwerkzeiten f\u00fcr Ressourcen wie Bilder, Stylesheets und JavaScript-Dateien werden automatisch im Performance-Puffer aufgezeichnet. Du kannst zwar wenig tun, um Probleme mit der Netzwerkgeschwindigkeit zu l\u00f6sen (au\u00dfer die Dateigr\u00f6\u00dfe zu reduzieren), aber es kann helfen, Probleme mit gr\u00f6\u00dferen Assets, langsamen Ajax-Antworten oder schlecht funktionierenden Skripten von Drittanbietern aufzuzeigen.<\/p>\n<p>Ein Array von <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/PerformanceResourceTiming\">PerformanceResourceTiming-Metriken<\/a> kann aus dem Puffer extrahiert werden:<\/p>\n<pre><code>const resources = performance.getEntriesByType('resource');<\/code><\/pre>\n<p>Alternativ kannst du Metriken f\u00fcr ein Asset abrufen, indem du seine vollst\u00e4ndige URL angibst:<\/p>\n<pre><code>const resource = performance.getEntriesByName('https:\/\/test.com\/script.js');<\/code><\/pre>\n<p>Beispielergebnis:<\/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>Die folgenden Eigenschaften k\u00f6nnen untersucht werden:<\/p>\n<ul>\n<li><strong>name<\/strong>: URL der Ressource<\/li>\n<li><strong>entryType<\/strong>: &#8222;Ressource&#8220;<\/li>\n<li><strong>initiatorType<\/strong>: Wie die Ressource initiiert wurde, z. B. &#8222;Skript&#8220; oder &#8222;Link&#8220;<\/li>\n<li><strong>serverTiming<\/strong>: Ein Array von <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/PerformanceServerTiming\"><code>PerformanceServerTiming<\/code><\/a> Objekten, die vom Server im <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/HTTP\/Headers\/Server-Timing\">HTTP Server-Timing-Header<\/a> \u00fcbergeben werden (deine serverseitige Anwendung k\u00f6nnte Metriken zur weiteren Analyse an den Client senden)<\/li>\n<li><strong>startTime<\/strong>: Zeitstempel, wann der Abruf begann<\/li>\n<li><strong>nextHopProtocol<\/strong>: Verwendetes Netzwerkprotokoll<\/li>\n<li><strong>workerStart<\/strong>: Zeitstempel vor dem Start eines Progressive Web App Service Workers (0, wenn die Anfrage nicht von einem Service Worker abgefangen wird)<\/li>\n<li><strong>redirectStart<\/strong>: Zeitstempel, wann eine Weiterleitung gestartet wurde<\/li>\n<li><strong>redirectEnd<\/strong>: Zeitstempel nach dem letzten Byte der letzten Redirect-Antwort<\/li>\n<li><strong>fetchStart<\/strong>: Zeitstempel vor dem Abruf der Ressource<\/li>\n<li><strong>domainLookupStart<\/strong>: Zeitstempel vor einem DNS-Lookup<\/li>\n<li><strong>domainLookupEnd<\/strong>: Zeitstempel nach dem DNS-Lookup<\/li>\n<li><strong>connectStart<\/strong>: Zeitstempel vor dem Aufbau einer Serververbindung<\/li>\n<li><strong>connectEnd<\/strong>: Zeitstempel nach dem Aufbau einer Serververbindung<\/li>\n<li><strong>secureConnectionStart<\/strong>: Zeitstempel vor dem SSL-Handshake<\/li>\n<li><strong>requestStart<\/strong>: Zeitstempel, bevor der Browser die Ressource anfordert<\/li>\n<li><strong>responseStart<\/strong>: Zeitstempel, wenn der Browser das erste Byte der Daten erh\u00e4lt<\/li>\n<li><strong>responseEnd<\/strong>: Zeitstempel nach dem Empfang des letzten Bytes oder dem Schlie\u00dfen der Verbindung<\/li>\n<li><strong>duration<\/strong>: Die Differenz zwischen startTime und responseEnd<\/li>\n<li><strong>transferSize<\/strong>: Die Gr\u00f6\u00dfe der Ressource in Bytes einschlie\u00dflich Header und komprimiertem Body<\/li>\n<li><strong>encodedBodySize<\/strong>: Der Body der Ressource in Bytes vor der Dekomprimierung<\/li>\n<li><strong>decodedBodySize<\/strong>: Der Body der Ressource in Bytes nach der Dekomprimierung<\/li>\n<\/ul>\n<p>Dieses Beispielskript ruft alle Ajax-Anfragen ab, die von der <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Fetch_API\">Fetch-API<\/a> initiiert wurden, und gibt die Gesamtgr\u00f6\u00dfe und Dauer der \u00dcbertragung zur\u00fcck:<\/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>Messung der Navigations-Performance<\/h2>\n<p>Die Netzwerkzeiten f\u00fcr das Entladen der vorherigen Seite und das Laden der aktuellen Seite werden automatisch im Performance-Puffer als ein einziges <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/PerformanceNavigationTiming\"><code>PerformanceNavigationTiming<\/code><\/a> objekt.<\/p>\n<p>Extrahiere sie mit in ein Array:<\/p>\n<pre><code>const pageTime = performance.getEntriesByType('navigation');<\/code><\/pre>\n<p>&#8230;oder indem du die URL der Seite an <code>.getEntriesByName()<\/code> \u00fcbergibst:<\/p>\n<pre><code>const pageTiming = performance.getEntriesByName(window.location);<\/code><\/pre>\n<p>Die Metriken sind identisch mit denen f\u00fcr <a href=\"https:\/\/docs.google.com\/document\/d\/1bO-CdqPOUVV0xaZkQMu5f5eHYxmV1RfoYVwPHXDRvyg\/edit#heading=h.k94hcflv9m3o\">Ressourcen<\/a>, enthalten aber auch seitenbezogene Werte:<\/p>\n<ul>\n<li><strong>entryType<\/strong>: Z.B. &#8222;Navigation&#8220;<\/li>\n<li><strong>type<\/strong>: Entweder &#8222;navigate&#8220;, &#8222;reload&#8220;, &#8222;back_forward&#8220; oder &#8222;prerender&#8220;<\/li>\n<li><strong>redirectCount<\/strong>: Die Anzahl der Weiterleitungen<\/li>\n<li><strong>unloadEventStart<\/strong>: Zeitstempel vor dem unload-Ereignis des vorherigen Dokuments<\/li>\n<li><strong>unloadEventEnd<\/strong>: Zeitstempel nach dem unload-Ereignis des vorherigen Dokuments<\/li>\n<li><strong>domInteractive<\/strong>: Zeitstempel, wenn der Browser das HTML geparst und das DOM aufgebaut hat<\/li>\n<li><strong>domContentLoadedEventStart<\/strong>: Zeitstempel, bevor das Ereignis DOMContentLoaded des Dokuments ausgel\u00f6st wird<\/li>\n<li><strong>domContentLoadedEventEnd<\/strong>: Zeitstempel, nachdem das DOMContentLoaded-Ereignis des Dokuments ausgel\u00f6st wurde<\/li>\n<li><strong>domComplete<\/strong>: Zeitstempel nach Abschluss der DOM-Konstruktion und der DOMContentLoaded-Ereignisse<\/li>\n<li><strong>loadEventStart<\/strong>: Zeitstempel, bevor das Ereignis &#8222;Seite laden&#8220; ausgel\u00f6st wurde<\/li>\n<li><strong>loadEventEnd<\/strong>: Zeitstempel, nachdem das Ereignis zum Laden der Seite ausgel\u00f6st wurde und alle Assets verf\u00fcgbar sind<\/li>\n<\/ul>\n<p>Typische Ausgaben sind:<\/p>\n<ul>\n<li>Eine lange Verz\u00f6gerung zwischen <strong>unloadEventEnd<\/strong> und <strong>domInteractive<\/strong>. Dies k\u00f6nnte ein Hinweis auf eine langsame Serverantwort sein.<\/li>\n<li>Eine lange Verz\u00f6gerung zwischen <strong>domContentLoadedEventStart<\/strong> und <strong>domComplete<\/strong>. Dies k\u00f6nnte darauf hinweisen, dass die Skripte zum Starten der Seite zu langsam sind.<\/li>\n<li>Eine lange Verz\u00f6gerung zwischen <strong>domComplete<\/strong> und <strong>loadEventEnd<\/strong>. Dies k\u00f6nnte darauf hindeuten, dass die Seite zu viele Assets hat oder einige zu lange zum Laden brauchen.<\/li>\n<\/ul>\n<h2>Performance-Aufzeichnung und -Analyse<\/h2>\n<p>Die Performance-API erm\u00f6glicht es dir, reale Nutzungsdaten zu sammeln und sie zur weiteren Analyse auf einen Server hochzuladen. Du <i>k\u00f6nntest <\/i>einen <a href=\"https:\/\/kinsta.com\/de\/blog\/google-analytics-alternativen\/\">Drittanbieterdienst wie Google Analytics<\/a> nutzen, um die Daten zu speichern, aber es besteht die Gefahr, dass das Skript des Drittanbieters blockiert wird oder neue Leistungsprobleme verursacht. Deine eigene L\u00f6sung kann an deine Anforderungen angepasst werden, um sicherzustellen, dass die \u00dcberwachung keine Auswirkungen auf andere Funktionen hat.<\/p>\n<p>Sei vorsichtig bei Situationen, in denen keine Statistiken ermittelt werden k\u00f6nnen &#8211; vielleicht weil die Nutzer\/innen alte Browser benutzen, JavaScript blockieren oder sich hinter einem Firmen-Proxy befinden. Zu verstehen, welche Daten fehlen, kann fruchtbarer sein, als Annahmen zu treffen, die auf unvollst\u00e4ndigen Informationen beruhen.<\/p>\n<p>Im Idealfall beeintr\u00e4chtigen deine Analyseskripte die Performance nicht, indem sie komplexe Berechnungen durchf\u00fchren oder gro\u00dfe Datenmengen hochladen. Erw\u00e4ge den Einsatz von Web Workern und minimiere die Verwendung von synchronen localStorage-Aufrufen. Es ist immer m\u00f6glich, die Rohdaten sp\u00e4ter im Stapel zu verarbeiten.<\/p>\n<p>Schlie\u00dflich solltest du dich vor Ausrei\u00dfern wie sehr schnellen oder sehr langsamen Ger\u00e4ten und Verbindungen h\u00fcten, die sich negativ auf die Statistiken auswirken. Wenn zum Beispiel neun Nutzer eine Seite in zwei Sekunden laden, der zehnte aber 60 Sekunden braucht, betr\u00e4gt die durchschnittliche Latenzzeit fast 8 Sekunden. Eine realistischere Kennzahl ist der Median (2 Sekunden) oder das 90. Perzentil (9 von 10 Nutzern erleben eine Ladezeit von 2 Sekunden oder weniger).<\/p>\n<h2>Zusammenfassung<\/h2>\n<p>Die <a href=\"https:\/\/kinsta.com\/de\/blog\/application-performance-monitoring\/\">Web-Performance<\/a> bleibt ein <a href=\"https:\/\/kinsta.com\/de\/blog\/frontend-entwickler\/\">wichtiger Faktor f\u00fcr Entwickler\/innen<\/a>. Die Nutzer erwarten, dass Websites und Anwendungen auf den meisten Ger\u00e4ten ansprechend sind. Auch die Suchmaschinenoptimierung kann beeintr\u00e4chtigt werden, da <a href=\"https:\/\/kinsta.com\/de\/blog\/core-web-vitals\/\">langsamere Websites bei Google herabgestuft werden<\/a>.<br \/>\n<br \/>\nEs gibt viele <a href=\"https:\/\/kinsta.com\/de\/blog\/application-performance-monitoring\/\">Tools zur Performance\u00fcberwachung<\/a>, aber die meisten bewerten die serverseitigen Ausf\u00fchrungsgeschwindigkeiten oder verwenden eine begrenzte Anzahl von f\u00e4higen Clients, um das Browser-Rendering zu beurteilen. Die Performance API bietet eine M\u00f6glichkeit, echte Nutzerkennzahlen zu sammeln, die auf andere Weise nicht berechnet werden k\u00f6nnen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Die Performance API misst die Reaktionsf\u00e4higkeit deiner Live-Webanwendung auf realen Nutzerger\u00e4ten und Netzwerkverbindungen. Sie kann dabei helfen, Engp\u00e4sse in deinem client- und serverseitigen Code zu identifizieren: &#8230;<\/p>\n","protected":false},"author":188,"featured_media":53220,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[351,453,465,466,257,487],"topic":[925,952],"class_list":["post-53219","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-api","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>Eine Einf\u00fchrung in die Performance-API<\/title>\n<meta name=\"description\" content=\"Lerne, die Reaktionsf\u00e4higkeit deiner Live-Webanwendung auf echten Nutzerger\u00e4ten und Netzwerkverbindungen mit der Performance API zu messen.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/performance-api\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Eine Einf\u00fchrung in die Performance-API\" \/>\n<meta property=\"og:description\" content=\"Lerne, die Reaktionsf\u00e4higkeit deiner Live-Webanwendung auf echten Nutzerger\u00e4ten und Netzwerkverbindungen mit der Performance API zu messen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/performance-api\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-11T12:29:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-21T08:10:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/08\/performance-api.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=\"Lerne, die Reaktionsf\u00e4higkeit deiner Live-Webanwendung auf echten Nutzerger\u00e4ten und Netzwerkverbindungen mit der Performance API zu messen.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/08\/performance-api.png\" \/>\n<meta name=\"twitter:creator\" content=\"@craigbuckler\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Craig Buckler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"10\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/performance-api\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/performance-api\/\"},\"author\":{\"name\":\"Craig Buckler\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/715d986404b06691ab3014e06596908e\"},\"headline\":\"Eine Einf\u00fchrung in die Performance-API\",\"datePublished\":\"2022-08-11T12:29:12+00:00\",\"dateModified\":\"2023-08-21T08:10:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/performance-api\/\"},\"wordCount\":1955,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/performance-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/08\/performance-api.png\",\"keywords\":[\"API\",\"Browsers\",\"JavaScript\",\"node.js\",\"performance\",\"performance testing\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/performance-api\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/performance-api\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/performance-api\/\",\"name\":\"Eine Einf\u00fchrung in die Performance-API\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/performance-api\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/performance-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/08\/performance-api.png\",\"datePublished\":\"2022-08-11T12:29:12+00:00\",\"dateModified\":\"2023-08-21T08:10:49+00:00\",\"description\":\"Lerne, die Reaktionsf\u00e4higkeit deiner Live-Webanwendung auf echten Nutzerger\u00e4ten und Netzwerkverbindungen mit der Performance API zu messen.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/performance-api\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/performance-api\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/performance-api\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/08\/performance-api.png\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/08\/performance-api.png\",\"width\":1460,\"height\":730,\"caption\":\"Eine Einf\u00fchrung in die Performance-API\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/performance-api\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript-Tutorials\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/javascript-tutorials\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Eine Einf\u00fchrung in die Performance-API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"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:\/\/kinsta.com\/de\/#\/schema\/person\/715d986404b06691ab3014e06596908e\",\"name\":\"Craig Buckler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/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:\/\/kinsta.com\/de\/blog\/author\/craigbuckler\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Eine Einf\u00fchrung in die Performance-API","description":"Lerne, die Reaktionsf\u00e4higkeit deiner Live-Webanwendung auf echten Nutzerger\u00e4ten und Netzwerkverbindungen mit der Performance API zu messen.","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:\/\/kinsta.com\/de\/blog\/performance-api\/","og_locale":"de_DE","og_type":"article","og_title":"Eine Einf\u00fchrung in die Performance-API","og_description":"Lerne, die Reaktionsf\u00e4higkeit deiner Live-Webanwendung auf echten Nutzerger\u00e4ten und Netzwerkverbindungen mit der Performance API zu messen.","og_url":"https:\/\/kinsta.com\/de\/blog\/performance-api\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2022-08-11T12:29:12+00:00","article_modified_time":"2023-08-21T08:10:49+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/08\/performance-api.png","type":"image\/png"}],"author":"Craig Buckler","twitter_card":"summary_large_image","twitter_description":"Lerne, die Reaktionsf\u00e4higkeit deiner Live-Webanwendung auf echten Nutzerger\u00e4ten und Netzwerkverbindungen mit der Performance API zu messen.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/08\/performance-api.png","twitter_creator":"@craigbuckler","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Craig Buckler","Gesch\u00e4tzte Lesezeit":"10\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/performance-api\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/performance-api\/"},"author":{"name":"Craig Buckler","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/715d986404b06691ab3014e06596908e"},"headline":"Eine Einf\u00fchrung in die Performance-API","datePublished":"2022-08-11T12:29:12+00:00","dateModified":"2023-08-21T08:10:49+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/performance-api\/"},"wordCount":1955,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/performance-api\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/08\/performance-api.png","keywords":["API","Browsers","JavaScript","node.js","performance","performance testing"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/performance-api\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/performance-api\/","url":"https:\/\/kinsta.com\/de\/blog\/performance-api\/","name":"Eine Einf\u00fchrung in die Performance-API","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/performance-api\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/performance-api\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/08\/performance-api.png","datePublished":"2022-08-11T12:29:12+00:00","dateModified":"2023-08-21T08:10:49+00:00","description":"Lerne, die Reaktionsf\u00e4higkeit deiner Live-Webanwendung auf echten Nutzerger\u00e4ten und Netzwerkverbindungen mit der Performance API zu messen.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/performance-api\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/performance-api\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/performance-api\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/08\/performance-api.png","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/08\/performance-api.png","width":1460,"height":730,"caption":"Eine Einf\u00fchrung in die Performance-API"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/performance-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"JavaScript-Tutorials","item":"https:\/\/kinsta.com\/de\/thema\/javascript-tutorials\/"},{"@type":"ListItem","position":3,"name":"Eine Einf\u00fchrung in die Performance-API"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","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:\/\/kinsta.com\/de\/#\/schema\/person\/715d986404b06691ab3014e06596908e","name":"Craig Buckler","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/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:\/\/kinsta.com\/de\/blog\/author\/craigbuckler\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/53219","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/188"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=53219"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/53219\/revisions"}],"predecessor-version":[{"id":53293,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/53219\/revisions\/53293"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/53219\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/53219\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/53219\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/53219\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/53219\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/53219\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/53219\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/53219\/translations\/jp"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/53219\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/53220"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=53219"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=53219"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=53219"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}