ふと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（記事を囲っている要素）に以下のような感じで入れてみたのだけど、
1 | content-visibility: auto; |
コンテンツを中央揃えにしているところと相まって Cumulative Layout Shift のところで問題が発生してしまう。目視ではわからないが、devtoolsで確認すると、記事が左上（x:0, y:0）の位置に配置され、そこから真ん中に移動する感じになってしまう。なので結局入れなかった。
また、このタイミングでlazysizesをやめて、loading属性をlazyにする方法してみた。しかしlazysizesの処理がなくなった代わりに画像のロードのタイミングが早まるため、全体として良くなったか悪くなったか良くわからずという感じで、まああまり変わらなかったかもしれない（面倒だから元に戻さないけど）。
というメモ。