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
540
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
210
アイスタイル会社説明資料(24新卒採用向け)
istyle
0
810
(3月17日)ブランドソリューション向けイベント資料【@cosmeをハックせよ】
istyle
0
270
(3月17日)働き方・キャリアイメージ資料【@cosmeをハックせよ】
istyle
0
420
アイスタイル2022会社説明資料(歴史ver)
istyle
0
3.2k
@cosmeサービス企画ディレクター(事例)
istyle
0
400
ブランドソリューション向けイベント資料【@cosmeをハックせよ】
istyle
0
260
Other Decks in Technology
See All in Technology
「手動オペレーションに定評がある」と言われた私が心がけていること / phpcon_odawara2024
blue_goheimochi
1
310
最近たまに見かけるTiDBってなんだ? - Findy
pingcap0315
2
450
レガシーをぶっ壊せ。AEONで始めるDevRelの話 / Qiita Night 2024-2-22
aeonpeople
3
120
Delivering Millions of Messages within seconds @ Duolingo
pelelgrino
0
320
オーナーシップを持つ領域を明確にする
konifar
8
1.2k
DevOpsDays History and my DevOps story
kawaguti
PRO
7
1.4k
"好き"との生活/Regularly update profile with GitHub Actions
judeeeee
0
150
Data and AI Governance: Existing Challenges and Emerging Trends
scotthsieh825
0
140
普段有償でサポート業務をしているCSAが技術知見を無料で公開する理由
07jp27
1
630
AWS パートナー企業でテクニカルサポートに従事して2年経ったので思うところをまとめてみた
kazzpapa3
3
1.3k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs (QCon London)
inesmontani
PRO
0
150
コードを書く隙間を見つけて生きていく技術/Findy 思考の現在地
fujiwara3
24
4.8k
Featured
See All Featured
Faster Mobile Websites
deanohume
296
30k
Building Applications with DynamoDB
mza
88
5.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
355
22k
GitHub's CSS Performance
jonrohan
1023
450k
Teambox: Starting and Learning
jrom
128
8.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
272
13k
The Power of CSS Pseudo Elements
geoffreycrofte
58
5k
Building Your Own Lightsaber
phodgson
97
5.7k
How STYLIGHT went responsive
nonsquared
92
4.8k
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.9k
Done Done
chrislema
178
15k
In The Pink: A Labor of Love
frogandcode
137
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への移行中 アーキテクチャの全体的な見直し・クラウドリフトなど