Chapter3 Optimizing Fonts and Images

[ShotaroHirose59]

https://nextjs.org/learn/dashboard-app/optimizing-fonts-images

In the previous chapter, you learned how to style your Next.js application. Let's continue working on your home page by adding a custom font and a hero image.

Topics

• How to add custom fonts with next/font.
• How to add images with next/image.
• How fonts and images are optimized in Next.js.

[ShotaroHirose59]

next/font

Q. そもそもなぜフォントを最適化する必要があるのか？ A. フォントファイルをフェッチしてロードする必要がある場合にパフォーマンスに影響を与える可能性がある。

フォントの場合、ブラウザが最初にフォールバック フォントまたはシステム フォントでテキストをレンダリングし、読み込まれた後にカスタム フォントに置き換えるときに、レイアウトのシフトが発生します。この入れ替えにより、テキストのサイズ、間隔、レイアウトが変更され、周囲の要素が移動する可能性があります。

これVuetify使ってるアプリでよく見るやつ。

next/fontを使うとアプリケーション内のフォントを自動的に最適化してくれる。

どうやって？

ビルド時にフォントファイルをダウンロードし、他の静的アセットとともにホストする。 →ユーザーがアプリケーションにアクセスしたときに、パフォーマンスに影響を与えるようなフォントに対する追加のネットワーク要求がないことを意味する。

サーバーコンポーネントによってクライアントJavascriptのバンドルサイズ削減する考え方と一貫しているのがわかる。

[ShotaroHirose59]

next/image

通常のimgタグ

<img
  src="/hero.png"
  alt="Screenshots of the dashboard project showing desktop version"
/>

以下のような最適化が必要

• 画像がさまざまな画面サイズで応答することを確認する
• さまざまなデバイスの画像サイズを指定する
• 画像の読み込み時にレイアウトがずれるのを防ぐ
• ユーザーのビューポートの外にある画像を遅延読み込みする

next/imageコンポーネントは画像を自動的に最適化してくれる

コンポーネントは HTMLタグの拡張であり、次のような自動画像最適化機能が付属している。 - 画像読み込み時に自動的にレイアウトがずれるのを防ぐ - 小さなビューポートを備えたデバイスに大きな画像が送信されるのを避けるために、画像のサイズを変更する - デフォルトで画像を遅延読み込みする (画像はビューポートに入るときに読み込まれる)。 -ブラウザがサポートしている場合、WebPやAVIFのような最新のフォーマットで画像を提供する >小さなビューポートを備えたデバイスに大きな画像が送信されるのを避けるために、画像のサイズを変更する これ意図しないサイズになることがあったな