Yahoo! BEAUTY Core Web Vitals 対応 #yjbonfire
1.8K Views
August 18, 20
スライド概要
Bonfire Frontend #6 での登壇発表内容です。
イベントページ URL は こちらです。
https://yj-meetup.connpass.com/event/181363/
Bonfire Frontendは、ヤフー主催の「フロントエンド」にフォーカスした情報共有を定期的に行う勉強会/交流会イベントです。
様々な最新技術の活用方法やデザイナー、バックエンドとの連携など、フロントエンドが抱える課題を共有し、フロントエンドについてを熱く語る会を目指します！
2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp
関連スライド
各ページのテキスト
Yahoo! BEAUTY Core Web Vitals対応 2020年8⽉11⽇ ヤフー株式会社 松本 華歩 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
⾃⼰紹介 • 松本華歩 • 新卒2年⽬ • Yahoo! BEAUTY FE • ダンス好き Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 2
本⽇の内容 • Yahoo! BEAUTYで⾏われた パフォーマンス改善について • 主にCore Web Vitalsについて Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 3
Yahoo! BEAUTYとは • 2019/11サービス開始 • ヘアスタイル検索機能 • 担当スタイリスト・サロン 情報表⽰ • React + Next.js Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. https://beauty.yahoo.co.jp/ 4
パフォーマンス改善 • Lighthouse 6 指標 • FCP / SI / LCP / TTI / TBT / CLS • Core Web Vitals 2020 • LCP / FID / CLS Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 5
Lighthouse • Chrome Dev Tools の Lighthouse タブから利⽤可能 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 6
Lighthouse • 各指標の測定値 • トレース • 改善のためのヒント Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 7
PageSpeed Insights • URLを⼊⼒するとラボデータとフィールドデー タを確認できる • 公開URLのテスト https://developers.google.com/speed/pagespeed/insights/ Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 8
Lighthouse 定時計測 • Lighthouse Node CLI* を使って定時計測 * https://www.npmjs.com/package/lighthouse Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 9
計測 Lighthouse • 計測時の詳細結果も保存 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 10
指標を追いかける理由 • Lighthouse 6 指標 • 指標を上げる改善をすることで UX向上・直帰率を下げる⽬的 • Core Web Vitals 2020 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 11
Core Web Vitals • Googleが提唱するUX向上のための 新たな指標 • Google検索結果の順位付け要素に組 み込まれる予定 * * https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 12
CWV各指標 https://web.dev/vitals/ Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 13
CLSを改善すべき理由 https://web.dev/cls/ Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 14
2020 • Core Web Vitals 2020のため、 また来年には刷新されるかも • 要チェック Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 15
指標を追いかける理由 • Lighthouse 6 指標 • 指標を上げる改善をすることで UX向上・離脱率を下げる⽬的 • Core Web Vitals 2020 • 将来のSEO対策になり得る • よりUX向上を狙える Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 16
Core Web Vitalsの計測 • Next.jsで⽤意され ている計測メソッド を仕込む • 社内の分析ツールに ログを落とし可視化 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. https://nextjs.org/docs/advanced-features/measuringperformance#web-vitals 17
計測 Core Web Vitals • Next.jsで⽤意され ている計測メソッド を仕込む • 社内の分析ツールに ログを落とし可視化 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 2020/07のTOPページのFID 18
計測 Core Web Vitals • web-vitals* ライブラリも同様 • 可視化ツールはGoogle Analytics** など * https://github.com/GoogleChrome/web-vitals/ ** https://analytics.google.com/analytics/web/provision/#/provision Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 19
CrUX • CrUXデータを データポータルを 使って可視化 • CrUXデータ = フィールドデータ Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 20
Yahoo! BEAUTYでの 取り組み例 Copyright (C) 2020 2019 Yahoo Japan Corporation. All Rights Reserved.
CrUXレポート • 6⽉のデータ • CLS悪い… Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 22
CLS対応 スケルトンスクリーンで 遅延読み込み部分の⾼さ保持 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 23
CLS対応 初回ロードを軽くするための 遅延読み込みが レイアウトシフトを引き起こ していた Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. PICK UPが動く動画 24
CLS対応 スケルトンスクリーンで 遅延読み込み部分の⾼さ保持 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 25
CLS対応結果 CLSの指標がgoodの中で 安定して収まるように リリース後 https://web.dev/vitals/ Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 26
Google Search Consoleでの検出 リリース Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 27
LCP対応 • フィールドデータでは良好 • ラボデータではよろしくない… • 改善の余地がありそう Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 28
LCP対応 - TOPページ • TOPページの画像(LC)配信形式 はWebpに修正済み (次世代フォーマットでの配信) • 画像⾃体はもう⼩さくできない • 画像読み込みまでにかかる ローディングを短くしていく Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 29
LCP対応 - TOPページ • 遅延読み込みを増やす • スケルトンスクリーンが誕⽣したので CLS予防をしつつ対応可能に • (TTFBを⼩さくし) LCPまでの時間短縮を狙う Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 30
LCP対応 - TOPページ • 下部の知恵袋セクションのデータ をview内に来てからリクエスト • 完了まではスケルトンスクリーン で⾼さ保持 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 31
LCP対応 – TOP 結果 リリース • 変化なし😣 https://web.dev/vitals/ Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 32
LCP – CSSセレクタ削減 • CSSのセレクタ表記を⾒直し .block .block__element { … .block__element { … } } Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 33
LCP – CSSセレクタ削減 • ブラウザがセレクタごとに総当りで DOMとマッチングさせるため、 計算量に⼤きな差 .block .block__element { … .block__element { … } } Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 34
LCP – CSSセレクタ削減 • どうLCPにつながる︖ • LCP = LCが描画されるまでの時間 • CSSの計算はPainting前に⾏われる • それまでの処理時間を短縮できる Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 35
CSSセレクタ結果 • 変化なし😣 • 今後に期待 リリース https://web.dev/vitals/ Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 36
LCP - ヘアスタイルページ • LCP対象の要素 →ヘアスタイル画像 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 37
LCP ヘアスタイルページ • HTMLパース後に読み込んでいた • LCP画像のpreload • HTMLパース前に読み込み開始 • FCPとのラグをなくす <link rel=“preload” href=“LC画像” as=“image” > Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 38
preload結果 • 劇的な改善にはならなかった • フィールドデータはgoodだったので結果 が出にくかったのかも リリース https://web.dev/vitals/ Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 39
なぜLCPのスコアが上がらない︖ • 伸び悩んだため詳しく調査 • 社内ツールのアップデートに よる余分なリクエストを発⾒ • 対応した後の計測結果のおか げで発⾒できた Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 40
Core Web Vitals対応してみて • スケルトンスクリーン◎ • CLS指標が提唱されたおかげで、 レイアウトシフトを直す優先度が上 がった • 使いにくいと思いつつなかなか直せなかった Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 41
パフォーマンス改善を続けてみて • 対応すべてが劇的な結果を出すわけで はなかった • 効果を⾒るためにも計測は重要 • ボトルネックを探るヒントにもなる Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 42
パフォーマンス改善体制 Copyright (C) 2020 2019 Yahoo Japan Corporation. All Rights Reserved.
パフォーマンス改善体制 • 企画さん主導だとパフォーマンス改善 タスクは降りてこない • エンジニア主導で⾏う必要がある • エンジニア⽬標として Lighthouseのスコアを置いている Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 44
パフォーマンス改善体制 • 業務の10%をエンジニアタスク消化時 間として確保 • その中でパフォーマンス改善を実施 • 新卒メンバーに研修課題として 取り組んでもらっている Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 45
まとめ • Lighthouse / Core Web Vitals • 計測は⼤事 • パフォーマンス改善に取り組む体制 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 46
EOF Copyright (C) 2020 2019 Yahoo Japan Corporation. All Rights Reserved.
Appendix Copyright (C) 2020 2019 Yahoo Japan Corporation. All Rights Reserved.
CWV in Lighthouse 6 • LCP • FCPを補完する指標として⾼weightで 組み込まれた v5 • FID • 関連する指標としてTBTが組み込まれ ている • CLS v6 • weightは低い(5%) • 将来⾼いweightになる⾒込み 49 https://googlechrome.github.io/lighthouse/scorecalc/ Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
データポータル • CrUXデータをデータポータルで⾒る⽅法 • Core Web Vitals (コアウェブバイタル) 競合調査 の⼿順を紹介・無料のデータポータルでプログラミ ングも不要 - アイデアマンズブログ https://blog.ideamans.com/2020/06/coreweb-vitals-datastudio-reporting.html • 競合サイトのデータも簡単に⾒れて便利 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 50
勉強になった本 • Webフロントエンド ハイパフォーマ ンス チューニング︓書籍案内｜技術評 論社 https://gihyo.jp/book/2017/97 8-4-7741-8967-3 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 51
画像遅延読み込み • ヘアスタイル画像を、 viewに表⽰されてから リクエスト • Core Web Vitals発表前に 取り組んだ • 初回ロードを軽くする Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 52