モダンWebパフォーマンス2020_株式会社ニジボックス Yuki Irisawa

2020/12/10 @ Business & Creative

• Sier 営業 → HTMLコーダー → フロントエンドエンジニア（今ここ）   • 一生懸命生きています
  • 最近自動カーテン開け機を買いましたおすすめです   自己紹介 

今開発しているサービスについて  • ホットペッパービューティーコスメ（以下コスメ）  • 日本一速いサイト作ってます  • コスメの口コミサービス（いわゆるUGCというやつ）  
• 2020年2月に web 版リリース   ◦ FE 5人で立ち上げから初期リリースまでやりきりました  ◦ 今もその5人で運用しています  • 日本一速いサイト作ってます 

なぜ速さにこだわるのか 

速い方がいいに決まってるからだろ 

真面目に説明すると 

• 圧倒的にスマホユーザー多し  ◦ 基本的に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  速すぎて  止まって見える 

• Google が推奨している、ウェブサイト閲覧を高速化することに特化した web コンポーネントのフレームワーク  • 速度低下の原因になるコードを書かせないような仕組みになっている 
◦ JavaScript は書けない（代わりに多様な AMP コンポーネントが用意されている）   ◦ CSS は 75KB 以下に制限されている   ◦ 分析/広告タグは許可されたもののみ利用可能   AMPとは何かをざっくり説明する  AMP コンポーネントでここまで表現できちゃう  

よっしゃ、  AMPにしたから  むっちゃ速くなるわ 

AMP だから速いという誤解  • （再掲）速度低下の原因になるコードを書かせないような仕組み  ◦ 速くするっていうより遅くしないという方が正しい   • 逆に言えば、速度低下の原因となるようなコードが含まれていたら AMP
だけど遅いってことも十分にあり得る  速度低下を引き起こす原因（例）    無駄にサイズの大きい画像 / ネストが深すぎるDOM / 最適化されていないcss / 日本語 web font  

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に  めっちゃ 
無駄ある  苦しい  もっと速く 

まとめ 

スライド1枚でわかる今日の話の要点  AMP（今日は紹介しきれなかったけど、他にも色々な技術を使って爆速サイトを作っています） Lighthouse CI をはじめとしたツールで継続を習慣化終わらないDX改善（renovate や reg-suit の他にも、今日紹介
できなかった細かいものはたくさんある）習慣化したモブプロ、わからないことをほっとかないチームづくり、レーダーチャートで成長を促す

技術、仕組み、文化  どれが欠けても  この結果は出せなかった 

ありがとうございました！ 

モダンWebパフォーマンス2020_株式会社ニジボックス Yuki Irisawa

モダンWebパフォーマンス2020_株式会社ニジボックス Yuki Irisawa

More Decks by 株式会社NIJIBOX

Other Decks in Programming

Featured

Transcript