GoogleFontでfont-display: swap;を指定。WEBフォント読み込み時間の改善：javascriptで読む

PageSpeed Insights　でこのブログを測定するとすごく遅い。
GoogleFontが原因っぽい。
そりゃフォントをダウンロードするんだから遅いよね・・・
詳細をクリックするとWEBフォント「@font-face」をしようね！とある。
でも、GoogleFontではその指定ができない。


しらべてJavascriptでfont-display: swap;する方法があった。
これをhead内に書いておく。
ひとまず早くなったのでOKとしておく。
でもInssightsのスコアは変わらず・・・。


CSS Tricksより
Google Fonts and font-display
https://css-tricks.com/google-fonts-and-font-display/


<script type="text/javascript">
<!--
const loadFont = (url) => {
  // the 'fetch' equivalent has caching issues
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.onreadystatechange = () => {
    if (xhr.readyState == 4 && xhr.status == 200) {
      let css = xhr.responseText;
      css = css.replace(/}/g, 'font-display: swap; }');

      const head = document.getElementsByTagName('head')[0];
      const style = document.createElement('style');
      style.appendChild(document.createTextNode(css));
      head.appendChild(style);
    }
  };
  xhr.send();
}

loadFont('https://fonts.googleapis.com/css?family=Noto+Sans+JP');
-->
</script>