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
580
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
490
アイスタイル会社説明資料(24新卒採用向け)
istyle
0
930
(3月17日)ブランドソリューション向けイベント資料【@cosmeをハックせよ】
istyle
0
290
(3月17日)働き方・キャリアイメージ資料【@cosmeをハックせよ】
istyle
0
490
アイスタイル2022会社説明資料(歴史ver)
istyle
0
3.3k
@cosmeサービス企画ディレクター(事例)
istyle
0
480
ブランドソリューション向けイベント資料【@cosmeをハックせよ】
istyle
0
310
Other Decks in Technology
See All in Technology
Jr. Championsになって、強く連携しながらAWSをもっと使いたい!~AWSに対する期待と行動~
amixedcolor
0
190
Shift-from-React-to-Vue
calm1205
3
1.3k
AWS CodePipelineでコンテナアプリをデプロイした際に、古いイメージを自動で削除する
smt7174
1
110
「 SharePoint 難しい」ってよく聞くけど、そんなに言うなら8歳の息子に試してもらった
taichinakamura
1
630
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.6k
2024-10-30-reInventStandby_StudyGroup_Intro
shinichirokawano
1
640
なんで、私がAWS Heroに!? 〜社外の広い世界に一歩踏み出そう〜
minorun365
PRO
6
1.1k
CAMERA-Suite: 広告文生成のための評価スイート / ai-camera-suite
cyberagentdevelopers
PRO
3
270
10分でわかるfreeeのQA
freee
1
3.4k
事業者間調整の行間を読む 調整の具体事例
sugiim
0
1.5k
APIテスト自動化の勘所
yokawasa
7
4.2k
30万人が利用するチャットをFirebase Realtime DatabaseからActionCableへ移行する方法
ryosk7
5
350
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Rails Girls Zürich Keynote
gr2m
93
13k
Building an army of robots
kneath
302
42k
Six Lessons from altMBA
skipperchong
26
3.5k
A designer walks into a library…
pauljervisheath
202
24k
Designing for humans not robots
tammielis
249
25k
What's new in Ruby 2.0
geeforr
342
31k
We Have a Design System, Now What?
morganepeng
50
7.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
Visualization
eitanlees
144
15k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
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への移行中 アーキテクチャの全体的な見直し・クラウドリフトなど