パフォーマンス向上のための画像最適化

社内の勉強会資料です。弊社のWebサイトのパフォーマンス向上のために行った施策をまとめました。

Transcript

1. ύϑΥʔϚϯε޲্ͷ ͨΊͷը૾࠷దԽ ʙ
   ϢʔβʔʹΑΓྑ͍69Λఏڙ͢ΔͨΊʹ
   ʙ $SFWPגࣜձࣾ
   ϓϩσϡʔαʔ
   தଜߊ೭
2. ࢀߟࢿྉ
3. औΓ૊ΜͩܦҢ w ϦχϡʔΞϧͨ͠ϖʔδ͕ը૾Λଟ༻͍ͯͯ͠ ύϑΥʔϚϯεྑ͘ͳ͔ͬͨ
   w ը໘ඳը͕஗͍ͱϢʔβʔ཭୤ͪ͠Ό͏ 
   
   w αΠτධՁྑ͘ͳ͍ͱ4&0ॱҐམͪΔ
4. औ૊Έલ 1BHF4QFFE
   *OTJHIUT
   IUUQT EFWFMPQFSTHPPHMFDPNTQFFEQBHFTQFFEJOTJHIUT
   w 1$൛
   ̏
   
   
   ఺
   w ϞόΠϧ൛
   
   
   
   ఺
5. औ૊Έલ 8FCQBHFTU
   IUUQXXXXFCQBHFUFTUPSH
6. Ξʔϝϯʜ0.(
7. ը૾ͷσϝϦοτ w ϑΝΠϧαΠζ͕େ͖͍
   w ϦΫΤετ͕૿͑Δ
8. ը૾ͷσϝϦοτ w ϦΫΤετ͕૿͑Δ ը૾ͷຕ਺෼ɺαʔόʔଆʹϦΫΤετ͢Δ⇢
9. w ϑΝΠϧαΠζ͕େ͖͍
   ⇢
   ը૾ͷ࠷దԽ
   w ϦΫΤετ͕૿͑Δ
   ⇢
   $44εϓϥΠτɺ47(ͷ׆༻
   ɹ
   ը૾ͷ$44ԽͰϦΫΤετΛݮΒ͢ औΓ͏ΔରԠࡦ
10. ը૾ͷ࠷దԽ
11. ը૾͝ͱʹద੾ͳαΠζɺѹॖํࣜɺϑΝΠϧܗࣜɺը࣭Λ બఆ͢Δ
    ͨͩ͠ɺ$SFWP͸ಈըͷߴ඼࣭͕ചΓɻ࡞඼ͷѱ͘ݟ͑ͳ͍ Α͏ஶ͍͠ը࣭ͷྼԽʹ͸஫ҙ͢ΔɻσβΠϯͱͷόϥϯε ௒େࣄɻ ը૾ͷௐ੔ 1/(
     º 
    ը࣭ྼԽͳ͠
    ,# +1&(
     º 
    ը࣭ˋ
    ,#
    
12. *NBHF0QUJN
    w ՄٯѹॖํࣜͰˋ ඼࣭ͷ··ద੾ͳѹॖ ํࣜΛબΜͰѹॖ
    w ඇՄٯѹॖํࣜͰը࣭ Λௐ੔͢Δ͜ͱ΋Ͱ͖ Δ Ͳ͏΍ͬͯ
13. ϕʔεϥΠϯ+1&(Ͱ͸ͳ͘ɺϓϩάϨογϒ+1&(ͷ׆༻ Λݕ౼͢Δ
    Ϣʔβʔͷମײ଎౓޲্ʹܨ͕Δ ϓϩάϨογϒ+1&(ͷ׆༻ ࠷ॳʹ΅Μ΍Γͱશମ૾͕ݱΕɺ
    ࣍ୈʹ઱໌Խ͍ͯ͘͠
    ϓϩάϨογϒ+1&(
    ্͔ΒঃʑʹಡΈࠐΜͰදࣔ͢Δ
    Ұൠతͳํࣜ ϕʔεϥΠϯ+1&(
14. w ϓϩάϨογϒ+1&(͸Ͳͷϒϥ΢βͰ΋දࣔ͞ΕΔ͕ɺ ϓϩάϨογϒදࣔʹରԠ͍ͯ͠ͳ͍ϒϥ΢βͰ͸μ΢ϯ ϩʔυΛ׬શʹऴ͑ͨޙʹදࣔ͞ΕΔͨΊɺରԠ͍ͯ͠Δ ϒϥ΢βΑΓ΋Ώͬ͘Γͱදࣔ͞ΕΔ
    w ϓϩάϨογϒ+1&(ΛಡΈࠐΉʹ͸ͦΕͧΕͷը૾ʹର ͠ɺϕʔεϥΠϯ+1&(ͰαΠτ಺ͷશը૾Λϖʔδʹදࣔ ͢Δͷͱಉ౳ͷ$16ύϫʔ͕ඞཁɻϞόΠϧͰͷද͕ࣔݒ ೦͞ΕΔɻ ϓϩάϨογϒ+1&(ͷ஫ҙ఺
15. ϦΫΤετͷ࡟ݮ
16. ෳ਺ͷը૾Λͭͷը૾ʹͯ͠ɺϦΫΤετΛճʹ͠ɺ $44Ͱը૾ΛεϥΠεͯ͠ɺॲཧΛهࡌ͢Δɻ
    ͨͩ͠ɺը૾ͷߋ৽͢Δͱ$44΋ߋ৽͠ͳ͖Ό͍͚ͳ͍ $44εϓϥΠτͷ׆༻
17. $44ͰදݱͰ͖Δ΋ͷ͸$44Ͱॻ͘
    ը૾Λ࢖Θͳ͍ͨΊɺϦΫΤετ͕ൃੜ͠ͳ͍͏͑ɺը૾ ΑΓܰ͘ͳΔͨΊɺͳΔ΂࣮͘ࢪͨ͠΄͏͕ྑ͍ɻ ը૾
    ⇢
    $44Խ
18. ൪֎ฤ
19. ⒎NQFHͰϏοτϨʔτΛௐ੔͠ɺ$44Ͱഎܠʹࠇಁա͠ ͨບͰ෴͍ը࣭ͷྼԽΛ͝·͔͍ͯ͠Δ
    ಈը͸ը࣭Λམͱͯ͠഑৴ .1
     º 
    
    LCT
    .# .1
     º 
    LCT
    .#
    
20. ը૾ͷ࠷దԽͷΈ
    औ૊Έޙ 1BHF4QFFE
    *OTJHIUT
    IUUQT EFWFMPQFSTHPPHMFDPNTQFFEQBHFTQFFEJOTJHIUT
    w 1$൛
    ̏
    
    
    ఺ɹ⇢ɹ఺
    w ϞόΠϧ൛
    
    
    
    ఺ɹ⇢ɹ఺
21. 8FCQBHFTU
    IUUQXXXXFCQBHFUFTUPSH ը૾ͷ࠷దԽͷΈ
    औ૊Έޙ
22. ࠓޙͷऔ૊Έ w ϕʔεϥΠϯ+1&(
    ⇢
    ϓϩάϨογϒ+1&(
    w ը૾
    ⇢
    $44Խ
    w ద੾ͳΩϟογϡར༻
    w +BWB4DSJQUͷಡΈࠐΈॱ൪ͷௐ੔
    w ಈըΞοϓϩʔυ࣌ʹαϜωΠϧࣗಈϦαΠζˍѹॖ
    w ಈը͸.1
    ⇢
    8FC.
23. 8FCαΠτʹΑΓྑ͍69Λ