ホームページの表示が遅い原因として、画像ファイルの大きさや読み込み方法が関係していることがあります。写真を高画質のまま何枚も掲載すると、スマートフォン回線では表示までに時間がかかり、内容を読む前に離脱されるかもしれません。
画像の遅延読み込み、適切なサイズ指定、WebPなどの軽い形式を組み合わせると、見た目を大きく変えずに改善できます。本記事では、HTMLへ追加できる基本設定と注意点を紹介します。
画像がホームページを遅くする理由
カメラやスマートフォンで撮った写真は、横幅が数千ピクセルあり、1枚で数MBになることがあります。ホームページ上では幅800px程度で表示していても、元画像が大きいままなら全データを読み込みます。
画像枚数が多いページでは、画面にまだ表示されていない写真まで最初に読み込むと通信量が増えます。また、縦横サイズが指定されていない画像は、読み込み後にレイアウトが動く原因にもなります。
loading属性で画像を遅延読み込みする
画面の下にある画像には、loading="lazy"を追加します。利用者が画像の近くまでスクロールした時点で読み込みを始める指定です。
<img
src="images/service.webp"
alt="サービスの作業風景"
width="1200"
height="800"
loading="lazy"
decoding="async"
>decoding="async"は、画像の展開処理がほかの表示を妨げにくくするための指定です。すべてのブラウザで同じ効果を保証するものではありませんが、HTMLへ安全に追加できます。
最初に見える画像は遅延読み込みしない
ページを開いた直後に表示されるメイン画像へloading="lazy"を付けると、重要な画像の表示が遅れる可能性があります。ファーストビューの画像は通常読み込みにし、必要に応じて優先度を指定します。
<img
src="images/main-visual.webp"
alt="店舗の外観"
width="1600"
height="900"
fetchpriority="high"
>fetchpriority="high"は、本当に最優先の画像1枚程度に絞ります。複数画像へ付けると、優先順位を付ける意味が薄くなります。
widthとheightでレイアウトのズレを防ぐ
HTMLのwidthとheightには、画像本来の縦横比を指定します。CSSで画面幅に合わせれば、スマートフォンでもはみ出しません。
img {
max-width: 100%;
height: auto;
}読み込み前から画像が入る空間をブラウザが確保できるため、文章やボタンが後から押し下げられる現象を減らせます。
srcsetで画面に合う画像を配信する
同じ写真を複数サイズで用意できる場合は、srcsetを使うと端末幅に適した画像を選択できます。
<img
src="images/shop-1200.webp"
srcset="
images/shop-480.webp 480w,
images/shop-800.webp 800w,
images/shop-1200.webp 1200w
"
sizes="(max-width: 600px) 100vw, 800px"
alt="店内の様子"
width="1200"
height="800"
loading="lazy"
>WordPressではアップロード時に複数サイズが生成され、通常の画像ブロックでsrcsetが自動設定される場合があります。既存機能があるなら、重複して手作業を増やす必要はありません。
画像ファイルそのものも軽くする
- 表示サイズを大きく超える画像を使わない
- 写真はWebPや適切な品質のJPEGにする
- ロゴや図は内容に応じてPNGやSVGを選ぶ
- 同じ写真を何度も読み込まない
- 撮影データをそのままアップロードしない
遅延読み込みは大きすぎる画像を軽くする機能ではありません。ファイル容量の削減と読み込み順の改善を両方行いましょう。
変更後は実際の端末で確認する
画像が表示されるか、スクロール中に大きくレイアウトが動かないか、スマートフォン回線でも待たされないかを確認します。ブラウザの開発者ツールやPageSpeed Insightsも参考になりますが、数値だけでなく操作感も大切です。
まとめ
画面下の画像には遅延読み込みを設定し、最初に見える画像は通常読み込みにします。さらに画像サイズ、縦横指定、WebP、srcsetを組み合わせることで、表示速度と見やすさを改善できます。
コメント