Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Core Web Vitals に寄り添うダッシュボード/tsuchiyah_20220120...
Search
istyle Inc.
January 24, 2022
Technology
0
590
Core Web Vitals に寄り添うダッシュボード/tsuchiyah_20220120 New Relic
アイスタイルとは
Core Web Vitals改善のための考え方
Core Web Vitals改善で採用された指標について
istyle Inc.
January 24, 2022
Tweet
Share
More Decks by istyle Inc.
See All by istyle Inc.
2023年会社説明資料
istyle
0
560
アイスタイル会社説明資料(24新卒採用向け)
istyle
0
960
(3月17日)ブランドソリューション向けイベント資料【@cosmeをハックせよ】
istyle
0
290
(3月17日)働き方・キャリアイメージ資料【@cosmeをハックせよ】
istyle
0
500
アイスタイル2022会社説明資料(歴史ver)
istyle
0
3.3k
@cosmeサービス企画ディレクター(事例)
istyle
0
500
ブランドソリューション向けイベント資料【@cosmeをハックせよ】
istyle
0
310
Other Decks in Technology
See All in Technology
Postman と API セキュリティ / Postman and API Security
yokawasa
0
200
kargoの魅力について伝える
magisystem0408
0
210
Amazon SageMaker Unified Studio(Preview)、Lakehouse と Amazon S3 Tables
ishikawa_satoru
0
150
1等無人航空機操縦士一発試験 合格までの道のり ドローンミートアップ@大阪 2024/12/18
excdinc
0
160
Wvlet: A New Flow-Style Query Language For Functional Data Modeling and Interactive Data Analysis - Trino Summit 2024
xerial
1
120
組織に自動テストを書く文化を根付かせる戦略(2024冬版) / Building Automated Test Culture 2024 Winter Edition
twada
PRO
13
3.7k
第3回Snowflake女子会_LT登壇資料(合成データ)_Taro_CCCMK
tarotaro0129
0
190
マイクロサービスにおける容易なトランザクション管理に向けて
scalar
0
120
Jetpack Composeで始めるServer Cache State
ogaclejapan
2
170
サイバー攻撃を想定したセキュリティガイドライン 策定とASM及びCNAPPの活用方法
syoshie
3
1.2k
フロントエンド設計にモブ設計を導入してみた / 20241212_cloudsign_TechFrontMeetup
bengo4com
0
1.9k
統計データで2024年の クラウド・インフラ動向を眺める
ysknsid25
2
840
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
510
110k
What's in a price? How to price your products and services
michaelherold
243
12k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Bash Introduction
62gerente
608
210k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.4k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
2
170
How STYLIGHT went responsive
nonsquared
95
5.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Transcript
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への移行中 アーキテクチャの全体的な見直し・クラウドリフトなど