WebSpeedHackathonに参加した
WebSpeedHackathon
用意されているWebサイトのパフォーマンスを改善するハッカソンに参加しました！
機能と見た目を維持したままいかにLighthouseのスコアを改善するかを競います。
結果は残念ながらバグが残っていたためレギュレーション落ちでした残念。
Lighthouse
スコア評価をLighthouseというツールで行うのですが、その判定がだいぶ雑だなと思いました。
SPAのWebサイトは最初にindex.htmlを渡し、その後に巨大なJavascriptを読み込んであくせくとページを表示します。そのため最初に画面に情報が表示されるまでは遅いという特徴があるのですが、index.htmlで「aaaa」など適当な文字列を表示しておくだけで、最初に何かしらのコンテンツが表示されるまでの時間を評価する「First Contentful Paint」がかなり良くなりました。
また、「Largest Contentful Paint」というそのページで最も大きな要素が表示されるまでの時間のメトリックがありますが、これは透過画像をbase64でindex.htmlに埋め込み、見えないしさわれない状態で浮かべておくだけで、これがLargestなContentだと認識されて数値が大きく改善しました。こういうグリッチは気持ち良い。
真面目なチューニング
とにかくやりとりするファイルを小さくするのと、CSSで済む処理はCSSでやるのが大事って感じました。例えば、このサイトのfluixyz's logというタイトルはGoogle Fontsからフォントを落としてきているため表示にやや時間がかかっていたのですが、実際に表示される文字に絞ってダウンロードすることで表示を高速化できたりします。
他にも必要ないライブラリを除いたり、APIからもらうデータを最小限にしたりと、細かい改善を積み重ねて数値を良くしていくのはかなり楽しかったです。
また、読み込み段階で画面がガタガタ動かないかを評価するCumulative Layout Shift、画面に表示される情報量を時間で積分したような値のSpeed Indexなどは、ちょこちょこと工夫でき、目で見てわかる面白さがありました。
ということで、今回学んだことを活かしてこのブログのWebフォント読み込みを最適化したところ。Largest Contentful Paintが4.2sec→1.1secに縮まりました！ 閲覧者の通信容量も無駄に食ってたわけだしこういうのきちんとしていきたい。
今は画像の大きさに無駄が多いから次はNextの機能ちゃんと使って直したいです。
