Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ピクシブ百科事典のWebフロントエンドパフォーマンス改善
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
higara
October 16, 2024
Programming
0
1.2k
ピクシブ百科事典のWebフロントエンドパフォーマンス改善
https://conference.pixiv.co.jp/2024/dev-meetup
LT発表資料
higara
October 16, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
余白を設計しフロントエンド開発を 加速させる
tsukuha
7
2k
Claude Codeの「Compacting Conversation」を体感50%減! CLAUDE.md + 8 Skills で挑むコンテキスト管理術
kmurahama
1
810
Denoのセキュリティに関する仕組みの紹介 (toranoana.deno #23)
uki00a
0
260
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
ahuglajbclajep
5
940
AIエージェントの設計で注意するべきポイント6選
har1101
7
3.3k
AI Agent Tool のためのバックエンドアーキテクチャを考える #encraft
izumin5210
6
1.7k
MUSUBIXとは
nahisaho
0
100
AIによるイベントストーミング図からのコード生成 / AI-powered code generation from Event Storming diagrams
nrslib
2
1.7k
Automatic Grammar Agreementと Markdown Extended Attributes について
kishikawakatsumi
0
160
Fluid Templating in TYPO3 14
s2b
0
110
Kotlin Multiplatform Meetup - Compose Multiplatform 외부 의존성 아키텍처 설계부터 운영까지
wisemuji
0
180
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
230
Featured
See All Featured
The Illustrated Guide to Node.js - THAT Conference 2024
reverentgeek
0
250
The Invisible Side of Design
smashingmag
302
51k
Digital Ethics as a Driver of Design Innovation
axbom
PRO
1
160
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.8k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
davidcarrasco
1
43
Odyssey Design
rkendrick25
PRO
0
470
GraphQLの誤解/rethinking-graphql
sonatard
74
11k
Paper Plane (Part 1)
katiecoart
PRO
0
3.5k
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
170
Git: the NoSQL Database
bkeepers
PRO
432
66k
Documentation Writing (for coders)
carmenintech
77
5.2k
Transcript
ピクシブ百科事典の 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
• 本文はとても長くなる可能性がある • 記事が長くなるとやりとりするデータも大きくなる
記事本文の文字 列データ 記事構造ツリー を表すJSON 記事本文のパース JSONをHTMLに レンダリング レンダリング された記事 ServerSideProps
Hydration 怪しい!!
怪しいところは いろいろあるが
データ計測 フィールド値の計測にSentry、手元での計測にLighthouseを使用
• 仮説 • 手元で検証 • 本番で効果を確認 小さく回せるフローができた
• 百科事典はUGC ◦ 記事によってページの特徴が異なる • ページによってアクセス傾向も異なる • できる限りインパクトの大きい、ユーザーにとって嬉し いところから改善したい 数値から得られた知見
実際に取り組んだ改善
Tailwindへの置き換え
• ピクシブにはデザインシステムがある • Charcoalのstyledの仕組みに既知の問題があった • 広範囲で使われているが、全てのスタイル置き換えはつらい Tailwindへの置き換え
• ピクシブにはデザインシステムがある • Charcoalのstyledの仕組みに既知の問題があった • 広範囲で使われているが、全てのスタイル置き換えはつらい Tailwindへの置き換え
コードに占める割合が小さくてもページに占める割合が大きい コード 描画結果 記事本文 その他 記事本文 その他 記事ページの事情
記事本文での改善を確認後、他の箇所も置き換え
速くなった! 記事本文のtailwind化 追加の置き換え
Tailwind と styled-components • Tailwind はビルド時にCSSを生成・静的 • styled-components はランタイムでスタイルを生成 ◦
おそらく通常はそこまで重いものではない ◦ デザインガイドラインに沿ってstyled-componentsを 記述する仕組みが特別重かった
• 記事jsonのminify • UAを使って記事を出し分けてDOM数を減らす • 記事本文だけ事前レンダリングして保存したい 検証して却下したもの・実施前のもの アイデアで止まったもの
• Sentryによるフィールド値の計測 • Lighthouseによる手元での簡易的計測 • 手元で効果検証→本番投入のサイクル まとめ • Tailwindによるスタイルの置き換え •
なるべく小さい変更で済むところで確かめる