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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

実際に取り組んだ改善

Tailwindへの置き換え

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

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

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

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

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

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

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

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

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

higara

Other Decks in Programming

Featured

Transcript