Pro Yearly is on sale from $80 to $50! »

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

5409c2e8e1b53214f2ccfead026641ec?s=47 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/

5409c2e8e1b53214f2ccfead026641ec?s=128

shota akasaka

December 12, 2018
Tweet

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*NBHF0QUJNJ[FS w $MPVEJOBSZ

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

  19. ֤αʔϏεൺֱ ߴը࣭อ࣋ αΠζɾసૹྔ࡟ݮ ಋೖ೉౓ ಋೖඅ༻ JNHJY ˕ ˕ ˕ ˓

    'BTUMZ *NBHF0QUJNJ[FS ˓ ˓ ˕ ˕ $MPVEJOBSZ ˕ ˕ ˚ ˓
  20. ֤αʔϏεൺֱʢิ଍ʣ w ߴը࣭อ࣋αΠζɾసૹྔ࡟ݮ w JNHJYɾ$MPVEJOBSZ͕ྑͦ͞͏ w ಋೖ೉౓ w JNHJY͸ετϨʔδαʔϏε࿈ܞ͕͋ΔͷͰɺҠߦ͠қ͍ w

    ετϨʔδαʔϏε࿈ܞ͸$MPVEJOBSZʹ΋͋ΔΒ͍͕͠ɺগ͠໘౗ʹݟ͑ͨ ͋·Γৄ͘͠ௐ΂͖Εͯ·ͤΜɺɺɺ JNHJYʹܾఆ
  21. JNHJYͱ͸

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

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

  24. JNHJYͷ͋Γ͕͍ͨػೳ w ֦ுࢠࣗಈ൑ผ w ࣗಈѹॖઃఆ w ϩεϨεѹॖ w ը࣭ௐ੔ w

    ετϨʔδαʔϏε࿈ܞ w "NB[PO4(PPHMF$MPVE4UPSBHF
  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[PO4 w (PPHMF$MPVE4UPSBHF w JNHJYͷ؅ཧը໘͔Β4όέοτΛࢦఆ͢Δ͚ͩ w

    Ұٳͷ৔߹͸ɺը૾ϑΝΠϧ͸4Ͱ؅ཧ͍ͯ͠Δ w Ҡߦίετ͕௿͔ͬͨͷ͕େ͖͔ͬͨ
  28. ετϨʔδαʔϏε࿈ܞ #FGPSF

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

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

  31. 3FWFSTF1SPYZͷ໾ׂΛ͍࣋ͬͯͳ͍ 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. #FGPSFd1BHF4QFFE*OTJHIUTd େ෦෼͕ը૾ͷࢦఠ

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