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

lighthouse metricsについて

lighthouse metricsについて

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

D76231a2114896dfcc7b79ac69558b79?s=128

Yosuke Furukawa
PRO

June 28, 2018
Tweet

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