速度テスト HTMLコードが正しく動かない原因と確認方法

速度テスト HTMLコードで起きやすい問題

速度テスト HTMLコードをWebページに設置すると、測定画面が表示されない、開始ボタンを押しても反応しない、下りや上りの数値が極端に低いといった問題が起きることがあります。また、同じ光回線やプロバイダーを利用していても、時間帯によって結果が変わる場合があります。

速度測定は、ブラウザー上のJavaScript、測定用ファイル、通信経路、測定サーバーなど複数の要素に依存します。そのため、数値だけを見て回線障害と判断せず、どの段階で問題が起きているかを切り分けることが重要です。

原因1：JavaScriptのエラーやコードの記述ミス

HTMLコード内のJavaScriptに構文エラーがあると、測定処理が開始されません。カンマや括弧の不足、変数名の不一致、外部スクリプトの読み込み順序の問題は、速度テストでよくある原因です。

ブラウザーの開発者ツールを開き、Consoleに赤色のエラーが表示されていないか確認します。特定のファイル名や行番号が示されている場合は、その箇所を中心に確認してください。コードを変更した直後から動かなくなった場合は、直前の変更を戻して比較すると原因を特定しやすくなります。

原因2：HTTPSと外部リソースの混在

速度テストをHTTPSで公開しているページから、HTTPのJavaScript、画像、測定ファイルを読み込むと、ブラウザーが安全上の理由で通信をブロックすることがあります。この状態は混在コンテンツと呼ばれ、測定ボタンだけが動かない原因になります。

アドレスバーの鍵アイコンや開発者ツールのSecurity欄を確認し、HTTPの外部リソースが残っていないか調べます。可能であれば、すべてのスクリプトと測定用ファイルをHTTPSで配信し、相対パスまたは同一の安全なドメインを使用します。

原因3：CORS設定や測定サーバーの応答制限

HTMLページと測定用ファイルを別ドメインで運用する場合、サーバー側のCORS設定が必要になることがあります。許可するOriginが設定されていないと、ブラウザーは通信結果をJavaScriptへ渡さず、速度テストが途中で停止します。

Network欄で測定リクエストの状態を確認し、CORSエラー、403、404、500などが出ていないか確認します。測定サーバーが正しく応答しているか、ファイルのURLが有効か、アクセス制限やWAFがリクエストを遮断していないかも調べる必要があります。

原因4：ブラウザーのキャッシュや拡張機能

古いJavaScriptがキャッシュされていると、HTML側を修正しても以前の処理が実行されることがあります。広告ブロッカー、プライバシー保護機能、セキュリティ拡張機能が、測定用スクリプトや大量の通信を制限する場合もあります。

まずシークレットウィンドウや別のブラウザーで同じページを開き、結果を比較します。別環境で正常に動く場合は、通常ウィンドウのキャッシュを削除し、拡張機能を一時的に無効化します。公開時は、スクリプトのURLにバージョン番号を付けてキャッシュ更新を管理すると再発を抑えられます。

原因5：Wi-Fi環境やルーターの負荷

速度テスト HTMLコードが正常に動いていても、Wi-Fiの電波状況やルーターの処理負荷によって測定値が低くなることがあります。電子レンジなどの干渉、壁や距離、同時接続中の端末、古い無線規格は、下り速度と上り速度の両方に影響します。

パソコンをルーターへ有線接続して測定し、Wi-Fiの結果と比較してください。有線で改善するなら、ルーターの設置場所、5GHz帯の利用、ファームウェア更新、不要な通信の停止を確認します。ルーターを再起動して一時的に改善する場合は、負荷やメモリ使用量も原因候補です。

原因6：回線混雑や測定サーバーまでの距離

夜間や休日に速度が低下する場合は、光回線やプロバイダー側の混雑が疑われます。特定の測定サーバーだけ遅い場合は、サーバーの負荷や経路の問題であり、契約回線全体の性能とは限りません。

同じ時間帯に複数の測定サーバーを試し、下り、上り、Ping、遅延、パケット損失を記録します。近いサーバーで改善するなら経路の影響が考えられます。すべてのサーバーで長時間低下する場合は、プロバイダーの障害情報やIPv4・IPv6接続方式も確認してください。

原因を切り分ける確認手順

1. 表示状態を確認する：測定画面、開始ボタン、結果欄が正しく表示されるか確認します。
2. Consoleを確認する：JavaScript、CORS、混在コンテンツに関するエラーを調べます。
3. Networkを確認する：測定ファイルのURL、HTTPステータス、応答時間、転送量を確認します。
4. 環境を変えて測定する：別ブラウザー、シークレットウィンドウ、有線接続で比較します。
5. 時間帯を変えて記録する：朝、夕方、夜間の下り速度、上り速度、Pingを比較します。

速度テスト HTMLコードの改善方法

コードは測定開始、ダウンロード測定、アップロード測定、Ping測定、結果表示の処理を分けて管理します。各通信にタイムアウトを設定し、失敗時には利用者へ原因と再試行方法を表示すると、原因不明の停止を減らせます。

測定ファイルは適切なサイズにし、ブラウザーキャッシュが測定結果を歪めないようにします。複数回測定して平均値や中央値を表示し、測定サーバーの場所と実行時刻も記録すると、結果を比較しやすくなります。

• すべての外部リソースをHTTPSで配信する
• CORSの許可Originを必要な範囲に設定する
• JavaScriptのエラーと通信失敗を画面に表示する
• Wi-Fiと有線接続の結果を分けて記録する
• 測定サーバーを複数用意して経路差を比較する

測定結果を判断するときの注意点

速度テストの結果は、契約回線の理論値そのものではありません。端末性能、ルーター、Wi-Fi、プロバイダーの混雑、測定サーバー、同時通信の有無によって変化します。1回の数値だけで回線を評価せず、同じ条件で複数回測定してください。

動画視聴やWeb会議で問題がある場合は、下り速度だけでなく上り速度、Ping、遅延、パケット損失も確認します。コードの問題と通信環境の問題を分けて調べることで、不要な設定変更や機器交換を避けられます。

ブラウザーで手軽に測定する場合は、速度テストの結果と、独自に設置したHTMLコードの結果を同じ端末・同じ接続方式で比較すると、実装側の問題を判断しやすくなります。