Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web Application 2018 From Performance Perspective
Search
Yosuke Furukawa
PRO
March 24, 2018
Programming
9
4.5k
Web Application 2018 From Performance Perspective
Webパフォーマンスについての話を manabiya.tech で発表しました。
Yosuke Furukawa
PRO
March 24, 2018
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
120
Removing Corepack
yosuke_furukawa
PRO
9
1.2k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.4k
Strip Types と Storage
yosuke_furukawa
PRO
4
320
Module Harmony について
yosuke_furukawa
PRO
3
1.5k
LTのやり方
yosuke_furukawa
PRO
16
2.1k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
680
Node.js v22 で変わること
yosuke_furukawa
PRO
13
5.1k
リアーキテクトと開発生産性について
yosuke_furukawa
PRO
25
9.5k
Other Decks in Programming
See All in Programming
Memory API: Patterns, Use Cases, and Performance
josepaumard
2
210
gopls を改造したら開発生産性が高まった
satorunooshie
7
140
のびしろを広げる巻き込まれ力:偶然を活かすキャリアの作り方/oso2024
takahashiikki
1
290
Vue.js学習の振り返り
hiro_xre
1
100
watsonx.ai Dojo #3 プロンプトエンジニアリング入門
oniak3ibm
PRO
0
460
4年間変わらなかった YOUTRUSTのアーキテクチャ
daiki1003
2
710
空間の中でアイドルとレッスンする技術 - 1st "Vision" / Spatial Lesson technologies with my idol - 1st "Vision"
banjun
PRO
0
260
デバッグの話 / Debugging for Beginners
kaityo256
PRO
8
740
Integrating AI in Your Enterprise Java Applications
ivargrimstad
0
950
Competitionsだけじゃない! Kaggle Notebooks Grandmasterのすすめ
corochann
2
940
現場から考えるソフトウェアエンジニアリングの価値と実験
nomuson
1
160
【YAPC::Hakodate 2024】TypeScriptエンジニアが感じたPerlのここが面白い
kimitashoichi
1
490
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Writing Fast Ruby
sferik
626
60k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
How STYLIGHT went responsive
nonsquared
95
5.1k
Embracing the Ebb and Flow
colly
84
4.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
13
1.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
130k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Music & Morning Musume
bryan
46
6.1k
Side Projects
sachag
452
42k
[RailsConf 2023] Rails as a piece of cake
palkan
49
4.8k
Speed Design
sergeychernyshev
23
550
Transcript
Web Application 2018 From Performance Perspective 2018/03/24 @ manabiya.tech Yosuke
FURUKAWA
Twitter: @yosuke_furukawa Github: yosuke-furukawa
2001 2009 2010 2016 2018
2001 2009 2010 2016 2018 (PPE0ME8FC
2001 2009 2010 2016 2018 4JOHMF1BHF8FC "QQT
2001 2009 2010 2016 2018 &WPMWF4JOHMF1BHF "QQT
2001 2009 2010 2016 2018 'VUVSFʜ
2001 2009 2010 2016 2018 8FC"QQT9
Web Performance 200X
Performance Bible ~200X
Performance Bible ~200X
Performance Bible ~200X )551ϦΫΤετΛ࠷খݶʹ͠Α͏ $%/Λ͓͏ $BDIF$POUSPMΛ͓͏FUD ϢʔβʔϑϩϯτΤϯυͰ 80 ~ 90%
ͷ࣌ؒػ͍ͯ͠Δ
Previous Web Applications
Previous Web Applications • جຊతʹϖʔδભҠͰͷॲཧ͕ϝΠϯ • SNS • ϒϩά •
ཱྀߦαΠτ • Ϩετϥϯݕࡧ etc
Previous Web Applications • جຊతʹϖʔδભҠͰͷॲཧ͕ϝΠϯ • SNS • ϒϩά •
ཱྀߦαΠτ • Ϩετϥϯݕࡧ etc ຖճϖʔδΛඳըͭͭ͠ɺϒϥβ ͷجຊػೳΛଟ༻ͯ͠࡞Δ
Web Performance ~200X • Measuring Time from Request to Response
Web Performance Tools ~200X • Page Speed Insights • Apache
Bench • jmeter • Requests / sec • Latency • Transfer / sec
• Page Speed Insights • Apache Bench • jmeter 3FRTTFD
ඵؒͰԿճϦΫΤετΛ͚͔ͨ͞ USBOTGFSTFD ඵؒͰԿ#ZUFΛૹΕ͔ͨ -BUFODZ ߦ͔ͬͯΒฦͬͯ͘Δ·Ͱͷ࣌ؒ Web Performance Tools ~200X
• Page Speed Insights • Apache Bench • jmeter 3FRTTFD
ඵؒͰԿճϦΫΤετΛ͚͔ͨ͞ USBOTGFSTFD ඵؒͰԿ#ZUFΛૹΕ͔ͨ -BUFODZ ߦ͔ͬͯΒฦͬͯ͘Δ·Ͱͷ࣌ؒ ඞવతʹΔ͜ͱ͕ܾ·ͬͯ͘Δ Web Performance Tools ~200X
Web Performance ~ 200X • Δ͜ͱ • ϦΫΤετճͷվળ • Ϩεϙϯε࣌ؒͷվળ
• Ϩεϙϯε͢ΔόΠτͷվળ
ϦΫΤετճͷվળ • αΠτΛߴʹ͢ΔҰ൪ͷํ๏ ͦͦϦΫΤετ͠ͳ͍͜ͱ • ۃྗϦΫΤετΛݮΒ͢ • ex: CSSΛ1ϑΝΠϧʹɺJSಉ༷ɻ
ϦΫΤετճͷվળ • CSS Sprite • Inline ల։ • Cache Control
• CSS Sprite • Inline ల։ • Cache Control ϦΫΤετճͷվળ
$BDIF$POUSPM BTTFU%-ͨ͠ΒΩϟογϡͤ͞Δ $444QSJUF JDPOҰͭʹ·ͱΊΔ *OMJOFల։ ͻͱݟͯग़ͯ͘ΔྖҬ$44ΛΠϯ ϥΠϯʹల։͢Δ
• CSS Sprite • Inline ల։ • Cache Control ϦΫΤετճͷվળ
$BDIF$POUSPM BTTFU%-ͨ͠ΒΩϟογϡͤ͞Δ $444QSJUF JDPOҰͭʹ·ͱΊΔ *OMJOFల։ ͻͱݟͯग़ͯ͘ΔྖҬ$44ΛΠϯ ϥΠϯʹల։͢Δ ͳΔ͘ϦΫΤετ͠ͳ͍
Ϩεϙϯε࣌ؒͷվળ • Improve Backend Performance • Indexing, Join, denomalize •
Proper Middleware ΑΓྑ͍ϛυϧΣΞΛ͏ 3FEJT NFNDBDIF %BUBCBTFͷ*OEFYΛషΔɺςʔϒϧΛ δϣΠϯ͢Δɺඇਖ਼نԽ͢ΔFUD
Ϩεϙϯε࣌ؒͷվળ • Improve Backend Performance • Indexing, Join, denomalize •
Proper Middleware ΑΓྑ͍ϛυϧΣΞΛ͏ 3FEJT NFNDBDIF %BUBCBTFͷ*OEFYΛషΔɺςʔϒϧΛ δϣΠϯ͢Δɺඇਖ਼نԽ͢ΔFUD ΞϓϦέʔγϣϯαʔόͷதΛ վળͯ͠ɺϨεϙϯεΛྑ͘͢Δ
Ϩεϙϯε͢ΔόΠτͷվળ • దͳը૾ϑΥʔϚοτͷબɺϦαΠζ • imagemagick, AWS Lambda • webp, png,
gif, jpeg • JS, css ͷ minify, gzipԽ
Ϩεϙϯε͢ΔόΠτͷվળ • దͳը૾ϑΥʔϚοτͷબɺϦαΠζ • imagemagick, AWS Lambda • webp, png,
gif, jpeg • JS, css ͷ minify, gzipԽ దͳը૾ϑΥʔϚοτͷબ TDSJQUTUZMFNJOJGZͯ͠H[JQʹ͢Δ ͜ͱͰখͯ͘͞͠৴
Ϩεϙϯε͢ΔόΠτͷվળ • దͳը૾ϑΥʔϚοτͷબɺϦαΠζ • imagemagick, AWS Lambda • webp, png,
gif, jpeg • JS, css ͷ minify, gzipԽ దͳը૾ϑΥʔϚοτͷબ TDSJQUTUZMFNJOJGZͯ͠H[JQʹ͢Δ ͜ͱͰখͯ͘͞͠৴ Ϩεϙϯε͢ΔόΠτ͕ݮΕଳ Ҭͷѹഭ͕ݮΔɺ࣌ؒগͳ͘ͳΔ
Summary ~200X • Bible: • High Performance Web Sites •
App: • جຊతʹϖʔδભҠ୯ҐͰΓऔΓ • Performance Techniques: • ϦΫΤετΛݮΒ͢ • JS/CSS/image Λ1fileʹ͢Δɺ Inlineʹ͢ΔɺCache-ControlΛ͏ • ϨεϙϯεΛվળ͢Δ • Backend ͷϨεϙϯεΛվળ͢ΔɺDBΑ͘͢ΔɺదͳMiddleware͏ • Ϩεϙϯε͢ΔαΠζΛݮΒ͢ • ImageΛॖখ ͢ΔɺCSS/JSΛminify͢ΔɺదͳImage formatΛબͿɺѹॖ͢Δ
2001 2009 2010 2016 2018 8FC"QQT
Web Performance 2010-2016
Performance Bible 2010-2016
Performance Bible 2010-2016
Performance Bible 2010-2016 ॲཧͷத৺͕αʔό͔Βϒϥβ ϨΠςϯγΛখ͘͞ɻ ϨΠςϯγΛԼ͛Δʹɿ ଓίετΛԼ͛Δ 5$1'BTU0QFO )551
ඞཁͳσʔλ͚ͩऔͬͯࠩͰߋ৽͢Δ 9)3 +4 ࣮ࡍͷϢʔβʔͷϞχλϦϯά݁ՌΛݟΔ 36.
Web Applications 2010-2016 • NetworkϨΠϠͰͷ࠷దԽ (HTTP/2) • Ajax௨৴ͱ෦ϨϯμϦϯά (SPA)
Web Applications 2010-2015 • NetworkϨΠϠͰͷ࠷దԽ (HTTP/2) • Ajax௨৴ͱ෦ϨϯμϦϯά (SPA) 41"Λجຊͱͯ͠ΑΓ(6*ΞϓϦέʔ
γϣϯͱͯ͠ͷଆ໘͕ڧ͘ͳͬͨɻ )551Λجຊͱͯ͠ΑΓωοτϫʔΫ ϨΠϠͰͷ࠷దԽ͕ਐΉΑ͏ʹͳͬͨ
Web Performance ~2016 • Network Optimization • HTTP/2 • Single
Page Application • Partial Rendering • Ajax
Web Performance Tools ~2016 • Lighthouse • Real User Monitoring
• Navigation Timing • Resource Timing
Web Performance Tools ~2016 • Lighthouse • Real User Monitoring
• Navigation Timing • Resource Timing -JHIUIPVTF ύϑΥʔϚϯεͪΖΜͷ͜ͱɺϕετϓϥΫςΟεʹΘΕ ΔςΫχοΫ͕ೖͬͯΔ͔Ͳ͏͔ɺϖʔδશମͷධՁΛ Ͱදࣔͯ͘͠ΕΔ
Web Performance Tools ~2016 • Lighthouse • Real User Monitoring
• Navigation Timing • Resource Timing -JHIUIPVTF ύϑΥʔϚϯεͪΖΜͷ͜ͱɺϕετϓϥΫςΟεʹΘΕ ΔςΫχοΫ͕ೖͬͯΔ͔Ͳ͏͔ɺϖʔδશମͷධՁΛ Ͱදࣔͯ͘͠ΕΔ 3FBM6TFS.POJUPSJOH ࣮ࡍͷϢʔβʔମݧΛԽͯ͠ܭଌ͢Δɻ 4QFFE$VSWF /FX3FMJD#SPXTFS 6Q5SFOET
Web Performance Tools ~2016 • Lighthouse • Real User Monitoring
• Navigation Timing • Resource Timing -JHIUIPVTF ύϑΥʔϚϯεͪΖΜͷ͜ͱɺϕετϓϥΫςΟεʹΘΕ ΔςΫχοΫ͕ೖͬͯΔ͔Ͳ͏͔ɺϖʔδશମͷධՁΛ Ͱදࣔͯ͘͠ΕΔ 3FBM6TFS.POJUPSJOH ࣮ࡍͷϢʔβʔମݧΛԽͯ͠ܭଌ͢Δɻ 4QFFE$VSWF /FX3FMJD#SPXTFS 6Q5SFOET 9͔ΒͷมԽ ΑΓύϑΥʔϚϯεͷඨ͕ϦΞϧͳϢʔβʔΛରͱ͢ΔΑ͏ ʹͳͬͨɻϖʔδϩʔυͷ͚࣌ؒͩͰͳ͘ɺΞϓϦέʔγϣϯ ͱͯ͠ͷશମͷ࣌ؒΛߟྀ͢ΔΑ͏ʹͳͬͨɻ
Web Performance Tools ~2016 • Lighthouse • Real User Monitoring
• Navigation Timing • Resource Timing -JHIUIPVTF ύϑΥʔϚϯεͪΖΜͷ͜ͱɺϕετϓϥΫςΟεʹΘΕ ΔςΫχοΫ͕ೖͬͯΔ͔Ͳ͏͔ɺϖʔδશମͷධՁΛ Ͱදࣔͯ͘͠ΕΔ 3FBM6TFS.POJUPSJOH ࣮ࡍͷϢʔβʔମݧΛԽͯ͠ܭଌ͢Δɻ 4QFFE$VSWF /FX3FMJD#SPXTFS 6Q5SFOET 9͔ΒͷมԽ ΑΓύϑΥʔϚϯεͷඨ͕ϦΞϧͳϢʔβʔΛରͱ͢ΔΑ͏ ʹͳͬͨɻϖʔδϩʔυͷ͚࣌ؒͩͰͳ͘ɺΞϓϦέʔγϣϯ ͱͯ͠ͷશମͷ࣌ؒΛߟྀ͢ΔΑ͏ʹͳͬͨɻ ඞવతʹΔ͜ͱ͕ܾ·ͬͯ͘Δ
Web Performance ~2016 • Δ͜ͱ • ॳճͷϖʔδΞΫηε͚ͩ͡Όͳ͘ɺͦͷ ޙͷૢ࡞࠷దԽ͢Δ • ϨΠςϯγΛΔ
ॳճͷϖʔδΞΫηε͚ͩ͡Όͳ ͘ɺͦͷޙͷૢ࡞࠷దԽ͢Δ
ॳճͷϖʔδΞΫηε͚ͩ͡Όͳ ͘ɺͦͷޙͷૢ࡞࠷దԽ͢Δ 9Ͱ+40/Ͱͳ͘)5.-ͰΓ औΓ͍ͯͨ͠ɺશ෦ͷϖʔδΛຖճϨ ϯμϦϯά͢ΔͨΊɺແବ͕ଟ͍ɻ
ॳճͷϖʔδΞΫηε͚ͩ͡Όͳ ͘ɺͦͷޙͷૢ࡞࠷దԽ͢Δ 4JOHMF1BHF"QQMJDBUJPOʹ͢Δ
Single Page Application • Ajax ௨৴Λجຊͱͯ͠෦ϨϯμϦϯάΛ͢ Δ͜ͱͰߴԽ͢Δํ๏
Single Page Application • Ajax ௨৴Λجຊͱͯ͠෦ϨϯμϦϯάΛ͢ Δ͜ͱͰߴԽ͢Δํ๏ DMJDL
Single Page Application • Ajax ௨৴Λجຊͱͯ͠෦ϨϯμϦϯάΛ͢ Δ͜ͱͰߴԽ͢Δํ๏ DMJDL (&5+40/
Single Page Application • Ajax ௨৴Λجຊͱͯ͠෦ϨϯμϦϯάΛ͢ Δ͜ͱͰߴԽ͢Δํ๏ DMJDL (&5+40/ 1BSUJBM3FOEFS
Single Page Application • Ajax ௨৴Λجຊͱͯ͠෦ϨϯμϦϯάΛ͢ Δ͜ͱͰߴԽ͢Δํ๏ DMJDL (&5+40/ 1BSUJBM3FOEFS
3JDIͳ8FC"QQMJDBUJPOେମ͜ ͏ͳ͖͍ͬͯͯΔɻ
ϨΠςϯγΛΔ • 1ͭͷHTTPଓΛແବʹ͠ͳ͍ • ຖճHTTPଓ͢ΔͷωοτϫʔΫϨΠϠͰݟΔ ͱίετ͕ߴ͍ • 1ͭͷHTTPଓͷதͰϦΫΤετΛଟॏԽ͢Δ • ଓͬ͠ͺͳ͠ʹͳΔ͜ͱͰೖΕΒΕΔ࠷దԽ
͋Δʢޙड़ʣ
ϨΠςϯγΛΔ • 1ͭͷHTTPଓΛແବʹ͠ͳ͍ • ຖճHTTPଓ͢ΔͷωοτϫʔΫϨΠϠͰݟΔ ͱίετ͕ߴ͍ • 1ͭͷHTTPଓͷதͰϦΫΤετΛଟॏԽ͢Δ • ଓͬ͠ͺͳ͠ʹͳΔ͜ͱͰೖΕΒΕΔ࠷దԽ
͋Δʢޙड़ʣ )551
HTTP2 • ଟॏԽ͞ΕͨϦΫΤετΛૹΔ • HTTP/1.1 ࣌ΑΓ1ͭͷωοτϫʔΫଓ Λͬͨ࠷దԽ͕ߦΘΕΔΑ͏ʹɻ • Prioritization, Server
Push, Early Hints ଳҬ෯͕૿͑ͯϨΠςϯγ͕ݮΒͳ ͍ͱࠓޙͷߴԽ͕Ͱ͖ͳ͍
http/1.1 problems
4FSWFS GET /main.js GET /main.css GET /image0.png
4FSWFS #SPXTFSDBOTFOESFRVFTUT POMZ
4FSWFS OFFEUPXBJUUPpOJTIQSFWJPVTSFRVFTU
4FSWFS "OEJGSFRVFTUJTTMPX CSPXTFS DBOVTFPOMZSFRVFTUT
4FSWFS "OEJGSFRVFTUJTTMPX CSPXTFS DBOVTFPOMZSFRVFTUT )FBEPG-JOF#MPDLJOH
http/2 solves HoL Blocking
Multiplexing requests on 1 TCP connection 4FSWFS 5$1$POOFDUJPOCVUNVMUJ SFRVFTUT
Multiplexing requests on 1 TCP connection 4FSWFS *GTPNFSFRVFTUTBSFTMPX #65 XIPMFSFRVFTUTBSFOPUB⒎FDUFE
https://github.com/yosuke-furukawa/early-hints-demo
https://github.com/yosuke-furukawa/early-hints-demo
Summary ~2016 • Bible: • High Performance Browser Networking •
App: • Single Page Application • Performance Techniques: • ॳճͷϖʔδΞΫηε͚ͩ͡Όͳ͘ɺͦͷޙͷૢ࡞࠷దԽ͢Δ • SPA Λ࡞ΓɺϢʔβʔϞχλϦϯά͠ͳ͕Βૢ࡞ͱॲཧΛ ࠷దԽ͢Δ • ϨΠςϯγΛΔ • HTTP/2 Λ͏
2001 2009 2010 2016 2018 8FC"QQT
Web Performance 2016-2018
Performance Bible 2016-2018
Performance Bible 2016-2018
Performance Bible 2016-2018 ύϑΥʔϚϯεจԽ 4FSWJDF8PSLFSΛ͓͏
Performance Bible 2016-2018 • 7 principles of Rich Web Applications
• Guillermo Rauch ࢯఏএ • ༁ • http://yosuke-furukawa.hatenablog.com/entry/2014/11/14/141415
Performance Bible 2016-2018 • 7 principles of Rich Web Applications
• Guillermo Rauch ࢯఏএ • ༁ • http://yosuke-furukawa.hatenablog.com/entry/2014/11/14/141415 4FSWFS3FOEFSFE1BHFTBSFOPU PQUJPOBM
Web Performance 2016 ~ 2018 • ΑΓ GUI ΞϓϦέʔγϣϯͱͯ͠Ϣʔβʔମ ݧΛ্ͤ͞ΔਐԽΛ͍ͯ͠Δ
• ҰํͰɺJavaScriptͷαΠζ͕ͲΜͲΜ্͕ͬ ͍͍ͯͬͯΔɻ • ֤छϦΫΤετ͕૿͑ͯɺॳظදࣔͷ࣌ؒ Ԇͼ͍ͯΔɻ
Service Worker • Service Worker is not optional. • Safari
& Edge is already supported! • Offline & Cache is first class web features.
Service Worker ϦΫΤετΛ4FSWJDF8PSLFSͰड͚औͬ ͯΩϟογϡ͔ΒϨεϙϯεΛฦ͢ ΦϑϥΠϯͷ࣌4FSWJDF8PSLFS͔Βͷ Ωϟογϡ͕ฦΔࣄͰϩʔΧϧͰίϯςϯ π͕ݟΕΔɻ
Service Worker ϦΫΤετΛ4FSWJDF8PSLFSͰड͚औͬ ͯΩϟογϡ͔ΒϨεϙϯεΛฦ͢ ΦϑϥΠϯͷ࣌4FSWJDF8PSLFS͔Βͷ Ωϟογϡ͕ฦΔࣄͰϩʔΧϧͰίϯςϯ π͕ݟΕΔɻ ΩϟογϡΛଟ͘͏ɺ1VTI௨ͳ ͲͰ&OHBHFNFOUΛଟ͘͢Δ
Server Side Rendering • Client Side Ͱ HTML ΛϨϯμϦϯά͢Δ͜ͱ ΛClient
Side RenderingͱݺͿɻͦΕʹର͠ ͯಉ͜͡ͱΛ Server Side Ͱ࣮ࢪ͢Δ͜ͱΛ Server Side Rendering ͱݺͿɻ
Server Side Rendering 4FSWFS 1BHF3FRVFTU $PNQPOFOUT 5FNQMBUFT 'FUDI%BUB %#"1* 3FOEFS)5.-
(FUQBHFQBSUT
Server Side Rendering 4FSWFS 1BHF3FRVFTU $PNQPOFOUT 5FNQMBUFT 'FUDI%BUB %#"1* 3FOEFS)5.-
$MJFOU4JEF 3FOEFSFS $PNQPOFOUT 5FNQMBUFT 3FOEFS)5.-XJUITBNF DMJFOUTFSWFSSFOEFSMPHJD 4FSWFS4JEF 3FOEFSFS (FUQBHFQBSUT
Server Side Rendering 4FSWFS 1BHF3FRVFTU $PNQPOFOUT 5FNQMBUFT 'FUDI%BUB %#"1* 3FOEFS)5.-
$MJFOU4JEF 3FOEFSFS $PNQPOFOUT 5FNQMBUFT 3FOEFS)5.-XJUITBNF DMJFOUTFSWFSSFOEFSMPHJD 4FSWFS4JEF 3FOEFSFS (FUQBHFQBSUT 443Λ͢Δ͜ͱͰॳظදࣔ࣌ؒΛվ ળͭͭ͠ɺ41"ͷྑ͍ॴͲΓΛ͢Δ
First View Performance
ͦͦFirst ViewͱҰޱʹ ݴͬͯछྨ͕͋Δ /BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU
'JSTU.FBOJOHGVM 1BJOU 7JTVBMMZSFBEZ *NBHF 5JNF5P *OUFSBDUJWF +4MPBEFE *NBHF 'VMMZ-PBEFE BMMSFTPVSDFTBSF MPBEFE *NBHF
First View Performance • SSR ʹ͓͚Δ First View ͷվળͱɺ͜ͷ First
Meaningful Paint ·ͰΛࢦ͢ɻ /BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU
First View Performance • First Meaningful PaintҎ߱ͷվળService WorkerHTTP2ͳͲผͳΓํ͕͋Δɻ 'JSTU.FBOJOHGVM 1BJOU
7JTVBMMZSFBEZ *NBHF 5JNF5P *OUFSBDUJWF +4MPBEFE *NBHF 'VMMZ-PBEFE BMMSFTPVSDFTBSF MPBEFE *NBHF
Client Side Rendering ͷΈͰͷಈ͖
Client Side Rendering ͷΈͷ ߹ • First Meaningful Paint ͱ
Time To Interact ͷ λΠϛϯά͕΄ͱΜͲಉ͡ɻ 'JSTU.FBOJOHGVM1BJOU 5JNF5P*OUFSBDUJWF +4MPBEFE 'JSTU$POUFOUGVM 1BJOU Loading..
Client Side Rendering ͷΈͷ ߹ • ݴ͍͑ΔͱɺFirst Contentful Paint͔ΒFirst Meaningful
Paint ·Ͱ͕͘ͳΔɻ 'JSTU.FBOJOHGVM1BJOU 5JNF5P*OUFSBDUJWF +4MPBEFE 'JSTU$POUFOUGVM 1BJOU Loading..
Client Side Rendering ͷΈͷ ߹ • ݴ͍͑ΔͱɺFirst Contentful Paint͔ΒFirst Meaningful
Paint ·Ͱ͕͘ͳΔɻ 'JSTU.FBOJOHGVM1BJOU 5JNF5P*OUFSBDUJWF +4MPBEFE 'JSTU$POUFOUGVM 1BJOU Loading.. Ϣʔβʔݟ͔͑ͯΒૢ࡞͢Δ 'JSTU.FBOJOHGVM1BJOU͕ग़͔ͯΒ*OUFSBDU ͢Δ ͷͰɺ͜ͷ$MJFOU4JEF3FOEFSJOH͚ͩͰ࣌ؒతʹແବ͕ଟ͍ɻ
ͦ͜Ͱ Server Side Rendering
/BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU ࠷ॳ͔ΒσʔλΛຒΊࠐΜͩঢ়ଶͰ)5.-ʹ͢Δ ʢ4FSWFS4JEF3FOEFSJOHʣ
2018·Ͱͷ·ͱΊ
/BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU 4FSWFSͰͷϨεϙϯεվળ %#ΫΤϦνϡʔχϯάωοτϫʔΫվળ
/BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU $SJUJDBM3FOEFSJOH$44Ͱͷௐɺ -PBEJOH*OEJDBUPSʹΑΔͨͤͳ͍
/BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU ॳظσʔλΛGFUDI͢ΔͷͰͳ͘ɺ+40/ͱͯ͠ຒΊࠐΉ ͘͠ɺॳظσʔλΛ)5.-ʹ͢Δ ʢ4FSWFS4JEF3FOEFSJOHʣ
'JSTU.FBOJOHGVM 1BJOU 7JTVBMMZSFBEZ 5JNF5P *OUFSBDUJWF +4MPBEFE 'VMMZ-PBEFE BMMSFTPVSDFTBSF MPBEFE BCPWFUIFGPME֎ͷը૾ͷԆಡΈࠐΈ
ޮతͳϑΥʔϚοτͷબఆ
'JSTU.FBOJOHGVM 1BJOU 7JTVBMMZSFBEZ 5JNF5P *OUFSBDUJWF +4MPBEFE 'VMMZ-PBEFE BMMSFTPVSDFTBSF MPBEFE +4ͷԆϩʔυɺ+4DPEFTQMJUUJOHͳͲͰͷෆཁͳίʔυ
ͷআ
'JSTU.FBOJOHGVM 1BJOU 7JTVBMMZSFBEZ 5JNF5P *OUFSBDUJWF +4MPBEFE 'VMMZ-PBEFE BMMSFTPVSDFTBSF MPBEFE )5513FTPVSDF)JOUTʹΑΔϩʔυվળ
Summary ~2018 • Bible: • ! WebϖʔδվળΨΠυ • 7 Principles
for Rich Web Application • App: • Progressive Web Application • Performance Techniques: • Service Worker Λ͏ • Server Side Rendering ΛͬͯHTMLΛࣄલʹϨϯμϦϯά͢Δ
2001 2009 2010 2016 2018 'VUVSFʜ
Future Web Performance
ະ։ͷ
Future Web Prediction • ϢʔβʔΞΫγϣϯ͕ى͜Δલʹಈ͖Λ༧ଌ͠ ͯػత࣮ߦ͢Δ • CDNΛͬͱΞΫςΟϒʹ͏
Ϣʔβʔͷಈ͖Λ༧ଌͨ͠ ػతͳઌಡΈ • ϨΠςϯγͷนΛ͑Δ • dev.toϢʔβʔ͕ϚεΦʔόʔͨ͠Βઌಡ Έͯ͠CacheʹೖΕͯΔ • ແݶεΫϩʔϧͰ࣍ͷϦετΛ·Ͱདྷͨ ΒಡΈࠐΉ
Ϣʔβʔͷಈ͖Λ༧ଌͨ͠ ػతͳઌಡΈ • ౷ܭɾػցֶशʹΑΔϢʔβʔͷಈ͖༧ଌ • Personalized͞Εͨಈ͖༧ଌ • ϢʔβʔA͕a.htmlͱb.htmlΛݟΔ͜ͱ͕ଟͦ͏ͳ Β࠷ॳ͔ΒཪͰprefetch or
prerender͓ͯ͘͠ • https://dev.to/
CDNΛͬͱΞΫςΟϒʹ͏ • Cloudinary • ը૾ͷ৴ͷ࠷దԽʹಛԽͨ͠CDN ݉ ը૾ม as a Service
• Fastly & netlify • Instant Cache PurgeAPIͰͷCDNૢ࡞ͳͲɺ ϓϩάϥϚϑϨϯυϦʔͳCDN͕૿͑ͨɻ
CDNΛͬͱΞΫςΟϒʹ͏ • Fastly NetlifyΛॳΊͱͯ͠ Instant Cache Purge Λ࣮͍ͯ͠ΔCDN͕૿͍͑ͯΔ •
CDNʹಈతͳHTMLΛΩϟογϡͤ͞Δߦҝ૿͑ ͦ͏ɻطʹdev.tofastlyΛͬͯΩϟογϡͯ͠Δ • Cache͠ͳ͘ͱɺCDNΛ͏ͱܦ࿏͕࠷దԽ͞Ε ΔͷͰɺܦ࿏࠷దʹΑͬͯߴԽ͞ΕΔ
Future Web Performance ·ͱΊ
Web Performance 2018~ • ͜Ε·Ͱ͖ͬͯͨ͜ͱͨΓલʹͳͬͯ ͍͘ • ͞ΒʹࠩผԽΛ͍ͯ͘͠ඞཁ͕͋Δ • Ϣʔβʔͷಈ͖༧ଌ
• CDNΛͬͱΞΫςΟϒʹ͏
͡Ό͋ΒͲ͏͢Δͷ͔
ࠓޙͷWebͷύϑΥʔϚϯε ʹै͢ΔͨΊʹͲ͏͋Δ ͖͔ɹ
Ͳ͏͢Δ͖͔ • ύϑΥʔϚϯεจԽͰ͋Δ • ύϑΥʔϚϯεܯΛҭͯΑ͏ • ࠓޙͷWebͷಈ͖Λ༧͠Α͏ • Webͷ༷ΛϑΥϩʔ͠Α͏
ύϑΥʔϚϯεܯΛҭͯΑ͏ • ύϑΥʔϚϯεੜ͖ • ܭଌ͍ͯ͠ͳ͍ͱ͙͢ʹऑΔ • ύϑΥʔϚϯεʹහײͳਓΛҭͯΔඞཁ͕͋ Δ
ύϑΥʔϚϯεܯΛҭͯΑ͏ • ύϑΥʔϚϯεͷྼԽཱͳো • ҎԼͷͲͪΒͷຊͰύϑΥʔϚϯεͷΥο νΛ͢Δਓͷॏཁੑʹ͍ͭͯݴٴ͍ͯ͠Δɻ
ࠓޙͷWebͷಈ͖Λ༧ଌ͢Δ • Webͷඪ४Խ༷ʹ৭ʑͳಈ͖͕ଟ͍ • TC39 • WHATWG / W3C •
IETF • ͜ͷ͋ͨΓͷඪ४Խͷಈ͖Λ͓ͬͯ͘ͱະདྷ༧ ʹཱͭ
ࠓޙͷWebͷಈ͖Λ༧ଌ͢Δ • ۩ମతʹͯ͠Δಈ͖ • web packaging • QUIC • etc
(async-dom, binary ast, observable etc)
Ͳ͏͢Δ͖͔ • ύϑΥʔϚϯεจԽͰ͋Δ • ύϑΥʔϚϯεܯΛҭͯΑ͏ • ࠓޙͷWebͷಈ͖Λ༧͠Α͏ • Webͷ༷ΛϑΥϩʔ͠Α͏
Ͳ͏͢Δ͖͔ • ύϑΥʔϚϯεจԽͰ͋Δ • ύϑΥʔϚϯεܯΛҭͯΑ͏ • ࠓޙͷWebͷಈ͖Λ༧͠Α͏ • Webͷ༷ΛϑΥϩʔ͠Α͏ ͓ͦΒ͘͜ͷล֤ࣾରԠ͕ҧ͏ɺ
ΈΜͳͷઓུ͜ͷޙͷΫϩετʔΫ ͰޠΓ߹͏༧ఆ
ύϑΥʔϚϯενΣοΫϦετ • ύϑΥʔϚϯεͷจԽΛҭͯΔ • ύϑΥʔϚϯεܯΛ࡞Ζ͏ • ਖ਼͍͠ܭଌϝτϦοΫεΛऔΔ • Webඪ४ԽΛϑΥϩʔ͢ΔਓΛ࡞Δ •
ݱ࣮తͳύϑΥʔϚϯεΰʔϧΛ࡞Δ • RAIL • ύϑΥʔϚϯεͷϕʔεϥΠϯΛ࡞ΔʢԼճͬͨΒ ܯࠂ͢Δʣ • ༧ࢉʹԠͯ͡CDNͷར༻ݕ౼͢Δ • ॳظදࣔߴԽ • JS/CSS/assetͷbundleͯ͠Δ͔Ͳ͏͔ • assetదͳѹॖΛͯ͠Δ͔ʁ gzip, brotli, zopfli • imageదͳϑΥʔϚοτΛͯ͠Δ͔ʁ jpg, gif, png, webp • ϨϯμϦϯάߴԽ • SSRͷར༻Λݕ౼͢Δ • Code Splitߦ͏ • ϨΠςϯγΛΔ • HTTP2Λ͏ • SPAʹ͢Δ • Service Workerͷར༻Λݕ౼͢Δ
Ͳ͏͢Δ͖͔ • ύϑΥʔϚϯεจԽͰ͋Δ • ύϑΥʔϚϯεܯΛҭͯΑ͏ • ࠓޙͷWebͷಈ͖Λ༧͠Α͏ • Webͷ༷ΛϑΥϩʔ͠Α͏ 8FCͷ໘ന͍ॴ
ऴΘΓ͕ݟ͑ͳ͍ॴ
Enjoy, web performance
Thank you
Reference • High Performance Web Sites https://www.amazon.co.jp/dp/B0028N4WHY/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1 • High Performance
Browser Networking https://hpbn.co/ • WebϖʔδվળΨΠυ https://www.amazon.co.jp/ Web%E3%83%9A%E3%83%BC%E3%82%B8%E9%80%9F%E5%BA%A6%E6%94%B9%E5%96%84%E3%82%A C%E3%82%A4%E3%83%89- %E4%BD%BF%E3%81%84%E3%82%84%E3%81%99%E3%81%95%E3%81%AF%E3%80%8C%E9%80%9F%E 3%81%95%E3%80%8D%E3%81%8B%E3%82%89%E5%A7%8B%E3%81%BE%E3%82%8B-WEB-PRESS-plus/ dp/477419400X • 7 Principles of Rich Web Application https://rauchg.com/2014/7-principles-of-rich-web-applications • dev.to • https://github.com/yosuke-furukawa/early-hints-demo • ύϑΥʔϚϯε্ͷͨΊͷσβΠϯઃܭ https://www.amazon.co.jp/ %E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9%E5%90%91%E 4%B8%8A%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3% 83%B3%E8%A8%AD%E8%A8%88-Lara-Callender-Hogan/dp/4873117550