Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

リクルートグループ主催!『大規模メディアにおけるWeb開発の最前線』
https://business-and-creative.connpass.com/event/188628/

株式会社NIJIBOX

December 18, 2020
Tweet

More Decks by 株式会社NIJIBOX

Other Decks in Programming

Transcript

  1. • Sier 営業 → HTMLコーダー → フロントエンドエンジニア(今ここ) 
 • 一生懸命生きています

    
 • 最近自動カーテン開け機を買いました おすすめです 
 自己紹介

  2. 今開発しているサービスについて
 • ホットペッパービューティーコスメ (以下コスメ)
 • 日本一速いサイト作ってます
 • コスメの口コミサービス (いわゆるUGCというやつ) 


    • 2020年2月に web 版リリース 
 ◦ FE 5人で立ち上げから初期リリースまでやりきりました
 ◦ 今もその5人で運用しています
 • 日本一速いサイト作ってます

  3. • 圧倒的にスマホユーザー多し
 ◦ 基本的にPCよりも低スピード 
 ◦ 月末の帯域制限に引っかかりがち、軽くてサクサク であることが重要
 • 通勤中や休憩中などの、ちょっとした空き時

    間によく見られている
 ◦ 電車内や地下鉄の駅など、電波状況が良好でな い環境での閲覧も多い 
 ◦ すきま時間にサクッと見たいという需要が高いの で、初期表示が遅いと簡単に離脱されちゃう 
 おれたちはなぜ速さにこだわるのか

  4. おれたちはなぜ速さにこだわるのか
 • ローディングスピードは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 

  5. • Google が推奨している、ウェブサイト閲覧を高速 化することに特化した web コンポーネントのフ レームワーク
 • 速度低下の原因になるコードを書かせないような 仕組みになっている


    ◦ JavaScript は書けない(代わりに多様な AMP コンポー ネントが用意されている) 
 ◦ CSS は 75KB 以下に制限されている 
 ◦ 分析/広告タグは許可されたもののみ利用可能 
 AMPとは何かをざっくり説明する
 AMP コンポーネントでここまで表現できちゃう 

  6. AMP だから速いという誤解
 • (再掲)速度低下の原因になるコードを書かせないような仕組み
 ◦ 速くするっていうより遅くしないという方が正しい 
 • 逆に言えば、速度低下の原因となるようなコードが含まれていたら AMP

    だけど遅 いってことも十分にあり得る
 速度低下を引き起こす原因(例)
 
 無駄にサイズの大きい画像 / ネストが深すぎるDOM / 最適化されていないcss / 日本語 web font 

  7. パフォーマンス改善が文化になっている組織
 • web FE 5人全員が、パフォーマンス最適化の重要 性をちゃんと理解してる
 ◦ 高いパフォーマンスを維持し続けるためにどうすべきかを 常に考えながら日々の機能開発に取り組んでいる 


    • FEだけじゃできないことも、BEとチームになって一 緒に解決している
 • ディレクターやデザイナーも、パフォーマンスの大切 さをわかってくれてる
 ◦ ページ速度を極度に損なう施策はやらないという意思を 持ってくれている

  8. 全員が優秀なエンジニア?
 FE 5人の内訳はこんな感じ
 リーダー: すごい
 サブリーダー: すごい
 わたし: マークアップ出身
 実務React初めて


    同僚Y子: マークアップ出身
 実務Reactちょびっと
 オラッッ
 もっと
 速く!!!
 優秀なエンジニアに囲まれてるというのは否定しません 
 赤ちゃんエンジニア
 (参画当時)

  9. • Lighthouse とは……
 ◦ パフォーマンスやアクセシビリティ、SEOなどの観点 から web ページの品質を評価してくれるツール 
 •

    CI で計測してるので、機能開発によってスコア が落ちたらすぐに気付くことができる
 ◦ 自動化することで日々の改善活動に組み込む 
 Lighthouse CI

  10. こだわりの詰まったDX
 • renovate によるパッケージ更新管 理の自動化
 • reg-suit によるビジュアルリグレッ ションテスト
 •

    これらに加えて、型チェックやテスト なども全部CIで実行
 • 開発スタートから1年経った今も継 続してDX改善が行われている

  11. 必要とあらば OSS に PR を出す
 • コスメでは計測上の理由からあえて invalid な AMP

    を使っている
 • そのため Next.js 側の amp-validator に引っかかってエラーになってしまっ ていた
 • 古川さんのPRのおかげで、カスタム の validator を使えるようになりDXが また向上した