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

발표자: 스토리팀 최아연

Transcript

1. ղ ࢤੌ੉ۄࢲ द੘ ػ ੗ӝࣗѐ 1 ৈ੗ ࢎۈ ѐߊ੗ ୭ইো (ayon.c@ridi.com) ೐ۿ౟ূ٘ ѐߊ੗ ܻ٣झషܻ ѐߊ੗ ؋૕ೞҊ र਷ যܲ੉ ѱਵܴ ഐ੹੸
2. ࢿמ ѐࢶ ੉ঠӝ ୭ইো | झషܻѐߊ౱ | ayon.c@ridi.com
3. ࢎѤ੄ द੘ TOC ੄ޙ੄ ઁࠁ 03
4. ѐߊ੗ say.. ੉ѱ ࢸݺೞ੗ݶ ӟؘ, 04 ֎… ܻ٣झషܻ জ਷ ਢজਵ۽ ٜ݅যઉ੓ਵݴ, Ӓ ղࠗ ח ױੌ ಕ੉૑ গ೒ܻா੉࣌(SPA)ਵ۽ ੉ܖযઉ੓Ҋ, ֎੉౭࠳জਵ۽ ٜ݅য૓ জী ࠺೧ ݽ߄ੌ ղ੢ ࠳ۄ਋ ੷ ࢿמী ௼ѱ ৔ೱਸ ߉Ҋ੓ਵݴ, ೩٘ಪ੉ য়ېغݶ য় ېؼ ࣻ۾ וܾ ࣻ ੓णפ׮. ౠ൤, ઁઑࢎ੄ ӝࠄ ղ੢ ࠳ ۄ਋੷о ބद ࢿמ੉ જ૑ ޅೠ ҃਋, ੹୓੸ਵ۽ ו۰૕ ࣻ ੓णפ׮. ౠ൤, SPA੄ ౠࢿ࢚ ୡӝ ۽٬ ೡٸ, ചݶ ҳࢿ Contentsо ݆਷ ҃਋, ࢿמ੉ જ૑ ޅ… Ӓۧ׮ݶ, ਤ੄ ޙઁ੼ٜਸ ೧Ѿೡ ࣽ হਸө? ઱੺ ઱੺ ઱੺ ઱੺ ઱੺
5. 1ର ѐࢶ (2017.03) 05 Redux ੸ਊ
6. Ӕؘب.. ޙઁח ݽ׮?! ▸ Single Page Application (SPA) ▸ Too many static files ▸ a huge JS, CSS, Fonts, Images ▸ too late Ajax Call (Some API..) ▸ Android Mobile Browser Performance ▸ Android KitKat.. 06 ޙઁ ੋधೞӝ
7. ա ੗नਸ ঌ੗ ௼܁ ѐߊ੗ بҳ۽ ࠙ࢳೞӝ 07 Load/Parse HTML, JS 600ms Auth, Home ApiCall Render 500ms Contents ApiCall Image, Animation 800ms
8. ѐࢶೞӝ ୐ ചݶ ࡅܰѱ ࠁৈ઱ӝ 1 08 ੷൞ കؘ੉ఠ۽ ݈ೡ Ѫ эਵݶ.. ஶబஎ 300ৈѐ ॉ֎ੌ 30ѐ Home + Contents API Response 855KB Contents-Encoding gzip ੸ਊ 236KB ಪ౟౵ੌ 5ѐ Ӕؘ.. ੉Ѧ ৵ ੉ઁ ঌওਸө ਃ..?
9. ѐࢶೞӝ ୐ ചݶ ࡅܰѱ ࠁৈ઱ӝ 2 9 ൨Ҁѱ JS౵ੌٜਸ ੍঻૑݅, Ӓܾ ؘ੉ఠо ই૒ উ৳যਃ.. 500ms о ૑աب۾ উ৬ਃ..
10. ѐࢶೞӝ ୐ ചݶ ࡅܰѱ ࠁৈ઱ӝ 2 10 Ӓېࢲ, React Component о ೙ਃܳ וՙӝ ੹ী, ؘ੉ఠܳ ޷ܻ ٘۷णפ׮.
11. ѐࢶೞӝ ୐ ചݶ ࡅܰѱ ࠁৈ઱ӝ 2 11 ѐࢶ റ ୐ ചݶ ѐࢶ ੹ ୐ ചݶ
12. ѐࢶೞӝ ୐ ചݶ ࡅܰѱ ࠁৈ઱ӝ 3 12 3G ੄ ࣘب۽… Home Static API
13. ѐࢶೞӝ ୐ ചݶ ࡅܰѱ ࠁৈ઱ӝ 3 13 localStorage ী ੷੢!
14. ѐࢶೞӝ ୐ ചݶ ࡅܰѱ ࠁৈ઱ӝ 4 14 CSS ౵ੌ x3 JS Bundle JS Vendor Bundle Font ౵ੌ x3 1687KB 753KB 827KB 1650KB Image ౵ੌ x75 5800KB 10MB?!
15. ѐࢶೞӝ ୐ ചݶ ࡅܰѱ ࠁৈ઱ӝ 4 15 CSS ౵ੌ x3 JS Bundle JS Vendor Bundle Font ౵ੌ x3 1687KB 753KB 827KB 1650KB Image ౵ੌ x75 5800KB 10MB?! 638KB 8.8MB!!
16. ѐࢶೞӝ Ӓ ৻ী दبೠ ߑߨٜ 16 ▸ ੉޷૑ onLoad transition ઁѢ Good ▸ Fonts ౵ੌ ղ੢ Fail ▸ ಪ౟ ౵ੌ ޷ܻ ۽٬ೞӝ Fail ▸ Webpack3 ੸ਊ SoSo ▸ FastClick ઁѢ + jQuery library dependency ઁѢ Good
17. ѐࢶೞӝ Ӓ ৻ী ࢚࢚݅ೞӝ۽.. ೠ ߑߨٜ 17 ▸ ୐ ചݶ݅ Server render ೧ࢲ ղ۰઱ӝ ▸ Android Native App. ٜ݅ӝ ▸ React-Native ۽ ٜ݅ӝ ▸ Static File Code Push ഋక۽ ߄Բӝ
18. ѐࢶೠ Ѿҗ ࠺Ү ࠁӝ (֢౟5) 18 ѐࢶ੹ ѐࢶറ
19. ѐࢶೠ Ѿҗ ࠺Ү ࠁӝ (௼܁ ѐߊ੗ بҳ) 19
20. ѐࢶೠ Ѿҗ ࠺Ү ࠁӝ (௼܁ ѐߊ੗ بҳ) 20
21. Ӓؘ۠ ݈ੑפ׮.. গૐ੄ KitKat (֢౟3) 21
22. ৈӝө૑о..՘ੋоࠁয়.. ੉ઁ য૵ભ……? 22 …֎..֎੉౭࠳ оաਃ……?
23. উ՘լযਃ, ই૒ ଺ওणפ׮, ߑߨ 23
24. উ՘լযਃ, ই૒ ଺ওणפ׮, ߑߨ 24 ղ੢ WebView XWalkView
25. যࠗ૑ܻ ᜑᐉᬞሆ ੉दп ই੉ಪ਷.. 25
26. ՘զٸө૑ ՘դѱ ইפ׮ ੸ਊ ৘੿ 26 ▸ Crosswalk ੸ਊ Android ߓನ (feat. kotlin) ▸ Optimize Content Thumbnail Size ▸ Thumbnail Image Multi Domain ▸ API HTTP2 ▸ Built-in Font
27. Q&A
28. хࢎ೤פ׮! ՘.