리디스토리 성능 개선 이야기

by RIDI

Slide 1

Slide 1 text

ղ ࢤੌ੉ۄࢲ द੘ ػ ੗ӝࣗѐ 1 ৈ੗ ࢎۈ ѐߊ੗ ୭ইো ([email protected]) ೐ۿ౟ূ٘ ѐߊ੗ ܻ٣झషܻ ѐߊ੗ ؋૕ೞҊ र਷ যܲ੉ ѱਵܴ ഐ੹੸

Slide 2

Slide 2 text

ࢿמ ѐࢶ ੉ঠӝ ୭ইো | झషܻѐߊ౱ | [email protected]

Slide 3

Slide 3 text

ࢎѤ੄ द੘ TOC ੄ޙ੄ ઁࠁ 03

Slide 4

Slide 4 text

ѐߊ੗ say.. ੉ѱ ࢸݺೞ੗ݶ ӟؘ, 04 ֎… ܻ٣झషܻ জ਷ ਢজਵ۽ ٜ݅যઉ੓ਵݴ, Ӓ ղࠗ ח ױੌ ಕ੉૑ গ೒ܻா੉࣌(SPA)ਵ۽ ੉ܖযઉ੓Ҋ, ֎੉౭࠳জਵ۽ ٜ݅য૓ জী ࠺೧ ݽ߄ੌ ղ੢ ࠳ۄ਋ ੷ ࢿמী ௼ѱ ৔ೱਸ ߉Ҋ੓ਵݴ, ೩٘ಪ੉ য়ېغݶ য় ېؼ ࣻ۾ וܾ ࣻ ੓णפ׮. ౠ൤, ઁઑࢎ੄ ӝࠄ ղ੢ ࠳ ۄ਋੷о ބद ࢿמ੉ જ૑ ޅೠ ҃਋, ੹୓੸ਵ۽ ו۰૕ ࣻ ੓णפ׮. ౠ൤, SPA੄ ౠࢿ࢚ ୡӝ ۽٬ ೡٸ, ചݶ ҳࢿ Contentsо ݆਷ ҃਋, ࢿמ੉ જ૑ ޅ… Ӓۧ׮ݶ, ਤ੄ ޙઁ੼ٜਸ ೧Ѿೡ ࣽ হਸө? ઱੺ ઱੺ ઱੺ ઱੺ ઱੺

Slide 5

Slide 5 text

1ର ѐࢶ (2017.03) 05 Redux ੸ਊ

Slide 6

Slide 6 text

Ӕؘب.. ޙઁח ݽ׮?! ▸ Single Page Application (SPA) ▸ Too many static ﬁles ▸ a huge JS, CSS, Fonts, Images ▸ too late Ajax Call (Some API..) ▸ Android Mobile Browser Performance ▸ Android KitKat.. 06 ޙઁ ੋधೞӝ

Slide 7

Slide 7 text

ա ੗नਸ ঌ੗ ௼܁ ѐߊ੗ بҳ۽ ࠙ࢳೞӝ 07 Load/Parse HTML, JS 600ms Auth, Home ApiCall Render 500ms Contents ApiCall Image, Animation 800ms

Slide 8

Slide 8 text

ѐࢶೞӝ ୐ ചݶ ࡅܰѱ ࠁৈ઱ӝ 1 08 ੷൞ കؘ੉ఠ۽ ݈ೡ Ѫ эਵݶ.. ஶబஎ 300ৈѐ ॉ֎ੌ 30ѐ Home + Contents API Response 855KB Contents-Encoding gzip ੸ਊ 236KB ಪ౟౵ੌ 5ѐ Ӕؘ.. ੉Ѧ ৵ ੉ઁ ঌওਸө ਃ..?

Slide 9

Slide 9 text

ѐࢶೞӝ ୐ ചݶ ࡅܰѱ ࠁৈ઱ӝ 2 9 ൨Ҁѱ JS౵ੌٜਸ ੍঻૑݅, Ӓܾ ؘ੉ఠо ই૒ উ৳যਃ.. 500ms о ૑աب۾ উ৬ਃ..

Slide 10

Slide 10 text

ѐࢶೞӝ ୐ ചݶ ࡅܰѱ ࠁৈ઱ӝ 2 10 Ӓېࢲ, React Component о ೙ਃܳ וՙӝ ੹ী, ؘ੉ఠܳ ޷ܻ ٘۷णפ׮.

Slide 11

Slide 11 text

ѐࢶೞӝ ୐ ചݶ ࡅܰѱ ࠁৈ઱ӝ 2 11 ѐࢶ റ ୐ ചݶ ѐࢶ ੹ ୐ ചݶ

Slide 12

Slide 12 text

ѐࢶೞӝ ୐ ചݶ ࡅܰѱ ࠁৈ઱ӝ 3 12 3G ੄ ࣘب۽… Home Static API

Slide 13

Slide 13 text

ѐࢶೞӝ ୐ ചݶ ࡅܰѱ ࠁৈ઱ӝ 3 13 localStorage ী ੷੢!

Slide 14

Slide 14 text

ѐࢶೞӝ ୐ ചݶ ࡅܰѱ ࠁৈ઱ӝ 4 14 CSS ౵ੌ x3 JS Bundle JS Vendor Bundle Font ౵ੌ x3 1687KB 753KB 827KB 1650KB Image ౵ੌ x75 5800KB 10MB?!

Slide 15

Slide 15 text

ѐࢶೞӝ ୐ ചݶ ࡅܰѱ ࠁৈ઱ӝ 4 15 CSS ౵ੌ x3 JS Bundle JS Vendor Bundle Font ౵ੌ x3 1687KB 753KB 827KB 1650KB Image ౵ੌ x75 5800KB 10MB?! 638KB 8.8MB!!

Slide 16

Slide 16 text

ѐࢶೞӝ Ӓ ৻ী दبೠ ߑߨٜ 16 ▸ ੉޷૑ onLoad transition ઁѢ Good ▸ Fonts ౵ੌ ղ੢ Fail ▸ ಪ౟ ౵ੌ ޷ܻ ۽٬ೞӝ Fail ▸ Webpack3 ੸ਊ SoSo ▸ FastClick ઁѢ + jQuery library dependency ઁѢ Good

Slide 17

Slide 17 text

ѐࢶೞӝ Ӓ ৻ী ࢚࢚݅ೞӝ۽.. ೠ ߑߨٜ 17 ▸ ୐ ചݶ݅ Server render ೧ࢲ ղ۰઱ӝ ▸ Android Native App. ٜ݅ӝ ▸ React-Native ۽ ٜ݅ӝ ▸ Static File Code Push ഋక۽ ߄Բӝ

Slide 18

Slide 18 text

ѐࢶೠ Ѿҗ ࠺Ү ࠁӝ (֢౟5) 18 ѐࢶ੹ ѐࢶറ

Slide 19

Slide 19 text

ѐࢶೠ Ѿҗ ࠺Ү ࠁӝ (௼܁ ѐߊ੗ بҳ) 19

Slide 20

Slide 20 text

ѐࢶೠ Ѿҗ ࠺Ү ࠁӝ (௼܁ ѐߊ੗ بҳ) 20

Slide 21

Slide 21 text

Ӓؘ۠ ݈ੑפ׮.. গૐ੄ KitKat (֢౟3) 21

Slide 22

Slide 22 text

ৈӝө૑о..՘ੋоࠁয়.. ੉ઁ য૵ભ……? 22 …֎..֎੉౭࠳ оաਃ……?

Slide 23

Slide 23 text

উ՘լযਃ, ই૒ ଺ওणפ׮, ߑߨ 23

Slide 24

Slide 24 text

উ՘լযਃ, ই૒ ଺ওणפ׮, ߑߨ 24 ղ੢ WebView XWalkView

Slide 25

Slide 25 text

যࠗ૑ܻ ᜑᐉᬞሆ ੉दп ই੉ಪ਷.. 25

Slide 26

Slide 26 text

՘զٸө૑ ՘դѱ ইפ׮ ੸ਊ ৘੿ 26 ▸ Crosswalk ੸ਊ Android ߓನ (feat. kotlin) ▸ Optimize Content Thumbnail Size ▸ Thumbnail Image Multi Domain ▸ API HTTP2 ▸ Built-in Font