画像軽量化でSEO対策｜pictureタグで表示速度を改善した検証結果

こんにちは！

リースエンタープライズでは、Webサイト制作においてデザインや機能だけでなく、SEO対策・AIO対策を意識したサイト設計と、公開後の継続的な検証・改善を大切にしています。

近年は、Googleなどの検索エンジンから流入してもらうためのSEO対策に加えて、ChatGPTやGeminiなどのAI検索に情報を正しく理解・引用してもらうためのAIO対策も重要になっています。

SEOとAIOはまったく別の施策ではありません。

検索するユーザーにとって分かりやすく有益な情報を掲載すること、サイトの構造を整えること、専門性や実績を継続して発信することなど、共通して重要になるポイントがあります。

SEOとAIOの関係や、AI検索時代に企業ブログを運用する考え方については、こちらの記事でも詳しくご紹介しています。

【内部リンク：AIO対策でブログは必要？AI検索時代の企業ブログの役割】

私たちはこうしたSEO・AIO対策について、施策を実装して終わりではなく、実際のWebサイトで検証し、数値を確認しながら改善することを日々行っています。

今回はその取り組みの一例として、Webサイトの表示速度に大きく関わる「画像の軽量化」についてご紹介します。

通常のWebP画像を使用した場合と、pictureタグを使ってPC・スマートフォンそれぞれに適した画像を出し分けた場合で、表示速度にどのような違いが出るのか。

GoogleのPageSpeed Insightsを使って実際に比較・検証しました。

SEO対策として画像の軽量化・表示速度を改善

Webサイトでは、画像のファイルサイズがページの読み込み速度に大きく影響することがあります。
そのため私たちは、画像をそのまま掲載するのではなく、表示サイズや用途に合わせた画像の最適化を行っています。

今回検証したのは、通常のWebP画像を読み込む方法と、pictureタグを使用して閲覧環境に適した画像を読み込む方法です。

BEFORE：通常のWebP画像

<img src="image.webp" alt="サンプル画像">

AFTER：pictureタグでPC・スマートフォンの画像を出し分け

<picture>
  <source media="(max-width: 889px)" srcset="image-sp.webp">
  <img src="image.webp" alt="サンプル画像">
</picture>

PCにはPCに適した画像を、スマートフォンにはスマートフォンに適した画像を読み込ませることで、必要以上に大きな画像データを読み込まないように調整しています。
ユーザーから見ればほとんど分からない部分ですが、こうした細かな最適化も、快適なWebサイトをつくるための取り組みのひとつです。

PageSpeed Insightsで画像軽量化の効果を検証！

では、実際にどれくらい違いが出るのでしょうか。

今回はGoogleのPageSpeed Insightsを使用して、画像の読み込み方法を変更する前後でパフォーマンスを比較しました。

BEFORE：通常のWebP画像で88点

通常のWebP画像を使用した状態では、

88点

という結果でした。

WebP自体が軽量な画像形式のため、この時点でも比較的高いスコアです。

AFTER：pictureタグによる画像の出し分けで95点

続いて、PC・スマートフォンそれぞれに適した画像をpictureタグで出し分けた状態で計測します。

結果は……

95点！

今回の検証では、

88点 → 95点

までパフォーマンススコアが改善しました。

こうして実際に数字として効果を確認できると、やっぱりうれしいですね！

もちろん、PageSpeed Insightsのスコアは画像だけで決まるものではありません。
JavaScriptやCSS、Webフォント、サーバー環境などさまざまな要素が関係するため、pictureタグを使用すれば必ず同じ結果になるわけではありません。

大切なのは、施策を実装するだけではなく、実際のサイトで効果を測定し、その結果をもとに改善していくことだと考えています。

SEO・AIOを意識し、日々検証と改善を

SEO対策やAIO対策に、「これを一度設定すれば終わり」というものはありません。
検索環境やWeb技術は変化していくため、Webサイトもその変化に合わせて継続的に見直していく必要があります。

リースエンタープライズでは、

調べる → 実装する → 検証する → 改善する

というサイクルを繰り返しながら、SEO・AIOを意識したWebサイト制作・運用を行っています。
今回ご紹介した画像軽量化も、その取り組みのひとつです。

画像の最適化や表示速度といったユーザーからは見えにくい部分も含め、検索エンジンやAIに情報を正しく伝えながら、実際にサイトを利用するユーザーにとっても快適なWebサイトをつくることを大切にしています。

まとめ

今回は、SEO・AIOを意識したWebサイト改善の一例として、pictureタグを使用した画像軽量化と表示速度の検証をご紹介しました。

通常のWebP画像と、PC・スマートフォンで適切な画像を出し分ける方法を比較した結果、今回の検証環境では、

PageSpeed Insights 88点 → 95点

という結果になりました。

私たちは、Webサイトを制作して終わりではなく、公開後もデータを確認しながら、より良い方法を検証・改善していくことを大切にしています。

これからもSEO・AIOの両方を意識しながら、検索する人にも、AIにも、そして実際にサイトを利用する人にも分かりやすいWebサイトづくりに取り組んでいきます。