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

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

Transcript

1. JNHJYಋೖͰը૾࠷దԽͱ
   αΠτεϐʔυվળ *LZV
   'SPOUFOE
   .FFUVQ
   ೥݄೔
   גࣜձࣾҰٳ
   ੺ࡔ
   ᠳଠ
2. ࣗݾ঺հ w ੺ࡔ
   ᠳଠʢ͔͔͋͞
   ͠ΐ͏ͨʣ
   w γεςϜຊ෦$50ࣨॴଐ
   w ΤϯδχΞͷ։ൃੜ࢈ੑ޲্
   w ॓ധαΠτͷ҆ఆՔಇͱ඼࣭޲্
   w αΠτεϐʔυɾύϑΥʔϚϯεվળ ࠓ೔ͷ͓࿩͸͜͜ͷऔΓ૊Έʹ͍ͭͯ
3. "HFOEB w ҰٳͰͷը૾ͷ໾ׂ
   w ը૾࠷దԽϓϩδΣΫτͷ͸͡·Γ
   w ٕज़બఆ
   w JNHJY
   w JNHJYͱ͸
   w ಛ௃ͱ͋Γ͕͍ͨػೳ
   w Ͱ͖ͳ͍͜ͱɾͪΐͬͱෆศʹࢥͬͨ͜ͱ
   w ಋೖͷޮՌ
   w ಋೖ·Ͱʹۤ࿑ͨ͠఺
   w ·ͱΊ
4. JNHJYͷ࿩Λ͢Δલʹ
5. ౾஌ࣝɿಡΈํ
6. JNHJYʹ͍ͭͯ࿩͢લʹ
7. ҰٳͰͷը૾ͷ໾ׂ
8. Ұٳʹͱͬͯը૾͸໋ w ϗςϧɾϨετϥϯͷཱ৔Ͱߟ͑ͯΈΔͱɾɾɾ
   w ߴڃײΛͪΌΜͱ఻͍͑ͨ
   w ϗςϧɾϨετϥϯʹΑͬͯ͸ϓϩͷΧϝϥϚϯ ʹࡱӨΛ͓ئ͍͍ͯ͠Δͱ͜Ζ΋͋Δ
   w ؾ߹͍ͷೖͬͨը૾͕ϏγόγૹΒΕͯ͘Δ
9. Ұٳʹͱͬͯը૾͸໋ w Ϣʔβͷཱ৔Ͱߟ͑ͯΈΔͱɾɾɾ
   w ը૾Λݟͯɺ͜ͷϗςϧɾཱྀؗʹധ·Ζ͏ͱ͍͏ ༧໿ͷܾΊखʹͳΔ
   w ϢʔβΠϯλϏϡʔͰ͸ը૾͕៉ྷͳͷ͕͍͍ͱ ݴͬͨ͝ҙݟΛ௖͘͜ͱ΋ଟʑ͋Δ
10. ϢʔβΠϯλϏϡʔͷҰ෦
11. ը૾ʹͩ͜ΘΓ͗ͨ݁͢Ռ
12. ը૾సૹྔ͕େ͖͘ͳΔ ର৅ը໘ɿIUUQTSFTUBVSBOUJLZVDPN .#ӽ͑ɺɺɺ
13. ը૾ʹؔ͢Δ՝୊ w ࠷దԽ͕Ͱ͖͍ͯͳ͔ͬͨ
    w ࣗࣾπʔϧͰ*NBHF
    .BHJDLΛ࢖ͬͯDSPQɾSFTJ[FΛ͍͕ͯͨ͠ ෆे෼
    w ݱঢ়ͷ··ɺߴը࣭ͳը૾Λͦͷ··഑৴͢ΔΘ͚ʹ͸͍͔ͳ͍
    w Ͱ΋ɺ୯७ʹը૾αΠζɾసૹྔΛԼ͛Ε͹͍͍ͱ͍͏Θ͚Ͱ΋ ͳ͍
    w ߴը࣭ΛอͭαΠζɾసૹྔΛݮΒ͍ͨ͠ ίϨ͕Ұ൪΍Γ͍ͨ͜ͱ ը࣭Λམͱ͢Θ͚ʹ΋͍͔ͳ͍ ஗͍··Ͱ͍͍Θ͚͕ͳ͍
14. ը࣭
    74
    αΠζɾసૹྔ
15. ը૾ʹؔ͢Δ՝୊ʢͦͷଞɺࡉ͔͍࿩ʣ w 4BBT΁ͷҠߦ
    w શࣾతʹΫϥ΢υԽ΁଩Λ੾͍ͬͯͨ
    w ΦϯϓϨ͔Β"84΁ͷશ໘Ҡߦ
    w ϦόʔεϓϩΩγ͸'BTUMZ΁
    w ը૾࠷దॲཧࣗମ΋ࣗࣾπʔϧΑΓɺ4BBT΁Ҡߦͯ͠೚ͤͨํ͕ϝϯςφϯείετ͕͔ ͔ΒͣʹࡁΉ͠ɺे෼ͳޮՌ͕ಘΒΕΔ
    w ίετ໘
    w ౰࣌ɺҰٳ͸ͱ͋Δ$%/αʔϏεΛ࢖͍ͬͯͨ
    w ͦͷ$%/αʔϏεʹίετ͕͔͔͍ͬͯͨ
    w ίετҎ্ͷϝϦοτΛڗडͰ͖͍ͯͳ͔ͬͨ
16. ͔ͯ͘͠ɺ
    ը૾࠷దԽϓϩδΣΫτ͕͸͡·ͬͨ
17. ٕज़બఆ w JNHJY
    w 'BTUMZ
    *NBHF
    0QUJNJ[FS
    w $MPVEJOBSZ
    
18. ٕज़બఆΛ͢Δ্Ͱओ؟ʹஔ͍ͨ͜ͱ  ߴը࣭อ࣋
     αΠζɾసૹྔ࡟ݮ
     ಋೖίετʢඅ༻ͱҠߦ೉қ౓ʣ
19. ֤αʔϏεൺֱ ߴը࣭อ࣋ αΠζɾసૹྔ࡟ݮ ಋೖ೉౓ ಋೖඅ༻ JNHJY ˕ ˕ ˕ ˓ 'BTUMZ
    *NBHF
    0QUJNJ[FS ˓ ˓ ˕ ˕ $MPVEJOBSZ ˕ ˕ ˚ ˓
20. ֤αʔϏεൺֱʢิ଍ʣ w ߴը࣭อ࣋αΠζɾసૹྔ࡟ݮ
    w JNHJYɾ$MPVEJOBSZ͕ྑͦ͞͏
    w ಋೖ೉౓
    w JNHJY͸ετϨʔδαʔϏε࿈ܞ͕͋ΔͷͰɺҠߦ͠қ͍
    w ετϨʔδαʔϏε࿈ܞ͸$MPVEJOBSZʹ΋͋ΔΒ͍͕͠ɺগ͠໘౗ʹݟ͑ͨ ͋·Γৄ͘͠ௐ΂͖Εͯ·ͤΜɺɺɺ JNHJYʹܾఆ
21. JNHJYͱ͸
22. ը૾࠷దԽ෇͖$%/Έ͍ͨͳ΋ͷ ը૾࠷దԽ͔Β഑৴·Ͱ
    &OE
    5P
    &OE
    Ͱఏڙͯ͘͠ΕΔ4BBT
23. JNHJYͷಛ௃ͱ͋Γ͕͍ͨػೳ
24. JNHJYͷ͋Γ͕͍ͨػೳ w ֦ுࢠࣗಈ൑ผ
    w ࣗಈѹॖઃఆ
    w ϩεϨεѹॖ
    w ը࣭ௐ੔
    w ετϨʔδαʔϏε࿈ܞ
    w "NB[PO
    4(PPHMF
    $MPVE
    4UPSBHF
25. JNHJYͷ͋Γ͕͍ͨػೳ w ֦ுࢠࣗಈ൑ผ
    w BVUPGPSNBUͰϒϥ΢βʹΑ֦ͬͯுࢠΛࣗಈ Ͱม׵ͯ͘͠ΕΔ
    w KQFHͰ΋$ISPNFͰ͸XFCQʹͯ͘͠ΕͨΓ
    w ࣗಈѹॖઃఆ
    w BVUPDPNQSFTTͰѹॖ΋ࣗಈͰ΍ͬͯ͘Ε·͢
26. JNHJYͷ͋Γ͕͍ͨػೳ w ϩεϨεѹॖ
    w ϩεϨεѹॖ͕Մೳͳը૾ʹରͯ͠ɺ MPTTMFTTͱ͢Ε͹ɺϩεϨε ѹॖՄೳ
    w MPTTMFTTͰ͸ͳ͍ͱ͍͏ͷ͕஍ຯʹ᠘
    w ը࣭ௐ੔
    w RdͰը࣭ௐ੔Մೳ
    w σϑΥϧτ R
    w ը࣭ௐ੔͍ͨ͠৔߹ʹ͋Γ͕͍ͨ
27. ετϨʔδαʔϏε࿈ܞ w ରԠ͍ͯ͠ΔετϨʔδαʔϏε͸ҎԼ
    w "NB[PO
    4
    w (PPHMF
    $MPVE
    4UPSBHF
    w JNHJYͷ؅ཧը໘͔Β4όέοτΛࢦఆ͢Δ͚ͩ
    w Ұٳͷ৔߹͸ɺը૾ϑΝΠϧ͸4Ͱ؅ཧ͍ͯ͠Δ
    w Ҡߦίετ͕௿͔ͬͨͷ͕େ͖͔ͬͨ
28. ετϨʔδαʔϏε࿈ܞ #FGPSF
29. ετϨʔδαʔϏε࿈ܞ "GUFS
30. JNHJYͰͰ͖ͳ͍͜ͱ
    ͪΐͬͱෆศʹࢥͬͨ͜ͱ
31. 3FWFSTF
    1SPYZͷ໾ׂΛ͍࣋ͬͯͳ͍ w υϝΠϯʹରͯ͠όοΫΤϯυͷࢦఆ͔͠Ͱ͖ͳ͍
    w 'BTUMZͷΑ͏ʹ7$-Ͱ৭ʑઃఆͰ͖Δͱ͍͏ػೳ͸࣋ͬ ͍ͯͳ͍
32. JNHJYಋೖʹࢸΔ·Ͱʹۤ࿑ͨ͠఺
33. ͦΜͳʹͳ͔ͬͨ w ٕज़໘
    w ͦΜͳʹͳ͔ͬͨ
    w ετϨʔδαʔϏε࿈ܞͷ͓͔͛΋͋Γɺ੾ସ͸༰қ
    w ٕज़໘Ҏ֎
    w αϙʔτͱͷӳޠͷ΍ΓͱΓ
    w αϙʔτखް͍͔Β͋Γ͕͔͕ͨͬͨɺɺɺ
    w ΍ͨΒͱి࿩ձٞΛ͕ͨ͠Δ
    w ಋೖඅ༻ݟੵ΋Γ
34. JNHJYಋೖͷޮՌ
35. #FGPSFdը૾సૹྔd ର৅ը໘ɿIUUQTSFTUBVSBOUJLZVDPN .#ӽ͑ͩͬͨͷ͕
36. "GUFSdը૾సૹྔd ର৅ը໘ɿIUUQTSFTUBVSBOUJLZVDPN ,#ҎԼ·Ͱ࡟ݮ
37. ·ͱΊ
38. ·ͱΊ w Ұٳʹͱͬͯը૾͸໋
    w ϗςϧɾϨετϥϯ͸ը૾ʹͩ͜ΘΔ
    w Ϣʔβʹͱͬͯ͸ը૾͕༧໿ͷϙΠϯτͱͳΔ
    w ҰٳͷαʔϏεͷಛੑΛߟ͑ͨ৔߹ɺߴը࣭ΛอͪͭͭɺసૹྔΛ཈͑Δʹ͸ JNHJY͕ద͍ͯͨ͠ʢଞͷαʔϏε͕ѱ͍ͱ͍͏࿩Ͱ͸ͳ͍ʣ
    w ϞμϯͳΠϯϑϥʹ৐͔ͬΔ͚ͩͰׂͱ؆୯ʹϕετϓϥΫςΟεΛ࣮ફͰ͖Δ
    w طଘͷ؀ڥͰνϡʔχϯάΛؤுͬͯ௖͍ͨॾࢯʹ͸ײँΛͭͭ͠ɺະདྷͷͨΊ ʹͲΜͲΜ৽γεςϜʹృΓସ͍͖͍͑ͯͨ
39. 5IBOLT
40. ิ଍
    -JHIUIPVTF
    Ҏલͷ1BHF4QFFE
    *OTIUTͷ#FGPSF"GUFS
41. #FGPSF
    d1BHF4QFFE
    *OTJHIUTd େ෦෼͕ը૾ͷࢦఠ
42. "GUFS
    d1BHF4QFFE
    *OTJHIUTd ը૾ͷࢦఠ͸ͳ͘ͳΓɺ
    είΞ΋େ෯ʹվળ