✨

Core Web Vitals 改善

2023/07/05に公開

cwv

tech

個人サイトのCWVを改善してみたのでその記録を残します。

最初の修正

一番最初のベンチの結果は以下のような感じでした。

Properly size imagesに手をつけてみる

サイズが大きいので responsive 画像にする

imagemagickで解像度をリサイズする

brew install imagemagick

// sp, pc などに合わせてリサイズする
convert kirisawak.png -resize 760x760 kirisawak-
middium-760.png

srcsetを設定する。スマホ、タブレット、ラップトップ、デスクトップ用で設定してみた。

<img 
  width="190" 
  height="190" 
  src="/kirisawak-middium-380.png" 
  srcset="kirisawak-small-190.png 320w, kirisawak-middium-380.png 990w, kirisawak-large-760.png 1200w, kirisawak-xlarge-1520.png 1900w"
  sizes="50vw"
/>

srcsetで端末ごとに必要なサイズの画像を出し分けることで performance が改善された

２回目の修正

上記の１回目の修正後の測定で以下のような提案がある

Serve static assets with an efficient cache policy

確かに Cache-Control ヘッダーがない

ということでNginxで静的ファイルのキャッシュを設定する

astro build するとjsとcssファイルの拡張子の前にランダムな文字列が追加されjsとcssはデプロイのたびに新しい方を見てくれるためキャッシュは長めに設定。
画像は更新するたびに自分でファイル名を変えなきゃいけないがあんま更新しないためとりあえず長めに設定。

location ~* .*\.(jpe?g|png|js|css)$ {
   expires 1y;
}

nginxのrestart

sudo nginx -t
sudo systemctl restart nginx

Cache-Controlヘッダーが追加されていることを確認

performanceが改善された

3回目の修正

imgタグにaltがないのはaccessibilityに致命的。seoにも影響している。

とりあえずすぐ直せるので直す。

accessibilityとseoが改善された

4回目の修正

seoが低い

Document does not have a meta description

ということで meta description を設定する

seoが改善された。全て100になるとなんか演出が出る。

感想

静的ファイルのキャッシュなどネットワーク周りの話が出てきてフロントエンドだけの話に留まらない部分が面白いと思いました。フロントエンドとバックエンドは結局繋がっていていることを実感しました。フロントエンドを早くしてもバックエンドが遅かったら遅いし、バックエンドを早くしてもフロントエンドが遅かったら遅いのはもったいないのでどちらも学んで品質の良いものを作れるようになりたいと思いました。
ということで今年のISUCONに一緒に出てくれる人というか徹底的に教えてくれる人募集してます。

最初の修正

２回目の修正

3回目の修正

4回目の修正

感想

Discussion