merge

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

@@ -11,13 +11,13 @@ Zizzamia_bio: Leonardo is a Staff Software Engineer at <a href="https://www.coin
 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
 ---
 
@@ -109,19 +109,56 @@ Based on the HTTP Archive, let's jump into analyzing the 2020 trends, and compar
 
 More and more web pages are using the main resource hints, and in 2020 we are seeing the adoption remains consistent between desktop & mobile.
 
-{# TODO(authors): Add or remove figure description. #}
 {{ 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](../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 the [Lighthouse audit](https://web.dev/uses-rel-preconnect/) is giving on this matter. Starting from this year's report we also introduce how the latest dataset performs against Lighthouse recommendations.
 
@@ -133,11 +170,10 @@ Compared to [2019](../2019/resource-hints#resource-hints) the `dns-prefetch` had
 
 Across the board developers are learning how to better use resource hints, and compared to [2019](../2019/resource-hints#resource-hints) we've seen an improved use of `preload`, `prefetch`, and `preconnect`. For expensive operations like preload and preconnect the median usage on desktop decreased from 2 to 1. We have seen the opposite for loading future resources with a lower priority with `prefetch`, with an increase from 1 to 2 in median per page.
 
-{# TODO(authors): Add or remove figure description. #}
 {{ 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"
@@ -162,23 +198,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.
+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(
-  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%.
-
-{# TODO(authors): Add or remove figure description. #}
 {{ 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"