サイトが遅い原因を、推測ではなく測って特定した

• 勘で直すと、効果の無い場所を触る
• 測れば、どこに時間がかかっているか分かる
• 最も大きい1つを直すだけで、大半が改善する

サイトの表示が遅いと感じ、重そうな箇所を直していた。測ってみたら、まったく違う場所が原因だった。

勘で直していた頃

こういう直し方をしていた。

• 画像が多いから遅い、と考えて画像を減らす
• プラグインが多いから、と考えて減らす
• 効果が出ているか、確認していない

3つ目が問題だ。直した気になっているだけだった。

測る道具

ブラウザに入っている機能で測れる。

• 開発者ツールの通信の記録
• 何がどれだけ時間がかかったか、一覧で見える
• 大きい順に並べ替えられる

3つ目が最初にやることだ。一番大きいものから見れば、効率がよい。

測って分かったこと

自分のサイトの場合、こうだった。

• 最も時間がかかっていたのは、外部から読み込む書体
• 画像は、思っていたほど影響していなかった
• 最初の応答そのものが遅い場面があった

1つ目は想定外だった。自分のサイトの中ではなく、外に取りに行く部分が遅かった。

外部の読み込み

外から読み込むものは、こちらで制御できない。

• 書体
• 解析や広告の仕組み
• 埋め込んだ外部の内容

対処として、本当に必要か見直すことから始めた。書体は2種類に絞り、使う太さも限定した。

最初の応答

サーバーが応答するまでの時間も測った。

• ここが遅いと、何をしても速くならない
• サーバーの性能と、処理の重さで決まる
• キャッシュが効いているか確認する

3つ目で改善することが多い。毎回作り直しているページを、作り置きにするだけで変わる。

頼むときの伝え方

測った結果を渡して相談している。

表示が遅いので調べました。

【測定結果】
- 最初の応答まで：◯秒
- 最も時間がかかっている読み込み：（名前）◯秒
- 全体の転送量：◯MB

【環境】
WordPress / 使っているプラグイン

改善する方法を、効果の大きい順に挙げてください。

数字を渡すと、一般的な助言ではなく、自分のサイトに合った答えが返る。

効果を確認する

直した後、必ずもう一度測っている。

• 直す前の数字を記録しておく
• 直した後に測る
• 変わっていなければ、その対処は効いていない

3つ目を確認せずに次へ進むと、効いていない対処が積み重なる。

遅さの種類を分ける

「遅い」と感じる原因は、1つではなかった。

• 最初に何も表示されない時間が長い
• 表示は始まるが、全部出るまで時間がかかる
• 表示後に、位置がずれ動く

3つ目は速度の問題ではないが、体感としては「遅い」に分類される。画像の大きさを指定していないと、読み込み後に場所が確保されてずれる。測定値が良くても、見ている人は使いにくいと感じる。数字だけでなく、実際に自分で開いて体感も確認するようにした。

やらなかったこと

やろうとして、やめたこともある。

• 速度を上げるプラグインを追加する
• 設定を大量に変える
• すべての項目を改善しようとする

1つ目は、重さを減らすために重いものを足すことになりかねない。測ってから必要なものだけ入れた。

スマホでの測り方

パソコンで測ると、実際の体感と合わない。

• 開発者ツールで、通信を遅くして測る
• 端末の性能を落とした想定でも測れる
• 実際のスマホでも、一度は確認する

1つ目は設定で切り替えられる。手元の回線が速いと、何をしても速く見えてしまう。読者の多くは、こちらより遅い環境で見ている。遅い条件で測ると、パソコンでは気づかなかった待ち時間が見える。この条件で満足できる速さにする、という基準に変えた。

どこまでやるか

完璧を目指すと終わらないので、線を引いた。

• 最も大きい原因を1つ直す
• それで満足な速さになれば、やめる
• ならなければ、次に大きいものを直す

1つ目だけで、体感がかなり変わった。細かい改善は後回しでよい。

まとめ

• 勘で直すと、効果の無い場所を触る
• 開発者ツールで、何が時間を使っているか測る
• 大きい順に並べ替えて、上から対処する
• 測定結果を渡すと、自分のサイトに合った答えが返る
• 直した後に測り、効いていなければ戻す