Web Font optimization

[addyosmani]

Looking at the network panel for the initial route, we see two references to Web Font files. Both of these are referenced from gstatic:

some of our web fonts are flagged in the Lighthouse render-blocking stylesheet audit, delaying paints by ~1.5s:

Lighthouse's text visible during font-loads audit passes as well:

What are things we want to do here?

• Our fonts are delaying paint by up to 1.5s. That's unideal. We may want to switch to SVGs for icons instead of relying on the Material Icons package.
• Do we need Roboto? 'Montserrat', sans-serif appears to be in use for most of our text. Worth dropping Roboto entirely?
• Do we want to self-host Montserrat so we can configure font-display on it ourselves? Per CSS Tricks "If you embed fonts using a third party service like Google Fonts or TypeKit, there's not much you can do at the moment. Third party services control the content of a @font-face they host, so perhaps consider hosting your own fonts"
• Consider if we should use https://github.com/typekit/webfontloader

References:

  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" type="text/css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,600|Teko:300,400,500,600" type="text/css">
  <script src="https://use.fontawesome.com/releases/v5.0.10/js/all.js"></script>

Dropping Roboto will reduce the paint delays down to 740ms:

[addyosmani]

Tried using webfontloader:

  <script>
    WebFontConfig = {
      google: {
        families: ['Montserrat:400,600', 'Teko:300,400,500,600']
      }
    };

    (function (d) {
      var wf = d.createElement('script'), s = d.scripts[0];
      wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
      wf.async = true;
      s.parentNode.insertBefore(wf, s);
    })(document);
  </script>

But no dice on performance. We saw some regressions using it.

Going to experiment with a few other options from https://github.com/zachleat/web-font-loading-recipes/#experiments-in-progress

[addyosmani]

The below are a series of (mostly failing) experiments. I'm hoping to wrap up what I consider sane preconnect/preload/web-font guidance tomorrow. Although there are lots of best practices captured in ours docs, they aren't easy to adopt and I'm wary of scaring folks (e.g self-hosting, preloading, subsetting etc) are not always going to be accessible.

I'm considering doing two last simple experiments: preconnect to the two Google Fonts domains to CSS and font resources. Then, attempt to locally host + preload. That's about it.

• With just preconnecting (no preload) to the two font domains: https://www.webpagetest.org/result/180427_9J_28cd4796851715f00e748d8ff5bf9b9a/. Need to re-run this a few times, but it doesn't appear to improve things much.

• after switching to self-hosted fonts https://www.webpagetest.org/lighthouse.php?test=180427_EQ_651ec40dceb0e06d515bf12602acc56d&run=1 \o/

• and with font-display added to the above https://www.webpagetest.org/lighthouse.php?test=180427_CD_596d41626ef99d3ca51e93c790701d4a&run=3- need to investigate critical preloading far more than it should.

==========

with preconnect, preloading woff

TTI 8s
https://www.webpagetest.org/result/180427_W8_0b63f25bed9c96b064c0e7c4841a2911/
https://www.webpagetest.org/lighthouse.php?test=180427_W8_0b63f25bed9c96b064c0e7c4841a2911&run=3

second run TTI 6.8
https://www.webpagetest.org/result/180427_H9_1017e83765be1d927b41ba508fe161d6/

no preconnect, preloading woff
TTI 6.7
https://www.webpagetest.org/lighthouse.php?test=180427_SZ_640124eeed7f3d94b519e5f0b53d0722&run=1
https://www.webpagetest.org/result

https://www.webpagetest.org/result/180427_DP_78d4ffc556df95ddc32cb517021adaba/
6.08 TTI lol
https://www.webpagetest.org/lighthouse.php?test=180427_DP_78d4ffc556df95ddc32cb517021adaba&run=2

no preconnect, preloading fonts css
https://www.webpagetest.org/result/180427_1A_3791230c1d7c1175f8150ed6f3f2316d/
7s
https://www.webpagetest.org/lighthouse.php?test=180427_1A_3791230c1d7c1175f8150ed6f3f2316d&run=3