Web Font optimization about oodle-demo HOT 2 CLOSED

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

from oodle-demo.

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

from oodle-demo.