Yahoo!ニュースにおけるCore Web Vitals対応とビジネス影響について #pwanight

368 Views

February 17, 21

pwanight

スライド概要

PWA Night vol.24の発表資料です。Yahoo!ニュースにおけるCore Web Vitals指標の計測・改善・効果について紹介します。
https://pwanight.connpass.com/event/202129/

Yahoo!デベロッパーネットワーク

@ydnjp

スライド一覧

2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

深層学習による自然言語処理入門: word2vecからBERT, GPT-3まで

Yahoo!デベロッパーネットワーク 134.6K

ゼロから始める転移学習

Yahoo!デベロッパーネットワーク 75.3K

ヤフーにおける WebAuthn と Passkey の UX の紹介と考察 #idcon #fidcon

idcon fidcon

Yahoo!デベロッパーネットワーク 65K

OpenID Connectとネイティブアプリを取り巻く仕様と動向 Yahoo! JAPANの取り組み #openid #openid_tokyo

openid openid_tokyo

Yahoo!デベロッパーネットワーク 52.6K

運用業務とスクラムは本当に組み合わせにくいのか︖運用業務が大半を占めるプロダクト開発での試行錯誤

devsumi

Yahoo!デベロッパーネットワーク 28.1K

ヤフーのオンプレ機械学習基盤AIPFについて #ml_kubernetes

ml_kubernetes

Yahoo!デベロッパーネットワーク 26K

各ページのテキスト

https://news.yahoo.co.jp/

https://news.yahoo.co.jp/newshack/pr/infographics/

https://news.yahoo.co.jp/newshack/pr/infographics/

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/yahoobﬀ ©2021 Yahoo Japan Corporation All rights reserved. 9

10.

11.

https://web.dev/cls/

12.

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

https://developers-jp.googleblog.com/2020/05/web-vitals.html

13.

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

https://developers.google.com/search/blog/2020/11/timing-for-page-experience

14.

15.

16.

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

17.

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

https://developers-jp.googleblog.com/2020/05/web-vitals.html

18.

19.

20.

[beta]

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;
overﬂow: hidden;
background-color: #ﬀf;
posiFon: relaFve;
padding-top: calc(アスペクト⽐*100%);
max-width:100%;
}
.thumb {
posiFon: absolute;
top: 0;
leG: 0;
width: 100%;
height: 100%;
}

20

21.

https://caniuse.com/?search=aspect-ratio

22.

PWA Night Vol.24 レイアウトシフト対策画像や広告のレイアウトシフト対策と⾔っても、様々なパターンがある • • 表⽰サイズについて • 固定(例: px指定 – 200px × 300px) • 可変(例: %指定 – 親要素や端末画⾯幅により可変) 画像・広告のサイズやアスペクト⽐が事前に分かるか • 事前に把握できる(例: 16:9) • 画像を読み込むまでわからない • 最⼩の⾼さがわかる(例: heightが200px or 300px) ©2021 Yahoo Japan Corporation All rights reserved. 22

23.

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

24.

25.

26.

PWA Night Vol.24 パフォーマンス改善とKPI • • フロントエンドのパフォーマンス向上は良いこと尽くめ • ユーザー体験の向上 • KPIの向上パフォーマンスは放っておいても改善されない • 通信速度・端末スペックが向上してもWebページのパフォーマンスは改善されていない https://www.nngroup.com/articles/the-need-for-speed/ ©2021 Yahoo Japan Corporation All rights reserved. 26

https://www.nngroup.com/articles/the-need-for-speed/

27.

PWA Night Vol.24 パフォーマンス改善とKPI • パフォーマンス改善に取り組む必要があるしかし優先度は下がりがちではないか︖ • • 機能追加や先にやってほしい対応が・・・計測・改善を繰り返す習慣・⽂化を作っていくことが必要 • • Google Search ConsoleやSpeedCurve、Lighthouse CIなど継続的なメトリクス計測から Core Web Vitalsの指標は変更されることがあるため • • FCPやセキュリティ・プライバシー・アクセシビリティにも拡張されるかも ©2021 Yahoo Japan Corporation All rights reserved. 27

28.

29.

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

https://techblog.yahoo.co.jp/entry/2020120330052925/

30.

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

https://developer.chrome.com/devsummit/sessions/ux-patterns-for-core-web-vitals/