Google Fonts CDN の使用をやめた理由
Google CDNからフォントを読み込むと、サイトの表示速度が低下します。
以前はヘッダーにリンクを1つ貼るだけで済ませていました。手軽で便利だと思っていたのです。しかし、Lighthouseのスコアを確認したところ、問題が見つかりました。ブラウザがGoogleのサーバーに対して追加の接続を行う必要があったのです。DNSルックアップやTLSハンドシェイクが発生し、それが遅延の原因となっていました。通信速度の遅いモバイル環境では、フォントが読み込まれるまでテキストが長時間表示されない状態になっていました。
そこで、セルフホスティングに切り替えました。作業は午後のひとときで済みました。今では、すべてのプロジェクトでこの方法を採用しています。
必要な設定は以下の通りです：
- WOFF2形式を使用する。WOFFよりも30%軽量です。.ttfや.eotのような古い形式はもう必要ありません。
- フォントを変換する。fonttoolsライブラリを使用して、.ttfファイルを.woff2に圧縮します。
- font-display: swap プロパティを使用する。これにより、フォールバックテキストが即座に表示されます。フォントの読み込み中にテキストが消えてしまうのを防げます。
- 重要なフォントをプリロードする。ファーストビュー（above the fold）で使用されるフォントについては、headにpreloadリンクを追加します。
- 必ず crossorigin 属性を使用する。これを忘れると、ブラウザがフォントを2回ダウンロードしてしまいます。
- フォントをサブセット化する。サイトが英語のみを使用している場合は、不要なグリフを削除します。これにより、ファイルサイズを最大70%削減できます。
- ファイルをキャッシュする。長い有効期限の cache-control ヘッダーを使用して、ブラウザにフォントを保持させます。
ワークフローはシンプルです： WOFF2に変換する。@font-face で swap を使用する。メインのフォントを crossorigin 付きでプリロードする。ファイルをキャッシュする。
この設定により、読み込み速度が向上し、クリティカルパスからサードパーティを排除できます。
本番環境でまだGoogle CDNを使用していますか？その理由をぜひコメントで教えてください。