Upgrade to Pro — share decks privately, control downloads, hide ads and more …

lighthouse metricsについて

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Yosuke Furukawa Yosuke Furukawa PRO
June 28, 2018
Programming
0
260

lighthouse metricsについて

laco_sushiで発表したlighthouseのメトリクスについての話です。

Avatar for Yosuke Furukawa

Yosuke Furukawa PRO

June 28, 2018
Tweet

More Decks by Yosuke Furukawa

See All by Yosuke Furukawa
デザインシステムが必須の時代に
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
2
210
Node.js, Deno, Bun 最新動向とその所感について
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
10
5k
Welcome JSConf.jp 2024
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
1
4.6k
tc39 x jsconf.jp Panel Discussion 2024
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
0
310
Removing Corepack
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
9
1.9k
JavaScript Runtime とはなにか
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
15
3k
Strip Types と Storage
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
4
480
Module Harmony について
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
4
1.8k
LTのやり方
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
16
2.9k

Other Decks in Programming

See All in Programming
AWS×クラウドネイティブソフトウェア設計 / AWS x Cloud-Native Software Design
Avatar for nrs nrslib
15
3k
DevinとClaude Code、SREの現場で使い倒してみた件
Avatar for karia/Y.Hisamatsu karia
1
1k
文字コードの話
Avatar for Masaki Hara qnighy
44
17k
PostgreSQL を使った快適な go test 環境を求めて
Avatar for Kotaro Otaka otakakot
0
540
Fundamentals of Software Engineering In the Age of AI
Avatar for Dan Vega therealdanvega
1
250
How to stabilize UI tests using XCTest
Avatar for Akio Itaya akkeylab
0
110
nilとは何か 〜interfaceの構造とnil!=nilから理解する〜
Avatar for kuro kuro_kurorrr
3
1.9k
クライアントワークでSREをするということ。あるいは事業会社におけるSREと同じこと・違うこと
Avatar for nnaka2992 nnaka2992
1
330
AI Assistants for Your Angular Solutions
Avatar for Manfred Steyer manfredsteyer
PRO
0
130
今更考える「単一責任原則」 / Thinking about the Single Responsibility Principle
Avatar for philomagi tooppoo
3
1.6k
どんと来い、データベース信頼性エンジニアリング / Introduction to DBRE
Avatar for nnaka2992 nnaka2992
1
280
コードレビューをしない選択 #でぃーぷらすトウキョウ
Avatar for Takuma Kajikawa kajitack
3
890

Featured

See All Featured
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
14k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.1k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
320
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
630
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
480
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
3.7k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
140
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
3
68
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
199
73k

Transcript

  1. Lighthouse metrics ௐ΂ͨ 2018/06/28 @ laco_sushi

  2. Twitter: @yosuke_furukawa Github: yosuke-furukawa

  3. ͜Μʹͪ͸FMPܳਓͰ͢

  4. FMP, FCP, FCI, TTIͱ͔ݴͬͯ Δ͚ͲɺlighthouseͲ͏΍ͬ ͯଌͬͯΔΜʁʁʁʁ

  5. ͋Εɺ೉͘͠ͳ͍ʁ

  6. ௐ΂ͨ

  7. None

  8. FMP • ࣮͸͘͢͝ώϡʔϦεςΟοΫʹௐࠪͨ݁͠ Ռͷ۪௚ͳํ๏Ͱௐ΂ͯΔ • Page ͷϨΠϠΛΧ΢ϯτͯ͠ᮢ஋Λ௒͑ͨΒ • Page ͷ௕͞Λௐ΂ͯͲ͜·Ͱ௕͍͔

    • WebFonts͕ϩʔυࡁΈ͔

  9. FMP • ࣮͸͘͢͝ώϡʔϦεςΟοΫʹௐࠪͨ݁͠Ռͷ۪௚ͳํ ๏Ͱௐ΂ͯΔ • Page ͷϨΠϠΛΧ΢ϯτͯ͠ᮢ஋Λ௒͑ͨΒ • Page ͷ௕͞Λௐ΂ͯͲ͜·Ͱ௕͍͔

    • WebFonts͕ϩʔυࡁΈ͔ •

  10. TTI • ಉ༷ʹ௒۪௚ • FMP͕ܾ·ͬͨΒ͔ͦ͜Β5secؒৄࡉௐࠪ • ͦΕ͕ࡁΉͱ1sec͝ͱʹLongTask͕ͳ͍͔ௐࠪ • LongTask(50msҎ্ͷtask)͕੾ΕͨΒͦͷλΠ ϛϯά͕TTI

  11. TTI

  12. ͭ·Γ

  13. page௕ͯ͘DOMෳࡶʹ͠ ͯɺwebfont࢖Θͳ͚Ε͹ FMP͸ὃͤΔ

  14. 5secԿ΋͠ͳ͚Ε͹TTI͸ὃ ͤΔ

  15. ͦΕʹҙຯ͸ͳ͍͚Ͳɻɻɻ

  16. 100఺໨ࢦͦ͏ͳ

  17. Β͜Β͓݁ࠗ͜ΊͰͱ͏