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
600
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
650
アイスタイル会社説明資料(24新卒採用向け)
istyle
0
1k
(3月17日)ブランドソリューション向けイベント資料【@cosmeをハックせよ】
istyle
1
300
(3月17日)働き方・キャリアイメージ資料【@cosmeをハックせよ】
istyle
0
510
アイスタイル2022会社説明資料(歴史ver)
istyle
0
3.3k
@cosmeサービス企画ディレクター(事例)
istyle
1
500
ブランドソリューション向けイベント資料【@cosmeをハックせよ】
istyle
0
310
Other Decks in Technology
See All in Technology
Ruby on Railsで持続可能な開発を行うために取り組んでいること
am1157154
3
160
遷移の高速化 ヤフートップの試行錯誤
narirou
6
1.9k
DeepSeekとは?何がいいの? - Databricksと学ぶDeepSeek! 〜これからのLLMに備えよ!〜
taka_aki
1
170
Global Databaseで実現するマルチリージョン自動切替とBlue/Greenデプロイ
j2yano
0
160
役員・マネージャー・著者・エンジニアそれぞれの立場から見たAWS認定資格
nrinetcom
PRO
4
6.5k
Amazon Aurora のバージョンアップ手法について
smt7174
2
180
開発者体験を定量的に把握する手法と活用事例
ham0215
0
120
アジャイルな開発チームでテスト戦略の話は誰がする? / Who Talks About Test Strategy?
ak1210
1
780
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
210
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
9
1.9k
AWSアカウントのセキュリティ自動化、どこまで進める? 最適な設計と実践ポイント
yuobayashi
7
1.2k
マルチアカウント環境における組織ポリシーについて まとめてみる
nrinetcom
PRO
2
100
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
137
6.8k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Site-Speed That Sticks
csswizardry
4
410
A better future with KSS
kneath
238
17k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Side Projects
sachag
452
42k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
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への移行中 アーキテクチャの全体的な見直し・クラウドリフトなど