表示が遅い原因を、順番に調べた作業

• 測る前に直すと、効果が分からない
• 原因は、画像と読み込みの数に集中していた
• 上位の数件を直すだけで、大半が改善した

表示が遅いと感じたので、原因を調べた。手順を書く。

まず測った

直す前に、現状を測った。

• 表示が完了するまでの時間
• 読み込んでいるファイルの数
• 合計の大きさ

3つ目で、どこが重いか見当がつく。測らずに直すと、効果が確認できない。

内訳を見る

次に、何が重いか内訳を見た。

• 種類ごとに合計する
• 1件ずつ、大きい順に並べる
• 上位に何があるか確認する

3つ目で原因が見えた。上位の数件が、全体の多くを占めていた。

見つかった原因

調べた結果、原因はこの3つだった。

• 画像が、表示する幅より大きい
• 使っていない読み込みが残っている
• 画面の外の画像も、最初に読み込んでいる

3つ目が効いた。一覧ページは画像が多いので、影響が大きい。

画像を縮めた

最初に、画像を直した。

• 表示する幅に合わせて縮める
• 形式を見直す
• 大きい順に、上から直す

3つ目の順番で進めた。全部直す必要は無く、上位だけで十分だった。

読み込みを減らした

次に、不要な読み込みを削った。

• 使っていない機能の読み込みを探す
• どのページで必要か確認する
• 必要なページだけで読み込む

2つ目を飛ばすと危ない。消したら、別のページが動かなくなったことがある。

画面の外を後回しにする

一覧ページには、この対策が効いた。

• 最初に見える範囲だけ読み込む
• 画面の外は、スクロールしてから読み込む
• 最初に見える画像は、対象から外す

3つ目を忘れると、最初の表示がかえって遅くなる。

直した後に測り直す

1つ直すたびに、測り直した。

• どれくらい改善したか確認する
• 効果が無ければ、原因が違う
• 次の対策に進む

2つ目の判断ができる。効果の無い対策を続けない。

効果が無かった対策

やってみて、差が出なかったものも書く。

• 記述を圧縮する — 元が小さいので差が無い
• 読み込む順番を変える — 体感では分からない
• 文字の設定を変える — 測定値は変わるが、見た目に出ない

どれも元の大きさが小さいので、割合として影響しない。

測る環境をそろえる

測るときの条件も決めた。

• 同じ時間帯に測る
• 通信を絞った状態でも測る
• 何度か測って、平均で見る

2つ目が重要だ。速い回線では、差が見えない。

どこまでやるか

切り上げる基準も決めた。

• 体感で速くなったら、いったん止める
• 数値を追い始めると、終わりが無い
• 効果の大きい対策が無くなったら、終わり

2つ目に注意している。数値だけ追っても、読む人の体験は変わらない。

記録を残す

作業内容は記録に残した。

• 測った数値の前後
• やった対策
• 効果が無かった対策

3つ目を残すと、次に同じことを試さない。

遅いと感じた原因の切り分け

測る前に、どこが遅いのか切り分けた。

• 最初の反応が遅いのか
• 表示が揃うまでが遅いのか
• 操作に反応しないのか

この3つで、見る箇所が変わる。遅いという感覚だけでは、調べる対象が決まらない。

読む人の環境で考える

自分の環境だけで判断しないようにした。

• 通信が速い環境では、差が出ない
• 端末が新しいと、処理の重さが隠れる
• 条件を絞って測る

3つ目が必要だ。自分の環境で速ければ問題ない、とは言えない。

直す順番を決めておく

対策には順番がある。効果の大きいものから手をつけた。

• 画像を縮める — 効果が最も大きかった
• 不要な読み込みを削る — 次に効いた
• 画面の外を後回しにする — 一覧ページで効いた
• 記述の圧縮 — 差が無かった

4つ目を最初にやりかけたが、意味が無かった。測ってから順番を決めると、無駄が減る。

まとめ

• 測る前に直すと、効果が確認できない
• 大きい順に並べると、上位数件に原因が集中している
• 読み込みを消す前に、どのページで必要か確認する
• 1つ直すたびに測り直して、効果を確認する
• 数値だけ追い始めると、終わりが無い