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

by shota akasaka

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

JNHJYͷ࿩Λ͢Δલʹ

Slide 5

Slide 5 text

౾஌ࣝɿಡΈํ

Slide 6

Slide 6 text

JNHJYʹ͍ͭͯ࿩͢લʹ

Slide 7

Slide 7 text

ҰٳͰͷը૾ͷ໾ׂ

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

ը૾ʹͩ͜ΘΓ͗ͨ݁͢Ռ

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

ը࣭74αΠζɾసૹྔ

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

ٕज़બఆ w JNHJY w 'BTUMZ*NBHF0QUJNJ[FS w $MPVEJOBSZ

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

JNHJYͱ͸

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

JNHJYͰͰ͖ͳ͍͜ͱ ͪΐͬͱෆศʹࢥͬͨ͜ͱ

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

JNHJYಋೖʹࢸΔ·Ͱʹۤ࿑ͨ͠఺

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

JNHJYಋೖͷޮՌ

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

·ͱΊ

Slide 38

Slide 38 text

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