ピクシブ百科事典のWebフロントエンドパフォーマンス改善

by higara

Slide 1

Slide 1 text

ピクシブ百科事典の Webフロントエンドパフォーマンス改善 higara

Slide 2

Slide 2 text

● 2024年新卒入社 ● フロントエンドエンジニア ● イラストが好きです　→ ● 今日はOJT期間中のピクシブ百科事典の話をします higara

Slide 3

Slide 3 text

ピクシブ百科事典はアニメからマンガ、ゲーム、デザイン、アートまで、あらゆる言葉・現象・文化・作品を解説する「みんなでつくる百科事典」です。

Slide 4

Slide 4 text

● ピクシブ百科事典はPHP製 ● ページのレンダリングはSmarty (テンプレートエンジン) ● フロントエンドはNext.jsへの置き換えが進行中 ○ 記事ページのパフォーマンスが問題に百科事典の技術構成・課題

Slide 5

Slide 5 text

新記事ページで記事が表示されるまで

Slide 6

Slide 6 text

記事本文の文字列記事本文は独自記法で記述される

Slide 7

Slide 7 text

記事本文の文字列データ記事構造ツリーを表すJSON 記事本文のパース

Slide 8

Slide 8 text

記事本文の文字列データ記事構造ツリーを表すJSON 記事本文のパース JSONをHTMLにレンダリングレンダリングされた記事 ServerSide Props

Slide 9

Slide 9 text

記事本文の文字列データ記事構造ツリーを表すJSON 記事本文のパース JSONをHTMLにレンダリングレンダリングされた記事 ServerSideProps Hydration

Slide 10

Slide 10 text

記事本文の文字列データ記事構造ツリーを表すJSON 記事本文のパース JSONをHTMLにレンダリングレンダリングされた記事 ServerSideProps Hydration

Slide 11

Slide 11 text

● 本文はとても長くなる可能性がある ● 記事が長くなるとやりとりするデータも大きくなる

Slide 12

Slide 12 text

記事本文の文字列データ記事構造ツリーを表すJSON 記事本文のパース JSONをHTMLにレンダリングレンダリングされた記事 ServerSideProps Hydration 怪しい！！

Slide 13

Slide 13 text

怪しいところはいろいろあるが

Slide 14

Slide 14 text

データ計測フィールド値の計測にSentry、手元での計測にLighthouseを使用

Slide 15

Slide 15 text

● 仮説 ● 手元で検証 ● 本番で効果を確認小さく回せるフローができた

Slide 16

Slide 16 text

● 百科事典はUGC ○ 記事によってページの特徴が異なる ● ページによってアクセス傾向も異なる ● できる限りインパクトの大きい、ユーザーにとって嬉しいところから改善したい数値から得られた知見

Slide 17

Slide 17 text

実際に取り組んだ改善

Slide 18

Slide 18 text

Tailwindへの置き換え

Slide 19

Slide 19 text

● ピクシブにはデザインシステムがある ● Charcoalのstyledの仕組みに既知の問題があった ● 広範囲で使われているが、全てのスタイル置き換えはつらい Tailwindへの置き換え

Slide 20

Slide 20 text

Slide 21

Slide 21 text

コードに占める割合が小さくてもページに占める割合が大きいコード描画結果記事本文その他記事本文その他記事ページの事情

Slide 22

Slide 22 text

記事本文での改善を確認後、他の箇所も置き換え

Slide 23

Slide 23 text

速くなった！記事本文のtailwind化追加の置き換え

Slide 24

Slide 24 text

Tailwind と styled-components ● Tailwind はビルド時にCSSを生成・静的 ● styled-components はランタイムでスタイルを生成 ○ おそらく通常はそこまで重いものではない ○ デザインガイドラインに沿ってstyled-componentsを記述する仕組みが特別重かった

Slide 25

Slide 25 text

● 記事jsonのminify ● UAを使って記事を出し分けてDOM数を減らす ● 記事本文だけ事前レンダリングして保存したい検証して却下したもの・実施前のものアイデアで止まったもの

Slide 26

Slide 26 text

● Sentryによるフィールド値の計測 ● Lighthouseによる手元での簡易的計測 ● 手元で効果検証→本番投入のサイクルまとめ ● Tailwindによるスタイルの置き換え ● なるべく小さい変更で済むところで確かめる