61
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

Organization

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
61
Help us understand the problem. What are the problem?