Fix broken metric threshold diagrams (GoogleChrome#7761)

j2kenton · Apr 27, 2022 · f12d3da · f12d3da
1 parent b5bef43
commit f12d3da
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 19 deletions.
diff --git a/src/site/content/en/metrics/cls/index.md b/src/site/content/en/metrics/cls/index.md
@@ -115,10 +115,22 @@ To provide a good user experience, sites should strive to have a CLS score of
 good threshold to measure is the **75th percentile** of page loads, segmented
 across mobile and desktop devices.
 
-<picture>
-  <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9mWVASbWDLzdBUpVcjE1.svg" | imgix }}" media="(min-width: 640px)" width="400", height="100">
-  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/uqclEgIlTHhwIgNTXN3Y.svg", alt="Good CLS values are under 0.1, poor values are greater than 0.25 and anything in between needs improvement", width="400", height="300" %}
-</picture>
+<figure>
+  <picture>
+    <source
+      srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/9mWVASbWDLzdBUpVcjE1.svg" | imgix }}"
+      media="(min-width: 640px)"
+      width="800"
+      height="200">
+    {%
+      Img
+        src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/uqclEgIlTHhwIgNTXN3Y.svg",
+        alt="Good CLS values are 0.1 or less, poor values are greater than 0.25, and anything in between needs improvement",
+        width="640",
+        height="480"
+    %}
+  </picture>
+</figure>
 
 {% Aside %}
   To learn more about the research and methodology behind this recommendation,

diff --git a/src/site/content/en/metrics/fcp/index.md b/src/site/content/en/metrics/fcp/index.md
@@ -41,18 +41,30 @@ Paint (FCP) and _[Largest Contentful Paint (LCP)](/lcp/)_
 &mdash;which aims to measure when the page's main contents have finished
 loading.
 
-<picture>
-  <source srcset="{{ "image/eqprBhZUGfb8WYnumQ9ljAxRrA72/V1mtKJenViYAhn05WxqR.svg" | imgix }}" media="(min-width: 640px)" width="400", height="100">
-  {% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/vQKpz0S2SGnnoXHMDidj.svg", alt="Good FCP values are 1.8 seconds or less, poor values are greater than 3.0 seconds and anything in between needs improvement", width="400", height="300" %}
-</picture>
-
 ### What is a good FCP score?
 
 To provide a good user experience, sites should strive to have a First
 Contentful Paint of **1.8 seconds** or less. To ensure you're hitting this
 target for most of your users, a good threshold to measure is the **75th
 percentile** of page loads, segmented across mobile and desktop devices.
 
+<figure>
+  <picture>
+    <source
+      srcset="{{ "image/eqprBhZUGfb8WYnumQ9ljAxRrA72/V1mtKJenViYAhn05WxqR.svg" | imgix }}"
+      media="(min-width: 640px)"
+      width="800"
+      height="200">
+    {%
+      Img
+        src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/vQKpz0S2SGnnoXHMDidj.svg",
+        alt="Good FCP values are 1.8 seconds or less, poor values are greater than 3.0 seconds, and anything in between needs improvement",
+        width="640",
+        height="480"
+    %}
+  </picture>
+</figure>
+
 ## How to measure FCP
 
 FCP can be measured [in the lab](/user-centric-performance-metrics/#in-the-lab)

diff --git a/src/site/content/en/metrics/fid/index.md b/src/site/content/en/metrics/fid/index.md
@@ -52,18 +52,30 @@ they click a link, tap on a button, or use a custom, JavaScript-powered control)
 to the time when the browser is actually able to begin processing event handlers
 in response to that interaction.
 
-<picture>
-  <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/eXyvkqRHQZ5iG38Axh1Z.svg" | imgix }}" media="(min-width: 640px)" width="400", height="100">
-  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Se4TiXIdp8jtLJVScWed.svg", alt="Good fid values are 2.5 seconds, poor values are greater than 4.0 seconds and anything in between needs improvement", width="400", height="300" %}
-</picture>
-
 ### What is a good FID score?
 
 To provide a good user experience, sites should strive to have a First Input
 Delay of **100 milliseconds** or less. To ensure you're hitting this target for
 most of your users, a good threshold to measure is the **75th percentile** of
 page loads, segmented across mobile and desktop devices.
 
+<figure>
+  <picture>
+    <source
+      srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/eXyvkqRHQZ5iG38Axh1Z.svg" | imgix }}"
+      media="(min-width: 640px)"
+      width="800"
+      height="200">
+    {%
+      Img
+        src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Se4TiXIdp8jtLJVScWed.svg",
+        alt="Good FID values are 2.5 seconds or less, poor values are greater than 4.0 seconds, and anything in between needs improvement",
+        width="640",
+        height="480"
+    %}
+  </picture>
+</figure>
+
 {% Aside %}
   To learn more about the research and methodology behind this recommendation,
   see: [Defining the Core Web Vitals metrics

diff --git a/src/site/content/en/metrics/lcp/index.md b/src/site/content/en/metrics/lcp/index.md
@@ -53,18 +53,30 @@ The Largest Contentful Paint (LCP) metric reports the render time of the largest
 viewport, relative to when the page [first started
 loading](https://w3c.github.io/hr-time/#timeorigin-attribute).
 
-<picture>
-  <source srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/elqsdYqQEefWJbUM2qMO.svg" | imgix }}" media="(min-width: 640px)" width="400", height="100">
-  {% Img src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/8ZW8LQsagLih1ZZoOmMR.svg", alt="Good LCP values are 2.5 seconds, poor values are greater than 4.0 seconds and anything in between needs improvement", width="400", height="300" %}
-</picture>
-
 ### What is a good LCP score?
 
 To provide a good user experience, sites should strive to have Largest
 Contentful Paint of **2.5 seconds** or less. To ensure you're hitting this
 target for most of your users, a good threshold to measure is the **75th
 percentile** of page loads, segmented across mobile and desktop devices.
 
+<figure>
+  <picture>
+    <source
+      srcset="{{ "image/tcFciHGuF3MxnTr1y5ue01OGLBn2/elqsdYqQEefWJbUM2qMO.svg" | imgix }}"
+      media="(min-width: 640px)"
+      width="800"
+      height="200">
+    {%
+      Img
+        src="image/eqprBhZUGfb8WYnumQ9ljAxRrA72/8ZW8LQsagLih1ZZoOmMR.svg",
+        alt="Good LCP values are 2.5 seconds or less, poor values are greater than 4.0 seconds, and anything in between needs improvement",
+        width="640",
+        height="480"
+    %}
+  </picture>
+</figure>
+
 {% Aside %}
   To learn more about the research and methodology behind this recommendation,
   see: [Defining the Core Web Vitals metrics