はじめに

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

お題と経緯

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

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

やばい！チューニングしないと！
とかはどうでもいいですよね。進みましょう。

使用するもの

作成したサイト
Lighthouse

作成したサイト

使用した技術

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

Lighthouse

Lighthouse - Chrome ウェブストア

ご存知かもしれませんが、Google Chromeの拡張機能です。
1分ぐらいでDesktopとMobileのGoogle独自の基準でサイトのパフォーマンスを図ってくれます。
こいつの使い方をマスターして、なおかつスコアを上げることが今回の目的です。

気になるスコアは？

早速スコアを測ってみましょう。

驚愕しました。
何から手をつけていいのか・・・

まぁ赤く訴えてるところを1個づつ直そうと思い、Properly size images君に決めた！！
画像のサイズが重すぎるぞと、携帯電話のデータを考えてやれよと指摘が書かれていました。
また、Nextjsを使用していたので、Imageコンポーネントも進めてくれました。優秀。でも確かFirebaseでできなかったような・・・
最終的にSSGでデプロイしたいのでNextを駆使してFirebaseでデプロイするのは後々調べます。

改善させましょう

確かに、もらった画像のデータなどはそのままのクオリティで使用していた。
トップ画面横いっぱいに画像が表示されますが、その画像がなんと14MB
あかんて、スマホが熱くなるし、ガラケーだったら破裂します。

とりあえず、画像を圧縮するために見つけたImageOptimという圧縮ツールを使用しました。 ImageOptim — better Save for Web

良いと思った点は、設定ポイントがおそらく多い、あと古いデータは自動でゴミ箱に入るのでデータがすり替わってます。
ただし最低のクオリティへ変換しても1MBまでしか下がらなかった。
WebPとかにしたほうがいいのかな・・・？
とりあえず1MBで決行。
もう一枚3MBの画像があったので、そちらも圧縮し1MBになりました。
圧縮率にツッコミたかったですが、いいでしょう何か事情があるんでしょうね、解決しなくてはならないので、いずれ調べます。
ついでに意味があるかわかりませんが、react-lazyloadライブラリを使って、遅延読み込みも設定しました。

import LazyLoad from 'react-lazyload';

export const LazyLoadComponent = () => {
  return (
    <LazyLoad>
      <img src"imagePath" alt="img" />
    </LazyLoad>
  );
};

いざ決戦

雑いですが、何も知らないまま言われた通り使用している画像を圧縮し、意味があるかわからない遅延読み込みも伏兵で仕込んでおいた。
気になるスコアは！？上がりすぎでしょ、ゲームの初期でもこんな上がりませんがな
わかったことは、画像のサイズには敏感になったほうがいいですね。
ちなみにこの結果はDesktopです。
Mobileだとまだまだ画像は重いみたいです。