Qiita beta版のフロントエンドパフォーマンス改善案

ふとログインすると beta 版UIってのが使えた。完全に dev.to 意識してて笑った。

実際には自分が残してきたロードマップや、Component が使われているのであろうのがわかって、そうそうこれがやりたかったんだよって感じで、とはいえまだ改善点がたくさんって、今の中の人達もわかってると思うけど、元中の人として dev.to ぐらいやるにはどうすればいいってのを残しておきます。

わかる変更点

  • CSSの脱bootstrap色が強くなった
  • トップ画面が、ユーザーごとのカスタムフィードから beta版 の人気の投稿が主になった
    • 元々そういう目的で企画を起こした記憶がある…
    • フレンドフィードもうあんまり使われてないよね
    • クエリが重いフレンドフィードより、静的にキャッシュできるランキングがトップにあるのはチューニングしやすい

改善案

やや無理難題だったり、中の都合も察してるけど、できるだけ目視とDevToolの数値みてわかる結果で色々言う。

  • Header の仮HTMLを SSR したい
    • 非ログイン時のSSR結果を埋めておいて、ログイン情報を取得したら引き継ぐ
    • 一番最初に目にするクリティカルパスのコンポーネントなのでここは頑張りたい
  • 記事のサイドパーツをSSRするかスケルトンスクリーンを出しておく
    • TTI までが長いパーツが重いのが悪印象
    • トップ画面のフィードでは既にやってるよね
  • Mixpanel もう落としていいのでは
    • 自分が辞める時期にはほぼ使ってなかったはず
    • Chrome M70 で動かなくなるよって警告出てる(これはmixpanelの責任)
  • JSのScripting 重い
    • https://webpack.js.org/plugins/commons-chunk-plugin/ で、一部の画面でしか使ってない JS を評価しない(遅延評価する)ようにする。たしかd3とかのグラフ描画系も入ってたはず
    • 将来的に ServiceWorker 入れても Scripting は解消しない。
    • preact(+preact-compat) 使えるなら試してみるといいかも
  • トップページのトレンドは毎時更新なのでイニシャルビューではキャッシュしてSSRで埋め込んで返す
    • Script の DL => Scripting => ReactDOM.render => componentDidMount => ajax => setState という形になってTTIが長い
    • ReactOnRails を使ってるのがわかる(グローバル変数で露出してる)ので、初期Stateにできるはず。
  • そろそろホーム画面と個別の記事同士ぐらいはホワイトリストで history.pushState か Turbolinks か PRPL の ServiceWorker の onfetch ページ遷移を行いたい
    • ここも主に Header をSSRしたかどうかが、TTIまでの体感時間に効いてくる
    • 難しいのはわかるけど作り直した今やらないと、今後もずっと無理だぞ!

  • ちょっと前から編集画面でのスクロール同期動いてなくない?

参考

http://mizchi.hatenablog.com/entry/2017/11/24/141301
https://qiita.com/mizchi/items/8af2cbbf827dd0567796