lighthouse metricsについて - Speaker Deck

Tweet

Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Twitter: @yosuke_furukawa Github: yosuke-furukawa

Slide 3

Slide 3 text

͜Μʹͪ͸FMPܳਓͰ͢

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

͋Εɺ೉͘͠ͳ͍ʁ

Slide 6

Slide 6 text

ௐ΂ͨ

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

TTI

Slide 12

Slide 12 text

ͭ·Γ

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

ͦΕʹҙຯ͸ͳ͍͚Ͳɻɻɻ

Slide 16

Slide 16 text

100఺໨ࢦͦ͏ͳ

Slide 17

Slide 17 text

Β͜Β͓݁ࠗ͜ΊͰͱ͏