「ページを開いたら一瞬だけ白くなって、その後全部表示される…」
こんな経験、ありませんか？ちょっとしたリストを表示するだけなのに、なぜか重い。原因を調べてみたら、たった4行のテキストを表示するために2MB近いデータを転送していた——そんな驚きの事例が話題になっています。
今回はこの実例をもとに、「フロントエンドのパフォーマンス問題をどうやって特定するか」を一緒に見ていきましょう！ 🔍
Contents
なにが起きていたのか
問題のページはシンプルな構成でした。顧客向けエリアに設置された、日付と見出しが並ぶちょっとしたリスト。エディターが手動で更新するだけの、いわゆる静的に近いコンテンツです。
ところがそのページを開くたびに、一瞬ブランク（白紙）になってからコンテンツが出現するという怪しい挙動が。体感的には「遅い」とは言えないかもしれないけど、何かがおかしい。
こういうときに最初にやるべきことは、ブラウザの開発者ツール（DevTools）でネットワークタブを開くことです 🛠️
DevToolsで原因を掘り下げる
ネットワークタブを開いてページをリロードしてみると、転送量が異常に多いことがすぐわかります。4行しかないリストなのに、合計で約2MBのデータが流れていたんです。
よくある犯人としては、こんなものが挙げられます。
- 📦 巨大なJavaScriptバンドル：使っていない機能まで全部まとめてロードしている
- 🖼️ 最適化されていない画像：WebP変換やリサイズをしていない
- 🔁 不要なAPIレスポンス：表示に必要ないフィールドまでJSON丸ごと返している
- 🧩 重いUIフレームワークの読み込み：ちょっとしたリストにフル機能のSPAを使っている
実際に確認する際は、こんなコードでAPIレスポンスのサイズを簡単にチェックできます。
# Pythonでレスポンスサイズを確認するシンプルな例
import requests
url =
こちらも読まれています
📚 関連商品・おすすめ書籍
※本記事にはアフィリエイトリンクが含まれます。
PR
