{"id":60526,"date":"2022-08-11T13:29:17","date_gmt":"2022-08-11T12:29:17","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=60526&#038;preview=true&#038;preview_id=60526"},"modified":"2023-10-11T15:44:24","modified_gmt":"2023-10-11T14:44:24","slug":"api-performance","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/api-performance\/","title":{"rendered":"Introduction \u00e0 l&rsquo;API de performance"},"content":{"rendered":"<p><a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Performance_API\">L&rsquo;API Performance<\/a> mesure la r\u00e9activit\u00e9 de votre application web en direct sur des p\u00e9riph\u00e9riques d&rsquo;utilisateurs et des connexions r\u00e9seau r\u00e9els. Elle peut aider \u00e0 identifier les goulots d&rsquo;\u00e9tranglement dans votre code c\u00f4t\u00e9 client et c\u00f4t\u00e9 serveur avec :<\/p>\n<ul>\n<li><strong>luser timing :<\/strong> Mesure personnalis\u00e9e des performances des <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-javascript\/\">fonctions JavaScript<\/a> c\u00f4t\u00e9 client<\/li>\n<li><strong>paint timing :<\/strong> Mesures du rendu du navigateur<\/li>\n<li><strong>resource timing :<\/strong> Performances de chargement des ressources et des appels Ajax<\/li>\n<li><strong>navigation timing :<\/strong> Mesures du chargement de la page, y compris les redirections, les consultations DNS, la disponibilit\u00e9 du DOM, etc<\/li>\n<\/ul>\n<p>L&rsquo;API aborde plusieurs probl\u00e8mes associ\u00e9s \u00e0 l&rsquo;\u00e9valuation typique des performances :<\/p>\n<ol>\n<li>Les d\u00e9veloppeurs testent souvent les applications sur des PC haut de gamme connect\u00e9s \u00e0 un r\u00e9seau rapide. DevTools peut \u00e9muler des appareils plus lents, mais il ne mettra pas toujours en \u00e9vidence les probl\u00e8mes du monde r\u00e9el lorsque la majorit\u00e9 des clients utilisent un mobile de deux ans connect\u00e9 au WiFi de l&rsquo;a\u00e9roport.<\/li>\n<li>Les options tierces telles que <a href=\"https:\/\/kinsta.com\/fr\/blog\/comment-utliser-google-analytics\/\">Google Analytics<\/a> sont souvent bloqu\u00e9es, ce qui entra\u00eene des r\u00e9sultats et des hypoth\u00e8ses biais\u00e9s. Vous pouvez \u00e9galement rencontrer des probl\u00e8mes de confidentialit\u00e9 dans certains pays.<\/li>\n<li>L&rsquo;API de performance peut \u00e9valuer avec pr\u00e9cision diverses mesures mieux que des m\u00e9thodes telles que <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Date\"><code>Date()<\/code><\/a>.<\/li>\n<\/ol>\n<p><br \/>\nLes sections suivantes d\u00e9crivent les fa\u00e7ons dont vous pouvez utiliser l&rsquo;API Performance. Une certaine <a href=\"https:\/\/kinsta.com\/fr\/sujets\/tutoriel-javascript\/\">connaissance de JavaScript<\/a> et des <a href=\"https:\/\/kinsta.com\/fr\/blog\/test-vitesse-site-web\/\">mesures de chargement de pages<\/a> est recommand\u00e9e.<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>Disponibilit\u00e9 de l&rsquo;API Performance<\/h2>\n<p>La plupart des navigateurs modernes prennent en charge l&rsquo;API Performance, y compris IE10 et IE11 (m\u00eame IE9 a une prise en charge limit\u00e9e). Vous pouvez d\u00e9tecter la pr\u00e9sence de l&rsquo;API en utilisant :<\/p>\n<pre><code>if ('performance' in window) {\n  \/\/ use Performance API\n}<\/code><\/pre>\n<p>Il n&rsquo;est pas possible de polyfilliser enti\u00e8rement l&rsquo;API, alors m\u00e9fiez-vous des navigateurs manquants. Si 90 % de vos utilisateurs naviguent all\u00e8grement avec Internet Explorer 8, vous ne mesurerez que 10 % des clients avec des applications plus performantes.<\/p>\n<p>L&rsquo;API peut \u00eatre utilis\u00e9e dans les <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Web_Workers_API\/Using_web_workers\">Web Workers<\/a>, qui offrent un moyen d&rsquo;ex\u00e9cuter des calculs complexes dans un thread d&rsquo;arri\u00e8re-plan sans interrompre les op\u00e9rations du navigateur.<\/p>\n<p>La plupart des m\u00e9thodes API peuvent \u00eatre utilis\u00e9es dans Node.js c\u00f4t\u00e9 serveur avec le <a href=\"https:\/\/nodejs.org\/dist\/latest\/docs\/api\/perf_hooks.html\">module perf_hooks<\/a> standard :<\/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 fournit <a href=\"https:\/\/doc.deno.land\/deno\/stable\/~\/Performance\">l&rsquo;API Performance<\/a> standard :<\/p>\n<pre><code>\/\/ Deno performance\nconsole.log( performance.now() );<\/code><\/pre>\n<p>Vous devrez ex\u00e9cuter des scripts avec la permission de <code>--allow-hrtime<\/code> pour activer la mesure du temps \u00e0 haute r\u00e9solution :<\/p>\n<pre><code>deno run --allow-hrtime index.js<\/code><\/pre>\n<p>Les performances c\u00f4t\u00e9 serveur sont g\u00e9n\u00e9ralement plus faciles \u00e0 \u00e9valuer et \u00e0 g\u00e9rer car elles d\u00e9pendent de la charge, des processeurs, de la RAM, des disques durs et des <a href=\"https:\/\/kinsta.com\/fr\/blog\/espace-disque-hebergement-wordpress\/\">limites des services cloud<\/a>. Les mises \u00e0 niveau mat\u00e9rielles ou les options de gestion des processus telles que <a href=\"https:\/\/pm2.keymetrics.io\/\">PM2<\/a>, le <a href=\"https:\/\/nodejs.org\/api\/cluster.html\">clustering<\/a> et <a href=\"https:\/\/kubernetes.io\/\">Kubernetes<\/a> peuvent \u00eatre plus efficaces que la refactorisation du code.<\/p>\n<p>C&rsquo;est pour cette raison que les sections suivantes se concentrent sur les performances c\u00f4t\u00e9 client.<\/p>\n<h2>Mesure personnalis\u00e9e des performances<\/h2>\n<p>L&rsquo;API Performance peut \u00eatre utilis\u00e9e pour chronom\u00e9trer la vitesse d&rsquo;ex\u00e9cution des fonctions de votre application. Vous avez peut-\u00eatre utilis\u00e9 ou rencontr\u00e9 des fonctions de chronom\u00e9trage utilisant <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>L&rsquo;API Performance offre deux avantages principaux :<\/p>\n<ol>\n<li><strong>Meilleure pr\u00e9cision :<\/strong> <code>Date()<\/code> mesure \u00e0 la milliseconde pr\u00e8s, mais l&rsquo;API Performance peut mesurer des fractions de milliseconde (selon le navigateur).<\/li>\n<li><strong>Meilleure fiabilit\u00e9 :<\/strong> L&rsquo;utilisateur ou le syst\u00e8me d&rsquo;exploitation peut modifier l&rsquo;heure du syst\u00e8me. Les mesures bas\u00e9es sur <code>Date()<\/code> ne seront donc pas toujours exactes. Cela signifie que vos fonctions pourraient sembler particuli\u00e8rement lentes lorsque les horloges avancent !<\/li>\n<\/ol>\n<p>L&rsquo;\u00e9quivalent de <code>Date()<\/code> est <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Performance\/now\"><code>performance.now()<\/code><\/a> qui renvoie un horodatage haute r\u00e9solution qui est mis \u00e0 z\u00e9ro lorsque le processus responsable de la cr\u00e9ation du document d\u00e9marre (la page s&rsquo;est charg\u00e9e) :<\/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>Une propri\u00e9t\u00e9 non standard <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Performance\/timeOrigin\"><code>performance.timeOrigin<\/code><\/a> peut \u00e9galement renvoyer un horodatage \u00e0 partir du 1er janvier 1970, bien que cela ne soit pas disponible dans IE et Deno.<\/p>\n<p><code>performance.now()<\/code> devient peu pratique lorsque l&rsquo;on effectue plus de quelques mesures. L&rsquo;API Performance fournit un tampon o\u00f9 vous pouvez enregistrer l&rsquo;\u00e9v\u00e9nement pour une analyse ult\u00e9rieure en passant un nom de label \u00e0 <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>Un tableau de tous les objets de marque dans le tampon Performance peut \u00eatre extrait en utilisant :<\/p>\n<pre><code>const mark = performance.getEntriesByType('mark');<\/code><\/pre>\n<p>Exemple de r\u00e9sultat :<\/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>La m\u00e9thode <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Performance\/measure\"><code>performance.measure()<\/code><\/a> calcule le temps entre deux marques et le stocke \u00e9galement dans le tampon Performance. Vous passez un nouveau nom de mesure, le nom de la marque de d\u00e9but (ou null pour mesurer \u00e0 partir du chargement de la page), et le nom de la marque de fin (ou null pour mesurer \u00e0 l&rsquo;heure actuelle) :<\/p>\n<pre><code>performance.measure('init', 'start:init', 'end:init');<\/code><\/pre>\n<p>Un <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/PerformanceMeasure\">objet PerformanceMeasure<\/a> est ajout\u00e9 au tampon avec la dur\u00e9e calcul\u00e9e. Pour obtenir cette valeur, vous pouvez soit demander un tableau de toutes les mesures :<\/p>\n<pre><code>const measure = performance.getEntriesByType('measure');<\/code><\/pre>\n<p>soit demander une mesure par son nom :<\/p>\n<pre><code>performance.getEntriesByName('init');<\/code><\/pre>\n<p>Exemple de r\u00e9sultat :<\/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>Utilisation du tampon de performance<\/h3>\n<p>En plus des marques et des mesures, le tampon Performance est utilis\u00e9 pour enregistrer automatiquement le navigation timing, le resource timing et le paint timing (dont nous parlerons plus tard). Vous pouvez obtenir un tableau de toutes les entr\u00e9es du tampon :<\/p>\n<pre><code>performance.getEntries();<\/code><\/pre>\n<p>Par d\u00e9faut, la plupart des navigateurs fournissent un tampon qui stocke jusqu&rsquo;\u00e0 150 mesures de ressources. Cela devrait \u00eatre suffisant pour la plupart des \u00e9valuations, mais vous pouvez augmenter ou diminuer la limite du tampon si n\u00e9cessaire :<\/p>\n<pre><code>\/\/ record 500 metrics\nperformance.setResourceTimingBufferSize(500);<\/code><\/pre>\n<p>Les marques peuvent \u00eatre effac\u00e9es par nom ou vous pouvez sp\u00e9cifier une valeur vide pour effacer toutes les marques :<\/p>\n<pre><code>performance.clearMarks('start:init');<\/code><\/pre>\n<p>De m\u00eame, les mesures peuvent \u00eatre effac\u00e9es par leur nom ou par une valeur vide pour tout effacer :<\/p>\n<pre><code>performance.clearMeasures();<\/code><\/pre>\n<h3>Suivi des mises \u00e0 jour du tampon de performance<\/h3>\n<p><a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/PerformanceObserver\"><strong>PerformanceObserver<\/strong><\/a> peut surveiller les modifications du tampon de performance et ex\u00e9cuter une fonction lorsque des \u00e9v\u00e9nements sp\u00e9cifiques se produisent. La syntaxe vous sera famili\u00e8re si vous avez utilis\u00e9 <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/MutationObserver\"><strong>MutationObserver<\/strong><\/a> pour r\u00e9pondre aux mises \u00e0 jour du DOM ou <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/IntersectionObserver\"><strong>IntersectionObserver<\/strong><\/a> pour d\u00e9tecter lorsque des \u00e9l\u00e9ments d\u00e9filent dans la fen\u00eatre d&rsquo;affichage.<\/p>\n<p>Vous devez d\u00e9finir une fonction d&rsquo;observateur avec deux param\u00e8tres :<\/p>\n<ol>\n<li>un tableau d&rsquo;entr\u00e9es d&rsquo;observateurs qui ont \u00e9t\u00e9 d\u00e9tect\u00e9es, et<\/li>\n<li>l&rsquo;objet observateur. Si n\u00e9cessaire, sa m\u00e9thode <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/PerformanceObserver\/disconnect\"><code>disconnect()<\/code><\/a> peut \u00eatre appel\u00e9e pour arr\u00eater l&rsquo;observateur.<\/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>La fonction est transmise \u00e0 un nouvel objet PerformanceObserver. Sa m\u00e9thode <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/PerformanceObserver\/observe\"><code>observe()<\/code><\/a> re\u00e7oit un tableau de Performance buffer entryTypes \u00e0 observer :<\/p>\n<pre><code>let observer = new PerformanceObserver( performanceCallback );\nobserver.observe({ entryTypes: ['mark', 'measure'] });<\/code><\/pre>\n<p>Dans cet exemple, l&rsquo;ajout d&rsquo;une nouvelle marque ou mesure ex\u00e9cute la fonction <code>performanceCallback()<\/code>. Bien qu&rsquo;elle ne fasse qu&rsquo;enregistrer des messages ici, elle pourrait \u00eatre utilis\u00e9e pour d\u00e9clencher un t\u00e9l\u00e9chargement de donn\u00e9es ou effectuer d&rsquo;autres calculs.<\/p>\n<h3>Mesure de Paint Performance<\/h3>\n<p>L&rsquo;API Paint Timing n&rsquo;est disponible que dans le JavaScript c\u00f4t\u00e9 client et enregistre automatiquement deux mesures importantes pour <a href=\"https:\/\/kinsta.com\/fr\/blog\/optimiser-site-core-web-vitals\/\">Core Web Vitals<\/a> :<\/p>\n<ol>\n<li><strong>first-paint :<\/strong> Le navigateur a commenc\u00e9 \u00e0 dessiner la page.<\/li>\n<li><strong>first-contentful-paint :<\/strong> Le navigateur a dessin\u00e9 le premier \u00e9l\u00e9ment significatif du contenu DOM, tel qu&rsquo;un titre ou une image.<\/li>\n<\/ol>\n<p>Celles-ci peuvent \u00eatre extraites du tampon de performance vers un tableau :<\/p>\n<pre><code>const paintTimes = performance.getEntriesByType('paint');<\/code><\/pre>\n<p>M\u00e9fiez-vous de l&rsquo;ex\u00e9cution de cette op\u00e9ration avant le chargement complet de la page ; les valeurs ne seront pas pr\u00eates. Attendez l&rsquo;\u00e9v\u00e9nement <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Window\/load_event\"><code>window.load<\/code><\/a> ou utilisez un <a href=\"https:\/\/docs.google.com\/document\/d\/1bO-CdqPOUVV0xaZkQMu5f5eHYxmV1RfoYVwPHXDRvyg\/edit#heading=h.y0ea1dh8xmx\"><code>PerformanceObserver<\/code><\/a> pour surveiller <code>paint<\/code> entryTypes.<\/p>\n<p>Exemple de r\u00e9sultat :<\/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>Une premi\u00e8re peinture lente est souvent caus\u00e9e par des CSS ou JavaScript bloquant le rendu. L&rsquo;\u00e9cart par rapport au first-paint peut \u00eatre important si le navigateur doit t\u00e9l\u00e9charger une grande image ou <a href=\"https:\/\/kinsta.com\/fr\/blog\/eliminer-javascript-css-bloquant-rendu\/\">rendre des \u00e9l\u00e9ments complexes<\/a>.<\/p>\n<h2>Mesure des performances des ressources<\/h2>\n<p>Les temps de r\u00e9seau pour les ressources telles que les images, les feuilles de style et les fichiers JavaScript sont automatiquement enregistr\u00e9s dans le tampon de performance. Bien qu&rsquo;il n&rsquo;y ait pas grand-chose \u00e0 faire pour r\u00e9soudre les probl\u00e8mes de vitesse du r\u00e9seau (\u00e0 part r\u00e9duire la taille des fichiers), cela peut aider \u00e0 mettre en \u00e9vidence les probl\u00e8mes li\u00e9s aux ressources volumineuses, aux r\u00e9ponses Ajax lentes ou aux scripts tiers qui fonctionnent mal.<\/p>\n<p>Un tableau de mesures <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/PerformanceResourceTiming\">PerformanceResourceTiming<\/a> peut \u00eatre extrait du tampon en utilisant :<\/p>\n<pre><code>const resources = performance.getEntriesByType('resource');<\/code><\/pre>\n<p>Vous pouvez \u00e9galement r\u00e9cup\u00e9rer les mesures d&rsquo;une ressource en passant son URL compl\u00e8te :<\/p>\n<pre><code>const resource = performance.getEntriesByName('https:\/\/test.com\/script.js');<\/code><\/pre>\n<p>Exemple de r\u00e9sultat :<\/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>Les propri\u00e9t\u00e9s suivantes peuvent \u00eatre examin\u00e9es :<\/p>\n<ul>\n<li><strong>name<\/strong>: URL de la ressource<\/li>\n<li><strong>entryType <\/strong>: \u00ab resource \u00bb<\/li>\n<li><strong>initiatorType <\/strong>: Comment la ressource a \u00e9t\u00e9 initi\u00e9e, par exemple \u00ab script \u00bb ou \u00ab link \u00bb<\/li>\n<li><strong>serverTiming <\/strong>: Un tableau d&rsquo;objets <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/PerformanceServerTiming\"><code>PerformanceServerTiming<\/code><\/a> objets transmis par le serveur dans <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/HTTP\/Headers\/Server-Timing\">l&rsquo;en-t\u00eate HTTP Server-Timing<\/a> (votre application c\u00f4t\u00e9 serveur pourrait envoyer des mesures au client pour une analyse plus approfondie)<\/li>\n<li><strong>startTime <\/strong>: Horodatage du d\u00e9but de l&rsquo;extraction<\/li>\n<li><strong>nextHopProtocol <\/strong>: Protocole r\u00e9seau utilis\u00e9<\/li>\n<li><strong>workerStart <\/strong>: Horodatage avant le d\u00e9marrage d&rsquo;un Service Worker de Progressive Web App (0 si la requ\u00eate n&rsquo;est pas intercept\u00e9e par un Service Worker)<\/li>\n<li><strong>redirectStart <\/strong>: Horodatage quand une redirection a commenc\u00e9<\/li>\n<li><strong>redirectEnd <\/strong>: Horodatage apr\u00e8s le dernier octet de la derni\u00e8re r\u00e9ponse de redirection<\/li>\n<li><strong>fetchStart <\/strong>: Horodatage avant la r\u00e9cup\u00e9ration de la ressource<\/li>\n<li><strong>domainLookupStart <\/strong>: Horodatage avant une recherche DNS<\/li>\n<li><strong>domainLookupEnd <\/strong>: Horodatage apr\u00e8s la recherche DNS<\/li>\n<li><strong>connectStart <\/strong>: Horodatage avant l&rsquo;\u00e9tablissement d&rsquo;une connexion au serveur<\/li>\n<li><strong>connectEnd <\/strong>: Horodatage apr\u00e8s l&rsquo;\u00e9tablissement d&rsquo;une connexion au serveur<\/li>\n<li><strong>secureConnectionStart <\/strong>: Horodatage avant la poign\u00e9e de main SSL<\/li>\n<li><strong>requestStart <\/strong>: Horodatage avant que le navigateur ne demande la ressource<\/li>\n<li><strong>responseStart <\/strong>: Horodatage lorsque le navigateur re\u00e7oit le premier octet de donn\u00e9es<\/li>\n<li><strong>responseEnd <\/strong>: Horodatage apr\u00e8s la r\u00e9ception du dernier octet ou la fermeture de la connexion<\/li>\n<li><strong>duration <\/strong>: La diff\u00e9rence entre startTime et responseEnd<\/li>\n<li><strong>transferSize <\/strong>: La taille de la ressource en octets, y compris l&rsquo;en-t\u00eate et le corps compress\u00e9<\/li>\n<li><strong>encodedBodySize <\/strong>: Le corps de la ressource en octets avant d\u00e9compression<\/li>\n<li><strong>decodedBodySize <\/strong>: Le corps de la ressource en octets apr\u00e8s d\u00e9compression<\/li>\n<\/ul>\n<p>Ce script d&rsquo;exemple r\u00e9cup\u00e8re toutes les requ\u00eates Ajax initi\u00e9es par <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Fetch_API\">l&rsquo;API Fetch<\/a> et renvoie la taille et la dur\u00e9e totales du transfert :<\/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>Mesure des performances de navigation<\/h2>\n<p>Les temps de r\u00e9seau pour le d\u00e9chargement de la page pr\u00e9c\u00e9dente et le chargement de la page actuelle sont automatiquement enregistr\u00e9s dans le tampon des performances sous la forme d&rsquo;un objet unique <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/PerformanceNavigationTiming\"><code>PerformanceNavigationTiming<\/code><\/a> objet.<\/p>\n<p>Vous pouvez l&rsquo;extraire dans un tableau en utilisant :<\/p>\n<pre><code>const pageTime = performance.getEntriesByType('navigation');<\/code><\/pre>\n<p>&#8230;ou en passant l&rsquo;URL de la page \u00e0 <code>.getEntriesByName()<\/code>:<\/p>\n<pre><code>const pageTiming = performance.getEntriesByName(window.location);<\/code><\/pre>\n<p>Les mesures sont identiques \u00e0 celles des <a href=\"https:\/\/docs.google.com\/document\/d\/1bO-CdqPOUVV0xaZkQMu5f5eHYxmV1RfoYVwPHXDRvyg\/edit#heading=h.k94hcflv9m3o\">ressources<\/a> mais incluent \u00e9galement des valeurs sp\u00e9cifiques \u00e0 la page :<\/p>\n<ul>\n<li><strong>entryType <\/strong>: Par exemple, \u00ab navigation \u00bb<\/li>\n<li><strong>type <\/strong>: Soit \u00ab navigate \u00bb, \u00ab reload \u00bb, \u00ab back_forward \u00bb ou \u00ab prerender \u00bb<\/li>\n<li><strong>redirectCount <\/strong>: Le nombre de redirections<\/li>\n<li><strong>unloadEventStart <\/strong>: Horodatage avant l&rsquo;\u00e9v\u00e9nement de d\u00e9chargement du document pr\u00e9c\u00e9dent<\/li>\n<li><strong>unloadEventEnd <\/strong>: Horodatage apr\u00e8s l&rsquo;\u00e9v\u00e9nement de d\u00e9chargement du document pr\u00e9c\u00e9dent<\/li>\n<li><strong>domInteractive <\/strong>: Horodatage lorsque le navigateur a analys\u00e9 le HTML et construit le DOM<\/li>\n<li><strong>domContentLoadedEventStart <\/strong>: Horodatage avant le d\u00e9clenchement de l&rsquo;\u00e9v\u00e9nement DOMContentLoaded du document<\/li>\n<li><strong>domContentLoadedEventEnd <\/strong>: Horodatage apr\u00e8s la fin de l&rsquo;\u00e9v\u00e9nement DOMContentLoaded du document<\/li>\n<li><strong>domComplete <\/strong>: Horodatage apr\u00e8s la fin de la construction du DOM et des \u00e9v\u00e9nements DOMContentLoaded<\/li>\n<li><strong>loadEventStart <\/strong>: Horodatage avant que l&rsquo;\u00e9v\u00e9nement de chargement de page ne soit d\u00e9clench\u00e9<\/li>\n<li><strong>loadEventEnd <\/strong>: Horodatage apr\u00e8s l&rsquo;\u00e9v\u00e9nement de chargement de la page et que toutes les actifs sont disponibles<\/li>\n<\/ul>\n<p>Les probl\u00e8mes typiques comprennent :<\/p>\n<ul>\n<li>Un long d\u00e9lai entre <strong>unloadEventEnd<\/strong> et <strong>domInteractive<\/strong>. Cela pourrait indiquer une r\u00e9ponse lente du serveur.<\/li>\n<li>Un long d\u00e9lai entre <strong>domContentLoadedEventStart<\/strong> et <strong>domComplete<\/strong>. Cela pourrait indiquer que les scripts de d\u00e9marrage de la page sont trop lents.<\/li>\n<li>Un long d\u00e9lai entre <strong>domComplete<\/strong> et <strong>loadEventEnd<\/strong>. Cela peut indiquer que la page comporte trop de ressources ou que plusieurs d&rsquo;entre elles mettent trop de temps \u00e0 se charger.<\/li>\n<\/ul>\n<h2>Enregistrement et analyse des performances<\/h2>\n<p>L&rsquo;API Performance vous permet de rassembler des donn\u00e9es d&rsquo;utilisation r\u00e9elles et de les t\u00e9l\u00e9charger sur un serveur pour une analyse plus approfondie. Vous <i>pourriez <\/i>utiliser un <a href=\"https:\/\/kinsta.com\/fr\/blog\/alternatives-google-analytics\/\">service tiers tel que Google Analytics<\/a> pour stocker les donn\u00e9es, mais il y a un risque que le script tiers soit bloqu\u00e9 ou qu&rsquo;il introduise de nouveaux probl\u00e8mes de performance. Votre propre solution peut \u00eatre adapt\u00e9e \u00e0 vos besoins pour garantir que la surveillance n&rsquo;a pas d&rsquo;impact sur les autres fonctionnalit\u00e9s.<\/p>\n<p>M\u00e9fiez-vous des situations dans lesquelles les statistiques ne peuvent \u00eatre d\u00e9termin\u00e9es &#8211; peut-\u00eatre parce que les utilisateurs utilisent de vieux navigateurs, bloquent JavaScript ou se trouvent derri\u00e8re un proxy d&rsquo;entreprise. Comprendre les donn\u00e9es manquantes peut \u00eatre plus fructueux que de faire des hypoth\u00e8ses bas\u00e9es sur des informations incompl\u00e8tes.<\/p>\n<p>Id\u00e9alement, vos scripts d&rsquo;analyse n&rsquo;auront pas d&rsquo;impact n\u00e9gatif sur les performances en ex\u00e9cutant des calculs complexes ou en t\u00e9l\u00e9chargeant de grandes quantit\u00e9s de donn\u00e9es. Envisagez d&rsquo;utiliser des workers web et de minimiser l&rsquo;utilisation des appels synchrones de localStorage. Il est toujours possible de traiter les donn\u00e9es brutes par lots ult\u00e9rieurement.<\/p>\n<p>Enfin, m\u00e9fiez-vous des valeurs aberrantes telles que les appareils et les connexions tr\u00e8s rapides ou tr\u00e8s lentes qui ont un impact n\u00e9gatif sur les statistiques. Par exemple, si neuf utilisateurs chargent une page en deux secondes mais que le dixi\u00e8me subit un t\u00e9l\u00e9chargement de 60 secondes, la latence moyenne s&rsquo;\u00e9l\u00e8ve \u00e0 pr\u00e8s de 8 secondes. Une mesure plus r\u00e9aliste est le chiffre m\u00e9dian (2 secondes) ou le 90e percentile (9 utilisateurs sur 10 connaissent un temps de chargement de 2 secondes ou moins).<\/p>\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Les <a href=\"https:\/\/kinsta.com\/fr\/blog\/application-surveillance-performance\/\">performances Web<\/a> restent un <a href=\"https:\/\/kinsta.com\/fr\/blog\/developpeur-frontend\/\">facteur critique pour les d\u00e9veloppeurs<\/a>. Les utilisateurs s&rsquo;attendent \u00e0 ce que les sites et les applications soient r\u00e9actifs sur la plupart des appareils. L&rsquo;optimisation des moteurs de recherche peut \u00e9galement \u00eatre affect\u00e9e car <a href=\"https:\/\/kinsta.com\/fr\/blog\/optimiser-site-core-web-vitals\/\">les sites plus lents sont d\u00e9class\u00e9s dans Google<\/a>.<br \/>\n<br \/>\nIl existe de nombreux <a href=\"https:\/\/kinsta.com\/fr\/blog\/application-surveillance-performance\/\">outils de surveillance des performances<\/a>, mais la plupart \u00e9valuent les vitesses d&rsquo;ex\u00e9cution c\u00f4t\u00e9 serveur ou utilisent un nombre limit\u00e9 de clients capables pour juger du rendu du navigateur. L&rsquo;API Performance offre un moyen de rassembler les mesures r\u00e9elles des utilisateurs qu&rsquo;il serait impossible de calculer autrement.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>L&rsquo;API Performance mesure la r\u00e9activit\u00e9 de votre application web en direct sur des p\u00e9riph\u00e9riques d&rsquo;utilisateurs et des connexions r\u00e9seau r\u00e9els. Elle peut aider \u00e0 identifier les &#8230;<\/p>\n","protected":false},"author":188,"featured_media":60546,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[405,481,535,518,63,516],"topic":[953,980],"class_list":["post-60526","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-tutoriel-javascript"],"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>Introduction \u00e0 l&#039;API de performance<\/title>\n<meta name=\"description\" content=\"Apprenez \u00e0 mesurer la r\u00e9activit\u00e9 de votre application web en production sur des appareils d&#039;utilisateurs r\u00e9els et des connexions r\u00e9seau \u00e0 l&#039;aide de l&#039;API Performance.\" \/>\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\/fr\/blog\/api-performance\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introduction \u00e0 l&#039;API de performance\" \/>\n<meta property=\"og:description\" content=\"Apprenez \u00e0 mesurer la r\u00e9activit\u00e9 de votre application web en production sur des appareils d&#039;utilisateurs r\u00e9els et des connexions r\u00e9seau \u00e0 l&#039;aide de l&#039;API Performance.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/api-performance\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-11T12:29:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-11T14:44:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/08\/api-performance.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=\"Apprenez \u00e0 mesurer la r\u00e9activit\u00e9 de votre application web en production sur des appareils d&#039;utilisateurs r\u00e9els et des connexions r\u00e9seau \u00e0 l&#039;aide de l&#039;API Performance.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/08\/api-performance.png\" \/>\n<meta name=\"twitter:creator\" content=\"@craigbuckler\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Craig Buckler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/api-performance\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/api-performance\/\"},\"author\":{\"name\":\"Craig Buckler\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/715d986404b06691ab3014e06596908e\"},\"headline\":\"Introduction \u00e0 l&rsquo;API de performance\",\"datePublished\":\"2022-08-11T12:29:17+00:00\",\"dateModified\":\"2023-10-11T14:44:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/api-performance\/\"},\"wordCount\":2428,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/api-performance\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/08\/api-performance.png\",\"keywords\":[\"API\",\"Browsers\",\"JavaScript\",\"node.js\",\"performance\",\"performance testing\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/api-performance\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/api-performance\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/api-performance\/\",\"name\":\"Introduction \u00e0 l'API de performance\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/api-performance\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/api-performance\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/08\/api-performance.png\",\"datePublished\":\"2022-08-11T12:29:17+00:00\",\"dateModified\":\"2023-10-11T14:44:24+00:00\",\"description\":\"Apprenez \u00e0 mesurer la r\u00e9activit\u00e9 de votre application web en production sur des appareils d'utilisateurs r\u00e9els et des connexions r\u00e9seau \u00e0 l'aide de l'API Performance.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/api-performance\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/api-performance\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/api-performance\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/08\/api-performance.png\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/08\/api-performance.png\",\"width\":1460,\"height\":730,\"caption\":\"Introduction \u00e0 l'API de performance\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/api-performance\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutoriels JavaScript\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/tutoriel-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Introduction \u00e0 l&rsquo;API de performance\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"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\/fr\/#\/schema\/person\/715d986404b06691ab3014e06596908e\",\"name\":\"Craig Buckler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/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\/fr\/blog\/author\/craigbuckler\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Introduction \u00e0 l'API de performance","description":"Apprenez \u00e0 mesurer la r\u00e9activit\u00e9 de votre application web en production sur des appareils d'utilisateurs r\u00e9els et des connexions r\u00e9seau \u00e0 l'aide de l'API Performance.","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\/fr\/blog\/api-performance\/","og_locale":"fr_FR","og_type":"article","og_title":"Introduction \u00e0 l'API de performance","og_description":"Apprenez \u00e0 mesurer la r\u00e9activit\u00e9 de votre application web en production sur des appareils d'utilisateurs r\u00e9els et des connexions r\u00e9seau \u00e0 l'aide de l'API Performance.","og_url":"https:\/\/kinsta.com\/fr\/blog\/api-performance\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2022-08-11T12:29:17+00:00","article_modified_time":"2023-10-11T14:44:24+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/08\/api-performance.png","type":"image\/png"}],"author":"Craig Buckler","twitter_card":"summary_large_image","twitter_description":"Apprenez \u00e0 mesurer la r\u00e9activit\u00e9 de votre application web en production sur des appareils d'utilisateurs r\u00e9els et des connexions r\u00e9seau \u00e0 l'aide de l'API Performance.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/08\/api-performance.png","twitter_creator":"@craigbuckler","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Craig Buckler","Dur\u00e9e de lecture estim\u00e9e":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/api-performance\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/api-performance\/"},"author":{"name":"Craig Buckler","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/715d986404b06691ab3014e06596908e"},"headline":"Introduction \u00e0 l&rsquo;API de performance","datePublished":"2022-08-11T12:29:17+00:00","dateModified":"2023-10-11T14:44:24+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/api-performance\/"},"wordCount":2428,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/api-performance\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/08\/api-performance.png","keywords":["API","Browsers","JavaScript","node.js","performance","performance testing"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/api-performance\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/api-performance\/","url":"https:\/\/kinsta.com\/fr\/blog\/api-performance\/","name":"Introduction \u00e0 l'API de performance","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/api-performance\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/api-performance\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/08\/api-performance.png","datePublished":"2022-08-11T12:29:17+00:00","dateModified":"2023-10-11T14:44:24+00:00","description":"Apprenez \u00e0 mesurer la r\u00e9activit\u00e9 de votre application web en production sur des appareils d'utilisateurs r\u00e9els et des connexions r\u00e9seau \u00e0 l'aide de l'API Performance.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/api-performance\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/api-performance\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/api-performance\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/08\/api-performance.png","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/08\/api-performance.png","width":1460,"height":730,"caption":"Introduction \u00e0 l'API de performance"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/api-performance\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Tutoriels JavaScript","item":"https:\/\/kinsta.com\/fr\/sujets\/tutoriel-javascript\/"},{"@type":"ListItem","position":3,"name":"Introduction \u00e0 l&rsquo;API de performance"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","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\/fr\/#\/schema\/person\/715d986404b06691ab3014e06596908e","name":"Craig Buckler","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/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\/fr\/blog\/author\/craigbuckler\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/60526","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/188"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=60526"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/60526\/revisions"}],"predecessor-version":[{"id":60549,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/60526\/revisions\/60549"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/60526\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/60526\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/60526\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/60526\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/60526\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/60526\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/60526\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/60526\/translations\/jp"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/60526\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/60546"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=60526"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=60526"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=60526"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}