lighthouse metricsについて

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

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