banner image
title image
👈

Back To HOME

ブログのパフォーマンスを改善する

🐧
✏️

2025/01/16

😢 ブログの表示が遅い

大体完成した弊ブログだが表示速度が気になる。試しにLighthouseでパフォーマンス計測してみたところやっぱり遅い。

最初の計測

LCPのスコアが悪いようだ。詳しく見てみると背景画像がLCPとして認識されており、この画像の表示速度がボトルネックになっていそう。

LCPの詳細

この画像はbanner.pngとして読み込んでいるもので、試しにdevtoolのPerformanceタブで計測しネットワークを監視してみると、確かに読み込みが遅い。

パフォーマンスタブでの計測

ほぼほぼ原因は特定できたがまだ仮説なので検証してみる。

devtoolのNetworkタブからbanner.pngを右クリックしてBlock request URLを選択し、banner.pngを読み込まないようにする。この状態でLighthouseでパフォーマンス計測を行い、スコアがどのくらい上がるか検証する。

バナー画像をブロックして計測

無事100点が取れた。したがってbanner.pngの表示速度を改善すれば、スコアを確実に上げることができることがわかった。

🪛 画像の最適化

Sourceタブから画像のサイズを確認してみると2.9MBとかなり大きい。

未圧縮の背景画像

googleによると1つのページでリクエストするリソースの合計サイズは1600kB以下に抑えるべきとのことなので、画像1つだけで超過してしまっていることになる。

このブログはAstroで構築しているのだが、Astroにはすでに画像最適化の仕組みが備わっているらしい。 src/ に画像を配置しAstro:assetから呼び出すだけで自動的にサイズの計算、webpへの変換もしてくれるそう。早速試してみる。

import bannerImage from "../images/banner.png";
import { Image } from "astro:assets";

- <img
-  src="/banner.png"
-  alt="banner image"
-  decoding="async"
-  loading="lazy"
- />
+ <Image
+   class="fixed right-0 w-screen"
+   src={bannerImage}
+   alt="banner image"
+ />

最適化後のバナー

スコア95

無事2.9MBから230kBに圧縮され、スコアも95点になった。100点まであと一歩。さらに改善するために画像をレスポンシブ化する。 現状モバイルの画面でも1920x1024サイズの画像を読み込んでしまっているが、widthsを設定することで画面幅に応じて最適なサイズの画像を読み込むようできる。

<Image
  class="fixed right-0 w-screen"
  src={bannerImage}
+  widths={[240, 540, 720, bannerImage.width]}
+  sizes={`(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, ${bannerImage.width}px`}
  alt="banner image"
/>

レスポンシブ

モバイル

モバイルサイズだと720x384の画像をfetchしておりサイズも59.5kBとさらに削減できていることがわかる。またこの画像は背景画像であり画質にはそこまでこだわらなくて良いはず。qualityをlowに指定してでさらに画像を圧縮する。

<Image
  class="fixed right-0 w-screen"
  src={bannerImage}
  widths={[240, 540, 720, bannerImage.width]}
  sizes={`(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, ${bannerImage.width}px`}
+ quality={"low"}
  alt="banner image"
/>

モバイルでスコア100

無事100点を取ることができた。

もちろんデスクトップ環境も100点。(デスクトップ環境ではネットワークスロットルに制限がかからないのでモバイルよりも点数を取るのが簡単)

デスクトップでスコア100

🤓 まとめ

LCPのスコアを改善するためには背景画像の最適化を行った。AstroではAstro:assetから画像を呼び出すだけで自動的にサイズの計算、webpへの変換もしてくれるので、画像の最適化がとても簡単にできる。またwidthsやqualityの指定をすることでさらに細かくカスタマイズも行えることがわかった。これからも定期的にパフォーマンス計測を行い、改善を続けていきたい。

📓 参考