サイトが途中まで表示されて止まる

レン

ページが途中まで出て、そこからずっと読み込み中のまま…エラーも出ない。

プロクラ

エラーが出ないぶん、かえって調べにくい状態だね。でもこれは「どこかで待たされている」だけなので、待たせている相手を特定すれば直せるよ。

待たせている相手を特定する

プロクラ

ブラウザの開発者ツールを開いて、通信の一覧を見るのが一番早い。何が完了していないかが一目で分かるからね。

• 最初のHTML自体が返ってこない → サーバー側の処理が終わっていない
• HTMLは来たが、画像やスクリプトが止まっている → その配信元の問題
• 外部サービスの読み込みで止まっている → 相手側の問題。自分では直せない
• 全部完了しているのに表示が止まる → ページ内の処理の問題

サーバー側で待たされている場合

• データベースへの問い合わせが重い、または応答が返っていない
• 外部のAPIを呼んでいて、その返事を待っている
• 処理の中で無限に待つ書き方になっている
• 同時処理数の上限に達し、順番待ちになっている

プロクラ

2つめは見落とされやすいよ。ページの表示中に外部サービスへ問い合わせる作りだと、相手が遅いときに自分のサイトまで巻き込まれる。呼び出しには必ず待ち時間の上限を設けよう。

外部の読み込みで止まる場合

プロクラ

広告、アクセス解析、フォント、SNSの埋め込み。これらは自分のサーバーとは無関係に読み込まれる。相手が遅ければ、こちらがいくら速くても表示は完了しないんだ。

• 本当に必要な読み込みかを見直す
• 後回しにできるものは、表示を妨げない形で読み込む
• 自前で持てるもの（フォントなど）は、自分のサーバーに置く
• 止まった場合に表示が壊れない作りにする

上限を決めておく

プロクラ

根本的な考え方として、待ち続けるより打ち切るほうがいい。上限を決めておけば、遅いときも「読み込み中のまま」ではなく、はっきりエラーになる。原因を追いやすくなるし、利用者も次の行動を取れる。

• 外部への問い合わせには、必ず待ち時間の上限を設ける
• Webサーバー側にも、処理を打ち切るまでの時間の設定がある
• 打ち切ったときに、何が起きたかをログに残す
• 利用者には、読み込み中のままではなく状況を伝える

レン

待たせてる相手を特定する。開発者ツールで通信を見ればいいんだね。

特定の環境だけで起きる場合

プロクラ

自分の環境では問題ないのに、一部の利用者から報告される、という形もある。この場合は、環境による違いを疑おう。

• 回線が遅い環境では、重いページほど途中で止まったように見える
• 企業や学校のネットワークで、外部サービスへの通信が遮断されている
• 利用者側の拡張機能が、特定の読み込みを止めている
• モバイル回線で、通信量の制限がかかっている

プロクラ

こちらで直せるのは1つめだね。ページを軽くすれば、遅い回線でも完了しやすくなる。外部の読み込みを減らしておくと、2つめや3つめの影響も小さくできるよ。