メモログ

💡 Personal notes about anything I'm interested in

Got 100 lighthouse score in all categories on mobile

ふと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の処理がなくなった代わりに画像のロードのタイミングが早まるため、全体として良くなったか悪くなったか良くわからずという感じで、まああまり変わらなかったかもしれない(面倒だから元に戻さないけど)。

というメモ。