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

by sutiwo

Slide 1

Slide 1 text

FRESH! ΫϥΠΞϯταΠυ ύϑΥʔϚϯεվળ 2017.9.8 Frontrend Vol.10 - ՆͷऴΘΓʹೲྋύϑΥʔϚϯε࿩ @su;wo

Slide 2

Slide 2 text

• su;wo / su;wo_ •CyberAgent, Inc. •Front-end engineer •FRESH!

Slide 3

Slide 3 text

FRESH! is • ੜ์ૹಈը͕ݟ์୊ʂ • ө૾഑৴ϓϥοτϑΥʔϜ • ϑϩϯτνʔϜͰ͸PCͱSPϒϥ΢βɾ഑৴ը໘(PCϒϥ΢β)

Slide 4

Slide 4 text

React, Fluxible, PostCSS Express, Node.js(v8) Docker, Nginx, Redis, AWS TypeScript, ES6, BABEL ͜Μͳ͔Μ͡Ͱ͢

Slide 5

Slide 5 text

•ʮ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/ ϑϩϯτνʔϜͷۙگใࠂ

Slide 6

Slide 6 text

Agenda 1. Service Worker Ͱ੩తΞηοτͷΩϟογϡ 2. Intersec;on Observer Λ༻͍ͨ஗Ԇϩʔυ 3. SVG εϓϥΠτ΍ΊͯϓϩάϨογϒͳϩʔυ

Slide 7

Slide 7 text

Agenda 1. Service Worker Ͱ੩తΞηοτͷΩϟογϡ 2. Intersec;on Observer Λ༻͍ͨ஗Ԇϩʔυ 3. SVG εϓϥΠτ΍ΊͯϓϩάϨογϒͳϩʔυ

Slide 8

Slide 8 text

Service Worker is • όοΫάϥ΢ϯυͰ࣮ߦ͢Δ Web Worker ͷҰछ • ϒϥ΢β (UI εϨου)ͱ͸ postMessage Λ࢖ͬͯ΍ΓͱΓ • ωοτϫʔΫॲཧͷϋϯυϦϯάɺϓογϡ௨஌ͷड৴ɺόοΫάϥ΢ϯυಉظ • hMps ͕ඞਢ (localhost ͸ྫ֎)

Slide 9

Slide 9 text

The oﬄine cookbook - JakeArchibald.com : https://jakearchibald.com/2014/oﬄine-cookbook/#cache-then-network

Slide 10

Slide 10 text

Can I use... Support tables for HTML5, CSS3, etc :   https://caniuse.com/#feat=serviceworkers

Slide 11

Slide 11 text

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/ 

Slide 12

Slide 12 text

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/ 

Slide 13

Slide 13 text

Jake Archibald͞ΜͷπΠʔτ: "Well this makes me happy. https://t.co/je1f3Mpf8B" :  https://twitter.com/jaﬀathecake/status/895272929587597312

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

175237 – Implement most of ServiceWorkerContainer::addRegistration :   https://bugs.webkit.org/show_bug.cgi?id=175237

Slide 16

Slide 16 text

ઃܭํ਑ͱ࣮૷ํ๏ • Ωϟογϡ͕͋Ε͹ΩϟογϡΛฦ͠ɺͳ͚Ε͹ϑΣον͢Δ • ϦϦʔε୯ҐͰΩϟογϡͤ͞Δ΋ͷ (CircleCIͷbuild_idʹඥͮ͘) • ҙਤతʹߋ৽ͤ͞ͳ͍ͱΩϟογϡ͞Εଓ͚Δ΋ͷ (version.jsonʹ೚ҙͷ೔෇Λೖྗ)

Slide 17

Slide 17 text

service-worker ᵓ── assets.js WebϑΥϯτɾCSSɾJS ϑΝΠϧͷϗϫΠτϦετΛ࡞੒ ᵓ── index.js Πϕϯτϋϯυϥͷొ࿥ └── register.js Service Worker ͕Πϯετʔϧ͞Ε͍ͯΔ͔ͷ൑ఆ ϑΝΠϧߏ੒ browserify => service-worker.js

Slide 18

Slide 18 text

σόοάํ๏

Slide 19

Slide 19 text

Chrome DevTools ศར

Slide 20

Slide 20 text

Chrome DevTools ศར ݱࡏͷCanary (v63) ͕͔ͳΓʔ

Slide 21

Slide 21 text

֬ೝ͍ͨ͜͠ͱ ϖʔδදࣔ࣌ʹ Service Worker ͕ਖ਼͘͠Πϯετʔϧ͞Ε͍ͯΔ͔ ࢦఆͨ͠੩తΞηοτ͕ҙਤͨ͠ͱ͓ΓΩϟογϡ͞Ε͍ͯΔ͔

Slide 22

Slide 22 text

ϖʔδදࣔ࣌ʹ Service Worker ͕Πϯετʔϧ͞Ε͍ͯΔ͔

Slide 23

Slide 23 text

ࢦఆͨ͠੩తΞηοτ͕ҙਤͨ͠ͱ͓ΓΩϟογϡ͞Ε͍ͯΔ͔

Slide 24

Slide 24 text

ࢦఆͨ͠੩తΞηοτ͕ҙਤͨ͠ͱ͓ΓΩϟογϡ͞Ε͍ͯΔ͔

Slide 25

Slide 25 text

ϩʔΧϧͰ֬ೝ͢Δ࣌ • ؀ڥม਺ʹϑϥάΛ༻ҙ => DISABLED_SW_CACHE: Boolean • ϒϥ΢βͰεʔύʔϦϩʔυ͢Δ

Slide 26

Slide 26 text

݁Ռ https://www.youtube.com/watch?v=OqHYelNAuJk

Slide 27

Slide 27 text

Agenda 1. Service Worker Ͱ੩తΞηοτͷΩϟογϡ 2. Intersec2on Observer Λ༻͍ͨ஗Ԇϩʔυ 3. SVG εϓϥΠτ΍ΊͯϓϩάϨογϒͳϩʔυ

Slide 28

Slide 28 text

஗Ԇϩʔυͱ͸ • εΫϩʔϧͳͲΛτϦΨʔͱͯ͠ը૾Λඇಉظϩʔυ • ແବͳϦΫΤετΛ࡟ݮͰ͖Δ

Slide 29

Slide 29 text

ϥϯΩϯάʢຊ೔ʣ | FRESH!ʢϑϨογϡʣ - ੜ์ૹ͕ϩάΠϯෆཁɾߴը࣭Ͱݟ์୊ :  https://freshlive.tv/ranking/daily

Slide 30

Slide 30 text

ATF(Above the fold 375*667 ) ϖʔδશମͷ1/6͔͠දࣔ͞Ε͍ͯͳ͍  4520px iPhone6/7

Slide 31

Slide 31 text

ԾʹATFͷ··ભҠͨ͠Β

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Intersec;on Observer ͱ͸ • ಛఆͷDOMཁૉ͕ը໘಺ʹଘࡏ͢Δ͔ɺͦͷҐஔΛ༰қʹऔಘͰ͖ΔAPI • ैདྷͷํ๏ͱൺ΂ɺεΫϩʔϧʹΑΔDOMཁૉͷग़ݱͳͲΛޮ཰Α͘ݕ஌Մೳ

Slide 35

Slide 35 text

ޮ཰Α͘ͱ͸ • εΫϩʔϧΠϕϯτ͕සൃͤ͞ͳ͍Α͏ؒҾ͘ඞཁ͋Γ • ཁૉͷҐஔΛ൑ఆ͢Δࡍʹ࢖༻͢Δ scrollTop, oﬀset, getBoundingClientRect() ͸Forced Synchronous Layout ͕ى͜Δ • ࣮૷͕ΊΜͲ͍͘͞

Slide 36

Slide 36 text

viewport-observer

Slide 37

Slide 37 text

viewport-observer • A React Component that observe changes in the intersec;on of a target element with viewport using Intersec;onObserver

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

CONTENT REQUESTS 80 CONTENT SIZES 1,500kb

Slide 40

Slide 40 text

CONTENT REQUESTS 80→40 CONTENT SIZES 1,500kb →900kb

Slide 41

Slide 41 text

ΞχϝʔγϣϯΛ͓ख੍ܰޚ ը໘಺ʹΧϧʔηϧόφʔ͕ ݟ͍͑ͯΔ͚࣌ͩࣗಈ࠶ੜ͢Δ

Slide 42

Slide 42 text

ΞχϝʔγϣϯΛ͓ख੍ܰޚ ը໘಺ʹΧϧʔηϧόφʔ͕ ݟ͍͑ͯΔ͚࣌ͩࣗಈ࠶ੜ͢Δ

Slide 43

Slide 43 text

Agenda 1. Service Worker Ͱ੩తΞηοτͷΩϟογϡ 2. Intersec;on Observer Λ༻͍ͨ஗Ԇϩʔυ 3. SVG εϓϥΠτ΍ΊͯϓϩάϨογϒͳϩʔυ

Slide 44

Slide 44 text

SVG εϓϥΠτͱHTTP2 • ͜Ε·ͰΞΠίϯ͸SVGϑΝΠϧΛ݁߹͍ͤͯͨ͞ • FRESH! Ͱར༻͍ͯ͠Δ AWS ͷ ALB ͸ HTTP/2 ʹରԠ͍ͯ͠Δ • HTTP/1.1 ͷͱ͖ʹ՝୊ͩͬͨϦΫΤετίετΛ௨৴ଟॏԽ΍ฒߦϦΫΤετʹΑΓ ܰݮͤ͞Δ͜ͱ͕Ͱ͖ͨ

Slide 45

Slide 45 text

݁ՌͲͷΑ͏ʹͳ͔ͬͨ • εϓϥΠτΛ΍ΊΔ͜ͱͰϒϥ΢β͸֤ΞΠίϯͷ SVG ϑΝΠϧΛμ΢ϯϩʔυ࣍͠ ୈɺஞ࣍ධՁΛߦ͍ϨϯμϦϯάΛ։࢝ • ը໘্෦ͷαʔϏεϩΰ΍ϓϨΠϠʔͷ࠶ੜϘλϯͳͲɺॏཁͳΞΠίϯ͕஗Εͯදࣔ ͞ΕΔ͜ͱ͕গͳ͘ͳͬͨ

Slide 46

Slide 46 text

SpeedIndexͰৼΓฦΔ൒೥ؒ

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

ҡ࣋Ͱ͖͍ͯΔ

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Ask Me Anything