Astroで組んだブログのチューニングを行いました。

Lighthouseスコア

手を入れる前のLighthouseスコアはこんな感じ。

現在は全ての尺度で90点台後半に入るようになりました。

パフォーマンス

Astroで構築して特にクライアントサイドJavaScriptを使わっていなかったため、元から良好でしたがCLSを指摘されたため、直しました。画像のwidthやheightを指定していないと画像の読み込みが完了するまで画像の場所が埋まらないため、レイアウトシフトが発生します。CSSなどで画像のサイズを指定するようにしました。

また記事ページのカバー画像が遅延読み込みされていたので、遅延読み込みをしないようにしました。Astroのドキュメントには特に何も書かれていませんが、loadingプロパティはAstroのPictureコンポーネントでも効くようになっています。

<Picture
  src={cover.file.url}
  alt={cover.title}
  sizes="100%"
  widths={[384, 768, 1152, 1536]}
  formats={["avif", "webp"]}
  aspectRatio="25:10"
  class="cover mb-4 rounded-lg shadow-lg"
  loading="eager"
/>

ユーザー補助

左上のロゴはタップすればトップページに飛べるようになっているのですが、スクリーンリーダーが認識できないのでラベルを付けるように指摘がありました。ロゴをクリックできないようにすることも考えましたが、結局ラベルを付けることにしました。

コードブロックのある記事は、シンタックスハイライトに使っているカラースキームの関係でコントラスト不足を指摘されますが、こちらは放置することにしました。

おすすめの方法

元から100だったので特に手を入れませんでした。

SEO

なんだかややこしいのですが、スマートフォンにやさしいページになっているかどうかもここで評価されます。

指摘はフッターにスマートフォンでタップしづらいサイズのリンクがあること、ページ概要のメタデータが入っていないことでした。ページの概要のメタデータを入れるようにし、フッターのリンクはアイコンに置き換えました。

引き続き改善の余地がないか探していきます

これでLighthouseはほとんどオール100にはなりましたが、体感的なページの遷移はまだ遅いようにも感じます。なぜか重めのCSSが読み込まれていたりするようなので、そこを改善できないかいろいろ試していきます。