「不安定な（速度の出ない）通信環境だとどうなるのか。」
「ページの読み込みが滞る際にどんな挙動になるのか。」
Web制作に携わっていると上記のような検証が必要なシーンがあると思います。
例えば、4Gや5G回線が普及していないエリアでは通信環境が不安定ですし、回線エリア以外の要因で通信環境が乱れる可能性もあります。安定した通信環境で作業することが当たり前の開発者と閲覧者の通信環境が必ずしも一致するとは限りません。
どのユーザーにもできる限り綺麗にページを閲覧してもらうためには、「通信環境が安定していない状態」もシミュレートして検証しておく必要があるわけです。
そこで今回は、不安定な通信環境をシミュレートできるGoogle Chromeの検証モード（デベロッパーツール）の機能をご紹介いたします。
Google Chromeで通信環境をシミュレートする方法
Chromeのデベロッパーツールを使うのですが、基本的な使い方は下記記事を参考にご覧ください。
ウェブサイトの構造（HTML）や適用されているスタイル（CSS）を確認するには、デベロッパーツールが便利です。構造がわかれば、一部を編集して簡単にテスト・検証することも可能です。 そこで当記事では、Google Chromeのデベロッパーツールの基本的な使い方を解説いたします。 基本的な...
デベロッパーモードを立ち上げたら下記箇所「Network」タブ内にある「No throttling」から擬似通信環境を選択できます。
あらかじめプリセットとして下記の選択肢が用意されています。
- Fast 3G
- Slow 3G
- Offline
任意のものを選択して、デベロッパーツールを開いたままリロードすると通信環境をシミュレートできます。「Fast 3G」でも通常時に比べて読み込みが遅くなることがわかるはずです。
さらに通信速度を遅くして検証したい場合は、「Slow 3G」を選択するか、「Custom」>「Add」からダウンロード速度とアップロード速度を設定してオリジナルのプリセットを作成することも可能です。
これで不安定な通信環境でサイトやページがどのように表示されるかを検証することができます。
どんな検証に活用できるの？
通信環境をシミュレートする方法をご紹介いたしましたが、例えばどんなシーンで活用できるのでしょうか。
冒頭でも述べましたが、開発者と閲覧者の環境は必ずしも一致せず、意図しない見え方でWebサイトが閲覧されている可能性があります。不安定な通信環境を再現できれば、下記のような検証にご活用いただけます。
- 読み込み途中でレイアウトが崩れていないか
- ページ内の要素が適切な順番で読み込まれるか
- ページが読み込み中にロード画面が表示されるか
- 読み込みが終わらずとも指定した秒数等でロード画面を非表示にできるか
サイトにロード画面を実装できるプラグインは下記記事でご紹介しております。
WordPressサイトにロード画面を実装できるプラグインをご紹介いたします。シンプルなロード画面なら簡単に実装可能です。重たいページを表示する際など、中途半端に読み込まれている状態を隠すために役立ちますので、チェックしてみてください。 有料版（Pro）にアップデートもできるようですが、当記事...
何らかの要因で読み込みが終わらない場合でも、指定した方法でロード画面を非表示にできる機能がついている優秀なプラグインです。
まとめ
開発環境ではページやサイトをスムーズに閲覧できても、閲覧者の通信環境によっては問題が発生している可能性もあります。
あらゆる通信環境で検証することは現実的ではありませんが、最低限、読み込み中にレイアウトが崩れていないか、ロード画面が必要かどうかなどを検証しておくといいでしょう。
当記事では不安定な通信環境をシミュレートする方法をご紹介いたしましたが、下記記事ではページやサイトの表示速度の改善方法をご紹介しております。よろしければご覧ください。
サイト運営では、競合サイトと差別化するためブラウザでの見た目を第一に考えることも多いでしょう。しかしどんなにブラウザでの見た目をこだわっても、動画や画像を多用しすぎてページの読み込み速度が遅くなってしまうことで、不快に感じた閲覧者はページから離脱してしまいます。 ページの表示速度はとても重要な...
Webサイトにアップする画像の容量はなるべく小さい方が良いです。理由は次の2つです。 閲覧者に負荷をかけない 検索エンジン対策 本稿では、なぜ画像容量が小さい方が良いかという話と、画像容量を圧縮する方法について解説します。 画像容量を小さくしたほうがいい理由と背景...
コメント