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

Lighthouseを用いたサイト改善 / Website Improvements Using Lighthouse

Lighthouseを用いたサイト改善 / Website Improvements Using Lighthouse

Start Today Technologies Meetup #4で発表したスライドです。

AmatsukiKu

July 12, 2018
Tweet

More Decks by AmatsukiKu

Other Decks in Programming

Transcript

  1. © Start Today Technologies Inc.
    -JHIUIPVTFΛ༻͍ͨαΠτվળ
    4UBSU5PEBZ5FDIOPMPHJFT.FFUVQ
    ৽ࣄۀ૑଄෦ϑϩϯτΤϯυνʔϜ ݖक ݈࢚

    View full-size slide

  2. © Start Today Technologies Inc.
    ࣗݾ঺հ
    • ݖक ݈࢚ʢ͝Μͷ͔Έ ͚Μ͡ʣ
    • ϑϩϯτΤϯυΤϯδχΞ
    • !"NBUTVLJ,V
    *20/ͷ1$ɺεϚϗαΠτΛத৺ʹϑϩϯτΤϯυΛ୲౰

    View full-size slide

  3. © Start Today Technologies Inc.
    ࠓ೔ͷςʔϚͱྲྀΕ
    ʮ-JHIUIPVTFΛ࣮ࡍʹ࢖ͬͯΈͯɺಘͨ஌ݟʹ͍ͭͯͷ঺հʯ
    • -JHIUIPVTFͱ͸
    • -JHIUIPVTFΛ࢖ͬͨվળྫ
    • -JHIUIPVTFΛར༻͢Δ্Ͱͷ஫ҙ఺

    View full-size slide

  4. © Start Today Technologies Inc.
    -JHIUIPVTFͱ͸
    8FCϖʔδΛͭͷ؍఺Ͱ਺஋Խ͠ɺվળ߲໨Λใࠂͯ͘͠ΕΔπʔϧ
    • (PPHMF$ISPNFͷ֦ுػೳ
    • $ISPNF%FW5PPMTʢ$ISPNF͔Β౷߹ʣ
    • /PEF$-*

    View full-size slide

  5. © Start Today Technologies Inc.
    վળʹऔΓ૊Μͩϖʔδ
    ΞΠςϜৄࡉ ίʔσৄࡉ

    View full-size slide

  6. © Start Today Technologies Inc.
    վળલͷείΞ
    ΞΠςϜৄࡉ
    ίʔσৄࡉ

    View full-size slide

  7. © Start Today Technologies Inc.
    վળલͷείΞʢ޿ࠂίʔυແ͠ʣ
    ΞΠςϜৄࡉ
    ίʔσৄࡉ

    View full-size slide

  8. © Start Today Technologies Inc.
    1FSGPSNBODFͷධՁج४
    • ओཁͳίϯςϯπ͕εΫϦʔϯ্ʹදࣔ͞ΕΔ·Ͱͷ࣌ؒ
    • ϖʔδ͕࠷௿ݶΠϯλϥΫςΟϒʹͳΔ·Ͱͷ࣌ؒ CFUB

    • ϖʔδ͕׬શʹΠϯλϥΫςΟϒʹͳΔ·Ͱͷ࣌ؒ CFUB

    • ϖʔδͷίϯςϯπ͕໨ʹݟ͑Δঢ়ଶʹͳΔ·Ͱͷ࣌ؒΛείΞԽ
    ͨ͠΋ͷ 4QFFE*OEFY

    • ೖྗ࣌ͷϨεϙϯεͷ଎͞

    View full-size slide

  9. © Start Today Technologies Inc.
    4QFFE*OEFYͱ͸
    ʮ4QFFE*OEFY 8FC1BHFUFTU %PDVNFOUBUJPOʯ
    IUUQTTJUFTHPPHMFDPNBXFCQBHFUFTUPSHEPDTVTJOHXFCQBHFUFTUNFUSJDTTQFFEJOEFY ΑΓ

    View full-size slide

  10. © Start Today Technologies Inc.
    ޿ࠂͷίʔυͷ໰୊఺
    • TDSJQUλάͷૠೖҐஔ
    TDSJQUλάΛධՁ͢ΔͨΊʹϨϯμϦϯά͕ࢭ·ͬͯ͠·͏
    • EPDVNFOUXSJUF
    Λ࢖ͬͨεΫϦϓτͷಈతಡΈࠐΈ
    • ωοτϫʔΫϥ΢ϯυτϦοϓ͕ൃੜ͠ɺಡΈࠐΈʹ͔͔Δ͕࣌ؒ૿͑Δ
    • ಡΈࠐΈݩͷTDSJQUλάʹBTZODଐੑΛ෇༩Ͱ͖ͳ͍

    View full-size slide

  11. © Start Today Technologies Inc.
    ޿ࠂͷίʔυͷվળ
    • TDSJQUλάͷૠೖҐஔ
    (PPHMF"ETFOTFͷΑ͏ʹඇಉظίʔυΛఏڙ͍ͯ͠Δ΋ͷʹ͍ͭͯ͸ɺͦͪΒ
    Λར༻͠ɺTDSJQUλάͷૠೖҐஔΛޙΖʹ͢Δ
    • EPDVNFOUXSJUF
    Λ࢖ͬͨεΫϦϓτͷಈతಡΈࠐΈ
    ޿ࠂΛؚΜͩίϯςϯπશମͷಡΈࠐΈΛ୹͘͢Δ͜ͱ͸Ͱ͖ͳ͍͕ɺJGSBNFΛ
    ར༻ͨ͠ϋοΫΛ࢖͏͜ͱͰɺඇಉظಡΈࠐΈΛՄೳʹ͠ɺओཁίϯςϯπͷಡ
    ΈࠐΈΛ๦͛ͳ͍ํ๏͕͋Δ

    View full-size slide

  12. © Start Today Technologies Inc.
    ޿ࠂίʔυͷվળޙͷείΞ
    ΞΠςϜৄࡉ
    ίʔσৄࡉ

    View full-size slide

  13. © Start Today Technologies Inc.
    ޿ࠂίʔυͷվળʹΑΔओཁίϯςϯπಡΈࠐΈ࣌ؒͷมԽ
    ΞΠςϜৄࡉ
    ίʔσৄࡉ




    View full-size slide

  14. © Start Today Technologies Inc.
    -JHIUIPVTFΛར༻͢Δ্Ͱͷ஫ҙ఺
    • 1FSGPSNBODFͷείΞ͸҆ఆ͠ͳ͍
    αʔόʔଆ΍޿ࠂ഑৴ଆ͔ΒͷϨεϙϯε଎౓ʹґଘ͢ΔͨΊ
    • ਪ঑͞ΕΔ-B[ZMPBEΛೖΕͯ΋ඞͣ͠΋είΞ্͕͕Δ༁Ͱ͸ͳ͍
    ΞΠςϜৄࡉͷϑΝʔετϏϡʔʹ͸ࣗಈૹΓͷΧϧʔηϧ͕͋ΓɺΧϧʔηϧ
    ͷޙΖͷίϯςϯπ͸-B[ZMPBEΛਪ঑͞ΕΔ͕ɺ࣮ࡍʹೖΕΔͱ4QFFE*OEFY͕
    େ্͖͕ͬͯ͘͠·͏
    • +40/Ͱอଘͨ݁͠Ռ͸$ISPNF%FW5PPMT্ͰݟΕͳ͍
    IUUQTHPPHMFDISPNFHJUIVCJPMJHIUIPVTFWJFXFSY

    View full-size slide

  15. © Start Today Technologies Inc.
    ·ͱΊ
    • -JHIUIPVTF͸ݱঢ়Ͱ΋े෼ࢀߟʹͳΔπʔϧ
    • -JHIUIPVTF͕ग़ྗ͢Δ1FSGPSNBODFͷείΞʹҰتҰ༕͠ͳ͍
    • -JHIUIPVTF͕ఏҊ͢ΔυΩϡϝϯτΛཧղ͢Δ͜ͱΛଵΒͳ͍

    View full-size slide