Webフォントを使っていることでPageSpeed Insightsの「レンダリングを妨げるリソースの除外」が目立っていたので、web.devの重要でないCSSを延期するを参考に調整してみました。
Google Fontsのページで表示される埋め込みコードは下記のようになっているかと思います。
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap" rel="stylesheet">上記を先程の記事を参考に下記に調整しました。
これによりCSSを非同期で読み込むようになります。
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap"></noscript>Bootstrap Iconsも使っているのでデフォルトの下記の埋め込みコードから…
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">下記のように調整して埋め込みました。
<link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css"></noscript>これでパフォーマンスのスコアが55から65になりました！
次はJavaScript関連が目立っているのでそのあたりを改善予定です。