サイトの表示が遅いときに、まず見るところと切り分けの順番

「サイトが重いんだけど」と社内から連絡が入り、自分の端末で開いてみると、確かにトップページの画像が出そろうまで少し間があります。ただ、先週までは普通に使えていたはずで、大きく変えた覚えもありません。管理画面を開いてはみたものの、どこを触れば効くのか見当がつかない。表示速度の相談は、たいていこういう状態から始まります。

速度の問題がやっかいなのは、原因が一か所とは限らないからです。ただ、見る順番を決めておけば、当てずっぽうに設定をいじって半日を溶かすことは避けられます。

「遅い」を具体的な言葉に置き換える

最初にやるのは、設定変更ではなく状況の確認です。次の4つを聞き取るか、自分で確かめます。

遅いのはどのページか（トップだけか、全ページか、特定の一覧ページか）
誰が見ても遅いのか、連絡してきた人だけか
いつごろから遅いのか、以前から常にそうなのか
真っ白なまま待たされるのか、文字は出るが画像が遅れて出るのか

ここで方向が大きく二つに分かれます。真っ白な時間が長いならサーバーの反応が遅い可能性が高く、文字が先に出て画像やレイアウトが後から追いつくなら、ページの中身が重い可能性が高くなります。

自分の環境が原因でないかを外す

特定の人だけが遅い場合は、サイト側ではなく見る側の環境が理由になっていることがあります。別の回線、スマートフォンのモバイル回線、ブラウザのシークレットウィンドウの3つで開いて比べると、切り分けが早く進みます。

社内からのアクセスだけが遅いなら、社内ネットワークの混雑や、通信を経由させる仕組み、端末のセキュリティ用ソフトが関係していることもあります。この場合はサイトをいくら軽くしても体感は変わらないため、情報システムの担当に状況を渡したほうが近道です。

ページの中身の重さを確かめる

全員が遅いと感じるなら、ページが読み込んでいるものを見ます。ブラウザの開発者ツールを開き、ネットワークの一覧をサイズの大きい順に並べ替えてください。上位に並ぶものが、そのページを重くしている当事者です。

多くの場合、上位に来るのは写真です。撮影したままの大きな画像を、表示幅が小さい枠にそのまま貼っていると、見た目は同じでも読み込む量だけが大きくなります。表示している幅に合わせて縮小し、必要以上に高い解像度を持たせないだけで、体感はかなり変わります。

次に多いのが埋め込みです。地図、動画、外部のフォーム、SNSのタイムラインなどは、それぞれが外部から追加のファイルを読み込みます。自社で用意していないぶん、こちらでは速さを調整できません。疑わしい埋め込みを一時的に外したページを作って比べると、どれがどれだけ効いているかが数字で分かります。よく使われているのに体感への影響が大きい場合は、置き場所を下のほうに移す、押したときだけ読み込む形にする、といった折り合いのつけ方もあります。

画面に出ている文字の見た目のために読み込む書体も、種類と太さを増やすほど重くなります。実際に使っている太さだけに絞ると、見た目を保ったまま量を減らせます。

サーバー側の反応を見る

文字が出るまでの時間そのものが長い場合は、サーバーが返事をするまでに時間がかかっています。契約しているプランの性能、同居している他のサイトの影響、動作環境のバージョン、そしてデータベースの肥大が主な着眼点です。

データベースは、記事の下書き履歴や各種のログが長年ためこまれて膨らんでいることがあります。件数が多いテーブルがないかを確認し、消してよいものかを判断してから減らします。先にバックアップを取り、戻せる状態を作ってから触ってください。

特定の時間帯だけ遅い場合は、混雑か、裏側で動いている定期処理が重なっている可能性があります。メール配信や集計、外部との連携などを決まった時刻に走らせているなら、アクセスの多い時間を避けてずらすだけで体感が変わることがあります。

なお、キャッシュの仕組みを入れると数値は良くなりますが、重い中身がそのまま残っている点は変わりません。更新した内容が反映されない、ログイン中の人にだけ崩れて見える、といった別の相談を呼び込むこともあるため、中身を軽くする作業を先に済ませてから検討するほうが扱いやすくなります。

変更は1つずつ、同じ条件で測る

改善作業で失敗しやすいのは、複数の対策を一度に入れてしまうことです。効いた施策と効かなかった施策が区別できなくなり、不具合が出たときの切り戻しも難しくなります。

同じページ、同じ回線、キャッシュが効いていない状態という条件をそろえ、変更前と変更後を1つずつ測ります。日付を書かない簡単な記録表に「何を変えたか」「表示までの体感と数値」を残しておくと、次に遅くなったときの出発点になります。

まとめ

表示速度の改善は、勘で設定をいじるより、切り分けの順番を守るほうが早く終わります。今日できることを1つ挙げるなら、遅いと言われたページを開発者ツールで開き、読み込んでいるファイルをサイズの大きい順に並べ替えてみてください。上位3つが画像なら、最初の打ち手はそこで決まります。

IRS WEBスタジオでは、表示速度の調査と改善作業を承っています。どこから手をつけるかの切り分けだけでもご相談いただけます。