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 New Relic
Search
istyle Inc.
January 24, 2022
Technology
0
560
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
360
アイスタイル会社説明資料(24新卒採用向け)
istyle
0
880
(3月17日)ブランドソリューション向けイベント資料【@cosmeをハックせよ】
istyle
0
290
(3月17日)働き方・キャリアイメージ資料【@cosmeをハックせよ】
istyle
0
460
アイスタイル2022会社説明資料(歴史ver)
istyle
0
3.3k
@cosmeサービス企画ディレクター(事例)
istyle
0
420
ブランドソリューション向けイベント資料【@cosmeをハックせよ】
istyle
0
280
Other Decks in Technology
See All in Technology
「単なる OAuth 2.0 を認証に使うと、車が通れるほどのどでかいセキュリティー・ホールができる」のか検証してみた
terara
0
380
たくさん本を読んだけど 1年後には綺麗サッパリ!を乗り越えて 学習の鬼になるぞ👹
yum3
0
160
E2Eテスト自動化プラットフォームにおけるAIの活用
shift_evolve
0
190
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
Datadog Cloud SIEMを使ってAWS環境の脅威を可視化した話/lifeistech-datadog-cloud-siem
gidajun
0
480
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
280
セキュリティ研修 Day1【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
JBUG岡山 #6 WordCamp男木島の チームビルディング
takeshifurusato
0
150
スタートアップにおける組織設計とスクラムの長期戦略 / Scrum Fest Kanazawa 2024
yoshikiiida
13
3.6k
データ分析基盤を作ってみよう~設計編~
nrinetcom
PRO
1
110
サービス開発を前に進めるために 新米リードエンジニアが 取り組んだこと / Steps Taken by a Novice Lead Engineer to Advance Service Development
nologyance
0
180
How to Think Like a Performance Engineer
csswizardry
4
590
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
A better future with KSS
kneath
231
17k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Become a Pro
speakerdeck
PRO
15
4.8k
Documentation Writing (for coders)
carmenintech
63
4.2k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
17
1.5k
Designing for humans not robots
tammielis
247
25k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
18
1.2k
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への移行中 アーキテクチャの全体的な見直し・クラウドリフトなど