イベントサイトの遅い外部埋め込みを調べる方法
動画やチケットの埋め込みはページを遅くしますが、考えずに削除すると購入が壊れます。web.devのガイドは提供者を特定して影響を測ることから始めます。イベントでは券売や道案内に必要かも判断します。
Boletolibre編集部
公開日
1. 埋め込みと参加者の目的を対応させる
動画、地図、チケット、チャット、解析、同意サービスの掲載ページと担当者を記します。券売は重要でも宣伝動画は後から読み込めるかもしれません。
| 埋め込み | 用途 | 代替 |
|---|---|---|
| チケット | 選択・購入 | 承認済み直接リンク |
| 動画 | イベント紹介 | 静止画像と再生ボタン |
| 地図 | 会場案内 | 住所と経路リンク |
| チャット・解析 | 支援・測定 | 連絡先または判断記録 |
web.devは外部の通信、JavaScript処理、大きなメディアの費用を説明しています。[1]
2. 提供者を一つずつ比較する
- URL、端末、通信、キャッシュ、元の状態を記録する。
- ローカル診断で一つの提供者だけを遮断または遅延し、購入不可の状態を公開しない。
- 複数回比べ、申込と購入が動くか確認する。
- 公開前に重要な資源を元に戻す。
web.devとChrome DevToolsはリクエスト遮断による原因調査を説明します。購入できないまま速くなっても改善ではありません。[1][2]
| 比較記録 | 値 |
|---|---|
| 提供者と資源 | ________ |
| 条件と元の結果 | ________ |
| 診断での変更 | ________ |
| 差と動線の状態 | ________ |
3. 小さく安全な対策を選ぶ
| 場合 | 案 |
|---|---|
| 不要 | 役割を確認して削除 |
| 画面下部 | 近づいた時かタップ後に読込 |
| 購入に必須 | 提供者と調整して購入動線を保つ |
| 大きなメディア | まずプレビューを表示 |
| 表示を妨げるスクリプト | 対応するasync/deferを確認 |
async/deferでも通信やCPUの負荷は消えません。提供者のスクリプトを自前で配るなら更新責任が生じるため、提供者の資料を確認します。[1]
地図が使えない時は住所を、券売部品が使えない時は承認されたリンクを用意します。動かない購入ボタンを残さないでください。
4. 訪問者の動線を再確認する
- スマートフォンとPCでイベント、申込、安全な券売先を試す。
- スクロール、同意選択、タップ後も埋め込みが動くか確認する。
- アクセシビリティ、測定、確認への影響を記す。
- 外部の問題に担当者と再試験日を割り当てる。
比較と参加者の操作結果を一緒に残します。速さだけでなく目的を達成できることが必要です。
出典と参考資料
- Load Third-Party JavaScriptweb.dev · 確認日
- Request conditions: block or throttle network requestsChrome for Developers · 確認日