最初の画面は1.2秒で、10.2MBを受け取りました

見える写真は4枚ですが、受け取ったのは37枚です。

携帯電話の画面サイズでホームページを開きます。最初の画面に表示される写真は、大きなバナー1枚とカード3枚、すべて4枚です。ところで、開発者ツールのネットワークを開いてみると、 37枚これが下がっています。スクロールはまだしていません。

リストを見てみると、最初の画面にない名前の行があります。後者の写真、下のバナー、地図画像、ブランドロゴのようなものです。 お客様がその場まで降りていなくても、データはすでに受け取った後であり、そのデータはゲストが出します。

ページが開いた瞬間、一番下まで一気に呼び

ブラウザは、文書を読みながら会う画像を順番に要求します。その画像が画面の中にあるのか外にあるのかは別に取りません。だから何も設定しないと ページの一番下の画像まで、最初の画面で下がります。

94のホームページを見ると、ダウンロードした画像が最初の画面に表示されます。 3倍を超える場所が74でした。最初の画面画像は中央値4枚、ダウンロードした画像は中央値37枚でした。

画面はすぐに出ましたが、データは引き続き降ります

最初の画面が1.2秒に浮かんだのは良い値です。問題は、画面が開いた後もデータが引き続き降りてくるということです。 早く見えるものと少なくするのは同じ言葉ではありません。

測定条件を明らかにします。 2026年8月31日に100ヶ所 390×844モバイル画面サイズで一箇所ずつ一度だけ開け、開かれたが受け取ったバイトが20KBにもならない6箇所を引いた 94か所これは中央値の分母です。キャッシュは消えました。 事務所の有線回線で測った値なので、移動通信では時間が異なって出ます。 ただし、バイトは回線状態に揺れません。

写真を引くのではなく、呼ぶ順番を変えます

1. 最初の画面の外側の画像は後で呼び出されます。 <img loading="lazy"> 一列にすると、お客様がその場まで降りてきたときに受け取ります。ただ 最初の画面イメージには掛けないでください。 歩くとむしろ遅くなります。
2. 最初の画面の最大の1枚の写真を軽くします。 その一枚の中央値が281KBで、500KBを超えるところが38ヶ所、1MBを超えるところが24ヶ所でした（ヒーローを撮影できた93ヶ所基準）。ウェブフィーやAVIFに書き出すのは8カ所だけでした。

写真を減らすという話ではありません。 見せてくれるのはそのままにして、いつ呼ぶけど変えることです。

今日試してみるのは30秒です

1. ページを開いて スクロールしないまま 置きます。
2. 開発者ツールを開く Network → Img を見てください。すでにダウンしている画像の数と合計サイズがその場に表示されます。
3. リストから 最初の画面にない写真の名前を探します。後の写真、下のバナー、地図画像が表示されたら表示しておきます。

その名前が見えたら、今ゲストがその分先に受けているという意味です。担当者に「最初の画面外の画像を後で歌わせてほしい」と要請してください。送信後の画面が気になる場合 相談申請を押しても画面が開かないページを続けてみてください。