📄

lighthouseで言われてること自分用メモ

に公開
lighthouse
idea

今見てるやつで出てきたとこだけ書いてるので他は知らないです。

インサイト

効率的なキャッシュ保存期間を使用する

【chrome for developers】効率的なキャッシュ ポリシーを使用して静的アセットを提供する
【MDN】HTTPキャッシュ
ブラウザのキャッシュコントロールを正しく理解する

設定するときはサーバ側の設定ファイルに書く。
例：CyberSecurity.com

<IfModule mod_headers.c>
<FilesMatch "\.(css|js|jpg|jpeg|png|gif|ico)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
</IfModule>

この設定では、指定した拡張子のファイル（CSS、JavaScript、画像ファイルなど）に対して、max-age=604800（1週間）とpublicのCache-Control設定を適用しています。

あんまよくわかってないのでちゃんと読みたい。

画像配信を改善する

画像を圧縮したり適切なサイズにしたりどうにかしよね。
webp使ったことないけどこれどしたらええんか。AVIFの方が良い説もあるらしい。
現状、まだ画像受領してもjpegかpngの二択だと思うので自分たちで変換しないといけないんだろうなあ。

WebP
次世代画像形式のWebP、そしてAVIFへ–変わり続ける技術に対応するweb制作の黄金解–
AVIF WebP 各ブラウザ 対応状況

WebPはもう導入してもいいかもだけどAVIFはまだ様子見かも。safariとかさ。safariがさ。safariかぁ〜〜〜〜〜〜〜〜〜〜

レンダリングをブロックしているリクエスト

わからん。

blocking=render 属性

これつけるか遅らせるかインライン化しろって描いてある
でもこれさらに別のところ読み込んでるからが原因な気もするわけ。

レイアウト シフトの原因

インラインでwidthとheight指定しようね。

LCP リクエストの検出

なに？
LCP リクエストの検出

画像要素またはそのプリロード ディレクティブで fetchpriority=high を使用します。
画像がメイン ドキュメントから検出可能であることを確認します（HTML に直接含まれているか、画像がプリロードされているかのいずれか）。
画像の loading=lazy は避けてください。

一番最初に描画されるところはこれ書いて、スクロールとか下にいかんと見れないやつはlading=lazyつける感じでいいかもしれん。まだ試してません

ネットワークの依存関係ツリー

ネットワークの依存関係ツリー
わからん。これ何？
階層跨ぎすぎだからどうにかしろって感じな気がする。わかんないです。
でも移動先見てたら階層深くなるとだめな気がするゎ。わからないゎ。

以前の JavaScript

わからん！ここ見てることあんまない！
従来の JavaScript
埋め込みしてる動画とかがあるとここ出てる気がする。あと古めjs。古めjs?????

診断

オフスクリーン画像の遅延読み込み（この監査は Lighthouse 13 で削除されました）

オフスクリーン画像の遅延読み込みを行う

この監査は Lighthouse 13 で削除されました。
オフスクリーン画像はブラウザによってすでに優先度が下げられているため、遅延読み込みは帯域幅の削減には役立ちますが、Lighthouse の測定結果に影響を与える可能性は低いでしょう。

画像にloading=lazyを入れたりしてた。インラインで書くだけだから楽になったね

使用していない JavaScript の削減

これだるい。
ファイル出てるけど全然使ってたりするので頑張ろうね。
スクリプトの読み込み遅延とかも良いらしい。どうやるんだ

使用していない CSS の削減

探すのだるいその２
google fontが書いてあったら読み込みの範囲どうにかこうにかしたら良いらしい。
PageSpeedInsightsでGoogle Fontがネックになるとき
私はこれで３万行を１万行まで減らす作業をしました（手作業）

あと見えないとこのCSSの読み込み遅らせようとかある。

最新ブラウザに従来の JavaScript を配信しないようにしてください

これなに
古めjs？

JavaScript の最小化

minifyする

画像要素で width と height が明示的に指定されていない

指定して

過大なネットワーク ペイロードの回避

これなに
画像とかテキストとか適切に圧縮してくださいって書いてある。
(テキストベースのアセットのエンコードと転送サイズを最適化する)[https://web.dev/articles/optimizing-content-efficiency-optimize-encoding-and-transfer?hl=ja]

ユーザー補助とか他

特になし

ラベルとか適切に書けって書いてある。

終わり。
今いる会社だとここら辺の話全くされないんだけどできるだけ気にしたいねって思っている。

Discussion