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

lighthouse metricsについて

Avatar for Yosuke Furukawa Yosuke Furukawa
PRO
June 28, 2018
Programming
0
250

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
Node.js, Deno, Bun 最新動向とその所感について
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
9
3.8k
Welcome JSConf.jp 2024
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
1
4.1k
tc39 x jsconf.jp Panel Discussion 2024
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
0
230
Removing Corepack
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
9
1.6k
JavaScript Runtime とはなにか
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
4
410
Module Harmony について
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
3
1.7k
LTのやり方
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
16
2.6k
AppRouter Panel Talk
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
3
810

Other Decks in Programming

See All in Programming
LT 2025-06-30: プロダクトエンジニアの役割
Avatar for Keisuke Yamamoto yamamotok
0
760
Rails Frontend Evolution: It Was a Setup All Along
Avatar for Svyatoslav Kryukov skryukov
0
140
技術同人誌をMCP Serverにしてみた
Avatar for 74th(Atsushi Morimoto) 74th
1
640
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
Avatar for Yutaro Muta yutailang0119
0
120
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
Avatar for uutan1108 ohmori_yusuke
2
390
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
Avatar for Munetoshi Ishikawa munetoshi
0
170
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
Avatar for Agata Naomichi agatan
1
420
Hypervel - A Coroutine Framework for Laravel Artisans
Avatar for Albert Chen albertcht
1
120
生成AI時代のコンポーネントライブラリの作り方
Avatar for touyou touyou
1
210
10 Costly Database Performance Mistakes (And How To Fix Them)
Avatar for Andrew Atkinson andyatkinson
0
330
Google Agent Development Kit でLINE Botを作ってみた
Avatar for Kento.Yamada ymd65536
2
250
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
Avatar for uutan1108 ohmori_yusuke
1
120

Featured

See All Featured
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
690
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
36
2.8k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.3k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
55
5.7k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
Side Projects
Avatar for Sacha Greif sachag
455
42k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.4k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
58
9.4k
Done Done
Avatar for chrislema chrislema
184
16k

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. Β͜Β͓݁ࠗ͜ΊͰͱ͏