[wip]fix: resource hints TODOs

src/content/en/2020/resource-hints.md

@@ -7,17 +7,17 @@ authors: [Zizzamia]
 reviewers: [jessnicolet, pmeenan, giopunt, mgechev, notwillk]
 analysts: [khempenius]
 translators: []
-zizzamia_bio: Leonardo is a Staff Software Engineer at <a href="https://www.coinbase.com/">Coinbase</a>, leading web performance and growth initiatives. He curates the <a href="https://ngrome.io">NGRome Conference</a>. Leo also maintains the <a href="https://github.com/Zizzamia/perfume.js">Perfume.js<a/> library, which helps companies prioritize roadmaps and make better business decisions through performance analytics.
+zizzamia_bio: Leonardo is a Staff Software Engineer at <a href="https://www.coinbase.com/">Coinbase</a>, leading web performance and growth initiatives. He curates the <a href="https://ngrome.io">NG Rome Conference</a>. Leo also maintains the <a href="https://github.com/Zizzamia/perfume.js">Perfume.js<a/> library, which helps companies prioritize roadmaps and make better business decisions through performance analytics.
 discuss: 2057
 results: https://docs.google.com/spreadsheets/d/1lXjd8ogB7kYfG09eUdGYXUlrMjs4mq1Z7nNldQnvkVA/
 queries: 21_Resource_Hints
-#featured_quote: TODO @zizzamia
-#featured_stat_1: TODO @zizzamia
-#featured_stat_label_1: TODO @zizzamia
-#featured_stat_2: TODO @zizzamia
-#featured_stat_label_2: TODO @zizzamia
-#featured_stat_3: TODO @zizzamia
-#featured_stat_label_3: TODO @zizzamia
+featured_quote: Resource hints provide <em>hints</em> to the browser about what resources will be needed soon. The action that the browser takes as a result of receiving this hint will vary depending on the type of resource hint; different resource hints kick off different actions. When used correctly, they can improve page performance by giving a head start to important anticipated actions.
+featured_stat_1: 33%
+featured_stat_label_1: Sites using <code>dns-prefetch</code>
+featured_stat_2: 9%
+featured_stat_label_2: Sites using <code>preload</code>
+featured_stat_3: 88%
+featured_stat_label_3: Resource hints using the <code>as</code> attribute
 unedited: true
 ---
 
@@ -98,7 +98,7 @@ The [native lazy loading](https://web.dev/browser-level-image-lazy-loading/) hin
 <img src="image.png" loading="lazy" alt="…" width="200" height="200">
 ```
 
-Be mindful Chromium's implementation of lazy-loading thresholds logic historically has been quite [conservative](https://web.dev/browser-level-image-lazy-loading/#distance-from-viewport-thresholds), keeping the offscreen limit to 3000px. During the last year the limit has been actively tested and improved on to better align developer expectations, and ultimately moving the thresholds to 1250px. Also, there is [no standard across the browsers](https://github.com/whatwg/html/issues/5408) and no ability for web developers to override the defaults thresholds provided by the browsers, yet.
+Be mindful Chromium's implementation of lazy-loading thresholds logic historically has been quite [conservative](https://web.dev/browser-level-image-lazy-loading/#distance-from-viewport-thresholds), keeping the offscreen limit to 3000px. During the last year the limit has been actively tested and improved on to better align developer expectations, and ultimately moving the thresholds to 1250px. However, there is [no standard across the browsers at present](https://github.com/whatwg/html/issues/5408) and no ability for web developers to override the defaults thresholds provided by the browsers, yet.
 
 ## Resource Hints
 
@@ -111,15 +111,53 @@ More and more web pages are using the main resource hints, and in 2020 we are se
 {{ figure_markup(
   image="adoption-of-resource-hints.png",
   caption="Adoption of resource hints",
-  description="TODO",
+  description="Column chart showcasing the adoption of resource hints in 2020.",
   chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTYAbLxN40s6mNR1jo0XDe_V4siN8TAsx2mryMp5IQmlJ-9O9eJxYROz7Rw6ozyFP6hlIZHxxh95GqX/pubchart?oid=1550112064&format=interactive",
   sheets_gid="1805612941",
   sql_file="adoption.sql"
 ) }}
 
 The relative popularity of `dns-prefetch` with 33% adoption compared with other resource hints is unsurprising as it first appeared in 2009, and has the widest support out of all major resource hints.
 
-{# TODO - add table to compare 2019 vs 2020 #}
+<figure>
+  <table>
+    <tr>
+     <th>Resource Hint</th>
+     <th>Adoption 2019</th>
+     <th>Adoption 2020</th>
+    </tr>
+    <tr>
+     <td><code>dns-prefetch</code></td>
+     <td>29%</td>
+     <td>33%</td>
+    </tr>
+    <tr>
+     <td><code>preload</code>
+     </td>
+     <td>16%</td>
+     <td>18%</td>
+    </tr>
+    <tr>
+     <td><code>preconnect</code>
+     </td>
+     <td>4%</td>
+     <td>9%</td>
+    </tr>
+    <tr>
+     <td><code>prefetch</code>
+     </td>
+     <td>3%</td>
+     <td>3%</td>
+    </tr>
+    <tr>
+     <td><code>prerender</code> (deprecated)
+     </td>
+     <td>1</td>
+     <td>0%</td>
+    </tr>
+  </table>
+  <figcaption>{{ figure_link(caption="Adoption of resource hints 2019 vs 2020.") }}</figcaption>
+</figure>
 
 Compared to [2019](https://almanac.httparchive.org/en/2019/resource-hints#resource-hints) the `dns-prefetch` had a 4% increase in Desktop adoption. We saw a similar increase for `preconnect` as well. One key reason this was the largest growth between all hints, is the clear and useful advice pthe Lighthouse audit is giving on this matter](https://web.dev/uses-rel-preconnect/). Starting from this year's report we also introduce how the latest dataset performs against Lighthouse recommendations.
 
@@ -134,7 +172,7 @@ Across the board developers are learning how to better use resource hints, and c
 {{ figure_markup(
   image="median-number-of-hints-per-page.png",
   caption="Median number of hints per page.",
-  description="TODO",
+  description="Column chart showcasing the median number of hints per page.",
   chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTYAbLxN40s6mNR1jo0XDe_V4siN8TAsx2mryMp5IQmlJ-9O9eJxYROz7Rw6ozyFP6hlIZHxxh95GqX/pubchart?oid=320451644&format=interactive",
   sheets_gid="175042082",
   sql_file="hints_per_page.sql"
@@ -158,22 +196,12 @@ As we create more and more automation with resource hints, be cautious when dyna
 
 With `preload` and `prefetch`, it's crucial to use the `as` attribute to help the browser prioritize the resource more accurately. Doing so allows for proper storage in the cache for future requests, applying the correct Content Security Policy ([CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)), and setting the correct `Accept` request headers.
 
-With `preload` many different content-types can be preloaded and the[full list](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#Attributes) follows the recommendations made in the Fetch [spec](https://fetch.spec.whatwg.org/#concept-request-destination). The most popular is the `script` type with 64% usage.
-
-{{ figure_markup(
-  caption="The percent of preload hints on mobile using the scripts type.",
-  content="64%",
-  classes="big-number",
-  sheets_gid="1829901599",
-  sql_file="as_attribute_by_year.sql"
-) }}
-
-This is likely related to a large group of sites built as Single Page Apps that need the main bundle as soon as possible to start downloading the rest of their JS dependencies. Subsequent usage comes from font at 8%, style at 5%, image at 1%, and fetch at 1%.
+With `preload` many different content-types can be preloaded and the[full list](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#Attributes) follows the recommendations made in the Fetch [spec](https://fetch.spec.whatwg.org/#concept-request-destination). The most popular is the `script` type with 64% usage. This is likely related to a large group of sites built as Single Page Apps that need the main bundle as soon as possible to start downloading the rest of their JS dependencies. Subsequent usage comes from font at 8%, style at 5%, image at 1%, and fetch at 1%.
 
 {{ figure_markup(
   image="mobile-as-attribute-values-by-year.png",
   caption="Mobile \"as\" attribute values by year.",
-  description="TODO",
+  description="Column chart showcasing the mobile `as` attribute values by year.",
   chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTYAbLxN40s6mNR1jo0XDe_V4siN8TAsx2mryMp5IQmlJ-9O9eJxYROz7Rw6ozyFP6hlIZHxxh95GqX/pubchart?oid=903180926&format=interactive",
   sheets_gid="1829901599",
   sql_file="as_attribute_by_year.sql"