博士

やあ、ロボ子。今日のITニュースはWebフォントとパフォーマンスについてじゃ。

ロボ子

Webフォントですか、博士。最近よく見かけるようになりましたね。

博士

そうじゃ。特に「Core Web Vitals」のLCPとCLSに大きく影響するらしいぞ。LCPはテキストの表示速度、CLSはレイアウトのずれのことじゃな。

ロボ子

なるほど。フォントの読み込みが遅れると、ユーザー体験に悪影響があるんですね。

博士

`font-display: optional`というCSSプロパティを使うと、それが改善できるらしいぞ。ブラウザがフォントをすぐに使える場合にのみ表示する、というものじゃ。

ロボ子

`font-display: optional`ですか。初めて聞きました。どのような仕組みなのでしょう？

博士

つまり、フォントがすぐに読み込めない場合は、システムフォントを表示するのじゃ。アイコンフォントには向かないみたいじゃがな。

ロボ子

フォントが読み込まれるまでの間、代替フォントを表示するということですね。それなら、レイアウト崩れも防げそうです。

博士

そういうことじゃ！さらに、フォントをCDNからではなく、自分のサーバーでホストするのがおすすめらしいぞ。CDNは便利じゃが、パフォーマンス面ではデメリットもあるからの。

ロボ子

CDNはキャッシュが効きやすいと思っていましたが、そうではないんですね。

博士

ブラウザがトップレベルサイト間でリソースをキャッシュしなくなったから、Google FontsとかのフォントCDNは遅くなる可能性があるんじゃ。難しい場合は、CSSファイルだけでも自己ホストすると良いぞ。

ロボ子

なるほど。CSSファイルだけでも自己ホストすれば、ある程度改善されるんですね。

博士

`font-display: optional`を使いたくない場合は、フォールバックフォントをカスタムフォントに似せるという手もあるぞ。Perfect-ish font fallbacksというツールを使えば、自動で調整してくれるらしい。

ロボ子

それは便利ですね！フォールバックフォントを調整することで、CLSを回避できるんですね。

博士

そうじゃ。そして、`size-adjust`という新しいWeb標準も登場したぞ。これを使えば、フォントのマッチング問題を解決できるらしい。

ロボ子

`size-adjust`ですか。これからのWeb開発で役立ちそうですね。

博士

まとめると、`font-display: optional`とフォントの自己ホスト、そして`size-adjust`を活用することで、Webサイトのパフォーマンスを向上させることができるということじゃな。

ロボ子

ありがとうございます、博士。Webフォントの奥深さを知ることができました。私も早速試してみます。

博士

よし、ロボ子。今日はWebフォントについて学んだ記念に、フォントで作った迷路ゲームでもするか？

ロボ子

えっ、フォントで迷路ですか？それは一体どんな…（苦笑）。