ページ容量と表示速度のチェック

静的な取得から、応答時間、HTMLサイズ、圧縮、HTTPバージョン、レンダリングをブロックするリソース、容量の大きいアセットを調べます。Google CloudのAPIキーを用意すれば、CrUXのフィールドデータも取得できます。

できること

アセットの容量

asset-weight-checkは、1ページと、リンクされている各スタイルシートおよびスクリプトをダウンロードし、サイズ、ヘッダー、マークアップを読み取ります。レンダリングをブロックするリソース、容量の大きいファイル、コンテンツハッシュで見つかった重複ライブラリ、minifyの不足、font-displayの未指定、キャッシュや圧縮の不備を報告します。ページのレンダリングは行いません。

  • headにあるレンダリングをブロックするスクリプトとスタイルシート
  • 既定で500KBを超えるファイル(設定で変更可能)
  • コンテンツハッシュで見つかった重複ライブラリ
  • 各ファイルの圧縮とキャッシュの有効期間

サーバーとHTML

クロールまたはScreaming Frogのエクスポートから、応答時間、HTMLサイズ、テキストとマークアップの比率、圧縮、HTTPバージョンの監査ルールを適用します。応答の遅さ、2MBを超えるHTML文書、HTTP/1.xで配信されているページは、それぞれ別の検出結果として扱い、修正方法も個別に示します。

  • サーバーの応答が遅い
  • 大きなHTMLと、2MBを超えるHTML
  • HTMLの肥大化:テキストが少ないのにマークアップが多い
  • 圧縮なし、HTTP/1.xのみ

ラボデータとフィールドデータ

クロールとブラウザーの計測値は、1台のマシンでのある時点のラボデータです。フィールドのCore Web Vitalsは、crux-reportで取得します。Chrome UX ReportからLCP、INP、CLSを読み取り、web-vitals-2024-03のしきい値で「良好」「改善が必要」「不良」に分類します。

  • クロールまたはブラウザーによるラボの計測値
  • CrUXのフィールドデータ(LCP、INP、CLS)
  • 自分のGoogle CloudのAPIキーが必要
  • URL単位またはオリジン単位、およびスマートフォン、デスクトップ、タブレットの区分

3ステップで、スキャンを1件保存

  1. ページとアセットを取得する

    asset-weight-checkは、ページをダウンロードし、続けてリンクされている各スタイルシートとスクリプトをダウンロードします。サイズ、ヘッダー、マークアップを読み取りますが、ページのレンダリングは行いません。

  2. サーバーとHTMLを計測する

    ネイティブクロールの結果を監査ルールに渡します。インポートしたエクスポートも使えます。応答の遅さ、重いHTML、圧縮やHTTP/2の不足を検出します。

  3. 実ユーザーのデータと比較する

    crux-reportは、Chrome UX ReportからフィールドのLCP、INP、CLSを取得します。自分で用意したGoogle CloudのAPIキーが必要です。

この機能のチェック項目

チェック項目意味重要度根拠
SLOW_RESPONSEサーバーがリクエストに応答するまでに時間がかかりすぎている。ImportantURLごとの応答時間
LARGE_HTMLHTML文書が、そのページまたはサイトにしては大きい。ImportantHTMLサイズ(バイト)
HTML_OVER_2MBHTML文書が2MBを超えている。ImportantHTMLサイズ(バイト)
HTML_BLOATテキストがごくわずかなのに、マークアップが多い。Tipページごとのバイト数と語数
NO_COMPRESSIONgzipやBrotliが使えるのに、HTMLが圧縮されずに送られている。TipURLごとのContent-Encodingヘッダー
HTTP1_ONLYページがHTTP/2以降ではなく、HTTP/1.xで配信されている。TipURLごとのHTTPバージョン

コマンド1つで実行

bash
seohead asset-weight-check --url https://example.com/

先にインストールします: インストールガイド。どのコマンドも、AIエージェント向けのMCPツールとして実行できます。

必要なもの

  • asset-weight-check用のページURL
  • 応答時間とHTMLサイズ用に、クロール結果またはScreaming Frogのエクスポート
  • crux-report用のGoogle CloudのAPIキー

制限事項

  • 未使用のCSSとJavaScriptの判定にはレンダリング済みのページが必要なため、スキップとして報告されます
  • ラボの計測値は、実際の訪問者が体験した値とは異なります
  • アクセスの少ないページには、CrUXのデータがありません
  • 1回の取得だけでは、サイト全体の外れ値は分かりません

よくある質問

ブラウザーは必要ですか?
いいえ。asset-weight-checkが読み取るのは、バイト数と静的なマークアップです。どのCSSやJavaScriptが未使用かは判定できません。その判定にはレンダリング済みのページが必要なため、スキップとして報告されます。
計測値は実ユーザーのデータですか?
いいえ。クロールとブラウザーの計測値はラボデータです。フィールドのCore Web Vitalsは、crux-reportで取得します。Google CloudのAPIキーが必要です。
crux-reportはどのしきい値を使いますか?
Googleのweb-vitals-2024-03ポリシーです。LCPは2.5秒以内なら良好、4秒を超えると不良です。INPは200ミリ秒以内なら良好、500ミリ秒を超えると不良です。CLSは0.1以内なら良好、0.25を超えると不良です。
容量の大きいファイルとは、どのくらいですか?
既定では、リンクされているCSSまたはJavaScriptのファイル1つが500KBを超える場合です。しきい値は変更できます。
サイトには何か変更が加わりますか?
いいえ。チェックが送るのは読み取り専用のリクエストです。修正は自分で行います。
費用はかかりますか?
チェック自体は無料です。CrUX APIはGoogleのクォータの範囲内なら無料で、キーは自分で用意します。SpiderHeadがキーを配布することはありません。