Create data viz and minor edits to the SEO chapter (#496)

* SEO edits and data viz

* fig9, remove unedited

* figs

* Optimised images with calibre/image-actions

src/templates/en/2019/chapters/fonts.html

@@ -10,7 +10,7 @@
   - make changes to the markdown content directly (`src/content/<lang>/<year>/<chapter>.md`) because any changes to the chapter templates will be overwritten by the generation script
 #}-->
 
-{% set metadata = {"unedited":"true","part_number":"I","chapter_number":6,"title":"Fonts","description":"Fonts chapter of the 2019 Web Almanac covering where fonts are loaded from, font formats, font loading performance, variable fonts and color fonts.","authors":["zachleat"],"reviewers":["hyperpress","AymenLoukil"],"discuss":"1761","published":"2019-11-11T00:00:00.000Z","last_updated":"2019-11-11T00:00:00.000Z"} %} {% block description %}{{ metadata.get('description',metadata.get('title') + ' chapter of the ' + year + ' Web Almanac probing into the use of ' + metadata.get('description',metadata.get('title')) + ' on the web.') }}{% endblock %} {% block meta %}
+{% set metadata = {"unedited":"true","part_number":"I","chapter_number":6,"title":"Fonts","description":"Fonts chapter of the 2019 Web Almanac covering where fonts are loaded from, font formats, font loading performance, variable fonts and color fonts.","authors":["zachleat"],"reviewers":["hyperpress","AymenLoukil"],"discuss":"1761","published":"2019-11-11T00:00:00.000Z","last_updated":"2019-11-15T00:00:00.000Z"} %} {% block description %}{{ metadata.get('description',metadata.get('title') + ' chapter of the ' + year + ' Web Almanac probing into the use of ' + metadata.get('description',metadata.get('title')) + ' on the web.') }}{% endblock %} {% block meta %}
 <meta name="description" content="{{ self.description() }}" />
 <meta property="og:title" content="{{ self.title() }}" />
 <meta property="og:url" content="https://almanac.httparchive.org{{  url_for(request.endpoint, **get_view_args(lang=language.lang_code, year=year)) }}" />
@@ -209,7 +209,9 @@ <h3 id="are-fonts-being-hosted-on-the-same-host-or-by-a-different-host">Are font
         >, and <a href="https://www.w3.org/TR/preload/"><code>preload</code></a> <a href="./resource-hints">resource hints</a> but high priority web fonts should be same-host requests to minimize the performance impact of web fonts. This is especially important for fonts used by very visually prominent content or body copy occupying the majority of a page.
       </p>
       <p>(Graph Title: Third-party hosted versus self-hosted (local); Source: 06.01)</p>
-      <p>The fact that three quarters are hosted is perhaps unsurprising given Google Fonts dominance that we will discuss <a href="#what-are-the-most-popular-third-party-hosts">below</a>. Note that <code>preload</code> is not yet available with Google Fonts, as they generate unique URLs for their fonts <a href="https://github.com/google/fonts/issues/1067">which are liable to change</a>, and even <a href="https://github.com/google/fonts/issues/234">serve different fonts for different browsers</a>. Google serves fonts by getting websites to include a CSS link to a stylesheet. This will be in the main HTML (more on which below), so will already be connected to quickly. However, the fonts themselves are hosted on another domain <code>https://fonts.gstatic.com</code> so <code>preconnect</code> is a great option here as that will not be discovered until the CSS is downloaded.</p>
+      <p>The fact that three quarters are hosted is perhaps unsurprising given Google Fonts dominance that we will discuss <a href="#what-are-the-most-popular-third-party-hosts">below</a>.</p>
+      <p>Google serves fonts using third-party CSS files hosted on <code>https://fonts.googleapis.com</code>. Developers add requests to these stylesheets using <code>&lt;link&gt;</code> tags in their markup. While these stylesheets are render blocking, they are very small. However, the font files are hosted on yet another domain: <code>https://fonts.gstatic.com</code>. The model of requiring two separate hops to two different domains makes <code>preconnect</code> a great option here for the second request that will not be discovered until the CSS is downloaded.</p>
+      <p>Note that while <code>preload</code> would be a nice addition to load the font files higher in the request waterfall (remember that <code>preconnect</code> sets up the connection, it doesn’t request the file content), <code>preload</code> is not yet available with Google Fonts. Google Fonts generates unique URLs for their font files <a href="https://github.com/google/fonts/issues/1067">which are subject to change</a>.</p>
       <h3 id="what-are-the-most-popular-third-party-hosts">What are the most popular third-party hosts?</h3>
       <p>(Graph Title: Popular Web Font Hosts by Request, Source: 06.02)</p>
       <p>The dominance of Google Fonts here was simultaneously surprising and unsurprising at the same time. It was unsurprising in that I expected the service to be the most popular and surprising in the sheer dominance of its popularity. 75% of requests (55–57% of fonts) is astounding. TypeKit was a distant single-digit second place, with the Bootstrap library accounting for an even more distant third place.</p>
@@ -240,7 +242,7 @@ <h3 id="most-popular-typefaces">Most popular typefaces</h3>
       <p>(Graph Title: Top typefaces, Source: 06.31)</p>
       <p>It is unsurprising that the top entries here seem to match up very similarly to <a href="https://fonts.google.com/?sort=popularity">Google Fonts' list of fonts sorted by popularity</a>.</p>
       <h2 id="what-font-formats-are-being-used">What font formats are being used?</h2>
-      <p><a href="https://caniuse.com/#feat=woff2">WOFF2 is pretty well supported</a> in web browsers today. Google Fonts serves WOFF2, a format that offers improved compression over its predecessor, which was already an improvement over the other font formats.</p>
+      <p><a href="https://caniuse.com/#feat=woff2">WOFF2 is pretty well supported</a> in web browsers today. Google Fonts serves WOFF2, a format that offers improved compression over its predecessor WOFF, which was itself already an improvement over other existing font formats.</p>
       <p>(Graph Title: Popular MIME Types, Source: 06.03)</p>
       <p>From my perspective an argument could be made to go WOFF2-only for web fonts after seeing the results here. I wonder where the double-digit WOFF usage is coming from? Perhaps developers still serving web fonts to Internet Explorer?</p>
       <p>Third place <code>octet-stream</code> (and <code>plain</code> a little further down) would seem to suggest that a lot of web servers are configured improperly, sending an incorrect MIME type with web font file requests.</p>