Web Speed Hackathon Online やってみた
リポジトリ
解答
やったこと
基本的な進め方
LightHouseで重いと言われてるところを見ていく
NODE_ENV=productionでwebpackのモードをprodに 画像をloading="lazy"に
画像を圧縮した
babel preset-env の build target を最新のChrome (85) に変えた React.lazyとReact.Suspenseを使ってやってみて、chunkに分けれてはいたが、ネストしたルートのページで正しく読み込まれないバグ?のようなものに遭遇して諦めた
初期スコア
top
https://gyazo.com/cbc889d778940035c5857a2521e4ee0a
blog
https://gyazo.com/858f95bfae1414151faf01694adf68eb
記事
https://gyazo.com/3f8d4b10d7120cc307b6b719f53fb6e1
404
https://gyazo.com/dccd58c4587d9d98e97d3f8ae6113a4d
https://gyazo.com/9e86bfa4acefeac8d9f1fc2b6ea1e72f
main.bundle.jsのサイズは16.4MB
最終スコア
top
https://gyazo.com/e3fc0efaf2e078c54c0e88c33b4f90ef
blog
https://gyazo.com/c218882a5a01ea09de5161525e36f23b
記事
https://gyazo.com/60721d8253633216c59100e3888b403b
404
https://gyazo.com/0ace6fec4794c91c20c8871210ca6684
https://gyazo.com/0fd15b67f55dfd2877ca84705ab4bf70
main.bundle.jsは651KB
振り返り
やれなかったこと
source map が inline-source-mapになっているのでprodではoffにする htmlでscriptをdeferで読むこむ
画像やシェアボタン等にdns-prefetch、preconnect, preload等を設定する
web font は必要なリソースだけ読み込む
不要なCSSの削除
Promise.allで処理の並列化
APIから送られてくるデータの圧縮
バックエンドの不要な処理の削除
キャッシュの設定
サーバーサイドはRedis等でインメモリキャッシュ 雑なまとめ
ちゃんとパフォーマンスチューニングできて楽しかった
JSのコード170KBに納めるべき
ebiken.iconまだ4倍くらいあるのででかいな
ブラウザ周りの仕様多すぎてキャッチアップ大変