ふと Lighthouse を走らせみたら、微妙に 100 点行ってなかったので、調整して 100 点を目指してみた。
そして mobile/pc ともに 100 点を獲得した。オール 100 になると花火があがる。
といっても数回に 1 回、100 点になるみたいな感じで、微妙に 100 点いかない。
大きな要因としてはlighthouse のランタイムの設定の「Simulated throttling」で、これを有効にしていると Network の throttling や CPU の throttling が行われる。Network は Slow 4G (Fast 3G)くらいの速度で検証され、この状態だと HTML を取得するだけで 1 秒とか 2 秒とかかかる雰囲気。だからこの状態でLargest Contentful Paintを満点にするのがまあ厳しい。上のキャプチャでは 100 点いってるけど、だいたい 92〜98 点とかの間になる。
Simulated throttling をオフにすると、Largest Contentful Paint とかの評価は全部緑にはなるんだけど、Lighthouse Scoring Calculator の結果のように、99 点とか微妙に足りなかったりする。
このほぼほぼ何もないサイトでこんな感じなので、performance については、100 点目指すのはかなり無理で、80 点近傍なら合格と見なす方が良いのかなと思う。dev.toとかすごい頑張ってると思うけど、Lighthouse の performance のスコアは 84 点だった。
あとcontent-visibilityを試しに.article-summary（記事を囲っている要素）に以下のような感じで入れてみたのだけど、
content-visibility: auto;
contain-intrinsic-size: 700px 577px;
コンテンツを中央揃えにしているところと相まって Cumulative Layout Shift のところで問題が発生してしまう。目視ではわからないが、devtools で確認すると、記事が左上（x:0, y:0）の位置に配置され、そこから真ん中に移動する感じになってしまう。なので結局入れなかった。
また、このタイミングでlazysizesをやめて、loading 属性をlazyにする方法してみた。しかし lazysizes の処理がなくなった代わりに画像のロードのタイミングが早まるため、全体として良くなったか悪くなったか良くわからずという感じで、まああまり変わらなかったかもしれない（面倒だから元に戻さないけど）。
というメモ。