ImageFluxを利用した画像配信の最適化 / ImageFlux meetup 201801

Transcript

1. Tatsuhiko Kubo@cubicdaiya
   ImageFlux meetup #01 2018/01/25
   ImageFluxΛར༻ͨ͠
   ը૾഑৴ͷ࠷దԽ
   

   View Slide

2. @cubicdaiya / Tatsuhiko Kubo
   Principal Engineer, SRE @ Mercari, Inc.
   

   View Slide

3. View Slide

4. • ϝϧΧϦʹ͓͚Δը૾഑৴
   • ImageFlux࠾༻ͷഎܠ
   • ImageFluxʹΑΔը૾ͷಈతϦαΠζͱWebPԽ
   • Appendix
   • github.com/mercari/imageflux-cli
   Agenda
   

   View Slide

5. • ϝϧΧϦͷσʔλ௨৴ྔͷେ෦෼Λ઎ΊΔͷ͸ը૾
   • ঎඼ը૾
   • ϓϩϑΟʔϧը૾
   • όφʔը૾
   • etc…
   ϝϧΧϦʹ͓͚Δը૾഑৴
   

   View Slide

6. • ը૾ͷྔ͕ͱʹ͔͘ଟ͍
   • ຖ೔ը૾σʔλ͕ඦສݸ୯ҐͰ૿͑Δ
   • ଟ͘ͷػೳͰը૾͕ओ໾
   • λΠϜϥΠϯɺݕࡧ
   • ͍͍ͶʂҰཡɺӾཡཤྺ
   • etc…
   ϝϧΧϦʹ͓͚Δը૾഑৴
   

   View Slide

7. • CDN
   • AkamaiɺImageFlux
   • Origin
   • Amazon S3
   ϝϧΧϦʹ͓͚Δը૾഑৴
   

   View Slide

8. ੲͷߏ੒
   LLC or its affiliates. All rights reserved.
   Multimedia Corporate
   data center
   Traditional
   server
   Mobile Client
   Example:
   IAM Add-on
   LLC or its affiliates. All rights reserved.
   Multimedia Corporate
   data center
   Traditional
   server
   Mobile Client
   Example:
   IAM Add-on
   Requester
   Workers
   Multimedia Corporate
   data center
   Traditional
   server
   Mobile Client
   Requester
   Workers
   Multimedia Corporate
   data center
   Traditional
   server
   Mobile Client
   Requester
   Workers
   Multimedia Corporate
   data center
   Traditional
   server
   Mobile Client
   Example:
   IAM Add-on
   Requester
   Workers
   

   View Slide

9. ࠓͷߏ੒
   LLC or its affiliates. All rights reserved.
   Multimedia Corporate
   data center
   Traditional
   server
   Mobile Client
   Example:
   IAM Add-on
   LLC or its affiliates. All rights reserved.
   Multimedia Corporate
   data center
   Traditional
   server
   Mobile Client
   Example:
   IAM Add-on
   Requester
   Workers
   Multimedia Corporate
   data center
   Traditional
   server
   Mobile Client
   Requester
   Workers
   Multimedia Corporate
   data center
   Traditional
   server
   Mobile Client
   Requester
   Workers
   Multimedia Corporate
   data center
   Traditional
   server
   Mobile Client
   Example:
   IAM Add-on
   Requester
   Workers
   

   View Slide

10. • ೔ʑ૿͑ଓ͚ΔCDNͷը૾഑৴σʔλྔ
    • ഑৴ίετͷ૿Ճ
    • ΞϓϦͷσʔλ௨৴ྔͷ૿Ճ
    • ΞϓϦͷಈ࡞଎౓΍UXʹӨڹ
    • UI΍σβΠϯมߋʹ൐͏࠷దͳը૾αΠζͷมԽ
    • σʔλ਺͕ଟ͍ͷͰෳ਺ύλʔϯͷը૾Λࣄલʹ४උ͢
    Δͷ͸ࠔ೉
    ImageFlux࠾༻ͷഎܠ
    

    View Slide

11. ੲͷϝϧΧϦ
    

    View Slide

12. ࠓͷϝϧΧϦ
    

    View Slide

13. • ௕ظؒͷA/BςετΛܦͯ੾Γସ͑
    • Ұ౓ʹදࣔͰ͖Δը૾ͷ਺͕૿͑Δ
    • CDNͷτϥϑΟοΫ͕1.5ഒʹͳͬͨ
    • ίετ͕(ry
    • ΞϓϦͷ௨৴ྔ΋૿Ճ
    • ΪΨ͕ݮΔ
    λΠϜϥΠϯ͕2ྻ͔Β3ྻ΁
    

    View Slide

14. • σʔλͷ௨৴ྔΛ཈͑Δ޻෉͕ඞཁ
    • ௿଎ͳωοτϫʔΫͰ΋ετϨεͳ͘ಈ࡞
    • ߴ଎ͳಈ࡞͕ඞཁෆՄܽ
    • ͲΜͳʹૉ੖Β͍͠UIͰ΋ಈ࡞͕஗ա͗Δͷ͸
    UXͱͯ͠ବ໨
    ΞϓϦ͕շదʹ࢖͑ΔΑ͏ʹͳΔͨΊʹ͸
    

    View Slide

15. • ഑৴ը૾ͷಈతͳϦαΠζ ɺ࠷దԽʹΑΔ
    • ഑৴ը૾σʔλྔͷ࡟ݮ
    • ΞϓϦͷσʔλ௨৴ྔͷ࡟ݮ
    • UI΍σβΠϯʹ߹ͬͨ࠷దͳը૾αΠζͷ࠾༻
    ImageFluxͷ࠾༻Ͱظ଴Ͱ͖Δ͜ͱ
    

    View Slide

16. 2ྻλΠϜϥΠϯͱ3ྻλΠϜϥΠϯ
    

    View Slide

17. • ϝϧΧϦͷλΠϜϥΠϯ͸ݩʑ2ྻͩͬͨ
    • αϜωΠϧͷαΠζ΋ͦΕʹ߹Θͤͯઃܭ͞Εͨ
    • 3ྻԽʹΑΓΞϓϦͷσʔλ௨৴ྔ͕૿Ճ
    • σʔλ௨৴ྔͷ࡟ݮ͕ΑΓٸ຿ͱͳΔ
    • 3ྻ޲͚ʹαϜωΠϧΛಈతϦαΠζ & WebPಋೖ
    • ௨৴ྔͱը࣭ͷόϥϯεΛߟྀͯ͠൑அ
    2ྻλΠϜϥΠϯͱ3ྻλΠϜϥΠϯ
    

    View Slide

18. 296x296
    15.1KB
    240x240
    12.5KB
    w=240
    2ྻ༻
    3ྻ༻
    ImageFluxͰϦαΠζ
    

    View Slide

19. 296x296
    15.1KB
    240x240
    7.2KB
    w=240,f=webp
    2ྻ༻
    3ྻ༻
    ImageFluxͰϦαΠζ & WebPʹม׵
    

    View Slide

20. • ॖখϦαΠζ
    • 10~20%ݮ
    • ॖখϦαΠζ & WebPԽ
    • 40~50%ݮ
    1αϜωΠϧ͋ͨΓͷαΠζ࡟ݮޮՌ
    λΠϜϥΠϯ΍ݕࡧ݁ՌͰ͸
    େྔʹදࣔ͞ΕΔͷͰޮՌେ
    

    View Slide

21. • iOS
    • ΞϓϦଆͰରԠ͕ඞཁ
    • Android
    • OSωΠςΟϒͰରԠʢ4.0+ʣ
    εϚϗΞϓϦʹWebPը૾Λ഑৴͢Δʹ͸
    

    View Slide

22. • ը૾σʔλͷ௨৴ྔ͕30%ݮগ
    • ϖλ͕ݮΓ·ͨ͠
    • CDNͷΩϟογϡώοτ཰͕एׯ௿Լ
    • WebPରԠ୺຤ͱඇରԠ୺຤޲͚ʹΩϟογϡ͕
    ผʑʹͳΔͨΊ
    ࣮ࡍʹImageFluxͰը૾ͷಈతϦαΠζͱ
    WebPม׵Λಋೖͯ͠Ͳ͏͔ͩͬͨʁ
    

    View Slide

23. AppendixʙImageFlux API Clientʙ
    

    View Slide

24. • ImageFluxͷAPIΫϥΠΞϯτ
    • github.com/mercari/imageflux-cli
    imageflux-cli
    $ imageflux-cli
    Usage:
    imageflux-cli cache.lookup -k $url # lookup cache by key
    imageflux-cli cache.delete -k $url # delete cache by key
    GoͰॻ͖·ͨ͠
    

    View Slide

25. • ImageFluxΛಋೖͨ͜͠ͱͰɺ
    • ը૾σʔλͷ௨৴ྔΛ30%࡟ݮ
    • ΞϓϦͷUI΍σβΠϯͷมԽʹॊೈʹରԠͰ͖ΔΑ͏ʹ
    ͳͬͨ
    • εϚʔτϑΥϯΞϓϦ͕շదʹ࢖͑ΔΑ͏ʹͳΔͨΊʹ͸
    • σʔλͷ௨৴ྔΛ཈͑Δ޻෉͕ඞཁ
    • ߴ଎ͳಈ࡞͕ඞཁෆՄܽ
    ·ͱΊ
    

    View Slide