この記事について
システムの応答速度を極限まで高める パフォーマンスチューニング の作業に没頭していた日の記録です。
動作環境は Next.js（JavaScript）で構築した Web サイトです。以下は、その作業のなかで得た気づきの記録です。
エンジニアとして、数ミリ秒の短縮に情熱を注ぐのは非常にエキサイティングな瞬間です。しかし数値を追い求めるなかで、ある問いに突き当たりました。
「この最適化は、本当にユーザーの幸せにつながっているのか？」
技術的な正解が、ユーザーの正解とは限らない
チューニングを進めるなかで直面したのは、「速度」と「利便性」のトレードオフ でした。
たとえば、次のような手を打てば数値上のスコアは確実に向上します。
- 計算負荷を減らすために、一部の動的な機能を制限する
- キャッシュを強力に効かせて、最新情報の更新頻度を下げる
しかしそれによって、ユーザーが最新情報を得られなかったり、期待するアクションが起こせなかったりすれば、それは「ユーザーファースト」とは呼べません。スコアは上がったのにサービスとしては後退している、という状態はあり得ます。
真の最適化とは「待ち時間の質」を変えること
今回の作業を通じて学んだのは、パフォーマンス改善の本質は「サーバーの処理時間を削ること」だけではない、ということです。
心理的な待ち時間の軽減
処理が走っている間にスケルトンスクリーン(読み込み中の枠組み)を表示する。実際の処理時間は変わらなくても、体感速度は明らかに変わります。
実装したのは Next.js（JavaScript）のサイトで、考え方はシンプルです。データが揃うまでは骨組みだけのコンポーネントを表示し、揃い次第本来のコンテンツに差し替えます。
// スケルトンスクリーンの基本パターン
function ArticleList() {
const [articles, setArticles] = useState(null);
useEffect(() => {
fetchArticles().then(setArticles);
}, []);
// データが揃うまでは骨組みを表示する
if (!articles) {
return <ArticleListSkeleton />;
}
return articles.map((a) => <ArticleCard key={a.id} {...a} />);
}骨組み側の見た目は、CSSのグラデーションアニメーションだけで作れます。読み込み中であることが伝わればよいので、実装自体は数行で済みます。
.skeleton {
background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 37%, #e5e7eb 63%);
background-size: 400% 100%;
animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer {
0% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}優先順位の再定義
すべてのデータを一度に読み込むのではなく、ユーザーが今すぐ見たい部分を最優先で届ける 設計にする。全体の完了時間より、最初の情報が出るまでの時間のほうが体験を左右します。
Next.js では、優先度の低いデータの取得を Suspense で分離することで、この「今すぐ見たい部分を先に出す」設計を素直に書けます。
// 優先順位をつけたレンダリング
function Dashboard() {
return (
<>
<PrimaryContent /> {/* すぐ表示する */}
<Suspense fallback={<SecondaryContentSkeleton />}>
<SecondaryContent /> {/* 後から読み込む */}
</Suspense>
</>
);
}
数値としての「絶対的な速さ」と、ユーザーが感じる「相対的な快適さ」。このバランスを取ることこそが、エンジニアに求められる高度な技術力なのだと痛感しました。
これからの評価軸
今後は、単にLighthouseのスコアを100点に近づけることをゴールにするのではなく、「この100msの短縮が、ユーザーのストレスをどれだけ取り除けるか」 という評価軸を持ち続けたいと思います。
計測は必要です。ただし計測できる数値が、そのまま価値の大きさを表しているとは限りません。技術の先には必ず「人」がいることを忘れないようにしたいですね。
数値を追う自体は今後も続けます。Next.js であれば next build の出力でページごとのバンドルサイズを確認できますし、Lighthouse（Chrome DevTools から実行可能）で LCP・INP などの Core Web Vitals を計測できます。ただし、これらのスコアを改善すること自体をゴールにしないよう、今回の経験を踏まえて意識するようにしています。
参考
- Web Vitals（web.dev / Google 公式） — 体感速度を測るための指標の定義