メインコンテンツへ移動
Boletolibre

イベントサイトのモバイル性能チェックリスト

職場のPCで速いページも、参加者のスマートフォンでは遅く感じられます。BrowserStackの性能チェックリストは目標、現実的な動線、条件、結果、再試験を重視します。ここでは一人のモバイル利用者の動線を試します。同時に多数のアクセスを作る負荷試験とは別です。

Boletolibre編集部

公開日

イベント詳細から申込、チケットへのモバイル動線と端末、通信、再試験の記録を示すオリジナル図。
一つの点数ではなく参加者が完了すべき動線を測ります。

1. 利用者の作業と合格条件を決める

対象URLを決め、日時と会場の確認、申込、チケット先、確認表示までを列挙します。トップページだけが速くても購入先が遅ければ不十分です。

段階合格内容
イベントページ日時、場所、価格が読める
申込試験フォームが使える
チケット正しい提供者へ明確に移動
確認申込結果が分かる

BrowserStackは現実的な場面、測定可能な目標、修正後の再確認を勧めます。[1]

2. 同じ条件を記録する

  • 日付、版、URL、実機または画面幅、ブラウザー、OSを記す。
  • キャッシュのない初回訪問と必要な再訪を分ける。
  • 遅めの通信条件を決め、比較時に揃える。可能なら実機でも確認する。
  • 架空のアカウントと安全な申込先を使い、実際の課金や連絡を避ける。

DevToolsのCPU減速は操作するPCに対する相対値であり、実機の完全な再現ではありません。[3]

試験記録記入
URLと版________
端末、ブラウザー、通信________
キャッシュと試験アカウント________
動線の目標________

3. スマートフォンで一連の操作を確認

  • 新規タブで開き、見出しの表示とチケットボタンの位置ずれを確認する。
  • ポスターを拡大せずに日時、価格、利用情報を探す。
  • 架空の情報でフォームを操作し、遅延や重複送信を見る。
  • 外部チケット先まで進み、どのサービスが遅いか分ける。
  • 修正後に同じ条件で再試験する。

各段階の影響を記します。点数が上がっても購入ボタンが使いにくければ問題は残ります。

4. 実験データと実利用データを区別する

PageSpeed InsightsはLighthouseの模擬試験と、十分な利用がある場合は過去28日間のCrUX実利用データを表示します。新しいページはサイト全体のデータだけ、またはデータなしの場合があります。今日の模擬試験と過去の実利用を同じ測定として比べないでください。[2]

指標見る点
LCP主な内容の表示
INP実際の操作への反応
CLS画面の位置ずれ
実験診断今回の遅い資源

日付と、実験・ページ・サイト全体のどのデータかを記録します。[2]

5. 担当者と再試験を決める

記録値
段階と問題________
端末、通信、証拠________
参加者への影響________
担当者と修正________
同条件の再試験________

参加者の作業を妨げる問題を優先します。外部チケットサービスの遅延は提供者へ渡し、同時アクセスの検証は別の許可された負荷試験にします。

出典と参考資料

  1. Performance Testing ChecklistBrowserStack · 確認日
  2. About PageSpeed InsightsGoogle for Developers · 確認日
  3. Simulate mobile devices with Device ModeChrome for Developers · 確認日