---
title: Yahoo! BEAUTY Core Web Vitals 対応 #yjbonfire
tags:  #yjbonfire  
author: [Yahoo!デベロッパーネットワーク](https://www.docswell.com/user/ydnjp)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/ZPJRVPPKE9.jpg?width=480
description: Bonfire Frontend #6 での登壇発表内容です。 イベントページ URL は こちらです。 https://yj-meetup.connpass.com/event/181363/ Bonfire Frontendは、ヤフー主催の「フロントエンド」にフォーカスした情報共有を定期的に行う勉強会/交流会イベントです。 様々な最新技術の活用方法やデザイナー、バックエンドとの連携など、フロントエンドが抱える課題を共有し、フロントエンドについてを熱く語る会を目指します！
published: August 18, 20
canonical: https://www.docswell.com/s/ydnjp/5W8GJK-2020-08-18-153551
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/ZPJRVPPKE9.jpg)

Yahoo! BEAUTY
Core Web Vitals対応
2020年8⽉11⽇
ヤフー株式会社 松本 華歩
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.


# Page. 2

![Page Image](https://bcdn.docswell.com/page/NPEXZ335JX.jpg)

⾃⼰紹介
• 松本華歩
• 新卒2年⽬
• Yahoo! BEAUTY FE
• ダンス好き
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
2


# Page. 3

![Page Image](https://bcdn.docswell.com/page/63EK8YYRJD.jpg)

本⽇の内容
• Yahoo! BEAUTYで⾏われた
パフォーマンス改善について
• 主にCore Web Vitalsについて
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
3


# Page. 4

![Page Image](https://bcdn.docswell.com/page/4L73299GE5.jpg)

Yahoo! BEAUTYとは
• 2019/11サービス開始
• ヘアスタイル検索機能
•
担当スタイリスト・サロン
情報表⽰
• React + Next.js
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
https://beauty.yahoo.co.jp/
4


# Page. 5

![Page Image](https://bcdn.docswell.com/page/V87DZGGNJG.jpg)

パフォーマンス改善
• 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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/4VJPD33NJ8.jpg)

Lighthouse
• Chrome Dev Tools の Lighthouse
タブから利⽤可能
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
6


# Page. 7

![Page Image](https://bcdn.docswell.com/page/L2EV144YJQ.jpg)

Lighthouse
• 各指標の測定値
• トレース
• 改善のためのヒント
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
7


# Page. 8

![Page Image](https://bcdn.docswell.com/page/Z57G211W7L.jpg)

PageSpeed Insights
• URLを⼊⼒するとラボデータとフィールドデー
タを確認できる
• 公開URLのテスト
https://developers.google.com/speed/pagespeed/insights/
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
8


# Page. 9

![Page Image](https://bcdn.docswell.com/page/V4EQPDDQJP.jpg)

Lighthouse 定時計測
• Lighthouse Node CLI*
を使って定時計測
* https://www.npmjs.com/package/lighthouse
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
9


# Page. 10

![Page Image](https://bcdn.docswell.com/page/DKJ4YZZYE1.jpg)

計測 Lighthouse
• 計測時の詳細結果も保存
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
10


# Page. 11

![Page Image](https://bcdn.docswell.com/page/PLE16RRNJG.jpg)

指標を追いかける理由
• Lighthouse 6 指標
•
指標を上げる改善をすることで
UX向上・直帰率を下げる⽬的
• Core Web Vitals 2020
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
11


# Page. 12

![Page Image](https://bcdn.docswell.com/page/8GEWW1YME2.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/W47Z5PXME3.jpg)

CWV各指標
https://web.dev/vitals/
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
13


# Page. 14

![Page Image](https://bcdn.docswell.com/page/KYJ69M45JV.jpg)

CLSを改善すべき理由
https://web.dev/cls/
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
14


# Page. 15

![Page Image](https://bcdn.docswell.com/page/5GJ5NZQGE4.jpg)

2020
• Core Web Vitals 2020のため、
また来年には刷新されるかも
• 要チェック
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
15


# Page. 16

![Page Image](https://bcdn.docswell.com/page/V9E25RPDER.jpg)

指標を追いかける理由
• Lighthouse 6 指標
•
指標を上げる改善をすることで
UX向上・離脱率を下げる⽬的
• Core Web Vitals 2020
• 将来のSEO対策になり得る
• よりUX向上を狙える
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
16


# Page. 17

![Page Image](https://bcdn.docswell.com/page/5D7YKD5MJM.jpg)

Core Web Vitalsの計測
• Next.jsで⽤意され
ている計測メソッド
を仕込む
• 社内の分析ツールに
ログを落とし可視化
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
https://nextjs.org/docs/advanced-features/measuringperformance#web-vitals
17


# Page. 18

![Page Image](https://bcdn.docswell.com/page/2VENR6N378.jpg)

計測 Core Web Vitals
• Next.jsで⽤意され
ている計測メソッド
を仕込む
• 社内の分析ツールに
ログを落とし可視化
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
2020/07のTOPページのFID
18


# Page. 19

![Page Image](https://bcdn.docswell.com/page/GY79MLRPE3.jpg)

計測 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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/5G78LXWXED.jpg)

CrUX
• CrUXデータを
データポータルを
使って可視化
• CrUXデータ =
フィールドデータ
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
20


# Page. 21

![Page Image](https://bcdn.docswell.com/page/ML7LL8NN7R.jpg)

Yahoo! BEAUTYでの
取り組み例
Copyright (C) 2020
2019 Yahoo Japan Corporation. All Rights Reserved.


# Page. 22

![Page Image](https://bcdn.docswell.com/page/54EMM6XQEW.jpg)

CrUXレポート
• 6⽉のデータ
• CLS悪い…
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
22


# Page. 23

![Page Image](https://bcdn.docswell.com/page/ZPERVPNK79.jpg)

CLS対応
スケルトンスクリーンで
遅延読み込み部分の⾼さ保持
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
23


# Page. 24

![Page Image](https://bcdn.docswell.com/page/NP7XZ3N5EX.jpg)

CLS対応
初回ロードを軽くするための
遅延読み込みが
レイアウトシフトを引き起こ
していた
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
PICK UPが動く動画
24


# Page. 25

![Page Image](https://bcdn.docswell.com/page/637K8YNRED.jpg)

CLS対応
スケルトンスクリーンで
遅延読み込み部分の⾼さ保持
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
25


# Page. 26

![Page Image](https://bcdn.docswell.com/page/4LJ329VG75.jpg)

CLS対応結果
CLSの指標がgoodの中で
安定して収まるように
リリース後
https://web.dev/vitals/
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
26


# Page. 27

![Page Image](https://bcdn.docswell.com/page/V8JDZG8NEG.jpg)

Google Search Consoleでの検出
リリース
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
27


# Page. 28

![Page Image](https://bcdn.docswell.com/page/4VEPD38NE8.jpg)

LCP対応
• フィールドデータでは良好
• ラボデータではよろしくない…
• 改善の余地がありそう
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
28


# Page. 29

![Page Image](https://bcdn.docswell.com/page/L27V14NYEQ.jpg)

LCP対応 - TOPページ
• TOPページの画像(LC)配信形式
はWebpに修正済み
(次世代フォーマットでの配信)
• 画像⾃体はもう⼩さくできない
• 画像読み込みまでにかかる
ローディングを短くしていく
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
29


# Page. 30

![Page Image](https://bcdn.docswell.com/page/Z5JG21KWJL.jpg)

LCP対応 - TOPページ
• 遅延読み込みを増やす
•
スケルトンスクリーンが誕⽣したので
CLS予防をしつつ対応可能に
• (TTFBを⼩さくし)
LCPまでの時間短縮を狙う
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
30


# Page. 31

![Page Image](https://bcdn.docswell.com/page/V47QPDNQEP.jpg)

LCP対応 - TOPページ
• 下部の知恵袋セクションのデータ
をview内に来てからリクエスト
• 完了まではスケルトンスクリーン
で⾼さ保持
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
31


# Page. 32

![Page Image](https://bcdn.docswell.com/page/DKE4YZGY71.jpg)

LCP対応 – TOP 結果
リリース
• 変化なし😣
https://web.dev/vitals/
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
32


# Page. 33

![Page Image](https://bcdn.docswell.com/page/PL716RDNEG.jpg)

LCP – CSSセレクタ削減
• CSSのセレクタ表記を⾒直し
.block .block__element {
…
.block__element {
…
}
}
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
33


# Page. 34

![Page Image](https://bcdn.docswell.com/page/8G7WW18M72.jpg)

LCP – CSSセレクタ削減
• ブラウザがセレクタごとに総当りで
DOMとマッチングさせるため、
計算量に⼤きな差
.block .block__element {
…
.block__element {
…
}
}
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
34


# Page. 35

![Page Image](https://bcdn.docswell.com/page/W4JZ5P8M73.jpg)

LCP – CSSセレクタ削減
• どうLCPにつながる︖
• LCP = LCが描画されるまでの時間
• CSSの計算はPainting前に⾏われる
• それまでの処理時間を短縮できる
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
35


# Page. 36

![Page Image](https://bcdn.docswell.com/page/KYE69MP5EV.jpg)

CSSセレクタ結果
• 変化なし😣
• 今後に期待
リリース
https://web.dev/vitals/
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
36


# Page. 37

![Page Image](https://bcdn.docswell.com/page/5GE5NZKG74.jpg)

LCP - ヘアスタイルページ
• LCP対象の要素
→ヘアスタイル画像
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
37


# Page. 38

![Page Image](https://bcdn.docswell.com/page/V9725RWD7R.jpg)

LCP ヘアスタイルページ
• HTMLパース後に読み込んでいた
• LCP画像のpreload
•
HTMLパース前に読み込み開始
• FCPとのラグをなくす
<link rel=“preload” href=“LC画像” as=“image” >
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
38


# Page. 39

![Page Image](https://bcdn.docswell.com/page/5DJYKDLMEM.jpg)

preload結果
• 劇的な改善にはならなかった
• フィールドデータはgoodだったので結果
が出にくかったのかも
リリース
https://web.dev/vitals/
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
39


# Page. 40

![Page Image](https://bcdn.docswell.com/page/2V7NR643J8.jpg)

なぜLCPのスコアが上がらない︖
• 伸び悩んだため詳しく調査
• 社内ツールのアップデートに
よる余分なリクエストを発⾒
• 対応した後の計測結果のおか
げで発⾒できた
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
40


# Page. 41

![Page Image](https://bcdn.docswell.com/page/GYJ9MLQP73.jpg)

Core Web Vitals対応してみて
• スケルトンスクリーン◎
• CLS指標が提唱されたおかげで、
レイアウトシフトを直す優先度が上
がった
• 使いにくいと思いつつなかなか直せなかった
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
41


# Page. 42

![Page Image](https://bcdn.docswell.com/page/5GJ8LXGX7D.jpg)

パフォーマンス改善を続けてみて
• 対応すべてが劇的な結果を出すわけで
はなかった
• 効果を⾒るためにも計測は重要
• ボトルネックを探るヒントにもなる
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
42


# Page. 43

![Page Image](https://bcdn.docswell.com/page/MLJLL8GNJR.jpg)

パフォーマンス改善体制
Copyright (C) 2020
2019 Yahoo Japan Corporation. All Rights Reserved.


# Page. 44

![Page Image](https://bcdn.docswell.com/page/547MM6QQ7W.jpg)

パフォーマンス改善体制
• 企画さん主導だとパフォーマンス改善
タスクは降りてこない
• エンジニア主導で⾏う必要がある
•
エンジニア⽬標として
Lighthouseのスコアを置いている
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
44


# Page. 45

![Page Image](https://bcdn.docswell.com/page/ZP7RVP8KJ9.jpg)

パフォーマンス改善体制
• 業務の10%をエンジニアタスク消化時
間として確保
• その中でパフォーマンス改善を実施
• 新卒メンバーに研修課題として
取り組んでもらっている
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
45


# Page. 46

![Page Image](https://bcdn.docswell.com/page/NPJXZ3857X.jpg)

まとめ
• Lighthouse / Core Web Vitals
• 計測は⼤事
• パフォーマンス改善に取り組む体制
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
46


# Page. 47

![Page Image](https://bcdn.docswell.com/page/63JK8YKR7D.jpg)

EOF
Copyright (C) 2020
2019 Yahoo Japan Corporation. All Rights Reserved.


# Page. 48

![Page Image](https://bcdn.docswell.com/page/4LE329ZGJ5.jpg)

Appendix
Copyright (C) 2020
2019 Yahoo Japan Corporation. All Rights Reserved.


# Page. 49

![Page Image](https://bcdn.docswell.com/page/V8EDZGRN7G.jpg)

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.


# Page. 50

![Page Image](https://bcdn.docswell.com/page/4V7PD3WN78.jpg)

データポータル
• 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


# Page. 51

![Page Image](https://bcdn.docswell.com/page/L2JV148Y7Q.jpg)

勉強になった本
• Webフロントエンド ハイパフォーマ
ンス チューニング︓書籍案内｜技術評
論社
https://gihyo.jp/book/2017/97
8-4-7741-8967-3
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
51


# Page. 52

![Page Image](https://bcdn.docswell.com/page/Z5EG215WEL.jpg)

画像遅延読み込み
• ヘアスタイル画像を、
viewに表⽰されてから
リクエスト
• Core Web Vitals発表前に
取り組んだ
• 初回ロードを軽くする
Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
52