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
lighthouse metricsについて
Search
Yosuke Furukawa
PRO
June 28, 2018
Programming
0
240
lighthouse metricsについて
laco_sushiで発表したlighthouseのメトリクスについての話です。
Yosuke Furukawa
PRO
June 28, 2018
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
3.8k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
200
Removing Corepack
yosuke_furukawa
PRO
9
1.5k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.6k
Strip Types と Storage
yosuke_furukawa
PRO
4
370
Module Harmony について
yosuke_furukawa
PRO
3
1.6k
LTのやり方
yosuke_furukawa
PRO
16
2.4k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
750
Node.js v22 で変わること
yosuke_furukawa
PRO
13
5.8k
Other Decks in Programming
See All in Programming
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
170
React 19アップデートのために必要なこと
uhyo
8
1.5k
CloudNativePGを布教したい
nnaka2992
0
120
SwiftUI移行のためのインプレッショントラッキング基盤の構築
kokihirokawa
0
160
PEPCは何を変えようとしていたのか
ken7253
3
290
Generating OpenAPI schema from serializers throughout the Rails stack - Kyobashi.rb #5
envek
1
390
LINE messaging APIを使ってGoogleカレンダーと連携した予約ツールを作ってみた
takumakoike
0
120
CDKを使ったPagerDuty連携インフラのテンプレート化
shibuya_shogo
0
110
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
630
もう僕は OpenAPI を書きたくない
sgash708
6
1.9k
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.2k
技術を改善し続ける
gumioji
0
150
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
244
12k
Optimizing for Happiness
mojombo
377
70k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
13
1k
For a Future-Friendly Web
brad_frost
176
9.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
A Modern Web Designer's Workflow
chriscoyier
693
190k
How STYLIGHT went responsive
nonsquared
99
5.4k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Transcript
Lighthouse metrics ௐͨ 2018/06/28 @ laco_sushi
Twitter: @yosuke_furukawa Github: yosuke-furukawa
͜ΜʹͪFMPܳਓͰ͢
FMP, FCP, FCI, TTIͱ͔ݴͬͯ Δ͚ͲɺlighthouseͲ͏ͬ ͯଌͬͯΔΜʁʁʁʁ
͋Εɺ͘͠ͳ͍ʁ
ௐͨ
None
FMP • ࣮͘͢͝ώϡʔϦεςΟοΫʹௐࠪͨ݁͠ Ռͷ۪ͳํ๏ͰௐͯΔ • Page ͷϨΠϠΛΧϯτͯ͠ᮢΛ͑ͨΒ • Page ͷ͞ΛௐͯͲ͜·Ͱ͍͔
• WebFonts͕ϩʔυࡁΈ͔
FMP • ࣮͘͢͝ώϡʔϦεςΟοΫʹௐࠪͨ݁͠Ռͷ۪ͳํ ๏ͰௐͯΔ • Page ͷϨΠϠΛΧϯτͯ͠ᮢΛ͑ͨΒ • Page ͷ͞ΛௐͯͲ͜·Ͱ͍͔
• WebFonts͕ϩʔυࡁΈ͔ •
TTI • ಉ༷ʹ۪ • FMP͕ܾ·ͬͨΒ͔ͦ͜Β5secؒৄࡉௐࠪ • ͦΕ͕ࡁΉͱ1sec͝ͱʹLongTask͕ͳ͍͔ௐࠪ • LongTask(50msҎ্ͷtask)͕ΕͨΒͦͷλΠ ϛϯά͕TTI
TTI
ͭ·Γ
pageͯ͘DOMෳࡶʹ͠ ͯɺwebfontΘͳ͚Ε FMPὃͤΔ
5secԿ͠ͳ͚ΕTTIὃ ͤΔ
ͦΕʹҙຯͳ͍͚Ͳɻɻɻ
100ࢦͦ͏ͳ
Β͜Β͓݁ࠗ͜ΊͰͱ͏