Speaker Deck
Sign in
Sign up
for free
日経電子版 サイト高速化とPWA対応 / nikkei-high-performance-pwa
Shunya Shishido
December 19, 2017
Technology
68
190k
日経電子版 サイト高速化とPWA対応 / nikkei-high-performance-pwa
html5j Webプラットフォーム部 第19回勉強会 W.A.S.M featuring PWA
https://html5j-webplat.connpass.com/event/74013/
Shunya Shishido
December 19, 2017
Tweet
Share
Want more?
sisidovski
23
11k
sisidovski
0
150
sisidovski
0
260
reverentgeek
12
590
rmw
2
300
skipperchong
0
200
carmenhchung
7
390
keathley
7
230
productmarketing
3
320
clairelew
4
610
thoeni
1
180
jcasabona
4
260
Transcript
1
.
1 ܦిࢠ൛ αΠτߴԽͱ18"ରԠ ຊܦࡁ৽ฉࣾɹ࣡ށढ़࠸
2
.
2 ໊લ ࣡ށढ़࠸ 4IVOZB4IJTIJEP !TJTJEPWTLJ
ॴଐ ຊܦࡁ৽ฉࣾͷιϑτΣΞΤϯδχΞ SOJLLFJDPNͷϑϩϯτΤϯυɺόοΫΤϯυɺ $%/ 'BTUMZ ͷ৴पΓ୲ ܦྺ લ৬ɿυϫϯΰ ʙɿຊܦࡁ৽ฉࣾ "CPVU.F
3
.
3 ৽͍͠ܦిࢠ൛ͷ αΠτߴԽͷϓϥΫςΟε 18"ͷରԠ ΞδΣϯμ
4
.
4 ܦిࢠ൛ͱ ݄ץ ຖຊͷهࣄΛ৴ ༗ྉձһສਓҎ্ɺແྉձһສਓҎ্ ݄ؒԯΞΫηεҎ্
ࢴɾిࢠ൛ͷ߹ܭͰશੈքͰສ෦Λൃߦ͢Δ ੈք࠷େͷܦࡁϝσΟΞ
5
.
5 /FYU/JLLFJ
6
.
6 SOJLLFJDPN͔Β৴ ݄ͷϦϦʔεͰϞόΠϧ൛ͱҰ෦1$αΠτΛஔ͖͑ ܦిࢠ൛ϦχϡʔΞϧϓϩδΣΫτ /FYU/JLLFJ
7
.
7 දࣔͷ্ چϞόΠϧ൛ͱൺֱͯ͠ഒͷୡʢ4QFFE*OEFYʣ
8
.
8 ڹ͕͋ͬͨ IUUQTOPUFNVLPOQZVOOGECG
9
.
9 ͳͥϦχϡʔΞϧ͕ඞཁ͔ͩͬͨ
10
.
10 ϞόΠϧͰͷΞΫηε૿Ճ 1$൛ͱ41൛ΛͦΕͧΕ։ൃ͢Δ Խਪਐ ʹങऩͨ͠ӳ'JOBODJBM5JNFT͔ࣾΒͷֶͼ ϦχϡʔΞϧͷഎܠ
11
.
11 #BDLCPOFKTͱK2VFSZΛϕʔεʹॻ͔Εͨ41" Ͱɺอकੑʹ͕͋ͬͨ ॳճද͕͍ࣔ େྔͷαϒϦιʔεಡΈࠐΈ ංେԽͨ͠KTϑΝΠϧ
443ඇରԠ ݹ͍"1*αʔόΛར༻͓ͯ͠Γڞ௨Խ͔ͨͬͨ͠ چϞόΠϧ൛ͷ՝
12
.
12 ܦʹઌߦͯ͠'JOBODJBM5JNFTࣾ8FC൛Λ ϦχϡʔΞϧ αΠτͷεϐʔυେࣄ /FYU'5 IUUQXXXOJFNBOMBCPSHUIFpOBODJBMUJNFTqJQTUIFTXJUDIPOJUTOFXXFCTJUFBGUFSNPOUITPGCFUBUFTUJOHJOUIFPQFO “We’ve run
tests. If you can make the site a second faster, you can drive engagement by 5 percent,” FT chief product and information officer Cait O’Riordan
13
.
13 '5Ͱͷςετ݁Ռ IUUQFOHJOFSPPNGUDPNBGBTUFSGUDPN
14
.
14 ,1* νʔϜͰεϐʔυΛ࠷ॏཁ,1*ʹ 6*69վળ ϨεϙϯγϒରԠ
18"Խ 'BTUMZNJDSPTFSWJDFTΞʔΩςΫνϟͷ࠾༻ ͪΖΜ /FYU'5ˠ/FYU/JLLFJ
15
.
15 SOJLLFJDPNͷ෦ߏ͜Μͳײ͡ 'BTUMZ &MBTUJD#FBOTUBML /PEFKTPOUIFDPOUBJOFS αʔϏεͷҎ্ ΞʔΩςΫνϟ֎؍ 5PQ1BHF "SUJDMF1BHF 4FBSDI1BHF
16
.
16 αΠτߴԽͷϓϥΫςΟε
17
.
17 $%/ &EHF4JEF ͰͷߴԽ 'BTUMZͰಈతͳίϯςϯπ$%/ ܦ༝Ͱ৴ 7$-ͰॊೈʹΩϟογϡΛ੍ޚ
)551ͷར༻ αϒϦιʔεͷѹॖ ը૾৴ IUUQTXXXGBTUMZDPNQSPEVDUTFEHFTELNPEFSOOFUXPSLEFTJHO
18
.
18 'BTUMZͰͷΩϟογϡઓུ $BDIF$POUSPM 4VSSPHBUF$POUSPMͷઃఆ ೝূDPPLJFͷEFDPEF 'FBUVSF'MBHTͷਖ਼نԽʢ1SFqJHIUʣ
ৄ͘͠IUUQTTQFBLFSEFDLDPNSZZTENJDSPTFSWJDFTPOGBTUMZ
19
.
19 $BDIF)JU3BUJP Ωϟογϡώοτ
20
.
20 )551 'BTUMZͷػೳΛར༻ )551ͷԸܙ ετϦʔϜʹΑΔ௨৴ͷߴԽ ϦΫΤετฒྻ૿Ճ
)1"$,ѹॖʹΑΓϔομαΠζݮ 4FSWFS1VTI DSJUJDBMQBUIʹରͯ͠ద༻ 'BTUMZ#MBDL#PY IUUQFOHJOFSPPNGUDPNXIBUIBQQFOTXIFOZPVWJTJUGUDPN
21
.
21 Ϧιʔεͷѹॖ ѹॖͰ͖Δͷશͯѹॖ͢Δ )0ʹΑΔΦϯβϑϥΠѹॖՄೳ 'BTUMZʹѹॖΛͤΔ͜ͱͰɺΦϦδϯͷ$16ϦιʔεΛઅͰ͖Δ
22
.
22 ը૾৴ 4BB4ͷ*NHJYΛར༻ ͓͢͢Ί Ͱ࡞͍ͬͯͨը૾มαʔό͔Β Γ͑
)551"1*ͰإೝࣝɺΫϩοϓɺϦαΠ ζ͕ॊೈʹͰ͖Δ XFCQ KQH QOHʹରԠ͠ΫϥΠΞϯτ ʹ࠷దͳը૾Λฦ٫͢Δ Ωϟογϡ੍ޚ
23
.
23 &EHF4JEFͰͷ࠷దԽͷ݁Ռ ߴ͍Ωϟογϡώοτ ߴɺΩϟογϡώοτͨ͠߹VOEFSNT ΦϦδϯαʔόͷϦιʔεݮ
24
.
24 ϑϩϯτΤϯυͷ࠷దԽ
25
.
25 ߴԽͷͨΊʹϑϩϯτΤϯυͰ͖͢͜ͱ Ξηοτͷ࠶ར༻ αϒϦιʔεͷඇಉظಡΈࠐΈ 3FTQPOTJWF*NBHF MB[ZMPBEJOH
3FTPVSDF)JOUT
26
.
26 $BDIF$POUSPM ੩తϑΝΠϧʹηΦϦʔ௨ΓIBTITUSJOH NBYBHFΛ͚ͭΔ NBYBHFͷظؒαʔόͷ͍߹ΘͤΛߦΘͳ͍ Ϧϩʔυͷରࡦͱͯ͠JNNVUBCMFΛ͚ͭΔ 3FRVFTU63-SFTPVSDFTIVCTDSJQUCVOEMFSFWFGKT
$BDIF$POUSPMNBYBHF JNNVUBCMF
27
.
27 6*ίϯϙʔωϯτͷ࡞ /*,,&*6*ͱ͍͏ίϯϙʔωϯτ ࢦͷελΠϧΨΠυΛ࡞ ར ϚʔΫΞοϓͷ։ൃίετݮ
ελΠϧఆٛͷॏෳݮ 6*ͷҰ؏ੑ୲อ ߴ͍ΞΫηγϏϦςΟ
28
.
28 3FTPVSDF)JOUT ࣍ʹඞཁͱͳΔϦιʔεͷػతͳ औಘΛߦ͏ EOTQSFGFUDI QSFDPOOFDU
QSFGFUDI QSFSFOEFS SOJLLFJDPNͰEOTQSFGFUDI QSFGFUDI QSFSFOEFSΛར༻ ࠂͳͲαʔυύʔςΟυϝΠϯ EOTQSFGFUDI IUUQTXXXXPSH53SFTPVSDFIJOUT
29
.
29 ே༦ץϖʔδͰͷQSFGFUDI ܦిࢠ൛Ͱͦͷͷே༦ץΛͬ͟ͱӾཡ͢ΔϢʔβ͕ଟ͍ ࣍ͷ໘Λࣄલऔಘ͓ͯ͘͜͠ͱͰϨεϙϯε࣌ؒΛॖ͢Δ
30
.
30 ಈతʹQSFSFOEFSΛઃఆ͢Δ ϚεΧʔιϧ͕ΞΠίϯʹ ͬͨΒMJOLλάΛૠೖ ݕࡧը໘ͷભҠΛߴԽ QSFSFOEFS$ISPNF͔Β ແޮԽ͞Ε͍ͯΔ
IUUQTHPPHMO);X IUUQTHPPHM&+K5$.
31
.
31 ࣮ࡍ͑Δͷʁ ϒϥβͷରԠঢ়گ·ͪ·ͪ 4BGBSJ*&Λߟྀ͢Δ߹EOT QSFGFUDI͔͠ݱঢ়બࢶ͕ͳ͍ ϒϥβ͕ະαϙʔτͰಈ࡞ʹӨ ڹΛ༩͑ͳ͍ͷͰ࠾༻͍͢͠
ϢʔεέʔεΛߟྀ͢Δ͜ͱ
32
.
32 SOJLLFJDPN7BOJMMB+4 8FCඪ४ͷීٴɺ1PMZpMMͷར༻ ঢ়ଶཧͷ͠͞ +4ϑϨʔϜϫʔΫͷϥΠϑαΠΫϧ
ංେԽ͢ΔϑΝΠϧαΠζ 443ɺ55* 5JNF5P*OUFSBDUJWF ͷ 'SBNFXPSL 41" Ұ෦ϖʔδΛআ͖ඇ41"Ͱ࣮
33
.
33 ύϑΥʔϚϯεͷϞχλϦϯά
34
.
34 چϓϩμΫτڝ߹αʔϏεͱൺֱ ຖܭଌ͢Δ͢Δ͜ͱͰϦϦʔε࣌ͷӨڹ͕Θ͔Δ ݪҼΛಛఆ͘͢͠ͳΔ 4QFFEDVSWFΛར༻
35
.
35 ϘτϧωοΫͷௐࠪ ֤ύϑΥʔϚϯεࢦඪΛՄࢹԽͰ͖Δ $16༻ίϯςϯπͷαΠζ 8FC1BHF5FTU%FW5PPMTUJNFMJOFύωϧͰͷ ݁ՌӾཡɺ)"3ͷμϯϩʔυ
36
.
36 1FSGPSNBODF#VEHFUͷνΣοΫ ᮢΛ͑ͨΒΞϥʔτ 4MBDLͰ௨
37
.
37 มߋޙͷ$44+4ϑΝΠϧαΠζΛ13্ʹ௨ $*ͰϏϧυ͞Εͨ+4$44αΠζΛ1VMM3FRVFTUʹ௨ ࣗͷมߋ͕ϑΝΠϧαΠζʹͲ͏Өڹ͢Δͷ͔ࣄલʹ͔Δ
38
.
38 1VTI$BDIFͷΩϟογϡपΓ࠷దԽ $PEF4QMJUUJOH %0.͕ෳࡶʹͳΓ͗͢ 1FSGPSNBODF#VEHFUͷج४͕ෆ໌ྎ
36.Λͬͨܭଌ ύϑΥʔϚϯεɾϞχλϦϯάͷ՝
39
.
39 18"
40
.
40 18" 1SPHSFTTJWF8FC"QQT 3FMJBCMF ωοτϫʔΫঢ়گʹґଘ͠ͳ͍ 'BTU
ϢʔβΞΫγϣϯͷԠ ϖʔδϩʔυͷ &OHBHJOH ϓογϡ௨ ϗʔϜʹՃ ")4 ৄࡉνΣοΫϦετΛIUUQTEFWFMPQFSTHPPHMFDPNXFCQSPHSFTTJWFXFCBQQTDIFDLMJTU
41
.
41 18"ʹ4FSWJDF8PSLFS͕ෆՄܽ⚙
42
.
42 ॳظSOJLLFJDPNʹ͓͚Δ4FSWJDF8PSLFS ༗ྉձһʹQBZXBMMΛදࣔ ϩάΠϯલͷϖʔδΛΩϟογϡ͍ͯͨ͠ Ωϟογϡͨ͠ϖʔδΛදࣔ͢Δͱ$44ద༻ લͷVOTUZMFEͳϖʔδ͕දࣔ͞ΕΔ هࣄͷߋ৽͕ө͞Εͳ͍
43
.
43 όάͩΒ͚
44
.
44 Կ͕͍͚ͳ͔ͬͨͷ͔ $*Ͱͷςετ͕ͳ͍ ϦϦʔε͢ΔҎ֎ʹຊ൪ڥ૬Ͱݕূ͢Δखஈ͕ͳ͍
45
.
45 Ͳ͏ͬͯ4FSWJDF8PSLFSͷςετΛ͢Δ͔ ղܾࡦ ࣮ࡍʹϒϥβΛ্ཱͪ͛ͯςετ ࣮ߦڥͷϞοΫԽ SOJLLFJDPNͰݱঢ়4FMFOJVNΛͬͨςετΛ$*ʹΈࠐΜͰ͍Δ
IUUQTHJUIVCDPN(PPHMF$ISPNF-BCTTFMFOJVNBTTJTUBOU IUUQTHJUIVCDPN(PPHMF$ISPNF-BCTTXUFTUJOHIFMQFST 50%0'FBUVSF'MBHTΛ*OEFYFE%#ʹಉظͤ͞Δ ίʔυมߋɺ2"ΛΑΓ༰қʹ
46
.
46 OHSPLΛͬͨຊ൪ڥͰͷݕূ OHSPLͳͲͷ)5515$1τϯωϧΛͬͯϩʔΧϧڥΛ֎෦ʹެ։ 'BTUMZͷϧʔςΟϯάΛ্ॻ͍ͯTXKTͷ͖ઌΛϩʔΧϧʹมߋ ˞ݱࡏOHSPLͰͳ͘νʔϜϝϯόʔ͕ࣗ࡞ͨ͠πʔϧΛར༻
47
.
47 OHSPLΛͬͨຊ൪ڥͰͷݕূ 'BTUMZ্Ͱ)551ϔομͱ$PPLJFΛݕূ ΦʔόʔϥΠυ༻ͷϔομ͕ଘࡏ͍ͯ͠ΕϓϩΩγαʔόʹόοΫ ΤϯυΛಈతʹมߋ͢Δ ϓϩΩγαʔόͰΩϟογϡԚછ͠ͳ͍Α͏ʹ7BSZϔομΛ͚ͭΔ
48
.
48 ੩తϑΝΠϧͷΩϟογϡ τοϓϖʔδهࣄϖʔδͷΦϑϥΠϯΞΫηε هࣄͷߋ৽νΣοΫ ใͷϓογϡ௨ ݱࡏͷSOJLLFJDPNʹ͓͚Δ4FSWJDF8PSLFS
49
.
49 4FSWJDF8PSLFSʹରͱͳΔϑΝΠϧΛϦετͰอ࣋ GFUDIΠϕϯτΛΩϟϓνϟͯ֘͠ͷϦιʔεͰ͋ΕΩϟογϡ͢Δ Ωϟογϡ͕ଘࡏ͢ΕΩϟογϡΛɺͳ͚ΕωοτϫʔΫϦΫΤετ ੩తϑΝΠϧͷΩϟογϡ
50
.
50 ՕॴͰ࣮ࢪ τοϓϖʔδͷΩϟογϡ ࠷৽ͷهࣄҰཡΛࣄલΩϟογϡ ே༦ץϖʔδͱ֤هࣄΛࣄલΩϟογϡ ಈతίϯςϯπͷΩϟογϡ
51
.
51 ΦϑϥΠϯͰΞΫηεͰ͖Δ
52
.
52 τοϓهࣄɾே༦ץͷࣄલΩϟογϡ ࣄલΩϟογϡͰߴԽɾΦϑϥΠϯͰͷΞΫηεΛ࣮ݱ 4FSWJDF8PSLFSͳ͠ 4FSWJDF8PSLFS͋Γ
53
.
53 ࣄલΩϟογϡͬͯσʔλ௨৴ྔ͍͢͝Μ͡Όʜ
54
.
54 /FUXPSL*OGPSNBUJPO"1* ௨৴ڥΛऔಘͰ͖Δ"1* ଓͷछྨʢXJp͔DFMMVMBS͔ʣɺճઢʢ( (ʣɺ355ͳͲ͕औ ಘՄೳ େ͖ͳϦιʔεͷμϯϩʔυXJpଓ࣌ͷΈʹݶఆ͍ͯ͠Δ
55
.
55 Ϣʔβ͕ϩάΠϯͨ͠ͱ͖ɺඇϩάΠϯ࣌ͷݹ͍Ωϟογϡ͕ͬͯ͠·͏ ༗ྉձһͱͯ͠ϩάΠϯ͍ͯ͠ΔͣͳͷʹQBZXBMM͕දࣔ͞Εͯ͠·͏ ݹ͍Ωϟογϡ͕Γଓ͚Δ Ωϟογϡಉظͷ
56
.
56 Ωϟογϡಉظͷ 4FSWJDF8PSLFSͰϩάΠϯϩάΞτ࣌ͷ63-ΛΩϟϓνϟ͢Δ ϩάΠϯલޙͰΩϟογϡআ
57
.
57 Ωϟογϡಉظͷ QPTU.FTTBHFΛ͏ GSPOUKT TXKT
58
.
58 ݹ͍Ωϟογϡͷআ ΩϟογϡετϨʔδͷ༰ྔσ όΠεґଘ ্ݶ౸ୡ࣌ͷڍಈϒϥβґଘ ʢجຊ-36ʣ ׂͱϦιʔεʹ༨༟͕͋Δ͕ɺ
ෆཁͳΩϟογϡͬ͞͞ͱআ ͨ͠ํ͕͍͍ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTJOTUBOUBOEP⒐JOFXFCTUPSBHFP⒐JOFGPSQXB
59
.
59 ݹ͍Ωϟογϡͷআ Ωϟογϡͨ͠63-ͱλΠϜελϯϓΛ*OEFYFE%#ʹอଘ $BDIF4UPSBHFͷϦιʔεͱಉظͤ͞Δ ΩϟογϡՃϦΫΤετͷલॲཧͱͯ͠ಉ࣌ʹҰఆ࣌ؒܦաޙʹআ
60
.
60 ݹ͍Ωϟογϡͷআ #BDLHSPVOE4ZODͰ48ʹΩϟογϡཁٻ *OEFYFE%#͔Βݹ͍Ωϟογϡͷআ
61
.
61 ϓογϡ௨ ใͷ௨ʹར༻ ʹ ճఔ৴͞ΕΔ ϢʔβͷΤϯήʔδϝϯτ্
62
.
62 ϓογϡ௨ αʔό ΫϥΠΞϯτʢݹ͍ํࣜͳͷͰࢀߟʹ͠ͳ͍͜ͱʂʣ
63
.
63 ύʔϛογϣϯ৻ॏʹ ѱ͍69Λආ͚Δ ϖʔδΛ։͍ͨॠؒʹύʔϛογϣϯΛ ཁٻ͠ͳ͍ ωΠςΟϒΞϓϦͳ͔ͥͦΕ͕ڐ͞Εͯ ͍Δ͕ʜ
Ϣʔβ͕ٻΊ͍ͯΔՁͷ͋ΔใΛఏڙ ͢Δ IUUQNJ[DIJIBUFOBCMPHDPNFOUSZ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTQVTIOPUJpDBUJPOTQFSNJTTJPOVY IM KB
64
.
64 SOJLLFJDPNʹ͓͚Δ18"ରԠͷ՝ ߋ৽ܥॲཧͷΦϑϥΠϯରԠ ݱࡏهࣄͷอଘͳͲ͕ΦϑϥΠϯͰͰ͖ͳ͍ ఆظ࣮ߦ͕Ͱ͖ͳ͍ ேץͷΩϟογϡͳͲ৸͍ͯΔؒʹউखʹ͍ͬͯͯ΄͍͠
ݱঢ়ΞΫηε͕ͳ͍ͱಈ࡞͠ͳ͍࣮ 1FSJPEJD4ZOD͕ݱࡏࡦఆத ϓογϡ௨ ଞͷϢʔεέʔεʹඇରԠʢ͓ؾʹೖΓίϥϜͷ৽ணهࣄͳͲʣ ։෧ͳͲͷܭଌ͕Ͱ͖͍ͯͳ͍ ࣮͕ݹ͍ϓϩτίϧʢHDN@TFOEFS@JEར༻ʣͷ··
65
.
65 αΠτߴԽʴ18"ରԠͷ݁Ռ
66
.
66 چϞόΠϧ൛ͱͷൺֱʢ-JHIUIPVTFʣ ύϑΥʔϚϯεͷείΞഒҎ্վળ چϞόΠϧ൛ SOJLLFJDPN
67
.
67 ݱߦ1$൛ͱͷൺֱʢ8FC1BHF5FTUʣ 4QFFE*OEFYɺ4UBSU3FOEFS͕ʹ XXXOJLLFJDPN ݱߦ1$൛ SOJLLFJDPN
68
.
68 ͪͳΈʹ
69
.
69 Ѩ෦ͬͱ͍
70
.
70 ·ͱΊ ύϑΥʔϚϯε Ωϟογϡઃఆѹॖɺ)551ͳͲʹͭͭରԠ͢Δ ඇಉظಡΈࠐΈࣄલϩʔυΛར༻͢ΔɺΫϦςΟΧϧϨϯμϦϯά ύεΛݮΒ͢
֤ϝτϦΫεܧଓతʹϞχλϦϯά͢Δ 18" 4FSWJDF8PSLFSڧྗɺσόοάςετڥΛඋ͢Δ Ωϟογϡͷಉظɺσʔλ༰ྔΛߟྀ͢Δ ϓογϡ௨దʹ༻͢Δ
71
.
71 ༨ஊ ࠓͨ͠ߴԽʹ͍ͭͯઌൃച͞Εͨ ʮʂ8FCϖʔδվળΨΠυʯʹ΄΅ શͯॻ͍ͯ͋Δ ϑϩϯτΤϯυΤϯδχΞͥͻಡ͏
72
.
72 ͋Γ͕ͱ͏͍͟͝·ͨ͠
Shunya Shishido
sisidovski
reverentgeek
rmw
skipperchong
carmenhchung
keathley
productmarketing
clairelew
thoeni
jcasabona
