[seo] web fontを最適化して100点取る

今回はfontの最適化についてです。
最近は静的なページならastroがかなり強いと思いますがweb fontの最適化は考える余地があります。
今回はそんなfontを最適化する話です。

問題

最初はAstroの公式に載っている方法でFontsourceを入れてやっていました。

layout.astro

---
import '@fontsource/noto-sans-jp/400.css'
import '@fontsource/noto-sans-jp/500.css'
import '@fontsource/noto-sans-jp/700.css'
import '@fontsource/noto-serif-jp/700.css'
---

結果

webfontを入れる前は100点だったのですが、50点に急落。cssがレンダリングブロックしてるとのこと。
これは実は↑で読み込んだfontがバンドルされてるのでファイルが大きくなってるんですね。それにしても10秒近くレンダリングブロックとか行き過ぎでは？
fontsourceの指定を間違っている気もしているので、わかれば教えてください。

てな感じで頑張ってみます。

やり方その1

スマホではweb fontを読み込まない。
...
だめか、だめですよね。これは負けた気がします。

やり方その2

google fontのcdnから遅延ロードする。

    <link rel='preconnect' href='https://fonts.googleapis.com' />
    <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin />
    <link
      rel='preload'
      as='style'
      href='https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@700&display=swap'
    />
    <link
      rel='stylesheet'
      media='print'
      onload="this.media='all'"
      href='https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@700&display=swap'
    />
    <!-- no-JS fallback -->
    <noscript>
      <link
        rel='stylesheet'
        href='https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@700&display=swap'
      />
    </noscript>

これでレンダリングブロック解決されることを祈る！！！
...
おしい。でも全然妥協点！

やり方その3

どうしても不要なものを読み込んでしまいます。

そこで必要なファイルだけ読み込むようにしましょう。
まず、google fontをcdnではなく、ダウンロードしてください。

追記
ここからダウンロードしたwoff2を配置した方が早いです。
https://gwfh.mranftl.com/fonts

otfでダウンロードできると思うので3割ほど圧縮されるwoff2に変換しましょう。
cloud convertにえいや。

作成されたwoff2ファイルをfont-faceで読み込みます。

mediumのやつが上手く変換できなかったのでバグ流場合はこちらからダウンロードでもよいかも？
https://github.com/ixkaito/NotoSansJP-subset

<style>
    @font-face {
      font-family: 'Noto Sans JP';
      src: url('/fonts/NotoSansJP-Regular.woff2') format('woff2');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }
/* 他のも読み込み */
</style>

どうだ。

無事100点に戻りました🎉

woff2に対応していないブラウザはどうするの？
無視。 基本対応しているので大丈夫なはずです。最悪system font読むし？