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パフォーマンス2020_株式会社ニジボックス Yuki Irisawa
Search
株式会社NIJIBOX
December 18, 2020
Programming
9
14k
モダンWebパフォーマンス2020_株式会社ニジボックス Yuki Irisawa
リクルートグループ主催!『大規模メディアにおけるWeb開発の最前線』
https://business-and-creative.connpass.com/event/188628/
株式会社NIJIBOX
December 18, 2020
Tweet
Share
More Decks by 株式会社NIJIBOX
See All by 株式会社NIJIBOX
Tableau トレーニング【株式会社ニジボックス】
nbkouhou
0
17k
Adobe Analytics勉強会の種類とレベル分け【株式会社ニジボックス】
nbkouhou
0
12
Adobe Analytics入門講座【株式会社ニジボックス】
nbkouhou
0
17k
[Adobe Analytics]主な役割と必要な知識【株式会社ニジボックス】
nbkouhou
0
16
SQL初級中級_トレーニング【株式会社ニジボックス】
nbkouhou
0
17k
アクセシビリティ_株式会社ニジボックス Katsuhito Karube
nbkouhou
1
9.8k
SUUMOでのパフォーマンス_株式会社ニジボックス Satoshi Arai
nbkouhou
1
9.3k
非機能要件を文化に _株式会社ニジボックス Yosuke Furukawa
nbkouhou
0
280
カスタマージャーニーマップを共通言語に、UXリサーチをアウトプットにつなげたい話_Qrio株式会社 神谷 郁
nbkouhou
0
2.2k
Other Decks in Programming
See All in Programming
GCCのプラグインを作る / I Made a GCC Plugin
shouth
1
150
go.mod、DockerfileやCI設定に分散しがちなGoのバージョンをまとめて管理する / Go Connect #3
arthur1
10
2.4k
僕がつくった48個のWebサービス達
yusukebe
18
17k
Vaporモードを大規模サービスに最速導入して学びを共有する
kazukishimamoto
4
4.3k
LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について
layerx
PRO
2
130
Kotlin2でdataクラスの copyメソッドを禁止する/Data class copy function to have the same visibility as constructor
eichisanden
1
130
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
440
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
2
1.7k
EventSourcingの理想と現実
wenas
6
2.1k
offers_20241022_imakiire.pdf
imakurusu
2
360
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
390
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
1
290
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
32
1.8k
Six Lessons from altMBA
skipperchong
26
3.5k
Code Review Best Practice
trishagee
64
17k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Being A Developer After 40
akosma
86
590k
Thoughts on Productivity
jonyablonski
67
4.3k
Embracing the Ebb and Flow
colly
84
4.4k
Building Adaptive Systems
keathley
38
2.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
A Modern Web Designer's Workflow
chriscoyier
692
190k
Docker and Python
trallard
40
3.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Transcript
2020/12/10 @ Business & Creative
• Sier 営業 → HTMLコーダー → フロントエンドエンジニア(今ここ) • 一生懸命生きています
• 最近自動カーテン開け機を買いました おすすめです 自己紹介
今開発しているサービスについて • ホットペッパービューティーコスメ (以下コスメ) • 日本一速いサイト作ってます • コスメの口コミサービス (いわゆるUGCというやつ)
• 2020年2月に web 版リリース ◦ FE 5人で立ち上げから初期リリースまでやりきりました ◦ 今もその5人で運用しています • 日本一速いサイト作ってます
None
なぜ速さにこだわるのか
速い方がいいに決まってるからだろ
None
真面目に説明すると
• 圧倒的にスマホユーザー多し ◦ 基本的にPCよりも低スピード ◦ 月末の帯域制限に引っかかりがち、軽くてサクサク であることが重要 • 通勤中や休憩中などの、ちょっとした空き時
間によく見られている ◦ 電車内や地下鉄の駅など、電波状況が良好でな い環境での閲覧も多い ◦ すきま時間にサクッと見たいという需要が高いの で、初期表示が遅いと簡単に離脱されちゃう おれたちはなぜ速さにこだわるのか
おれたちはなぜ速さにこだわるのか • ローディングスピードはUXとSEOの要 ◦ UXにおいてユーザーが重視する要素の75%はローディン グにかかるスピード(※1) ◦ ページが遅ければ遅いほど直帰率は悪化する (※2) •
ローディングスピードはGoogleの検索順位に影響 する ◦ 後発サービスとして、競合よりも検索順位を上げていか ないと認知度を上げられない ※1 https://www.awwwards.com/brainfood-mobile-performance-vol3.pdf ※2 https://developers-jp.googleblog.com/2017/03/new-industry-benchmarks-for-mobile-page-speed.html
おわかりいただけただろうか
最高のUXのため 表示速度を爆速にしたい そしたら競合にも勝てるはず
快適なUXをお届けするための技術選定
超雑版コスメのシステム構成(フロントエンド) ユーザー CDN origin 速すぎて 止まって見える
None
• Google が推奨している、ウェブサイト閲覧を高速 化することに特化した web コンポーネントのフ レームワーク • 速度低下の原因になるコードを書かせないような 仕組みになっている
◦ JavaScript は書けない(代わりに多様な AMP コンポー ネントが用意されている) ◦ CSS は 75KB 以下に制限されている ◦ 分析/広告タグは許可されたもののみ利用可能 AMPとは何かをざっくり説明する AMP コンポーネントでここまで表現できちゃう
よっしゃ、 AMPにしたから むっちゃ速くなるわ
AMP だから速いという誤解 • (再掲)速度低下の原因になるコードを書かせないような仕組み ◦ 速くするっていうより遅くしないという方が正しい • 逆に言えば、速度低下の原因となるようなコードが含まれていたら AMP
だけど遅 いってことも十分にあり得る 速度低下を引き起こす原因(例) 無駄にサイズの大きい画像 / ネストが深すぎるDOM / 最適化されていないcss / 日本語 web font
AMP 化だけで満足せず、地道に頑張ってきた
AMP 化だけで満足せず、地道に頑張ってきた
AMP に PR 出してもらったりもした ちゃんと話すと長くなるので詳細 な説明は割愛しますが、AMP コ ンポーネント側の問題を古川さ んに直してもらったこともありまし た
他にも泥臭い改善の取り組みをたくさん重ねてきた 全部話してる時間はないので、これらの素晴らしいブログをみてください AMP におけるパフォーマンス改善 計測・検討・対処のプロセスでWebサービスのパフォーマンスを改善する
おわかりいただけただろうか
テクいこともやってるけど、 割と単純で地道な作業の積み重ねで めっちゃ速いサイト作ってる
それはつまり
パフォーマンス改善が 施策ではなく文化になっている ということ
パフォーマンス改善が文化になっている組織 • web FE 5人全員が、パフォーマンス最適化の重要 性をちゃんと理解してる ◦ 高いパフォーマンスを維持し続けるためにどうすべきかを 常に考えながら日々の機能開発に取り組んでいる
• FEだけじゃできないことも、BEとチームになって一 緒に解決している • ディレクターやデザイナーも、パフォーマンスの大切 さをわかってくれてる ◦ ページ速度を極度に損なう施策はやらないという意思を 持ってくれている
全員が超優秀なエンジニアだから 上手くいったって話でしょ? そんなん再現性ないわ〜
全員が優秀なエンジニア? FE 5人の内訳はこんな感じ リーダー: すごい サブリーダー: すごい わたし: マークアップ出身 実務React初めて
同僚Y子: マークアップ出身 実務Reactちょびっと オラッッ もっと 速く!!! 優秀なエンジニアに囲まれてるというのは否定しません 赤ちゃんエンジニア (参画当時)
全員がリードエンジニアじゃなくても ちゃんと品質が担保できて パフォーマンスに気を配れる 仕組みづくりができている
全員がリードエンジニアじゃなくても ちゃんと品質が担保できて パフォーマンスに気を配れる仕組み
とは
計測を習慣化する
• Lighthouse とは…… ◦ パフォーマンスやアクセシビリティ、SEOなどの観点 から web ページの品質を評価してくれるツール •
CI で計測してるので、機能開発によってスコア が落ちたらすぐに気付くことができる ◦ 自動化することで日々の改善活動に組み込む Lighthouse CI
開発効率を上げて 非機能要件に注力しやすくする
こだわりの詰まったDX • renovate によるパッケージ更新管 理の自動化 • reg-suit によるビジュアルリグレッ ションテスト •
これらに加えて、型チェックやテスト なども全部CIで実行 • 開発スタートから1年経った今も継 続してDX改善が行われている
必要とあらば OSS に PR を出す • コスメでは計測上の理由からあえて invalid な AMP
を使っている • そのため Next.js 側の amp-validator に引っかかってエラーになってしまっ ていた • 古川さんのPRのおかげで、カスタム の validator を使えるようになりDXが また向上した
メンバー全員の能力を 一定以上に引き上げる
みんモブ会(みんなでモブプロ) • PRの内容をみんなに説明してその場で レビューしてもらったり • 難しい実装を行ったらその内容を他のメ ンバーに共有したり • エラーの内容やライブラリの新機能につ いてみんなに解説したり
• 詰まってること、迷ってることをみんなに 相談したり 週2で定期開催してる
• バックエンド側のテーマについて話すけ ど、基本的にFEも参加する • FEじゃわからないことなどを相談したり、 教えてもらったりもする • 次期案件の仕様を一緒に検討したりもす る バックエンドみんモブもある
わからないことを放置しない仕組みをつくる • 優秀な先輩エンジニアがサクッと実 装してくれた内容は、なんとなーく、 ふんわりとした理解のまま流してしま いがち • 日報FMTに「実はよくわかってないこ と」という欄をつけて運用することで、 全体の理解度を引き上げることがで
きる 実はよくわかっていないことを白状したら、 意外とみんなもわかってなかったことがわかった図
1年続けたらめっちゃ成長した • これはわたしのコーンフレーク 図(古川さんのお話にも出て きた強さグラフ) • 足りない部分は自分で勉強し たり、教えてもらったり、スキ ルつきそうなタスク振っても らったり
• グラフがでかくなるの楽しいか ら頑張れる
パフォーマンスが上がる 定期的なモブプロで 知識の平準化が もたらされる 開発効率を上げて 非機能要件に 注力しやすくする
パフォーマンスが上がる 怒りにうち震えながら 修正する 速度低下要因があると… DOMが 多すぎる 画像が クソデカい CSSに めっちゃ
無駄ある 苦しい もっと速く
None
まとめ
スライド1枚でわかる今日の話の要点 AMP(今日は紹介しきれなかったけど、他にも色々な技術を 使って爆速サイトを作っています) Lighthouse CI をはじめとしたツールで継続を習慣化 終わらないDX改善(renovate や reg-suit の他にも、今日紹介
できなかった細かいものはたくさんある) 習慣化したモブプロ、わからないことをほっとかないチームづく り、レーダーチャートで成長を促す
技術、仕組み、文化 どれが欠けても この結果は出せなかった
ありがとうございました!