Google Fonts周りに４行追加して、読み込みを爆速にした件

　ポートフォリオを、Astroで小さく作ってる割に、気づけばLighthouse Performance:50。なんでやねん。画像を削りつつ、Google Fonts対策に４行追加。Performance 98、FCP(初期表示)5.8秒→0.9秒に縮小。ポンチ絵が見当たらなかったので、楽しく手書きしました。Google Fonts重くてお悩みの方、良かったら参考に。

差し込んだ４行

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" as="style" href="...&display=swap" />
<link rel="stylesheet" href="...&display=swap" media="print" onload="this.media='all'" />

ポンチ絵

ガクつくこともございましょう

世界中の回線が、あとほんの少しでいいから、速くなりますように

参考

以下の記事のおかげで理解できました。ありがとうございます。

• [seo] web fontを最適化して100点取る:https://qiita.com/wwwy/items/7f55eccbe23272180c26
• Webフォントとパフォーマンスの両立を諦めない:https://zenn.dev/ivry/articles/f214469e05e427
• Webフォント読み込み戦略（2021年: https://t32k.me/mol/log/optimize-webfont-loading/
• 【ページ表示高速化】Google Fonts を非同期で読み込む方法 :https://www.limosuki.com/2021/10/google-fonts-speed.html
• The Fastest Google Fonts(Harry Roberts / CSS Wizardry): https://csswizardry.com/2020/05/the-fastest-google-fonts/