Chrome DevToolsは無料で使える最強のWeb診断ツールです。ECサイト運営者が知っておくべき5つのパネルの活用法を解説します。
前提条件
- Google Chrome（最新版）
- 対象ECサイトの管理画面へのアクセス権限
- 基本的なHTMLの知識（コピー＆ペーストができれば可）
実装手順
Step 1: Elementsパネルで構造化データ（JSON-LD）とOGPタグを確認する
やること: このステップでは、Elementsパネルで構造化データ（JSON-LD）とOGPタグを確認ための具体的な作業を行います。 ポイント:- 作業前に現状をスクリーンショットで記録しておくと、ビフォーアフターの比較ができます
- 不明点があれば、プラットフォームの公式ドキュメントを参照してください
---
Step 2: Networkパネルで画像サイズとレンダリングブロックリソースを特定する
やること: このステップでは、Networkパネルで画像サイズとレンダリングブロックリソースを特定ための具体的な作業を行います。 ポイント:- 作業前に現状をスクリーンショットで記録しておくと、ビフォーアフターの比較ができます
- 不明点があれば、プラットフォームの公式ドキュメントを参照してください
---
Step 3: Performanceパネルでフレーム単位のボトルネックを分析する
やること: このステップでは、Performanceパネルでフレーム単位のボトルネックを分析ための具体的な作業を行います。 ポイント:- 作業前に現状をスクリーンショットで記録しておくと、ビフォーアフターの比較ができます
- 不明点があれば、プラットフォームの公式ドキュメントを参照してください
---
Step 4: LighthouseパネルでSEO・アクセシビリティ・パフォーマンスを一括診断する
やること: このステップでは、LighthouseパネルでSEO・アクセシビリティ・パフォーマンスを一括診断ための具体的な作業を行います。 ポイント:- 作業前に現状をスクリーンショットで記録しておくと、ビフォーアフターの比較ができます
- 不明点があれば、プラットフォームの公式ドキュメントを参照してください
---
Step 5: ApplicationパネルでService Worker・キャッシュ・Cookie設定を検証する
やること: このステップでは、ApplicationパネルでService Worker・キャッシュ・Cookie設定を検証ための具体的な作業を行います。 ポイント:- 作業前に現状をスクリーンショットで記録しておくと、ビフォーアフターの比較ができます
- 不明点があれば、プラットフォームの公式ドキュメントを参照してください
---
まとめ
5ステップの手順を順番に実行することで、Chrome拡張の改善が期待できます。
各ステップの実装後は、Google Rich Results TestやChrome DevToolsで正しく反映されているか確認してください。
Pulse DigitalのChrome拡張を使えば、構造化データの有無やパフォーマンス問題をワンクリックで検出できます。