FRESH! クライアントサイドパフォーマンス改善

2017.9.8 Frontrend Vol.10 - 夏の終わりに納涼パフォーマンス話

•「FRESH!」が映像配信のタイムラグを大幅に短縮
https://www.cyberagent.co.jp/newsinfo/info/detail/id=14062
•FRESH! における Web プッシュ通知機能
https://developers.cyberagent.co.jp/blog/archives/9662/
•FRESH! Accessibility Guidelines
https://openfresh.github.io/a11y-guidelines/

結果
https://www.youtube.com/watch?v=OqHYelNAuJk

viewport-observer
https://github.com/openfresh/viewport-observer

Transcript

1. FRESH! ΫϥΠΞϯταΠυ ύϑΥʔϚϯεվળ 2017.9.8 Frontrend Vol.10 - ՆͷऴΘΓʹೲྋύϑΥʔϚϯε࿩ @su;wo
2. • su;wo / su;wo_ •CyberAgent, Inc. •Front-end engineer •FRESH!
3. FRESH! is • ੜ์ૹಈը͕ݟ์୊ʂ • ө૾഑৴ϓϥοτϑΥʔϜ • ϑϩϯτνʔϜͰ͸PCͱSPϒϥ΢βɾ഑৴ը໘(PCϒϥ΢β)
4. React, Fluxible, PostCSS Express, Node.js(v8) Docker, Nginx, Redis, AWS TypeScript, ES6, BABEL ͜Μͳ͔Μ͡Ͱ͢
5. •ʮFRESH!ʯ͕ө૾഑৴ͷλΠϜϥάΛେ෯ʹ୹ॖ hMps:/ /www.cyberagent.co.jp/newsinfo/info/detail/id=14062 •FRESH! ʹ͓͚Δ Web ϓογϡ௨஌ػೳ hMps:/ /developers.cyberagent.co.jp/blog/archives/9662/ •FRESH! Accessibility Guidelines hMps:/ /openfresh.github.io/a11y-guidelines/ ϑϩϯτνʔϜͷۙگใࠂ
6. Agenda 1. Service Worker Ͱ੩తΞηοτͷΩϟογϡ 2. Intersec;on Observer Λ༻͍ͨ஗Ԇϩʔυ 3. SVG εϓϥΠτ΍ΊͯϓϩάϨογϒͳϩʔυ
7. Agenda 1. Service Worker Ͱ੩తΞηοτͷΩϟογϡ 2. Intersec;on Observer Λ༻͍ͨ஗Ԇϩʔυ 3. SVG εϓϥΠτ΍ΊͯϓϩάϨογϒͳϩʔυ
8. Service Worker is • όοΫάϥ΢ϯυͰ࣮ߦ͢Δ Web Worker ͷҰछ • ϒϥ΢β (UI εϨου)ͱ͸ postMessage Λ࢖ͬͯ΍ΓͱΓ • ωοτϫʔΫॲཧͷϋϯυϦϯάɺϓογϡ௨஌ͷड৴ɺόοΫάϥ΢ϯυಉظ • hMps ͕ඞਢ (localhost ͸ྫ֎)
9. The offline cookbook - JakeArchibald.com : https://jakearchibald.com/2014/offline-cookbook/#cache-then-network
10. Can I use... Support tables for HTML5, CSS3, etc : 
 https://caniuse.com/#feat=serviceworkers
11. The status of Service Worker in Microsoft Edge is In Development - Microsoft Edge Development : 
 https://developer.microsoft.com/en-us/microsoft-edge/platform/status/serviceworker/

12. The status of Service Worker in Microsoft Edge is In Development - Microsoft Edge Development : 
 https://developer.microsoft.com/en-us/microsoft-edge/platform/status/serviceworker/

13. Jake Archibald͞ΜͷπΠʔτ: "Well this makes me happy. https://t.co/je1f3Mpf8B" :
 https://twitter.com/jaffathecake/status/895272929587597312
15. 175237 – Implement most of ServiceWorkerContainer::addRegistration : 
 https://bugs.webkit.org/show_bug.cgi?id=175237
16. ઃܭํ਑ͱ࣮૷ํ๏ • Ωϟογϡ͕͋Ε͹ΩϟογϡΛฦ͠ɺͳ͚Ε͹ϑΣον͢Δ • ϦϦʔε୯ҐͰΩϟογϡͤ͞Δ΋ͷ (CircleCIͷbuild_idʹඥͮ͘) • ҙਤతʹߋ৽ͤ͞ͳ͍ͱΩϟογϡ͞Εଓ͚Δ΋ͷ (version.jsonʹ೚ҙͷ೔෇Λೖྗ)
17. service-worker ᵓ── assets.js WebϑΥϯτɾCSSɾJS ϑΝΠϧͷϗϫΠτϦετΛ࡞੒ ᵓ── index.js Πϕϯτϋϯυϥͷొ࿥ └── register.js Service Worker ͕Πϯετʔϧ͞Ε͍ͯΔ͔ͷ൑ఆ ϑΝΠϧߏ੒ browserify => service-worker.js
18. σόοάํ๏
19. Chrome DevTools ศར
20. Chrome DevTools ศར ݱࡏͷCanary (v63) ͕͔ͳΓʔ
21. ֬ೝ͍ͨ͜͠ͱ ϖʔδදࣔ࣌ʹ Service Worker ͕ਖ਼͘͠Πϯετʔϧ͞Ε͍ͯΔ͔ ࢦఆͨ͠੩తΞηοτ͕ҙਤͨ͠ͱ͓ΓΩϟογϡ͞Ε͍ͯΔ͔
22. ϖʔδදࣔ࣌ʹ Service Worker ͕Πϯετʔϧ͞Ε͍ͯΔ͔
23. ࢦఆͨ͠੩తΞηοτ͕ҙਤͨ͠ͱ͓ΓΩϟογϡ͞Ε͍ͯΔ͔
24. ࢦఆͨ͠੩తΞηοτ͕ҙਤͨ͠ͱ͓ΓΩϟογϡ͞Ε͍ͯΔ͔
25. ϩʔΧϧͰ֬ೝ͢Δ࣌ • ؀ڥม਺ʹϑϥάΛ༻ҙ => DISABLED_SW_CACHE: Boolean • ϒϥ΢βͰεʔύʔϦϩʔυ͢Δ
26. ݁Ռ https://www.youtube.com/watch?v=OqHYelNAuJk
27. Agenda 1. Service Worker Ͱ੩తΞηοτͷΩϟογϡ 2. Intersec2on Observer Λ༻͍ͨ஗Ԇϩʔυ 3. SVG εϓϥΠτ΍ΊͯϓϩάϨογϒͳϩʔυ
28. ஗Ԇϩʔυͱ͸ • εΫϩʔϧͳͲΛτϦΨʔͱͯ͠ը૾Λඇಉظϩʔυ • ແବͳϦΫΤετΛ࡟ݮͰ͖Δ
29. ϥϯΩϯάʢຊ೔ʣ | FRESH!ʢϑϨογϡʣ - ੜ์ૹ͕ϩάΠϯෆཁɾߴը࣭Ͱݟ์୊ :
 https://freshlive.tv/ranking/daily
30. ATF(Above the fold 375*667 ) ϖʔδશମͷ1/6͔͠දࣔ͞Ε͍ͯͳ͍
 4520px iPhone6/7
31. ԾʹATFͷ··ભҠͨ͠Β
32. IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG
33. IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG Useless IMG
34. Intersec;on Observer ͱ͸ • ಛఆͷDOMཁૉ͕ը໘಺ʹଘࡏ͢Δ͔ɺͦͷҐஔΛ༰қʹऔಘͰ͖ΔAPI • ैདྷͷํ๏ͱൺ΂ɺεΫϩʔϧʹΑΔDOMཁૉͷग़ݱͳͲΛޮ཰Α͘ݕ஌Մೳ
35. ޮ཰Α͘ͱ͸ • εΫϩʔϧΠϕϯτ͕සൃͤ͞ͳ͍Α͏ؒҾ͘ඞཁ͋Γ • ཁૉͷҐஔΛ൑ఆ͢Δࡍʹ࢖༻͢Δ scrollTop, offset, getBoundingClientRect() ͸Forced Synchronous Layout ͕ى͜Δ • ࣮૷͕ΊΜͲ͍͘͞
36. viewport-observer
37. viewport-observer • A React Component that observe changes in the intersec;on of a target element with viewport using Intersec;onObserver
39. CONTENT REQUESTS 80 CONTENT SIZES 1,500kb
40. CONTENT REQUESTS 80→40 CONTENT SIZES 1,500kb →900kb
41. ΞχϝʔγϣϯΛ͓ख੍ܰޚ ը໘಺ʹΧϧʔηϧόφʔ͕ ݟ͍͑ͯΔ͚࣌ͩࣗಈ࠶ੜ͢Δ
42. ΞχϝʔγϣϯΛ͓ख੍ܰޚ ը໘಺ʹΧϧʔηϧόφʔ͕ ݟ͍͑ͯΔ͚࣌ͩࣗಈ࠶ੜ͢Δ
43. Agenda 1. Service Worker Ͱ੩తΞηοτͷΩϟογϡ 2. Intersec;on Observer Λ༻͍ͨ஗Ԇϩʔυ 3. SVG εϓϥΠτ΍ΊͯϓϩάϨογϒͳϩʔυ
44. SVG εϓϥΠτͱHTTP2 • ͜Ε·ͰΞΠίϯ͸SVGϑΝΠϧΛ݁߹͍ͤͯͨ͞ • FRESH! Ͱར༻͍ͯ͠Δ AWS ͷ ALB ͸ HTTP/2 ʹରԠ͍ͯ͠Δ • HTTP/1.1 ͷͱ͖ʹ՝୊ͩͬͨϦΫΤετίετΛ௨৴ଟॏԽ΍ฒߦϦΫΤετʹΑΓ ܰݮͤ͞Δ͜ͱ͕Ͱ͖ͨ
45. ݁ՌͲͷΑ͏ʹͳ͔ͬͨ • εϓϥΠτΛ΍ΊΔ͜ͱͰϒϥ΢β͸֤ΞΠίϯͷ SVG ϑΝΠϧΛμ΢ϯϩʔυ࣍͠ ୈɺஞ࣍ධՁΛߦ͍ϨϯμϦϯάΛ։࢝ • ը໘্෦ͷαʔϏεϩΰ΍ϓϨΠϠʔͷ࠶ੜϘλϯͳͲɺॏཁͳΞΠίϯ͕஗Εͯදࣔ ͞ΕΔ͜ͱ͕গͳ͘ͳͬͨ
46. SpeedIndexͰৼΓฦΔ൒೥ؒ
48. ҡ࣋Ͱ͖͍ͯΔ
49. ·ͱΊ 1. ίϯςϯπͷՁ஋Λ࠷େԽ͕໨తͰٕज़͸खஈʹա͗ͳ͍ 2. FRESH!͸ಈըαʔϏεͳͷͰ͍͔ʹಈըΛշదʹݟͤΔ͔ 
 (YouTubeͷϨϯμϦϯά͸ڵຯਂ͍)
50. ·ͱΊ 1. ίϯςϯπͷՁ஋Λ࠷େԽ͕໨తͰٕज़͸खஈʹա͗ͳ͍ 2. FRESH!͸ಈըαʔϏεͳͷͰ͍͔ʹಈըΛշదʹݟͤΔ͔ 
 (YouTubeͷϨϯμϦϯά͸ڵຯਂ͍)
51. Ask Me Anything