はじめに

こんにちわ！こんばんわ！ご観覧ありがとうございます。
定期的に雑色な記事を投稿します。(タイトルは記事のメインの内容にしてますが)
基本的には抱えている問題を改善し、改善方法を記事にしてアップしようと考えています。

お題と経緯

作成した静的サイトのパフォーマンスをチューニングします。
経緯ですが、話すと長いので箇条書きでまとめます。

案件をいただき静的サイトを作成した
一時的にデプロイし公開することが急務だった
静的サイトに紐づくプロジェクトがそろそろアクティブになる

やばい！チューニングしないと！
ということで徐々にパフォーマンスが良くなるよう修正していきます。

使用した技術

Category	Technology Stack
Frontend	Nextjs,React,Typescript
Backend	Typescript,Node,CloudFunction
Database	Firestore
Design	XD

前回の内容

前回記事

パフォーマンス無関心で作ったサイトのパフォーマンスチューニング① - zare926のブログ

要点をまとめると前回記事はLighthouseのスコアを上げるために、画像のサイズを適切なものに変換して、スコアを上げてみました。
画像圧縮しただけで簡単にスコアが上がりました。

今回の内容

画像を圧縮したものの、PC、タブレット、スマホの画面サイズが多数存在するので、画像も1枚用意をするのではなく、画面に合わせて用意が必要だとLighthouseから指摘がありました。
実際に用意して実装してみました。
以下は例のコード

<img src="keyboard-800w.jpg"
    alt="A beautiful pink keyboard."
    width="400"
    height="400"
    srcset="keyboard-400w.jpg 400w,
            keyboard-800w.jpg 800w"
    sizes="(max-width: 640px) 400px,
            800px">

srcset属性

srcset 属性は、ブラウザーに対して複数の画像バリアント（異なるサイズや解像度の画像）を提供し、ブラウザーが適切な画像を選択するのを助けます。各画像バリアントは、画像ファイルとその幅の情報で構成されます。
ブラウザーは利用可能な表示領域に最適な画像を選択します。
簡単に言うと、使用する端末がどの程度Widthかを判断し、最適な画像を選んでくれます。

sizes属性

sizes 属性は、srcset 属性で指定された画像バリアントをどのように表示するかを示す指針を提供します。
これは、メディアクエリと画像の幅を組み合わせたものです。
ブラウザーは sizes 属性を使用して、利用可能な表示領域に基づいてどの画像を選択するかを決定します。
簡単に言うと、画像を表示をする際に、端末の画面サイズに合わせて表示方法を設定できます。

この2つを使用するということでした。
最初はちまちま画像を用意し、この二つの属性をせっせこ設定していましたが、あることに気がつきました。
NextjsにはImageコンポーネントがあるじゃないか！！

Imageコンポーネント

公式ドキュメント

Components: <Image> | Next.js

兎にも角にも、画像の最適化、srcsetの設定を自動的におこなってくれます！！！
sizesはレスポンシブなどもあるため、自分で決める必要があります。
生成されるコードを見るとsrcset属性が自動で付与されています。
設定によりますが、widthやheightも自動で確保してくれるので、場所取りも万全です。
この点はたくさん他の記事でも紹介されているので、以下にまとめておきます。

使い方まとめの参考サイト

Next.js の Image コンポーネントの使い方をまとめてみた | DevelopersIO

これでわかるNext.jsの画像最適化Imageコンポーネント | アールエフェクト

Next.js 13のImageコンポーネントの簡単な使い方とメリット

nextjsのversion12と13では使い方が変わっているのでその点も注意です。

Next.js v13のnext/imageの主要な変更点

Next.js 13 next/imageã§ãµã¤ãºæå®ããã«ã¢ã¹ãã¯ãæ¯ãä¿ã£ã¦è¡¨ç¤ºãã | Tech Q Lab - æ ªå¼ä¼ç¤¾ãã¥ã¼ã®ããã¯ããã°