初回描画を妨げる画像を見つけます

表示速度や SEO の担当者が初回描画の遅れを調べ、画面外の画像が読み込みを妨げていないか確認したいときに便利です。

初回描画を妨げる画像を見つけます。入力内容を外部へ送らず、確認やコピー、調整がしやすい実用的な結果をブラウザー内だけで作成できます。

使い方

監査したいページのHTMLを貼り付けます。
監査を実行して、最初のレンダリングに存在する画像を見つけます。
すぐに読み込むべきでない画像を確認します。
初期ビューポート外にある画像に遅延読み込みを追加します。

使用例

SEOスペシャリストが、ホームページのメインコンテンツの表示に時間がかかりすぎていることに気づきます。HTMLを貼り付けて監査を実行し、フッター画像が早く読み込まれているのを見つけます。ページを再テストする前に、それらの画像を遅延読み込みに切り替えます。また、最初の表示が損なわれないようにメイン画像の優先度を保ちます。

入力

<img src="hero.jpg" alt="Hero">
<img src="icon.png" alt="Icon">

制限と形式

監査は提供されたHTMLを読み取るもので、ページへのライブ訪問ではありません。
JavaScriptによって注入された画像やCSS経由で読み込まれる画像は、すべて検出されない場合があります。
遅延読み込みは、最初の画面に表示される画像には適していません。
マークアップを変更した後は、モバイルでの動作を再確認してください。
レポートはマークアップを変更するたびに更新する必要があります。

処理の場所

貼り付けたHTMLはブラウザ内で検査されます。外部リクエストは行われず、監査対象のページがツールによって取得されることもありません。レポートはページを離れるまでローカルに留まります。

よくある質問

このツールは私のウェブサイトにアクセスしますか？

いいえ、ウェブアドレスからページを読み込むことはありません。HTMLを自分で入力欄にコピーします。したがって、監査は提供されたマークアップのみを対象とし、ページのスクリプトは実行しません。

どの画像を遅延読み込みにすべきですか？

最初の表示に必要のない、ページ下部の画像に注目してください。ヘッダー画像やメイン商品画像は、すぐに読み込む必要があることがよくあります。実際の画面で結果を確認してください。

レポートに画像が表示されないのはなぜですか？

JavaScriptによって追加されたり、CSSの背景として使われたり、サードパーティのコンポーネントによって読み込まれたりしている可能性があります。監査は貼り付けたHTMLしか見ません。ブラウザの開発者ツールを使って全体像を補ってください。