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
19k
Adobe Analytics勉強会の種類とレベル分け【株式会社ニジボックス】
nbkouhou
0
13
Adobe Analytics入門講座【株式会社ニジボックス】
nbkouhou
0
19k
[Adobe Analytics]主な役割と必要な知識【株式会社ニジボックス】
nbkouhou
0
19
SQL初級中級_トレーニング【株式会社ニジボックス】
nbkouhou
0
19k
アクセシビリティ_株式会社ニジボックス Katsuhito Karube
nbkouhou
1
9.8k
SUUMOでのパフォーマンス_株式会社ニジボックス Satoshi Arai
nbkouhou
1
9.3k
非機能要件を文化に _株式会社ニジボックス Yosuke Furukawa
nbkouhou
0
290
カスタマージャーニーマップを共通言語に、UXリサーチをアウトプットにつなげたい話_Qrio株式会社 神谷 郁
nbkouhou
0
2.2k
Other Decks in Programming
See All in Programming
TypeScriptでライブラリとの依存を限定的にする方法
tutinoko
2
660
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
100
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
CSC509 Lecture 11
javiergs
PRO
0
180
.NET のための通信フレームワーク MagicOnion 入門 / Introduction to MagicOnion
mayuki
1
1.5k
광고 소재 심사 과정에 AI를 도입하여 광고 서비스 생산성 향상시키기
kakao
PRO
0
170
Quine, Polyglot, 良いコード
qnighy
4
640
Make Impossible States Impossibleを 意識してReactのPropsを設計しよう
ikumatadokoro
0
170
AWS IaCの注目アップデート 2024年10月版
konokenj
3
3.3k
Better Code Design in PHP
afilina
PRO
0
120
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
4
1.4k
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
880
Featured
See All Featured
Speed Design
sergeychernyshev
24
610
A Tale of Four Properties
chriscoyier
156
23k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
We Have a Design System, Now What?
morganepeng
50
7.2k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
What's in a price? How to price your products and services
michaelherold
243
12k
Building Adaptive Systems
keathley
38
2.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
GraphQLとの向き合い方2022年版
quramy
43
13k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
YesSQL, Process and Tooling at Scale
rocio
169
14k
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 の他にも、今日紹介
できなかった細かいものはたくさんある) 習慣化したモブプロ、わからないことをほっとかないチームづく り、レーダーチャートで成長を促す
技術、仕組み、文化 どれが欠けても この結果は出せなかった
ありがとうございました!