@next/fontを使ってみた

Next.js13系〜提供が開始された @next/font を使ってみました。

せっかくなので、使う前(cssでフォントをimportした場合)と使った後の比較を行いました。

ライブラリについて

概要・使い方はこの辺りを参照。

https://nextjs.org/docs/basic-features/font-optimization

オプションなどはこの辺りを参照。

https://nextjs.org/docs/api-reference/next/font

Before/After

ライブラリの利用以外はサイト内の記事やその他のソースコードには変更を加えずにこのサイトのトップページで比較。

尚、このサイトでは以下のフォントを使用しています。

• ZenKakuGothicNew ... weight 400, 700
• Nunito ... weight 400, 600, 700

Lighthouseでの比較キャプチャ

使う前

使った後

使ってみて

使用前後で体感での表示速度の変化は、上記のキャプチャをご覧の通り分かりづらいです。

@next/fontを使うことで、ネットワークでfontのロードがずらっと並んでいたのが解消されてすっきりしたのは良かったです。

最後に

言わずもがな、このサイトを使った比較しか行っていないので、「どの程度の差が出るか」は参考程度に見て頂ければと思います。