Core Web Vitals に寄り添うダッシュボード © istyle Inc. No.0 株式会社アイスタイル T&C開発センター 第4開発本部　UXシステム開発1部　ウェブSREグループ マネージャー 土屋 宏樹

No.1 自己紹介
 名前 土屋宏樹 (@tsuchiyanohito)
 特にツイッターは何もつぶやいてないのでフォローしなくていいです
 趣味 ゲーム（FF14,satisfactory)
 satisfactoryはエンジニア全員好きなのでやってください
 社歴 アイスタイル（3年目ぐらい）
 スタートアップ→大手ベンチャー→スタートアップ→アイスタイル(エンジニア→MGR）
 お仕事 php/Laravel/cakephp/SEO/AWS/マネジメント
 守備範囲ごちゃごちゃ
 ＼この写真もう2年前だ／ 


No.2 アジェンダ
 ○ アイスタイルとは
 ○ Core Web Vitals改善のための考え方
 ○ Core Web Vitals改善で採用された指標について


今日話さないこと
 No.3 ○ Core Web Vitalsとはなんぞや
 ■ 知っている前提で話をさせてください
 ○ 具体的な実装・改善方法
 ■ 今回は本質的な改善方法などは喋らない予定


What’s istyle?
 No.4 を運営している会社です。
 国内最大のコスメ・美容の総合サイト

No.5 What’s @cosme?
 月間ユニークユーザー
 
 1,430万人
 登録会員数
 
 680万人
 登録ブランド数
 
 40,000ブランド
 クチコミ数
 
 1,690万件
 20代～30代の 女性の過半数 が毎月利用
 美容トレンドに 敏感な20代 ～30代が中心
 国内の化粧品
 ブランドは
 ほぼ全て網羅
 日本最大級の
 クチコミ数


Core Web Vitalsとは
 No.6 ○ Web Vitals（ウェブバイタル）とは
 ■ Web Vitalsとは、GoogleがWeb上で優れたユーザー体験を提供するために不可欠である考 えであり、ユーザー体験を向上させるためのガイダンスを提供するための Google の取り組 み
 ○ Core Web Vitals（コアウェブバイタル）とは
 ■ Web Vitalsの中でも特に重要な3つのことをCore Web Vitalsとしている
 ● 読み込み時間（LCP）
 ● インタラクティブ性（FID）
 ● ページ・コンテンツの視覚的安定性（CLS）
 出典 : GoogleのUX指標「Core Web Vitals（コアウェブバイタル）」とは？ LCP・FID・CLSを解説 https://ferret-plus.com/15951 


読み込み時間を考え直してみる
 No.7 バックエンド フロントエンド 接続時間 DB/SQL 処理時間 html描画 css/js/img load 広告・DMP関係など 画像の非同期読み込み 読み込み時間

読み込み時間を考え直してみる
 No.8 LCP バックエンド フロントエンド 接続時間 DB/SQL 処理時間 html描画 css/js/img load 広告・DMP関係など 画像の非同期読み込み FID CLS 読み込み時間

改善ってなにすればいいの？(FID編)
 No.9 LCP バックエンド フロントエンド 接続時間 DB/SQL 処理時間 html描画 css/js/img load 広告・DMP関係など 画像の非同期読み込み FID CLS 読み込み時間 ● jsのminify ● 未使用jsの削除 ● jsの軽量化 ● 入力を阻害する要素の排除 などなど

改善ってなにすればいいの？（CLS編）
 No.10 LCP バックエンド フロントエンド 接続時間 DB/SQL 処理時間 html描画 css/js/img load 広告・DMP関係など 画像の非同期読み込み CLS 読み込み時間 ● 高さがずれる要素をへらす ● ズレを防止するように高さの確保を行う ○ 高さが変動するもの（バナーなど）の場合、最低 限の高さ（min-height）を指定するだけでも効果有 り

改善ってなにすればいいの？
 No.11 LCP バックエンド フロントエンド 接続時間 DB/SQL 処理時間 html描画 css/js/img load 広告・DMP関係など 画像の非同期読み込み 読み込み時間 ● htmlのタグの構造は整理できるが、可読性悪くなる・・・ ● css/jsなどを整理することもできるが・・・

LCPのフロントを改善するためのチェックリスト
 No.12 ○ プロモーション担当と一緒に改善が行えるか
 ■ 配信用のタグを減らしたり、広告の配信サービスを変えられるのか
 ○ サイト内の画像掲載量減らせるか
 ■ サイトのコンテンツとして成り立つ量まで減らせるか
 
 
 
 
 
 
 → ほとんどのサイトでは、かなり難易度が高いのでは・・・？
 
 


改善ってなにすればいいの？
 No.13 LCP バックエンド フロントエンド 接続時間 DB/SQL 処理時間 html描画 css/js/img load 広告・DMP関係など 画像の非同期読み込み 読み込み時間 ● 今使用しているシステム減らせる・・・？ ○ 無理＼(^o^)／ ● 今表示している画像減らせる・・・？ ○ 無理＼(^o^)／

そしてたどり着く一つの真実
 No.14 LCPの改善　＝　バックエンド側


結論
 No.15 ○ LCPの時間を短縮
 ■ 実はバックエンド側の責任重大
 ○ KPIとして「LCP＝読み込み時間」と仮定する
 ■ ただしバックエンドとフロントエンドの棲み分けができるような指標作成が必要
 


結論から生まれた指標
 No.16 従来使用していた指標 
 現在使用している指標 


No.17 バックエンド
 フロントエンド


なぜこの3指標になったのか
 No.18 ○ もともとはページ読み込み時間 = durationを使用
 ■ 障害が起きた時・改善を見る時フロントエンドなのかバックエンドの影響なのかも分析しづら い
 ■ 分ける必要はあったがグラフ自体を細かく分けすぎると分析時に不便
 


なぜこの3指標になったのか
 No.19 ○ 下記3指標を合計すると、durationになるため分解しつつも読み込み時間として 活用することもできた
 出典 : New Relic提供資料


使用しているクエリ
 No.20 FROM PageView
 SELECT average(backendDuration) as 'Backend',
 average(domProcessingDuration) as 'Front(domProcessing)',
 average(pageRenderingDuration) as 'Front(pageRendering)'
 WHERE /* ここにページ条件などをいれる */
 TIMESERIES MAX SINCE 1 day ago
 
 Chart type : Area


結果
 No.21 ○ フロント・バックエンド影響（良いときも悪い時も）がわかりやすく
 ■ フロントエンド・バックエンドの改修が並走した場合でも指標としてわかりやすくなった
 ○ 総合計時間＝アプリケーション側の状態も見やすい
 ○ これからやりたいこと
 ■ まだまだ細分化がたりていない
 ● 他社のJSがどのような影響を与えているのかがまだ読めていないので、ダッシュボードで自社指 標と他社指標は分けていきたい
 ● 


紹介しきれない改善事例
 No.22 弊社techブログで紹介されていた改修事例をご紹介
 
 画像のサイズ指定でサイトのCLSを改善させた話
 JavaScriptの非同期読み込みとその効果について
 月次会発表切り抜き Vol.1 〜APIを10倍高速化した話
 New Relicを1年ぐらい導入したので色々まとめてみた
 


宣伝
 No.23 現在アイスタイルでは中途採用積極募集中！
 https://recruit.istyle.co.jp/career/
 現在オンプレミス→AWSへの移行中
 アーキテクチャの全体的な見直し・クラウドリフトなど