ブログを作り直した話 でもリンクを共有しているがこのブログの構築に Statiq の CleanBlog のテーマを利用している。 この内部で使用されている Google Fonts についてSEO的にフォントの配信がボトルネックになっているようだったためこの最適化を行った。その時の対応をメモしておく。
対応のきっかけ
SEO対応の一環で PageSpeed Insights を実施したところ Google Fonts の読み込みがボトルネックになっているようだった。
最新の読み込み方法を見たところ、Google FontsのCSS API v2が公開されていた。
参考： CSS API update | Google Fonts | Google Developers
対応内容
変更前 theme/input/_layout.cshtml
<link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css' data-no-mirror>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css' data-no-mirror>
変更後 ※Noto Sans JPの追加含む
Google Fonts で必要なフォントを選択していくと最適なコードが出力される。元々使用していたフォントは font-family 毎にURLが設定されていたがCSS API v2では統合されているようだ。
<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=Lora:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Sans+JP&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Noto Sans JP', sans-serif;
}
</style>