Slide 1
Slide 1 text
1
2021/07/08
Tech Talk Performance 2021
Slide 2
Slide 2 text
2
Frontend Engineer, Merpay
- Joined to Merpay on March 2020
- Like Vue, Nuxt, (Svelte? Learning now)
- A Capoeirista.
Toshick of the world
Slide 3
Slide 3 text
3
Performance and Web Vitals
メルペイFrontendがどのようにPerformanceに取り組もうとしているか
現状のPerformanceをどのように把握しているのかを発表します
Merpay Frontend is checking our
Performance based on
Web Vitals Scores
Slide 4
Slide 4 text
4
Performance and Web Vitals
Jakob Nielsen Says
I Say
Do not let your customers go for reasons other than the content
遅延が 10秒までになると、ユーザーがコンピューターに振り回されている気持ちになり、ストレ
スを感じ始める。
10秒以上遅くなると、サイトからの離脱率が高くなる。
コンテンツ以外の要因で離脱されることを防ぐためにもパフォーマンスは重要です。
Why
Slide 5
Slide 5 text
5
Performance and Web Vitals
We need to provide information the customer wants without any
annoying experience.
How Can we prove that?
Slide 6
Slide 6 text
6
Performance and Web Vitals
https://web.dev/vitals/
Web Vitals is an initiative by Google to provide unified guidance for
quality signals that are essential to delivering a great user experience
on the web.
Yes, Web Vitals
LCP FID CLS
Slide 7
Slide 7 text
7
We have decided to check these 4 metrics
Slide 8
Slide 8 text
8
We have decided to check these 4 metrics
LCP - Largest Contentful Paint
Load the main content Fast!
CLS - Cumulative Layout Shift
Stop layout shifts!
TBT - Total Blocking Time
Make non-interactive time Short!
TTI - Time to Interactive
Become respondable to user input quickly!
Slide 9
Slide 9 text
9
Why we do not target FID?
Tools like Lighthouse that load pages in a simulated environment
without a user cannot measure FID (there is no user input).
We can improve FID by improving TBT.
(ref: https://web.dev/fid/#how-to-improve-fid)
Slide 10
Slide 10 text
10
Visualizing our Performance by Looker
We make graphs by script corresponding to each url that we want to
check.
LCP TBT CLS TTI
Slide 11
Slide 11 text
11
Visualizing our Performance by Looker
Store data nightly by lighthouse on CI.
https://github.com/GoogleChrome/lighthouse-ci
Do
Lighthouse
Store Data
to BigQuery
Make Graph by
Looker
At 25:00
export result
data
data format is for
our Looker graph
visualize the
performance
Slide 12
Slide 12 text
12
Visualizing our Performance by Looker
We create the Lighthouse data format for Looker.
(by cherry picking) {
"id": "first-contentful-paint",
"title": "First Contentful Paint",
"description": "....",
"score": 1,
"scoreDisplayMode": "numeric",
"numericValue": 1262.196,
"numericUnit": "millisecond",
"displayValue": "1.3 s"
},
{
"id": "total-blocking-time",
...
},
...
↓ significant
params for graph
score
100% score (0-1)
numericValue
real value
data from lighthouse
Slide 13
Slide 13 text
13
Visualizing our Performance by Looker
The blue bar represents 100%
score which means how healthy
the vitals are.
The red line represents the
absolute score of each metrics
calculated by lighthouse
Slide 14
Slide 14 text
14
Visualizing our Performance by Looker
The horizontal lines are standard
scores from web vital team.
We aim for all 4 metrics to reach
the green line in absolute score.
Slide 15
Slide 15 text
15
Compare two graphs
We can not say the trial improvement worked or not from just 1 or 2
times results.
The result is swaying.
My Improvement
worked!
TBT time has
reduced!
?
Slide 16
Slide 16 text
16
Compare two graphs
We compare the
result of a week.
In Merpay, We can
create multiple app
versions in Test
environment.
Original
Trial
Slide 17
Slide 17 text
17
Next Actions
Gather Best Practices and Share
Watch PayLoad Size To Prevent Performance
Down
Analyze Customer behavior by Performance
aspect
Check User Input Performance like FID
02
03
04
01
Slide 18
Slide 18 text
18
We need more people who is
interested in Perf Improvement
Thank you!
Welcome