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
13k
モダン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
アクセシビリティ_株式会社ニジボックス Katsuhito Karube
nbkouhou
1
9.6k
SUUMOでのパフォーマンス_株式会社ニジボックス Satoshi Arai
nbkouhou
1
9.2k
非機能要件を文化に _株式会社ニジボックス Yosuke Furukawa
nbkouhou
0
240
カスタマージャーニーマップを共通言語に、UXリサーチをアウトプットにつなげたい話_Qrio株式会社 神谷 郁
nbkouhou
0
1.9k
属人化させない "UX" リサーチ_Ubie株式会社 坂田 一倫
nbkouhou
0
200
大規模組織でのUXデザイン導入メソッド
nbkouhou
0
2.3k
顧客起点の製品開発における 仮説検証思考体験ワークショップ
nbkouhou
2
1.1k
UXデザインのニーズとメソッドについて 執行役員 丸山潤
nbkouhou
1
210
BUSINESS & CREATIVE「大規模メディアにおけるデザイナーの価値発揮」
nbkouhou
1
1.1k
Other Decks in Programming
See All in Programming
OpenTelemetry のサービスという概念について
azukiazusa1
1
380
WinUI 3デモ - "CommunityToolkit.Mvvm"NuGetパッケージ編
andrewkeepcoding
0
130
20240301_cocone_EMゆるミートアップvol6_LT資料
cocone
0
310
【KMC春合宿2024】実装視点で見るNeural Radiance Fields
runningoutrate
0
150
コミュニティに参加したことで起きた変化
ohmori_yusuke
3
130
C# 大統一理論推進委員会 会員のための Unity Package Manager プロジェクト構成案
monry
PRO
0
580
ファイル先頭の use の意味、説明できますか? 〜PHP の namespace と autoloading の関係を正しく理解しよう〜 / namespace and autoloading in php
okashoi
2
470
MySQL のインデックスの種類をおさらいしよう! / overviewing indexes in MySQL
okashoi
0
170
object-oriented-conference-2024
fuwasegu
6
1.4k
Data Contracts In Practice With Debezium and Apache Flink (Kafka Summit London)
gunnarmorling
2
270
Deno に Web 標準 API を実装する / Implementing Web Standard API to Deno
petamoriken
0
350
フロントエンドパフォーマンス 入門
shouta2
7
1.5k
Featured
See All Featured
Design by the Numbers
sachag
274
18k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
19
1.6k
Build your cross-platform service in a week with App Engine
jlugia
223
17k
Stop Working from a Prison Cell
hatefulcrawdad
265
19k
Practical Orchestrator
shlominoach
180
9.7k
Building an army of robots
kneath
300
41k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.6k
Fireside Chat
paigeccino
19
2.6k
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
A Tale of Four Properties
chriscoyier
150
22k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
219
21k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.2k
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 の他にも、今日紹介
できなかった細かいものはたくさんある) 習慣化したモブプロ、わからないことをほっとかないチームづく り、レーダーチャートで成長を促す
技術、仕組み、文化 どれが欠けても この結果は出せなかった
ありがとうございました!