375 Views
February 17, 21
スライド概要
PWA Night vol.24の発表資料です。Yahoo!ニュースにおけるCore Web Vitals指標の計測・改善・効果について紹介します。
https://pwanight.connpass.com/event/202129/
2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp
PWA Night Vol.24 Yahoo!ニュースにおける Core Web Vitals対応と ビジネス影響について ヤフー株式会社 メディア統括本部 喜楽智規 ©2021 Yahoo Japan Corporation All rights reserved.
PWA Night Vol.24 ⾃⼰紹介 喜楽 智規(きらく ともき) • 新卒2016年⼊社(5年⽬) • ⼊社以来ニュースを担当 • 趣味は旅⾏・野球観戦・飲み会 ©2021 Yahoo Japan Corporation All rights reserved. 2
PWA Night Vol.24 アジェンダ 1. Yahoo!ニュースについて 2. Core Web Vitalsついて 3. CLSの改善 4. ビジネス影響について 5. まとめ ©2021 Yahoo Japan Corporation All rights reserved. 3
PWA Night Vol.24 アジェンダ 1. Yahoo!ニュースについて 2. Core Web Vitalsついて 3. CLSの改善 4. ビジネス影響について 5. まとめ ©2021 Yahoo Japan Corporation All rights reserved. 4
PWA Night Vol.24 Yahoo!ニュースについて 1996年7⽉サービス開始 PC SP App https://news.yahoo.co.jp/ ©2021 Yahoo Japan Corporation All rights reserved. 5
PWA Night Vol.24 Yahoo!ニュースについて こちらはYahoo! JAPAN トップページ、社内的には別の部署です https://www.yahoo.co.jp ©2021 Yahoo Japan Corporation All rights reserved. https://m.yahoo.co.jp 6
PWA Night Vol.24 Yahoo!ニュースについて https://news.yahoo.co.jp/newshack/pr/infographics/ ©2021 Yahoo Japan Corporation All rights reserved. 7
PWA Night Vol.24 Yahoo!ニュースについて サービス開始25年⽬でも引き続き成⻑中 https://news.yahoo.co.jp/newshack/pr/infographics/ ©2021 Yahoo Japan Corporation All rights reserved. 8
PWA Night Vol.24 Yahoo!ニュース(Web)のフロントエンドについて Web⾯(https://news.yahoo.co.jp)のフロントエンド/BFFサーバーについて • PHPで動作していたアプリケーションをNode.jsに移⾏中(主要な箇所は完了) • 技術スタック • Node.js / TypeScript / React / Redux / styled-components / Express / InversifyJS • サーバーサイドの構成・パフォーマンスチューニング事例など、ご興味あれば以下から︕ Yahoo BFF で検索 https://www.slideshare.net/techblogyahoo/yahoobff ©2021 Yahoo Japan Corporation All rights reserved. 9
PWA Night Vol.24 アジェンダ 1. Yahoo!ニュースについて 2. Core Web Vitalsついて 3. CLSの改善 4. ビジネス影響について 5. まとめ ©2021 Yahoo Japan Corporation All rights reserved. 10
PWA Night Vol.24 Core Web Vitalsとは Webページ閲覧において、ネガティブな体験 • コンテンツの表⽰が遅い • クリックやキー⼊⼒などの反応が悪い • レイアウトが読込中に変更され、クリックしたい要素の位置がずれる https://web.dev/cls/ ©2021 Yahoo Japan Corporation All rights reserved. 11
PWA Night Vol.24 Core Web Vitalsとは Webでのユーザー体験を指標化したもの コンテンツ表⽰の速さ クリックやキー⼊⼒などの反応 レイアウトのずれ https://developers-jp.googleblog.com/2020/05/web-vitals.html ©2021 Yahoo Japan Corporation All rights reserved. 12
PWA Night Vol.24 Core Web Vitalsに取り組むべき理由 • ユーザー体験がよくなるから • Google検索結果ランキングに影響するから (2021/05~) https://developers.google.com/search/blog/2020/11/timing-for-page-experience ©2021 Yahoo Japan Corporation All rights reserved. 13
PWA Night Vol.24 Core Web Vitals指標の計測 • Lab Data: 開発時や計測⽤環境で計測する値 • Field Data: 実際のユーザーのデータ(RUM: Real User Monitoring) ©2021 Yahoo Japan Corporation All rights reserved. 14
PWA Night Vol.24 Core Web Vitals指標の計測 Lab Data: 開発時や計測⽤環境で計測する値 • Web Vitals(Chrome Extension) • SpeedCurve ©2021 Yahoo Japan Corporation All rights reserved. 15
PWA Night Vol.24 Core Web Vitals指標の計測 Field Data: 実際のユーザーのデータ(RUM: Real User Monitoring) • Google Search Console • web-vitals(JavaScript Library) + 内製アナリティクスツール ©2021 Yahoo Japan Corporation All rights reserved. 16
PWA Night Vol.24 Core Web Vitalsとは(再掲) Yahoo!ニュースはCLSに課題があることが明らかに コンテンツ表⽰の速さ クリックやキー⼊⼒などの反応 レイアウトのずれ https://developers-jp.googleblog.com/2020/05/web-vitals.html ©2021 Yahoo Japan Corporation All rights reserved. 17
PWA Night Vol.24 アジェンダ 1. Yahoo!ニュースについて 2. Core Web Vitalsついて 3. CLSの改善 4. ビジネス影響について 5. まとめ ©2021 Yahoo Japan Corporation All rights reserved. 18
PWA Night Vol.24 レイアウトシフトを起こしている要素の検知 Chromeの「Layout Shift Regions」でレイアウトシフト要素 が⾊付きで表⽰される ©2021 Yahoo Japan Corporation All rights reserved. 19
PWA Night Vol.24
CLSの改善
画像サイズがわかるので、事前に領域を確保しておくことでレイアウトシフトを防ぐ
対応前
(CLS 0.2)
対応後
<div class=“imageWrap”>
<a>
<div
class=“thumbWrap”>
<div class=“thumb”>
<img />
</div>
</div>
</a>
</div>
(CLS 0.0)
©2021 Yahoo Japan Corporation All rights reserved.
.imageWrap {
display: inline-block;
width: 画像横幅px または 画像縦300pxと
したときの横幅の⼩さい⽅;
max-width: 100%;
}
.thumbWrap {
margin: 0;
height: 0;
overflow: hidden;
background-color: #fff;
posiFon: relaFve;
padding-top: calc(アスペクト⽐*100%);
max-width:100%;
}
.thumb {
posiFon: absolute;
top: 0;
leG: 0;
width: 100%;
height: 100%;
}
20
PWA Night Vol.24 CLSの改善 CSSのaspect-ratioを使うともう少し簡単に実装できるが、サポートされているブラウザは少ない https://caniuse.com/?search=aspect-ratio ©2021 Yahoo Japan Corporation All rights reserved. 21
PWA Night Vol.24 レイアウトシフト対策 画像や広告のレイアウトシフト対策と⾔っても、様々なパターンがある • • 表⽰サイズについて • 固定(例: px指定 – 200px × 300px) • 可変(例: %指定 – 親要素や端末画⾯幅により可変) 画像・広告のサイズやアスペクト⽐が事前に分かるか • 事前に把握できる(例: 16:9) • 画像を読み込むまでわからない • 最⼩の⾼さがわかる(例: heightが200px or 300px) ©2021 Yahoo Japan Corporation All rights reserved. 22
PWA Night Vol.24 レイアウトシフト対策 表⽰要素サイズ \サイズが事前にわかる 事前に把握可能 画像を読み込むまで わからない 最⼩の⾼さが分かる img要素や、そのwrapper要素にwidth/heightを指定する 固定(px指定) 可変(%指定) Aspect Ratio Boxes(※)によ り、事前に表⽰要素サイ ズを確保する • 最⼤表⽰サイズに合わせ て、画像周辺に余⽩がで きることを許容する • Viewport外での読み込み • Firstviewの表⽰画像サイ ズを標準化 min-heightの指定 ※ https://css-tricks.com/aspect-ratio-boxes/ ©2021 Yahoo Japan Corporation All rights reserved. 23
PWA Night Vol.24 アジェンダ 1. Yahoo!ニュースについて 2. Core Web Vitalsついて 3. CLSの改善 4. ビジネス影響について 5. まとめ ©2021 Yahoo Japan Corporation All rights reserved. 24
PWA Night Vol.24 CLSの改善のビジネス影響 改善前後33⽇間平均値でのKPIの変化 項⽬ 指標の変化 PV/セッション +15.1% 滞在時間/セッション +13.3% 直帰率 1.72ポイント改善 ©2021 Yahoo Japan Corporation All rights reserved. 25
PWA Night Vol.24 パフォーマンス改善とKPI • • フロントエンドのパフォーマンス向上は良いこと尽くめ • ユーザー体験の向上 • KPIの向上 パフォーマンスは放っておいても改善されない • 通信速度・端末スペックが向上してもWebページ のパフォーマンスは改善されていない https://www.nngroup.com/articles/the-need-for-speed/ ©2021 Yahoo Japan Corporation All rights reserved. 26
PWA Night Vol.24 パフォーマンス改善とKPI • パフォーマンス改善に取り組む必要がある しかし優先度は下がりがちではないか︖ • • 機能追加や先にやってほしい対応が・・・ 計測・改善を繰り返す習慣・⽂化を作っていくことが必要 • • Google Search ConsoleやSpeedCurve、Lighthouse CIなど継続的なメトリクス計測から Core Web Vitalsの指標は変更されることがあるため • • FCPやセキュリティ・プライバシー・アクセシビリティにも拡張されるかも ©2021 Yahoo Japan Corporation All rights reserved. 27
PWA Night Vol.24 アジェンダ 1. Yahoo!ニュースについて 2. Core Web Vitalsついて 3. CLSの改善 4. ビジネス影響について 5. まとめ ©2021 Yahoo Japan Corporation All rights reserved. 28
PWA Night Vol.24 まとめ • Core Web Vitals指標の計測⽅法 • Lab/Field Data • レイアウトシフトを起こしている要素の特定と、CLSの改善 • パフォーマンス改善がKPIに好影響を与えた 本⽇の内容はTech Blogにもまとまっております Yahoo!ニュース Core Web Vitals で検索 https://techblog.yahoo.co.jp/entry/2020120330052925/ ©2021 Yahoo Japan Corporation All rights reserved. 29
PWA Night Vol.24 Chrome Dev Summit • Chrome Dev Summitで本件が取り上げられました︕ぜひセッションの動画も御 覧ください︕ https://developer.chrome.com/devsummit/sessions/ux-patterns-for-core-web-vitals/ ©2021 Yahoo Japan Corporation All rights reserved. 30