L10N: Translation of all Performance APIs/Interfaces/Properties/Methods (#232)

* L10N: Translation of the Performance API pages

* L10N: Translation of the Performance Timeline API pages

* Fix typo, style and KS elements

* UPDATE: Update content of code blocks with the Guideline

* L10N: Translation of the PerformanceElementTiming pages

* L10N: Translation of the PerformanceEntry pages

* L10N: Translation of the PerformanceEventTiming interface

* L10N: Translation of the PerformanceFrameTiming interface

* L10N: Translation of the PerformanceLongTaskTiming interface

* L10N: Translation of the PerformanceMark interface

* L10N: Translation of the PerformanceMeasure interface

* L10N: Translation of the PerformanceNavigation interface

* L10N: Translation of the PerformanceNavigationTiming interface

* L10N: Translation of the PerformanceObserver interface

* L10N: Translation of the PerformanceObserverEntryList interface

* L10N: Translation of the PerformancePaintTiming interface

* L10N: Translation of the PerformanceResourceTiming interface

* L10N: Translation of the PerformanceServerTiming interface

* L10N: Translation of the PerformanceTiming interface

* FIX: Fix KS error on PerformanceTiming interface

* FIX: Change some summary and typo

* FIX: Fix CSS and sentences on PerformanceObserverEntryList interface

* FIX: Update KS + Change {{event()}} by link on PerformanceEventTiming interface

* Review - Landing page

* Review 'using' page - rm domxref

* Perforamance_timeline review: rm domxref, minor rewording, missing translation

* Review timeline guide page, rm domxref, rm vars in pre

* Review - PerformanceElementTiming - rm domxref + trailing spaces

* Review - PerformanceElementTiming.id - rm xref macros + trailing spaces

* Review - PerformanceElementTiming.identifier - rm xref macros + trailing spaces

* Review - PerformanceElementTiming  - rm xref macros + trailing spaces

* Review - PET.intersectionrect - rm domxref / minor typos

* Undo spec table mixup

* Review - loadTime - rm domxref

* Review - naturalheight - rm domxref / trailing spaces

* Review - naturalwidth - rm domxref / trailing spaces

* Review - renderTime - rm domxref / trailing spaces / minor rewordings

* Review - tojson  - rm domxref / trailing spaces

* Review - url  - rm domxref / trailing spaces

* Review - duration  - rm domxref / minor rewordings

* Review - entryType  - rm domxref / minor rewordings

* Review - performanceentry index - rm domxref / minor rewordings

* Review PerformanceEntry.name - rm xref macros

* Review PerformanceEntry.startTime - rm xref macros

* Review PerformanceEntry.toJSON - rm xref macros

* Review PerformanceEventTiming - rm domxref

* Review PerformanceFrameTiming - rm xref macros

* Review PerformanceLongTaskTiming.attribution - rm xref macros

* Review PerformanceLongTaskTiming - rm xref macros

* Review - PerformanceMark - rm domxref

* Review - PerformanceMeasure - rm domxref

* Review - PerformanceNavigation - rm domxref

* Review - PerformanceNavigation.redirectcount - rm domxref

* Review - PerformanceNavigation.type - rm domxref

* Review - PerformanceNavigationTiming.domComplete - rm domxref

* Review - PerformanceNavigationTiming.domContentLoadedEvent - rm domxref

* Review - PerformanceNavigationTiming.domContentLoadedEventStart - rm domxref

* Review - PerformanceNavigationTiming.domInteractive - rm domxref

* Review - PerformanceNavigationTiming - rm domxref

* Review - PerformanceNavigationTiming.loadEventEnd - rm domxref

* Review - PerformanceNavigationTiming.loadEventStart - rm domxref

* Review - PerformanceNavigationTiming.redirectCount - rm domxref

* Review - PerformanceNavigationTiming.toJSON - rm domxref

* Review - PerformanceNavigationTiming.type - rm domxref

* Review - PerformanceNavigationTiming.unloadEventEnd - rm domxref

* Review - PerformanceNavigationTiming.unloadEventStart - rm domxref

* Remove DOMxRef for PerformanceTiming

* Remove DOMxRef for PerformanceServerTiming

* Remove DOMxRef for PerformanceResourceTiming

* Review - PerformanceObserver.disconnect - rm domxref

* Review - PerformanceObserver - rm domxref

* Review - PerformanceObserver.observe - rm domxref

* Review - PerformanceObserver.PerformanceObserver() - rm domxref

* Review - PerformanceObserver.takeRecords() - rm domxref

* Review - PerformanceObserverEntryList.getEntries() - rm domxref

* Review - PerformanceObserver.getEntriesByName() - rm domxref

* Review - PerformanceObserver.getEntriesByType() - rm domxref

* Review - PerformanceObserverEntryList - rm domxref

* Review - PerformanceResourceTiming.connectEnd - rm domxref

* Review - PerformanceResourceTiming.connectStart

* Review - PerformanceResourceTiming.decodedBodySize

* Review - PerformanceResourceTiming.domainLookupEnd

* Review - PerformanceResourceTiming.domainLookupStart

* Review - PerformanceResourceTiming.encodedBodySize

* Review - PerformanceResourceTiming.fetchStart

* Review - PerformanceResourceTiming

* Review - PerformanceResourceTiming.iniatorType

* Review - PerformanceResourceTiming.nextHopProtocol

* Review - PerformanceResourceTiming.redirectEnd

* Review - PerformanceResourceTiming.redirectStart

* Review - PerformanceResourceTiming.requestStart

* Review - PerformanceResourceTiming.responseEnd

* Review - PerformanceResourceTiming.responseStart

* Review - PerformanceResourceTiming.secureConnectionStart

* Review - PerformanceResourceTiming.toJSON()

* Review - PerformanceResourceTiming.transferSize

* Review - PerformanceResourceTiming.workerStart

* Review - PerformanceServerTiming.description

* Review - PerformanceServerTiming.duration

* Review - PerformanceServerTiming

* Review - PerformanceServerTiming.name

* Review - PerformanceServerTiming.toJSON()

* Review - PerformanceTiming.domComplete - rm Event

* Review - PerformanceTiming.domContentLoadedEventStart - rm Event

* Review - PerformanceTiming.domInteractive - rm Event

* Review - PerformanceTiming.domLoading - rm Event

* Review - PerformanceTiming - minor typos + thead spec

* Review - PerformanceTiming.loadEventEnd - rm Event

* Review - PerformanceTiming.loadEventStart - rm Event

* Review - PerformanceTiming.unloadEventEnd - rm Event

* Review - PerformanceTiming.unloadEventStart - rm Event

* Remove final domxref / rm var in examples

Co-authored-by: julieng <julien.gattelier@gmail.com>

11 files changed, 711 insertions, 0 deletions

diff --git a/files/fr/web/api/performanceelementtiming/element/index.html b/files/fr/web/api/performanceelementtiming/element/index.html
new file mode 100644
index 0000000000..fc8b8119f5
--- /dev/null
+++ b/files/fr/web/api/performanceelementtiming/element/index.html
@@ -0,0 +1,62 @@
+---
+title: PerformanceElementTiming.element
+slug: Web/API/PerformanceElementTiming/element
+tags:
+  - API
+  - Property
+  - Propriété
+  - Reference
+  - element
+  - PerformanceElementTiming
+translation_of: Web/API/PerformanceElementTiming/element
+---
+<div>{{APIRef("Element Timing API")}}</div>
+
+<p class="summary">La propriété en lecture seule <strong><code>element</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie un <a href="/fr/docs/Web/API/Element"><code>Element</code></a> qui est une représentation littérale de l'élément associé.</p>
+
+<h2 id="Syntax">Syntaxe</h2>
+
+<pre class="brush:js">var <var>element</var> = <var>PerformanceElementTiming</var>.element;</pre>
+
+<h3>Valeur</h3>
+<p>Un objet de type <a href="/fr/docs/Web/API/Element"><code>Element</code></a>.</p>
+
+<h2 id="Examples">Exemples</h2>
+
+<p>Dans cet exemple, l'appel à <code>entry.element</code> va enregistrer dans la console <code>&lt;img src="image.jpg" alt="une belle image" elementtiming="big-image"&gt;</code>.</p>
+
+<pre class="brush:html">&lt;img src="image.jpg" alt="une belle image" elementtiming="big-image"&gt;</pre>
+
+<pre class="brush:js">const <var>observer</var> = new PerformanceObserver((list) => {
+  let <var>entries</var> = list.getEntries().forEach(function (entry) {
+    if (entry.identifier === "big-image") {
+      console.log(entry.element);
+    }
+  });
+});
+observer.observe({ entryTypes: ["element"] });</pre>
+
+<p class="notecard note">Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p>
+
+<h2 id="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaire</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{SpecName('Element Timing API','#dom-performanceelementtiming-element','PerformanceElementTiming.element')}}</td>
+      <td>{{Spec2('Element Timing API')}}</td>
+      <td>Définition initiale.</td>
+    </tr>
+  </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.PerformanceElementTiming.element")}}</p>
diff --git a/files/fr/web/api/performanceelementtiming/id/index.html b/files/fr/web/api/performanceelementtiming/id/index.html
new file mode 100644
index 0000000000..36e2a07b92
--- /dev/null
+++ b/files/fr/web/api/performanceelementtiming/id/index.html
@@ -0,0 +1,62 @@
+---
+title: PerformanceElementTiming.id
+slug: Web/API/PerformanceElementTiming/id
+tags:
+  - API
+  - Property
+  - Propriété
+  - Reference
+  - id
+  - PerformanceElementTiming
+translation_of: Web/API/PerformanceElementTiming/id
+---
+<div>{{SeeCompatTable}}{{Non-Standard_Header}}{{APIRef("Element Timing API")}}</div>
+
+<p class="summary">La propriété en lecture seule <strong><code>id</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie l'<a href="/fr/docs/Web/HTML/Global_attributes#attr-id"><code>id</code></a> de l'élément associé.</p>
+
+<h2 id="Syntax">Syntaxe</h2>
+
+<pre class="brush:js">var <var>id</var> = <var>PerformanceElementTiming</var>.id;</pre>
+
+<h3>Valeur</h3>
+<p>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>.</p>
+
+<h2 id="Examples">Exemples</h2>
+
+<p>Dans cet exemple, l'appel à <code>entry.id</code> entraînera l'affichage dans la console du code <code>myImage</code>, qui est l'<a href="/fr/docs/Web/HTML/Global_attributes#attr-id"><code>id</code></a> de l'élément image.</p>
+
+<pre class="brush:html">&lt;img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage"&gt;</pre>
+
+<pre class="brush:js">const observer = new PerformanceObserver((list) => {
+let entries = list.getEntries().forEach(function (entry) {
+    if (entry.identifier === "big-image") {
+      console.log(entry.id);
+    }
+  });
+});
+observer.observe({ entryTypes: ["element"] });</pre>
+
+<p class="notecard note">Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>entryType</code></a> <code>element</code> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p>
+
+<h2 id="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaire</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{SpecName('Element Timing API','#dom-performanceelementtiming-id','PerformanceElementTiming.id')}}</td>
+      <td>{{Spec2('Element Timing API')}}</td>
+      <td>Définition initiale.</td>
+    </tr>
+  </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.PerformanceElementTiming.id")}}</p>
diff --git a/files/fr/web/api/performanceelementtiming/identifier/index.html b/files/fr/web/api/performanceelementtiming/identifier/index.html
new file mode 100644
index 0000000000..9c07117bb3
--- /dev/null
+++ b/files/fr/web/api/performanceelementtiming/identifier/index.html
@@ -0,0 +1,62 @@
+---
+title: PerformanceElementTiming.identifier
+slug: Web/API/PerformanceElementTiming/identifier
+tags:
+  - API
+  - Property
+  - Propriété
+  - Reference
+  - identifier
+  - PerformanceElementTiming
+translation_of: Web/API/PerformanceElementTiming/identifier
+---
+<div>{{SeeCompatTable}}{{Non-Standard_Header}}{{APIRef("Element Timing API")}}</div>
+
+<p class="summary">La propriété en lecture seule <strong><code>identifier</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie la valeur de l'attribut <code><a href="/fr/docs/Web/HTML/Attributes/elementtiming">elementtiming</a></code> sur l'élément.</p>
+
+<h2 id="Syntax">Syntaxe</h2>
+
+<pre class="brush:js">var <var>identifier</var> = <var>PerformanceElementTiming</var>.identifier;</pre>
+
+<h3>Valeur</h3>
+<p>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Dans cet exemple, la valeur de <code><a href="/fr/docs/Web/HTML/Attributes/elementtiming">elementtiming</a></code> est <code>big-image</code>. L'appel à <code>entry.indentifier</code> renvoie donc la chaîne de caractères <code>big-image</code>.</p>
+
+<pre class="brush:html">&lt;img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage"&gt;</pre>
+
+<pre class="brush:js">const observer = new PerformanceObserver((list) => {
+  let entries = list.getEntries().forEach(function (entry) {
+    if (entry.identifier === "big-image") {
+      console.log(entry.naturalWidth);
+    }
+  });
+});
+observer.observe({ entryTypes: ["element"] });</pre>
+
+<p class="notecard note">Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>entryType</code></a> <code>element</code> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p>
+
+<h2 id="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaire</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{SpecName('Element Timing API','#dom-performanceelementtiming-identifier','PerformanceElementTiming.identifier')}}</td>
+      <td>{{Spec2('Element Timing API')}}</td>
+      <td>Définition initiale.</td>
+    </tr>
+  </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.PerformanceElementTiming.identifier")}}</p>
diff --git a/files/fr/web/api/performanceelementtiming/index.html b/files/fr/web/api/performanceelementtiming/index.html
new file mode 100644
index 0000000000..03a76a40a5
--- /dev/null
+++ b/files/fr/web/api/performanceelementtiming/index.html
@@ -0,0 +1,82 @@
+---
+title: PerformanceElementTiming
+slug: Web/API/PerformanceElementTiming
+tags:
+  - API
+  - Interface
+  - Reference
+  - PerformanceElementTiming
+translation_of: Web/API/PerformanceElementTiming
+---
+<div>{{SeeCompatTable}}{{Non-Standard_Header}}{{APIRef("Element Timing API")}}</div>
+
+<p class="summary">L'interface <strong><code>PerformanceElementTiming</code></strong> de l'API <a href="/fr/docs/Web/API/Element_timing_API">Element Timing API</a> rapporte les informations de timing sur un élément spécifique identifié par l'auteur de la page. Par exemple, elle peut fournir des informations sur l'image principale d'un article.</p>
+
+<h2 id="Properties">Propriétés</h2>
+
+<dl>
+  <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/element"><code>PerformanceElementTiming.element</code></a> {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}</dt>
+  <dd>Un <a href="/fr/docs/Web/API/Element"><code>Element</code></a> représentant l'élément pour lequel nous retournons des informations.</dd>
+  <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/id"><code>PerformanceElementTiming.id</code></a> {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}</dt>
+  <dd>Un <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui est l'identifiant (attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-id"><code>id</code></a>) de l'élément.</dd>
+  <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/identifier"><code>PerformanceElementTiming.identifier</code></a> {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}</dt>
+  <dd>Une <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui est la valeur de l'attribut <a href="/fr/docs/Web/HTML/Attributes/elementtiming"><code>elementtiming</code></a> de l'élément.</dd>
+  <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/intersectionRect"><code>PerformanceElementTiming.intersectionRect</code></a> {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}</dt>
+  <dd>Un <a href="/fr/docs/Web/API/DOMRectReadOnly"><code>DOMRectReadOnly</code></a> qui est le rectangle de l'élément dans la fenêtre d'affichage.</dd>
+  <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/loadTime"><code>PerformanceElementTiming.loadTime</code></a> {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}</dt>
+  <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> avec l'heure de chargement de l'élément.</dd>
+  <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/naturalHeight"><code>PerformanceElementTiming.naturalHeight</code></a> {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}</dt>
+  <dd>Un entier de 32 bits non signé (<i>unsigned long</i>) qui est la hauteur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.</dd>
+  <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/naturalWidth"><code>PerformanceElementTiming.naturalWidth</code></a> {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}</dt>
+  <dd>Un entier de 32 bits non signé (<i>unsigned long</i>) qui est la largeur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.</dd>
+  <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/renderTime"><code>PerformanceElementTiming.renderTime</code></a> {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}</dt>
+  <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> avec le renderTime de l'élément.</dd>
+  <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/url"><code>PerformanceElementTiming.url</code></a> {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}</dt>
+  <dd>Une <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui est l'URL initiale de la demande de ressources pour les images, 0 pour le texte.</dd>
+</dl>
+
+<h2 id="Methods">Méthodes</h2>
+
+<dl>
+  <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/toJSON"><code>PerformanceElementTiming.toJSON()</code></a> {{Experimental_Inline}} {{Non-Standard_Inline}}</dt>
+  <dd>Génère une description JSON de l'objet.</dd>
+</dl>
+
+<h2 id="Examples">Exemples</h2>
+
+<p>Dans cet exemple, nous avons deux éléments qui sont observés. Nous utilisons l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, l'observation de l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entrytype</code></a> <code>element</code> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p>
+
+<p>Deux entrées seront affichées dans la console. La première contenant les détails de l'image, la seconde les détails du nœud texte.</p>
+
+<pre class="brush: html">&lt;img src="image.jpg" elementtiming="big-image"&gt;
+&lt;p elementtiming="text" id="text-id"&gt;le texte ici&lt;/p&gt;</pre>
+
+<pre class="brush: js">const observer = new PerformanceObserver((list) => {
+  let entries = list.getEntries().forEach(function (entry) {
+      console.log(entry);
+  });
+});
+observer.observe({ entryTypes: ["element"] });</pre>
+
+<h2 id="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaire</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{SpecName('Element Timing API','#sec-performance-element-timing','PerformanceElementTiming')}}</td>
+      <td>{{Spec2('Element Timing API')}}</td>
+      <td>Définition initiale.</td>
+    </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.PerformanceElementTiming")}}</p>
diff --git a/files/fr/web/api/performanceelementtiming/intersectionrect/index.html b/files/fr/web/api/performanceelementtiming/intersectionrect/index.html
new file mode 100644
index 0000000000..b37c4e77ea
--- /dev/null
+++ b/files/fr/web/api/performanceelementtiming/intersectionrect/index.html
@@ -0,0 +1,64 @@
+---
+title: PerformanceElementTiming.intersectionRect
+slug: Web/API/PerformanceElementTiming/intersectionRect
+tags:
+  - API
+  - Property
+  - Propriété
+  - Reference
+  - intersectionRect
+  - PerformanceElementTiming
+translation_of: Web/API/PerformanceElementTiming/intersectionRect
+---
+<div>{{APIRef("Element Timing API")}}</div>
+
+<p class="summary">La propriété en lecture seule <strong><code>intersectionRect</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie le rectangle de l'élément dans la zone d'affichage (<i>viewport</i>).</p>
+
+<h2 id="Syntax">Syntaxe</h2>
+
+<pre class="brush:js">var <var>rect</var> = PerformanceElementTiming.intersectionRect;</pre>
+
+<h3>Valeur</h3>
+<p>Un objet <a href="/fr/docs/Web/API/DOMRectReadOnly"><code>DOMRectReadOnly</code></a> qui est le rectangle de l'élément dans la zone d'affichage.</p>
+
+<p>Pour les images, il s'agit du rectangle d'affichage de l'image dans la zone d'affichage. Pour le texte, il s'agit du rectangle d'affichage du nœud dans la zone d'affichage. Il s'agit du plus petit rectangle qui contient l'union de tous les nœuds de texte appartenant à l'élément.</p>
+
+<h2 id="Examples">Exemples</h2>
+
+<p>Dans cet exemple, l'appel à <code>entry.intersectionRect</code> renvoie un objet <a href="/fr/docs/Web/API/DOMRectReadOnly"><code>DOMRectReadOnly</code></a> avec le rectangle d'affichage de l'image.</p>
+
+<pre class="brush:html">&lt;img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage"&gt;</pre>
+
+<pre class="brush:js">const <var>observer</var> = new PerformanceObserver((list) => {
+  let <var>entries</var> = list.getEntries().forEach(function (entry) {
+    if (entry.identifier === "big-image") {
+      console.log(entry.intersectionRect);
+    }
+  });
+});
+observer.observe({ entryTypes: ["element"] });</pre>
+
+<p class="notecard note">Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p>
+
+<h2 id="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaire</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{SpecName('Element Timing API','#dom-performanceelementtiming-intersectionrect','PerformanceElementTiming.intersectionRect')}}</td>
+      <td>{{Spec2('Element Timing API')}}</td>
+      <td>Définition initiale.</td>
+    </tr>
+  </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.PerformanceElementTiming.intersectionRect")}}</p>
diff --git a/files/fr/web/api/performanceelementtiming/loadtime/index.html b/files/fr/web/api/performanceelementtiming/loadtime/index.html
new file mode 100644
index 0000000000..797edea2d3
--- /dev/null
+++ b/files/fr/web/api/performanceelementtiming/loadtime/index.html
@@ -0,0 +1,62 @@
+---
+title: PerformanceElementTiming.loadTime
+slug: Web/API/PerformanceElementTiming/loadTime
+tags:
+  - API
+  - Property
+  - Propriété
+  - Reference
+  - loadTime
+  - PerformanceElementTiming
+translation_of: Web/API/PerformanceElementTiming/loadTime
+---
+<div>{{APIRef("Element Timing API")}}</div>
+
+<p class="summary">La propriété en lecture seule <strong><code>loadTime</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie toujours 0 pour le texte. Pour les images, elle renvoie le temps qui est le plus tardif entre le moment où la ressource image est chargée et le moment où elle est attachée à l'élément.</p>
+
+<h2 id="Syntax">Syntaxe</h2>
+
+<pre class="brush:js">var <var>loadTime</var> = <var>PerformanceElementTiming</var>.loadTime;</pre>
+
+<h3>Valeur</h3>
+<p>Un objet <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> avec le temps de chargement de l'élément.</p>
+
+<h2 id="Examples">Exemples</h2>
+
+<p>Dans cet exemple, l'appel à <code>entry.loadTime</code> renvoie le temps de chargement de l'image.</p>
+
+<pre class="brush:html">&lt;img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage"&gt;</pre>
+
+<pre class="brush:js">const <var>observer</var> = new PerformanceObserver((list) => {
+  let <var>entries</var> = list.getEntries().forEach(function (entry) {
+    if (entry.identifier === "big-image") {
+      console.log(entry.loadTime);
+    }
+  });
+});
+observer.observe({ entryTypes: ["element"] });</pre>
+
+<p class="notecard note">Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p>
+
+<h2 id="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaire</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{SpecName('Element Timing API','#dom-performanceelementtiming-loadtime','PerformanceElementTiming.loadTime')}}</td>
+      <td>{{Spec2('Element Timing API')}}</td>
+      <td>Définition initiale.</td>
+    </tr>
+  </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.PerformanceElementTiming.loadTime")}}</p>
diff --git a/files/fr/web/api/performanceelementtiming/naturalheight/index.html b/files/fr/web/api/performanceelementtiming/naturalheight/index.html
new file mode 100644
index 0000000000..ac66fb44ae
--- /dev/null
+++ b/files/fr/web/api/performanceelementtiming/naturalheight/index.html
@@ -0,0 +1,62 @@
+---
+title: PerformanceElementTiming.naturalHeight
+slug: Web/API/PerformanceElementTiming/naturalHeight
+tags:
+  - API
+  - Property
+  - Propriété
+  - Reference
+  - naturalHeight
+  - PerformanceElementTiming
+translation_of: Web/API/PerformanceElementTiming/naturalHeight
+---
+<div>{{APIRef("Element Timing API")}}</div>
+
+<p class="summary">La propriété en lecture seule <strong><code>naturalHeight</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie la hauteur intrinsèque de l'élément image.</p>
+
+<h2 id="Syntax">Syntaxe</h2>
+
+<pre class="brush:js">var <var>height</var> = PerformanceElementTiming.naturalHeight;</pre>
+
+<h3>Valeur</h3>
+<p>Un entier de 32 bits non signé (<i>unsigned long</i>) qui est la hauteur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.</p>
+
+<h2 id="Examples">Exemples</h2>
+
+<p>Dans cet exemple, le fichier image a une largeur de 1000px et une hauteur de 750px. L'appel de <code>entry.naturalHeight</code> renvoie <code>750</code>, c'est-à-dire la hauteur intrinsèque en pixels.</p>
+
+<pre class="brush:html">&lt;img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage"&gt;</pre>
+
+<pre class="brush:js">const <var>observer</var> = new PerformanceObserver((list) => {
+  let <var>entries</var> = list.getEntries().forEach(function (entry) {
+    if (entry.identifier === "big-image") {
+      console.log(entry.naturalHeight);
+    }
+  });
+});
+observer.observe({ entryTypes: ["element"] });</pre>
+
+<p class="notecard note">Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaire</th>
+    </tr>
+  </thead>
+  <tbody>
+   <tr>
+      <td>{{SpecName('Element Timing API','#dom-performanceelementtiming-naturalheight','PerformanceElementTiming.naturalHeight')}}</td>
+      <td>{{Spec2('Element Timing API')}}</td>
+      <td>Initial definition.</td>
+   </tr>
+  </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.PerformanceElementTiming.naturalHeight")}}</p>
diff --git a/files/fr/web/api/performanceelementtiming/naturalwidth/index.html b/files/fr/web/api/performanceelementtiming/naturalwidth/index.html
new file mode 100644
index 0000000000..e284faba40
--- /dev/null
+++ b/files/fr/web/api/performanceelementtiming/naturalwidth/index.html
@@ -0,0 +1,61 @@
+---
+title: PerformanceElementTiming.naturalWidth
+slug: Web/API/PerformanceElementTiming/naturalWidth
+tags:
+  - API
+  - Property
+  - Propriété
+  - Reference
+  - naturalWidth
+  - PerformanceElementTiming
+translation_of: Web/API/PerformanceElementTiming/naturalWidth
+---
+<div>{{APIRef("Element Timing API")}}</div>
+
+<p class="summary">La propriété en lecture seule <strong><code>naturalWidth</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie la largeur intrinsèque de l'élément image.</p>
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:js">var <var>width</var> = <var>PerformanceElementTiming</var>.naturalWidth;</pre>
+
+<h3>Valeur</h3>
+<p>Un entier de 32 bits non signé (<i>unsigned long</i>) qui est la largeur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.</p>
+
+<h2 id="Examples">Exemples</h2>
+
+<p>Dans cet exemple, le fichier image a une largeur de 1000px et une hauteur de 750px. L'appel de <code>entry.naturalWidth</code> renvoie <code>1000</code>, c'est-à-dire la largeur intrinsèque en pixels.</p>
+
+<pre class="brush:html">&lt;img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage"&gt;</pre>
+
+<pre class="brush:js">const <var>observer</var> = new PerformanceObserver((list) => {
+  let <var>entries</var> = list.getEntries().forEach(function (entry) {
+    if (entry.identifier === "big-image") {
+      console.log(entry.naturalWidth);
+    }
+  });
+});
+observer.observe({ entryTypes: ["element"] });</pre>
+
+<p class="notecard note">Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaire</th>
+    </tr>
+  </thead>
+  <tbody>
+   <tr>
+      <td>{{SpecName('Element Timing API','#dom-performanceelementtiming-naturalwidth','PerformanceElementTiming.naturalWidth')}}</td>
+      <td>{{Spec2('Element Timing API')}}</td>
+      <td>Définition initiale.</td>
+   </tr>
+  </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.PerformanceElementTiming.naturalWidth")}}</p>
diff --git a/files/fr/web/api/performanceelementtiming/rendertime/index.html b/files/fr/web/api/performanceelementtiming/rendertime/index.html
new file mode 100644
index 0000000000..5e7d247e5a
--- /dev/null
+++ b/files/fr/web/api/performanceelementtiming/rendertime/index.html
@@ -0,0 +1,66 @@
+---
+title: PerformanceElementTiming.renderTime
+slug: Web/API/PerformanceElementTiming/renderTime
+tags:
+  - API
+  - Property
+  - Propriété
+  - Reference
+  - renderTime
+  - PerformanceElementTiming
+translation_of: Web/API/PerformanceElementTiming/renderTime
+---
+<div>{{APIRef("Element Timing API")}}</div>
+
+<p class="summary">La propriété en lecture seule <strong><code>renderTime</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie le temps écoulé pour le rendu de l'élément associé.</p>
+
+<h2 id="Syntax">Syntaxe</h2>
+
+<pre class="brush:js">var <var>renderTime</var> = PerformanceElementTiming.renderTime;</pre>
+
+<h3>Valeur</h3>
+<p>Un objet <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> avec le temps de rendu de l'élément.</p>
+
+<p>Pour les images, il s'agira de l'<strong>horodatage du rendu de l'image</strong>. Ceci est défini comme le moment du rendu suivant le chargement complet de l'image. Si la vérification de l'autorisation de temporisation échoue (comme défini par l'en-tête <a href="/fr/docs/Web/HTTP/Headers/Timing-Allow-Origin">Timing-allow-origin</a>), ceci retournera 0.</p>
+
+<p>Pour les nœuds de texte, il s'agira de l'<strong>horodatage du rendu du texte</strong>. Ceci est défini comme le moment où l'élément est affiché à l'écran.</p>
+
+<h2 id="Examples">Exemples</h2>
+
+<p>Dans cet exemple, appeler <code>entry.renderTime</code> renvoie le temps de rendu de l'élément image.</p>
+
+<pre class="brush:html">&lt;img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage"&gt;</pre>
+
+<pre class="brush:js">const <var>observer</var> = new PerformanceObserver((list) => {
+  let <var>entries</var> = list.getEntries().forEach(function (entry) {
+    if (entry.identifier === "big-image") {
+      console.log(entry.renderTime);
+    }
+  });
+});
+observer.observe({ entryTypes: ["element"] });</pre>
+
+<p class="notecard note">Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p>
+
+<h2 id="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaire</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{SpecName('Element Timing API','#dom-performanceelementtiming-rendertime','PerformanceElementTiming.renderTime')}}</td>
+      <td>{{Spec2('Element Timing API')}}</td>
+      <td>Définition initiale.</td>
+    </tr>
+  </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.PerformanceElementTiming.renderTime")}}</p>
diff --git a/files/fr/web/api/performanceelementtiming/tojson/index.html b/files/fr/web/api/performanceelementtiming/tojson/index.html
new file mode 100644
index 0000000000..6d0ff16b06
--- /dev/null
+++ b/files/fr/web/api/performanceelementtiming/tojson/index.html
@@ -0,0 +1,66 @@
+---
+title: PerformanceElementTiming.toJSON()
+slug: Web/API/PerformanceElementTiming/toJSON
+tags:
+  - API
+  - Method
+  - Méthode
+  - Reference
+  - toJSON()
+  - PerformanceElementTiming
+translation_of: Web/API/PerformanceElementTiming/toJSON
+---
+<div>{{APIRef("Element Timing API")}}</div>
+
+<p class="summary">La méthode <strong><code>toJSON()</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> est un sérialiseur standard. Elle renvoie une représentation JSON des propriétés de l'objet.</p>
+
+<h2 id="Syntax">Syntaxe</h2>
+
+<pre class="brush:js">var <var>json</var> = PerformanceElementTiming.toJSON();</pre>
+
+<h3 id="Returns">Valeur de retour</h3>
+
+<dl>
+  <dt><code>json</code></dt>
+  <dd>Un objet JSON qui est la sérialisation de l'objet <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a>.</dd>
+</dl>
+
+<h2 id="Examples">Exemples</h2>
+
+<p>Dans cet exemple, l'appel de <code>entry.toJSON()</code> renvoie une représentation JSON de l'objet <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a>, avec les informations sur l'élément image.</p>
+
+<pre class="brush:html">&lt;img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage"&gt;</pre>
+
+<pre class="brush:js">const <var>observer</var> = new PerformanceObserver((list) => {
+  let <var>entries</var> = list.getEntries().forEach(function (entry) {
+    if (entry.identifier === "big-image") {
+      console.log(entry.toJSON());
+    }
+  });
+});
+observer.observe({ entryTypes: ["element"] });</pre>
+
+<p class="notecard note">Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p>
+
+<h2 id="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaire</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{SpecName('Element Timing API','#dom-performanceelementtiming-tojson','PerformanceElementTiming.toJson()')}}</td>
+      <td>{{Spec2('Element Timing API')}}</td>
+      <td>Définition initiale.</td>
+    </tr>
+  </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.PerformanceElementTiming.toJSON")}}</p>
diff --git a/files/fr/web/api/performanceelementtiming/url/index.html b/files/fr/web/api/performanceelementtiming/url/index.html
new file mode 100644
index 0000000000..ed02583ec0
--- /dev/null
+++ b/files/fr/web/api/performanceelementtiming/url/index.html
@@ -0,0 +1,62 @@
+---
+title: PerformanceElementTiming.url
+slug: Web/API/PerformanceElementTiming/url
+tags:
+  - API
+  - Property
+  - Propriété
+  - Reference
+  - url
+  - PerformanceElementTiming
+translation_of: Web/API/PerformanceElementTiming/url
+---
+<div>{{APIRef("Element Timing API")}}</div>
+
+<p class="summary">La propriété en lecture seule <strong><code>url</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie l'URL initiale de la demande de ressource lorsque l'élément est une image.</p>
+
+<h2 id="Syntax">Syntaxe</h2>
+
+<pre class="brush:js">var <var>url</var> = <var>PerformanceElementTiming</var>.url;</pre>
+
+<h3>Valeur</h3>
+<p>Une <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui est l'URL initiale de la demande de ressources pour les images ou 0 pour le texte.</p>
+
+<h2 id="Examples">Exemples</h2>
+
+<p>Dans cet exemple, appeler <code>entry.url</code> renvoie <code>https://example.com/image.jpg</code>.</p>
+
+<pre class="brush:html">&lt;img src="https://example.com/image.jpg" alt="une belle imahe" elementtiming="big-image" id="myImage"&gt;</pre>
+
+<pre class="brush:js">const <var>observer</var> = new PerformanceObserver((list) => {
+  let <var>entries</var> = list.getEntries().forEach(function (entry) {
+    if (entry.identifier === "big-image") {
+      console.log(entry.url);
+    }
+  });
+});
+observer.observe({ entryTypes: ["element"] });</pre>
+
+<p class="notecard note">Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p>
+
+<h2 id="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaire</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{SpecName('Element Timing API','#dom-performanceelementtiming-url','PerformanceElementTiming.url')}}</td>
+      <td>{{Spec2('Element Timing API')}}</td>
+      <td>Définition initiale.</td>
+    </tr>
+  </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.PerformanceElementTiming.url")}}</p>