ヒーロー画像97%圧縮＋pictureタグ活用でLCP劇的改善！Lighthouseスコア100実践ガイド

想定読者

• Webページのコンテンツの品質を上げたい人
• 画像の表示に時間がかかる人
• Lighthouseのスコアの改善方法を知りたい人

この記事の提供価値

• Lighthouseのスコアを向上させたケースを理解できます。
• LCP 13.7s → 1.1s、Lighthouseのパフォーマンスのスコア　75→100をどのように達成したか記載しています。

導入

Google Search Consoleで確認するとまだ作ってから3カ月経っていないですが、３カ月で表示回数254件、平均掲載順位20.3で、ほとんど見られていない状況です。

タイポグラフィ、配色を改善してきました。終わりはありませんが、次はLighthouseのスコアを改善したいです。早速、developer toolでLighthouseの確認をしました。

Lighthouseとは

ウェブページの品質を改善するためのオープンソースの自動化ツールです。 ページに対して一連の監査が実行され、ページのパフォーマンスに関するレポートが生成されます。

実際に監査しました

パフォーマンスの結果が75ポイントになっており、よくありません。

Largest Contentful Paint(LCP)が13.7秒かかっています。LCPとは最も大きいコンテンツのレンダリング時間といえます。遅いですね。 ヒーローイメージの画像が大きすぎるのが問題です。（あまり注意していませんでした） LCPだけでなく、INP/CLSも注意すべきですが、この記事ではLCPに触れます。

ヒーローイメージについて

ヒーローイメージは1.88MB　1536x1024の画像です。形式はwebpにしてありました。 キャラクターは亀香(かめか)という亀のようにのんびりした女の子です。娘をイメージしました。 これを小さくして読み込み時間を短くしていきます。

Squooshで小さく

Squooshというツールがあり、これで小さくしていきます。イメージをサーバーに送信しないので、そこはセキュリティ上安心できます。公式ページではあんまり分からないのですが、Googleがつくったようです。使い方の説明は検索してもらえれば、わかりますので当記事では記載しません。

どう変えたか

• アスペクト比を維持しつつ、Widthを変えました。PC用の1200,モバイル用の767のバージョンをつくりました。
• Qualityを75にしました。これは変えてみても視覚的には変わらなかったからです。
• 形式はavifのバージョンを作りました。

表に整理します。

形式について

作成したイメージを表示するようにCSSを変更しました

.hero {
  background-image: url('/img/hero/kameka@767.webp');
  background-image: image-set(
    url('/img/hero/kameka@767.avif') type('image/avif') 1x,
    url('/img/hero/kameka@767.webp') type('image/webp') 1x
  );
  background-size: cover;
  background-position: right top;
}

@media (min-width: 768px) {
  .hero {
    background-image: url('/img/hero/kameka@1200.webp');
    background-image: image-set(
      url('/img/hero/kameka@1200.avif') type('image/avif') 1x,
      url('/img/hero/kameka@1200.webp') type('image/webp') 1x
    );
  }
}

Lighthouseを再度確認すると100ポイントになった

なんとすべて100ポイントになりました。

background-imageが動的な場合はどうするか

他ページのLighthouseのスコアです。パフォーマンスは63ポイントで、修正が必要です。 同じようにLCPの表示が遅いのが原因です。

現状はインラインでstyleをいれている

このblogではmicroCMSを使用していて、eye catchの画像はそこから表示しています。 あらかじめCSSにいれられないのでインラインでbackground-imageを入れていました。

        <section
          className={`${styles.blogArticleHeader} ${appStyle.grid12}`}
          style={{
            backgroundImage: `url(${blog.eyecatch.url})`,
            backgroundSize: 'cover',
            backgroundPosition: 'center bottom',
          }}
        >
          <h1>{blog.title}</h1> {/* タイトルを表示 */}
          <time>{formattedDate}</time> {/* 日付を表示 */}
        </section>

CSSではなくhtmlのイメージで画像を表示するようにしました

<section>のbackground-imageではなく、<picture>タグを使うように変えました。 <picture>は複数の<source>子要素の中から最適なものを選択させることになります。ブラウザが<picture>に対応していない場合、<img>が表示されます。

この場合ですとavifに対応している場合はavifを対応していない場合はwebp形式を選択するようになっています。そのあとは

1. **sizes**を読みます。
	1. 例では100%なので親要素の大きさになります。
2. srcSetを確認し、各エントリーの幅記述子(600w, 1200wなど)と照合します。
	1. sizesに一番近くて軽いファイルを選択します。

<section className={`${styles.wrapper} ${appStyle.grid12}`}>
  <picture>
	{/* 高解像度用は sizes / srcset でも可 */}
	<source
	  type="image/avif"
	  srcSet={`${blog.eyecatch.url}?q=75&fit=clip&w=600&fm=avif 600w,
		   ${blog.eyecatch.url}?q=75&fit=clip&w=1200&fm=avif 1200w`}
	  sizes="100%"
	/>
	<source
	  type="image/webp"
	  srcSet={`${blog.eyecatch.url}?q=75&fit=clip&w=600&fm=webp 600w,
		   ${blog.eyecatch.url}?q=75&fit=clip&w=1200&fm=webp 1200w`}
	  sizes="100%"
	/>
	{/* 最後の <img> は必須・alt を忘れずに */}
	<img
	  className={styles.coverImg}
	  src={`${blog.eyecatch.url}?q=75&fit=clip&w=800`}
	  alt={blog.title}
	  sizes="100%"
	/>
  </picture>
  <div className={styles.info}>
	<h1>{blog.title}</h1> {/* タイトルを表示 */}
	<time>{formattedDate}</time> {/* 日付を表示 */}
  </div>
</section>

修正後の結果

非常に効果的であり、94ポイントになりました。

まとめ

Lighthouse の赤点は、“巨大なヒーロー画像” というシンプルな原因でした。Squoosh で 97 % 圧縮し、 <picture> で可変ロジックを組むだけで LCP 13.7 s → 1.1 s、モバイルスコア 75 → 100 を達成。この記事では手順とコードを完全公開し、他ページでも 94 pt まで底上げした実例を解説しました。