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

imgix導入で画像最適化とサイトスピード改善/imageoptimize_sitespeed_up_ikyu_with_imgix

shota akasaka
December 12, 2018

 imgix導入で画像最適化とサイトスピード改善/imageoptimize_sitespeed_up_ikyu_with_imgix

2018/12/12 Ikyu Frontend Meetup 発表資料
imgix導入で画像最適化とサイトスピード改善した話です
https://ikyu.connpass.com/event/110577/

shota akasaka

December 12, 2018
Tweet

More Decks by shota akasaka

Other Decks in Technology

Transcript

  1. JNHJYಋೖͰը૾࠷దԽͱ
    αΠτεϐʔυվળ
    *LZV'SPOUFOE.FFUVQ೥݄೔
    גࣜձࣾҰٳ੺ࡔᠳଠ

    View full-size slide

  2. ࣗݾ঺հ
    w ੺ࡔᠳଠʢ͔͔͋͞͠ΐ͏ͨʣ
    w γεςϜຊ෦$50ࣨॴଐ
    w ΤϯδχΞͷ։ൃੜ࢈ੑ޲্
    w ॓ധαΠτͷ҆ఆՔಇͱ඼࣭޲্
    w αΠτεϐʔυɾύϑΥʔϚϯεվળ
    ࠓ೔ͷ͓࿩͸͜͜ͷऔΓ૊Έʹ͍ͭͯ

    View full-size slide

  3. "HFOEB
    w ҰٳͰͷը૾ͷ໾ׂ
    w ը૾࠷దԽϓϩδΣΫτͷ͸͡·Γ
    w ٕज़બఆ
    w JNHJY
    w JNHJYͱ͸
    w ಛ௃ͱ͋Γ͕͍ͨػೳ
    w Ͱ͖ͳ͍͜ͱɾͪΐͬͱෆศʹࢥͬͨ͜ͱ
    w ಋೖͷޮՌ
    w ಋೖ·Ͱʹۤ࿑ͨ͠఺
    w ·ͱΊ

    View full-size slide

  4. JNHJYͷ࿩Λ͢Δલʹ

    View full-size slide

  5. ౾஌ࣝɿಡΈํ

    View full-size slide

  6. JNHJYʹ͍ͭͯ࿩͢લʹ

    View full-size slide

  7. ҰٳͰͷը૾ͷ໾ׂ

    View full-size slide

  8. Ұٳʹͱͬͯը૾͸໋
    w ϗςϧɾϨετϥϯͷཱ৔Ͱߟ͑ͯΈΔͱɾɾɾ
    w ߴڃײΛͪΌΜͱ఻͍͑ͨ
    w ϗςϧɾϨετϥϯʹΑͬͯ͸ϓϩͷΧϝϥϚϯ
    ʹࡱӨΛ͓ئ͍͍ͯ͠Δͱ͜Ζ΋͋Δ
    w ؾ߹͍ͷೖͬͨը૾͕ϏγόγૹΒΕͯ͘Δ

    View full-size slide

  9. Ұٳʹͱͬͯը૾͸໋
    w Ϣʔβͷཱ৔Ͱߟ͑ͯΈΔͱɾɾɾ
    w ը૾Λݟͯɺ͜ͷϗςϧɾཱྀؗʹധ·Ζ͏ͱ͍͏
    ༧໿ͷܾΊखʹͳΔ
    w ϢʔβΠϯλϏϡʔͰ͸ը૾͕៉ྷͳͷ͕͍͍ͱ
    ݴͬͨ͝ҙݟΛ௖͘͜ͱ΋ଟʑ͋Δ

    View full-size slide

  10. ϢʔβΠϯλϏϡʔͷҰ෦

    View full-size slide

  11. ը૾ʹͩ͜ΘΓ͗ͨ݁͢Ռ

    View full-size slide

  12. ը૾సૹྔ͕େ͖͘ͳΔ
    ର৅ը໘ɿIUUQTSFTUBVSBOUJLZVDPN
    .#ӽ͑ɺɺɺ

    View full-size slide

  13. ը૾ʹؔ͢Δ՝୊
    w ࠷దԽ͕Ͱ͖͍ͯͳ͔ͬͨ
    w ࣗࣾπʔϧͰ*NBHF.BHJDLΛ࢖ͬͯDSPQɾSFTJ[FΛ͍͕ͯͨ͠
    ෆे෼
    w ݱঢ়ͷ··ɺߴը࣭ͳը૾Λͦͷ··഑৴͢ΔΘ͚ʹ͸͍͔ͳ͍
    w Ͱ΋ɺ୯७ʹը૾αΠζɾసૹྔΛԼ͛Ε͹͍͍ͱ͍͏Θ͚Ͱ΋
    ͳ͍
    w ߴը࣭ΛอͭαΠζɾసૹྔΛݮΒ͍ͨ͠
    ίϨ͕Ұ൪΍Γ͍ͨ͜ͱ
    ը࣭Λམͱ͢Θ͚ʹ΋͍͔ͳ͍
    ஗͍··Ͱ͍͍Θ͚͕ͳ͍

    View full-size slide

  14. ը࣭74αΠζɾసૹྔ

    View full-size slide

  15. ը૾ʹؔ͢Δ՝୊ʢͦͷଞɺࡉ͔͍࿩ʣ
    w 4BBT΁ͷҠߦ
    w શࣾతʹΫϥ΢υԽ΁଩Λ੾͍ͬͯͨ
    w ΦϯϓϨ͔Β"84΁ͷશ໘Ҡߦ
    w ϦόʔεϓϩΩγ͸'BTUMZ΁
    w ը૾࠷దॲཧࣗମ΋ࣗࣾπʔϧΑΓɺ4BBT΁Ҡߦͯ͠೚ͤͨํ͕ϝϯςφϯείετ͕͔
    ͔ΒͣʹࡁΉ͠ɺे෼ͳޮՌ͕ಘΒΕΔ
    w ίετ໘
    w ౰࣌ɺҰٳ͸ͱ͋Δ$%/αʔϏεΛ࢖͍ͬͯͨ
    w ͦͷ$%/αʔϏεʹίετ͕͔͔͍ͬͯͨ
    w ίετҎ্ͷϝϦοτΛڗडͰ͖͍ͯͳ͔ͬͨ

    View full-size slide

  16. ͔ͯ͘͠ɺ
    ը૾࠷దԽϓϩδΣΫτ͕͸͡·ͬͨ

    View full-size slide

  17. ٕज़બఆ
    w JNHJY
    w 'BTUMZ*NBHF0QUJNJ[FS
    w $MPVEJOBSZ

    View full-size slide

  18. ٕज़બఆΛ͢Δ্Ͱओ؟ʹஔ͍ͨ͜ͱ
    ߴը࣭อ࣋
    αΠζɾసૹྔ࡟ݮ
    ಋೖίετʢඅ༻ͱҠߦ೉қ౓ʣ

    View full-size slide

  19. ֤αʔϏεൺֱ
    ߴը࣭อ࣋ αΠζɾసૹྔ࡟ݮ ಋೖ೉౓ ಋೖඅ༻
    JNHJY ˕ ˕ ˕ ˓
    'BTUMZ
    *NBHF0QUJNJ[FS
    ˓ ˓ ˕ ˕
    $MPVEJOBSZ ˕ ˕ ˚ ˓

    View full-size slide

  20. ֤αʔϏεൺֱʢิ଍ʣ
    w ߴը࣭อ࣋αΠζɾసૹྔ࡟ݮ
    w JNHJYɾ$MPVEJOBSZ͕ྑͦ͞͏
    w ಋೖ೉౓
    w JNHJY͸ετϨʔδαʔϏε࿈ܞ͕͋ΔͷͰɺҠߦ͠қ͍
    w ετϨʔδαʔϏε࿈ܞ͸$MPVEJOBSZʹ΋͋ΔΒ͍͕͠ɺগ͠໘౗ʹݟ͑ͨ
    ͋·Γৄ͘͠ௐ΂͖Εͯ·ͤΜɺɺɺ
    JNHJYʹܾఆ

    View full-size slide

  21. ը૾࠷దԽ෇͖$%/Έ͍ͨͳ΋ͷ
    ը૾࠷దԽ͔Β഑৴·Ͱ&OE5P&OEͰఏڙͯ͘͠ΕΔ4BBT

    View full-size slide

  22. JNHJYͷಛ௃ͱ͋Γ͕͍ͨػೳ

    View full-size slide

  23. JNHJYͷ͋Γ͕͍ͨػೳ
    w ֦ுࢠࣗಈ൑ผ
    w ࣗಈѹॖઃఆ
    w ϩεϨεѹॖ
    w ը࣭ௐ੔
    w ετϨʔδαʔϏε࿈ܞ
    w "NB[PO4(PPHMF$MPVE4UPSBHF

    View full-size slide

  24. JNHJYͷ͋Γ͕͍ͨػೳ
    w ֦ுࢠࣗಈ൑ผ
    w BVUPGPSNBUͰϒϥ΢βʹΑ֦ͬͯுࢠΛࣗಈ
    Ͱม׵ͯ͘͠ΕΔ
    w KQFHͰ΋$ISPNFͰ͸XFCQʹͯ͘͠ΕͨΓ
    w ࣗಈѹॖઃఆ
    w BVUPDPNQSFTTͰѹॖ΋ࣗಈͰ΍ͬͯ͘Ε·͢

    View full-size slide

  25. JNHJYͷ͋Γ͕͍ͨػೳ
    w ϩεϨεѹॖ
    w ϩεϨεѹॖ͕Մೳͳը૾ʹରͯ͠ɺ MPTTMFTTͱ͢Ε͹ɺϩεϨε
    ѹॖՄೳ
    w MPTTMFTTͰ͸ͳ͍ͱ͍͏ͷ͕஍ຯʹ᠘
    w ը࣭ௐ੔
    w RdͰը࣭ௐ੔Մೳ
    w σϑΥϧτ R
    w ը࣭ௐ੔͍ͨ͠৔߹ʹ͋Γ͕͍ͨ

    View full-size slide

  26. ετϨʔδαʔϏε࿈ܞ
    w ରԠ͍ͯ͠ΔετϨʔδαʔϏε͸ҎԼ
    w "NB[PO4
    w (PPHMF$MPVE4UPSBHF
    w JNHJYͷ؅ཧը໘͔Β4όέοτΛࢦఆ͢Δ͚ͩ
    w Ұٳͷ৔߹͸ɺը૾ϑΝΠϧ͸4Ͱ؅ཧ͍ͯ͠Δ
    w Ҡߦίετ͕௿͔ͬͨͷ͕େ͖͔ͬͨ

    View full-size slide

  27. ετϨʔδαʔϏε࿈ܞ
    #FGPSF

    View full-size slide

  28. ετϨʔδαʔϏε࿈ܞ
    "GUFS

    View full-size slide

  29. JNHJYͰͰ͖ͳ͍͜ͱ
    ͪΐͬͱෆศʹࢥͬͨ͜ͱ

    View full-size slide

  30. 3FWFSTF1SPYZͷ໾ׂΛ͍࣋ͬͯͳ͍
    w υϝΠϯʹରͯ͠όοΫΤϯυͷࢦఆ͔͠Ͱ͖ͳ͍
    w 'BTUMZͷΑ͏ʹ7$-Ͱ৭ʑઃఆͰ͖Δͱ͍͏ػೳ͸࣋ͬ
    ͍ͯͳ͍

    View full-size slide

  31. JNHJYಋೖʹࢸΔ·Ͱʹۤ࿑ͨ͠఺

    View full-size slide

  32. ͦΜͳʹͳ͔ͬͨ
    w ٕज़໘
    w ͦΜͳʹͳ͔ͬͨ
    w ετϨʔδαʔϏε࿈ܞͷ͓͔͛΋͋Γɺ੾ସ͸༰қ
    w ٕज़໘Ҏ֎
    w αϙʔτͱͷӳޠͷ΍ΓͱΓ
    w αϙʔτखް͍͔Β͋Γ͕͔͕ͨͬͨɺɺɺ
    w ΍ͨΒͱి࿩ձٞΛ͕ͨ͠Δ
    w ಋೖඅ༻ݟੵ΋Γ

    View full-size slide

  33. JNHJYಋೖͷޮՌ

    View full-size slide

  34. #FGPSFdը૾సૹྔd
    ର৅ը໘ɿIUUQTSFTUBVSBOUJLZVDPN
    .#ӽ͑ͩͬͨͷ͕

    View full-size slide

  35. "GUFSdը૾సૹྔd
    ର৅ը໘ɿIUUQTSFTUBVSBOUJLZVDPN
    ,#ҎԼ·Ͱ࡟ݮ

    View full-size slide

  36. ·ͱΊ
    w Ұٳʹͱͬͯը૾͸໋
    w ϗςϧɾϨετϥϯ͸ը૾ʹͩ͜ΘΔ
    w Ϣʔβʹͱͬͯ͸ը૾͕༧໿ͷϙΠϯτͱͳΔ
    w ҰٳͷαʔϏεͷಛੑΛߟ͑ͨ৔߹ɺߴը࣭ΛอͪͭͭɺసૹྔΛ཈͑Δʹ͸
    JNHJY͕ద͍ͯͨ͠ʢଞͷαʔϏε͕ѱ͍ͱ͍͏࿩Ͱ͸ͳ͍ʣ
    w ϞμϯͳΠϯϑϥʹ৐͔ͬΔ͚ͩͰׂͱ؆୯ʹϕετϓϥΫςΟεΛ࣮ફͰ͖Δ
    w طଘͷ؀ڥͰνϡʔχϯάΛؤுͬͯ௖͍ͨॾࢯʹ͸ײँΛͭͭ͠ɺະདྷͷͨΊ
    ʹͲΜͲΜ৽γεςϜʹృΓସ͍͖͍͑ͯͨ

    View full-size slide

  37. ิ଍
    -JHIUIPVTFҎલͷ1BHF4QFFE*OTIUTͷ#FGPSF"GUFS

    View full-size slide

  38. #FGPSFd1BHF4QFFE*OTJHIUTd
    େ෦෼͕ը૾ͷࢦఠ

    View full-size slide

  39. "GUFSd1BHF4QFFE*OTJHIUTd
    ը૾ͷࢦఠ͸ͳ͘ͳΓɺ
    είΞ΋େ෯ʹվળ

    View full-size slide