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

Af6c71a5ce07091572fa09c5a4728f85?s=47 sutiwo
September 08, 2017

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

Af6c71a5ce07091572fa09c5a4728f85?s=128

sutiwo

September 08, 2017
Tweet

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

  14. None
  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
  38. None
  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ͰৼΓฦΔ൒೥ؒ

  47. None
  48. ҡ࣋Ͱ͖͍ͯΔ

  49. ·ͱΊ 1. ίϯςϯπͷՁ஋Λ࠷େԽ͕໨తͰٕज़͸खஈʹա͗ͳ͍ 2. FRESH!͸ಈըαʔϏεͳͷͰ͍͔ʹಈըΛշదʹݟͤΔ͔ 
 (YouTubeͷϨϯμϦϯά͸ڵຯਂ͍)

  50. ·ͱΊ 1. ίϯςϯπͷՁ஋Λ࠷େԽ͕໨తͰٕज़͸खஈʹա͗ͳ͍ 2. FRESH!͸ಈըαʔϏεͳͷͰ͍͔ʹಈըΛշదʹݟͤΔ͔ 
 (YouTubeͷϨϯμϦϯά͸ڵຯਂ͍)

  51. Ask Me Anything