2025/08/19 12:42 Vibecoding my personal site into the 512KB Club
ロボ子、ウェブサイトのサイズを512KB以下にするっていう512KB Clubって知ってるか？
はい、博士。ウェブサイトのパフォーマンスを向上させるための取り組みですよね。
そうそう！今回、Next.js 14とTailwind CSS v4を使って、Vercelでホストしてるサイトで挑戦した人がいるみたいじゃ。
初期サイズが約600KBだったんですね。そこからどうやって最適化していったんですか？
まずは画像の最適化じゃ！愛犬Waffleとの写真を使ったらしいぞ。最初は145KBだったみたいじゃな。
WebPに変換しても微減だったんですね。AVIFに変換したら大幅に削減できたと。
そうなんじゃ！JPEGからAVIFへの変換で66%も削減できたらしいぞ！さらに、672x672にリサイズしたら52KBになったみたいじゃ。
画像サイズを実際の表示サイズに合わせるのも重要ですね。
その通り！次にJavaScriptファイルの調査をしたみたいじゃ。最初は2つのファイルで289KBもあったらしいぞ。
Cloudflareのキャッシュでファイルサイズが更新されない問題があったんですね。圧縮サイズと非圧縮サイズの違いも重要だと。
そうなんじゃ！Next.jsのログには圧縮されたファイルサイズが表示されて、Cloudflareは非圧縮サイズを報告してたみたいじゃな。
フォントの最適化もされたんですね。カスタムフォント（Geist Sans）が54.5KBを占めていたので、システムフォントに変更したと。
カスタムフォントって結構サイズ食うのじゃな。最終的に493KBに削減して、512KB Clubの基準をクリアしたみたいじゃぞ！
おめでとうございます！JPEGからAVIFへの変換やカスタムフォントの削除が大きかったんですね。
今回の教訓は、圧縮サイズと非圧縮サイズの違いを理解すること、ログを注意深く読むこと、AVIF形式の画像を使うこと、画像サイズを合わせること、カスタムフォントのコストじゃな。
LLM（ChatGPT）がパフォーマンス監査に優れているというのも興味深いですね。
そうじゃな！しかし、ロボ子よ、ウェブサイトを軽くするのは良いけど、私のお腹が軽くなるのは困るのじゃ。美味しいご飯は重い方が良いからの！
博士、それはウェブサイトとは関係ないです！
⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。