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

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

No content

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

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

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

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

ੲͷߏ੒ 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

ࠓͷߏ੒ 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

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

ੲͷϝϧΧϦ

ࠓͷϝϧΧϦ

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

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

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

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

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

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

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

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

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

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

AppendixʙImageFlux API Clientʙ

• 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Ͱॻ͖·ͨ͠

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