最近、あるWebアプリの表示速度に悩まされていました。
ページの読み込みにやたらと時間がかかる。
重い画像を使っているわけでもないし、通信量もそれほどではない。
なのに「とにかく遅い」。
原因は意外なところに…
原因を探っていくうちに、決定的な問題が見つかりました。
「ボタンを押したときに実行すべき処理を、ページ読み込み時に先にやってしまっていた」のです。
たとえば以下のようなケース
ページ読み込み時に実行される処理
def load_page():
heavy_data = fetch_heavy_data() # 実はボタンを押すまで必要ない
render_page(heavy_data)この fetch_heavy_data() は、APIにリクエストを投げて大量のデータを取得する処理。
実際にはユーザーが「検索」ボタンを押したときにだけ必要なのに、最初から全部やってしまっていました。
対応：処理をユーザーアクションに移動
対策としてはシンプルで、ページ表示時は必要最低限のデータだけを読み込み、重い処理は「必要になってから」行うように変更しました。
# ページ表示時
def load_page():
render_initial_page()
# ボタンが押されたとき
def on_button_click():
heavy_data = fetch_heavy_data()
update_page(heavy_data)この変更だけで、ページ表示速度は劇的に改善されました。
教訓：処理のタイミングは重要
開発中は「とりあえず動くコード」に集中しがちですが、「それは今、本当に必要な処理か？」という視点は非常に重要です。
- ページ表示時にやるべきこと
- ユーザー操作があってからやるべきこと
この2つを切り分けるだけで、UXは大きく改善します。
まとめ
- ページが遅い原因は「重い処理が先に走っていた」ことだった
- 重い処理は、ユーザー操作後に実行する設計へ変更
- 結果：ページ表示速度が大幅改善
開発初期には見落としがちなポイントですが、パフォーマンスチューニングの第一歩として非常に効果的です。
