Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Core Web Vitals に寄り添うダッシュボード/tsuchiyah_20220120...

istyle Inc.
January 24, 2022

Core Web Vitals に寄り添うダッシュボード/tsuchiyah_20220120 New Relic

アイスタイルとは
Core Web Vitals改善のための考え方
Core Web Vitals改善で採用された指標について

istyle Inc.

January 24, 2022
Tweet

More Decks by istyle Inc.

Other Decks in Technology

Transcript

  1. Core Web Vitals に寄り添うダッシュボード © istyle Inc. No.0 株式会社アイスタイル T&C開発センター

    第4開発本部 UXシステム開発1部 ウェブSREグループ マネージャー 土屋 宏樹
  2. No.1 自己紹介
 名前 土屋宏樹 (@tsuchiyanohito)
 特にツイッターは何もつぶやいてないのでフォローしなくていいです
 趣味 ゲーム(FF14,satisfactory)
 satisfactoryはエンジニア全員好きなのでやってください
 社歴

    アイスタイル(3年目ぐらい)
 スタートアップ→大手ベンチャー→スタートアップ→アイスタイル(エンジニア→MGR)
 お仕事 php/Laravel/cakephp/SEO/AWS/マネジメント
 守備範囲ごちゃごちゃ
 \この写真もう2年前だ/ 

  3. No.5 What’s @cosme?
 月間ユニークユーザー
 
 1,430万人
 登録会員数
 
 680万人
 登録ブランド数


    
 40,000ブランド
 クチコミ数
 
 1,690万件
 20代~30代の 女性の過半数 が毎月利用
 美容トレンドに 敏感な20代 ~30代が中心
 国内の化粧品
 ブランドは
 ほぼ全て網羅
 日本最大級の
 クチコミ数

  4. 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 

  5. 改善ってなにすればいいの?(FID編)
 No.9 LCP バックエンド フロントエンド 接続時間 DB/SQL 処理時間 html描画 css/js/img

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

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

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

    load 広告・DMP関係など 画像の非同期読み込み 読み込み時間 • 今使用しているシステム減らせる・・・? ◦ 無理\(^o^)/ • 今表示している画像減らせる・・・? ◦ 無理\(^o^)/
  9. 使用しているクエリ
 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