ページ速度HTMLチェックリスト
ページのHTMLを貼り付けて、レンダリングをブロックするスクリプト、サイズや遅延読み込みのない画像、viewportの欠落、@import、document.writeなどを見つけます。
ページを開いて「ページのソースを表示」（Ctrl+U）を使い、すべてコピーしてここに貼り付けます。
defer（独立したスクリプトなら async）を付けると、スクリプトのダウンロード前にページを描画できます。
<script src="https://cdn.example.com/analytics.js">
width と height（または CSS の aspect-ratio）を指定すると、ブラウザーが領域を確保しレイアウトのずれ（CLS）を防げます。
<img src="/hero.jpg" alt="Hero">
ファーストビューに表示されない画像には loading="lazy" を付けましょう。
<img src="/b.png" alt="B" width="300" height="200">
WebP や AVIF（<picture> など）で配信すると、同じ画質で通常 25〜50% 小さくなります。
<img src="/hero.jpg" alt="Hero"> <img src="/a.png" alt="A" width="300" height="200"> <img src="/b.png" alt="B" width="300" height="200">
動画や地図などの埋め込みには loading="lazy" を付けましょう。
<iframe src="https://www.youtube.com/embed/xyz">
モバイルで正しく表示するため <meta name="viewport" content="width=device-width, initial-scale=1"> を追加してください。
<meta name="viewport">
<meta charset="UTF-8"> を <head> の最初の要素として追加してください。
<meta charset="UTF-8">
重要な外部オリジンには <link rel="preconnect"> を追加し、接続を早めに確立しましょう。
cdn.example.com
合格したチェック（8）
- ✓ レンダリングを妨げるスタイルシートは少ない
- ✓ CSS の @import はない
- ✓ インラインの @font-face に font-display がある
- ✓ 最初の画像は遅延読み込みされていない
- ✓ document.write() は使われていない
- ✓ インラインコードは小さい
- ✓ DOM のサイズは適切
- ✓ HTML のサイズは適切
ページ速度チェックリストとは？
このツールは、ページのHTMLソースを、よくあるフロントエンドのパフォーマンス問題のチェックリストに照らして検査し、それぞれの対処法を説明します。対象は、レンダリングをブロックするスクリプトやスタイルシート、CSSの@import、font-displayのない@font-face、サイズや遅延読み込みのない画像、遅延読み込みされるヒーロー画像、旧式の画像フォーマット、遅延読み込みのないiframe、viewportやcharsetの欠落、document.write、大きなインラインコード、preconnectの欠落、過大なDOMやHTMLです。
ページ速度チェックリストの使い方
- ページを開き、ページのソースを表示（Ctrl+U）して、すべてをコピーします。
- HTMLを貼り付けて、Analyzeを押します。
- 影響の大きい順に並んだ指摘を確認します。問題のあるタグがサンプルとして表示されます。
- 「Passed checks」を展開して、すでに問題のない項目を確認します。
例
The sample page (analytics.js without defer, hero.jpg without size, iframe without lazy, no viewport)
8 possible improvements: 1 render-blocking script, 1 image without width/height, 1 below-the-fold image without lazy loading, 3 JPEG/PNG images, 1 iframe without lazy loading, no viewport, no charset, 1 third-party origin without preconnect
ページ速度チェックリストを使うべき場面
テンプレートやページの簡易的な静的レビューや、Lighthouseを実行できないときに使います。実際の読み込み時間やCore Web Vitalsは測定せず、JavaScriptで追加されたリソースは見えません。ラボデータやフィールドデータには、LighthouseやPageSpeed Insightsを使ってください。
ページ速度チェックリストの仕組み
HTMLは、コメントを除去したあと、軽量なタグパーサーでブラウザ内で走査されます。各ルールは特定のタグと属性を調べます。たとえば、<head> 内でasync、defer、type=moduleのない外部の <script> タグ、widthとheightの両方がない <img>、最初の2枚以降でloading="lazy"のない画像、合計1,500要素を超える場合などです。スクリプトやスタイルシートのサードパーティオリジンは、preconnectとdns-prefetchのリンクと比較されます。ページは読み込まれず、JavaScriptも実行されません。
一般的な使用例
- テーマのヘッダーにある、レンダリングをブロックするスクリプトを見つける。
- widthとheightがないためにレイアウトシフトを起こす画像を見つける。
- ヒーロー画像が遅延読み込みされていないか確認する（LCPに悪影響）。
- 公開前に、HTMLメールやランディングページのテンプレートをレビューする。
よくある質問
これはGoogle PageSpeed Insightsと同じですか。
いいえ。PageSpeed Insightsはページを読み込んで測定します。このツールは貼り付けたHTMLを読むだけなので、即座に結果が出てプライバシーも守られますが、速度は測定できません。
最初の画像を遅延読み込みしてはいけないのはなぜですか。
ファーストビューで最も大きな画像は、通常Largest Contentful Paintの要素です。遅延読み込みするとレイアウトまで表示が遅れ、LCPが悪化します。
すべてのスクリプトにdeferを使うべきですか。
DOMを必要とし、順序どおりに実行するスクリプトにはdeferを、アクセス解析のような独立したスクリプトにはasyncを使えます。重要なインラインコードは小さく保ってください。