Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

ふとログインすると 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

plaid
CXプラットフォーム「KARTE」の開発・運営、EC特化型メディア「Shopping Tribe」の企画・運営、CX特化型メディア「XD(クロスディー)」の企画・運営
https://plaid.co.jp/
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした