Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
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
More Decks by Shunya Shishido
See All by Shunya Shishido
sisidovski
23
13k
sisidovski
0
180
sisidovski
0
270
sisidovski
41
19k
sisidovski
18
6.7k
sisidovski
0
190
Other Decks in Technology
See All in Technology
karabish
0
360
lancers_pr
4
1.5k
kanaugust
PRO
0
160
minma
0
190
benzookapi
1
430
torisoup
11
6.1k
futo23
1
340
iwashi86
54
24k
tenjuu99
1
270
harshbothra
0
140
simosako
1
140
dena_tech
11
3.1k
Featured
See All Featured
trishagee
24
2.5k
lynnandtonic
272
16k
ufuk
56
5.4k
eileencodes
113
25k
wjessup
339
16k
bkeepers
408
58k
garrettdimon
288
110k
tammielis
237
23k
matthewcrist
73
7.5k
hursman
106
9.3k
keithpitt
401
20k
lara
15
2.7k
Transcript
1 ܦిࢠ൛ αΠτߴԽͱ18"ରԠ ຊܦࡁ৽ฉࣾɹ࣡ށढ़࠸
2 ໊લ ࣡ށढ़࠸ 4IVOZB4IJTIJEP !TJTJEPWTLJ
ॴଐ ຊܦࡁ৽ฉࣾͷιϑτΣΞΤϯδχΞ SOJLLFJDPNͷϑϩϯτΤϯυɺόοΫΤϯυɺ $%/ 'BTUMZ ͷ৴पΓ୲ ܦྺ લ৬ɿυϫϯΰ ʙɿຊܦࡁ৽ฉࣾ "CPVU.F
3 ৽͍͠ܦిࢠ൛ͷ αΠτߴԽͷϓϥΫςΟε 18"ͷରԠ ΞδΣϯμ
4 ܦిࢠ൛ͱ ݄ץ ຖຊͷهࣄΛ৴ ༗ྉձһສਓҎ্ɺແྉձһສਓҎ্ ݄ؒԯΞΫηεҎ্
ࢴɾిࢠ൛ͷ߹ܭͰશੈքͰສ෦Λൃߦ͢Δ ੈք࠷େͷܦࡁϝσΟΞ
5 /FYU/JLLFJ
6 SOJLLFJDPN͔Β৴ ݄ͷϦϦʔεͰϞόΠϧ൛ͱҰ෦1$αΠτΛஔ͖͑ ܦిࢠ൛ϦχϡʔΞϧϓϩδΣΫτ /FYU/JLLFJ
7 දࣔͷ্ چϞόΠϧ൛ͱൺֱͯ͠ഒͷୡʢ4QFFE*OEFYʣ
8 ڹ͕͋ͬͨ IUUQTOPUFNVLPOQZVOOGECG
9 ͳͥϦχϡʔΞϧ͕ඞཁ͔ͩͬͨ
10 ϞόΠϧͰͷΞΫηε૿Ճ 1$൛ͱ41൛ΛͦΕͧΕ։ൃ͢Δ Խਪਐ ʹങऩͨ͠ӳ'JOBODJBM5JNFT͔ࣾΒͷֶͼ ϦχϡʔΞϧͷഎܠ
11 #BDLCPOFKTͱK2VFSZΛϕʔεʹॻ͔Εͨ41" Ͱɺอकੑʹ͕͋ͬͨ ॳճද͕͍ࣔ େྔͷαϒϦιʔεಡΈࠐΈ ංେԽͨ͠KTϑΝΠϧ
443ඇରԠ ݹ͍"1*αʔόΛར༻͓ͯ͠Γڞ௨Խ͔ͨͬͨ͠ چϞόΠϧ൛ͷ՝
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 '5Ͱͷςετ݁Ռ IUUQFOHJOFSPPNGUDPNBGBTUFSGUDPN
14 ,1* νʔϜͰεϐʔυΛ࠷ॏཁ,1*ʹ 6*69վળ ϨεϙϯγϒରԠ
18"Խ 'BTUMZNJDSPTFSWJDFTΞʔΩςΫνϟͷ࠾༻ ͪΖΜ /FYU'5ˠ/FYU/JLLFJ
15 SOJLLFJDPNͷ෦ߏ͜Μͳײ͡ 'BTUMZ &MBTUJD#FBOTUBML /PEFKTPOUIFDPOUBJOFS αʔϏεͷҎ্ ΞʔΩςΫνϟ֎؍ 5PQ1BHF "SUJDMF1BHF 4FBSDI1BHF
16 αΠτߴԽͷϓϥΫςΟε
17 $%/ &EHF4JEF ͰͷߴԽ 'BTUMZͰಈతͳίϯςϯπ$%/ ܦ༝Ͱ৴ 7$-ͰॊೈʹΩϟογϡΛ੍ޚ
)551ͷར༻ αϒϦιʔεͷѹॖ ը૾৴ IUUQTXXXGBTUMZDPNQSPEVDUTFEHFTELNPEFSOOFUXPSLEFTJHO
18 'BTUMZͰͷΩϟογϡઓུ $BDIF$POUSPM 4VSSPHBUF$POUSPMͷઃఆ ೝূDPPLJFͷEFDPEF 'FBUVSF'MBHTͷਖ਼نԽʢ1SFqJHIUʣ
ৄ͘͠IUUQTTQFBLFSEFDLDPNSZZTENJDSPTFSWJDFTPOGBTUMZ
19 $BDIF)JU3BUJP Ωϟογϡώοτ
20 )551 'BTUMZͷػೳΛར༻ )551ͷԸܙ ετϦʔϜʹΑΔ௨৴ͷߴԽ ϦΫΤετฒྻ૿Ճ
)1"$,ѹॖʹΑΓϔομαΠζݮ 4FSWFS1VTI DSJUJDBMQBUIʹରͯ͠ద༻ 'BTUMZ#MBDL#PY IUUQFOHJOFSPPNGUDPNXIBUIBQQFOTXIFOZPVWJTJUGUDPN
21 Ϧιʔεͷѹॖ ѹॖͰ͖Δͷશͯѹॖ͢Δ )0ʹΑΔΦϯβϑϥΠѹॖՄೳ 'BTUMZʹѹॖΛͤΔ͜ͱͰɺΦϦδϯͷ$16ϦιʔεΛઅͰ͖Δ
22 ը૾৴ 4BB4ͷ*NHJYΛར༻ ͓͢͢Ί Ͱ࡞͍ͬͯͨը૾มαʔό͔Β Γ͑
)551"1*ͰإೝࣝɺΫϩοϓɺϦαΠ ζ͕ॊೈʹͰ͖Δ XFCQ KQH QOHʹରԠ͠ΫϥΠΞϯτ ʹ࠷దͳը૾Λฦ٫͢Δ Ωϟογϡ੍ޚ
23 &EHF4JEFͰͷ࠷దԽͷ݁Ռ ߴ͍Ωϟογϡώοτ ߴɺΩϟογϡώοτͨ͠߹VOEFSNT ΦϦδϯαʔόͷϦιʔεݮ
24 ϑϩϯτΤϯυͷ࠷దԽ
25 ߴԽͷͨΊʹϑϩϯτΤϯυͰ͖͢͜ͱ Ξηοτͷ࠶ར༻ αϒϦιʔεͷඇಉظಡΈࠐΈ 3FTQPOTJWF*NBHF MB[ZMPBEJOH
3FTPVSDF)JOUT
26 $BDIF$POUSPM ੩తϑΝΠϧʹηΦϦʔ௨ΓIBTITUSJOH NBYBHFΛ͚ͭΔ NBYBHFͷظؒαʔόͷ͍߹ΘͤΛߦΘͳ͍ Ϧϩʔυͷରࡦͱͯ͠JNNVUBCMFΛ͚ͭΔ 3FRVFTU63-SFTPVSDFTIVCTDSJQUCVOEMFSFWFGKT
$BDIF$POUSPMNBYBHF JNNVUBCMF
27 6*ίϯϙʔωϯτͷ࡞ /*,,&*6*ͱ͍͏ίϯϙʔωϯτ ࢦͷελΠϧΨΠυΛ࡞ ར ϚʔΫΞοϓͷ։ൃίετݮ
ελΠϧఆٛͷॏෳݮ 6*ͷҰ؏ੑ୲อ ߴ͍ΞΫηγϏϦςΟ
28 3FTPVSDF)JOUT ࣍ʹඞཁͱͳΔϦιʔεͷػతͳ औಘΛߦ͏ EOTQSFGFUDI QSFDPOOFDU
QSFGFUDI QSFSFOEFS SOJLLFJDPNͰEOTQSFGFUDI QSFGFUDI QSFSFOEFSΛར༻ ࠂͳͲαʔυύʔςΟυϝΠϯ EOTQSFGFUDI IUUQTXXXXPSH53SFTPVSDFIJOUT
29 ே༦ץϖʔδͰͷQSFGFUDI ܦిࢠ൛Ͱͦͷͷே༦ץΛͬ͟ͱӾཡ͢ΔϢʔβ͕ଟ͍ ࣍ͷ໘Λࣄલऔಘ͓ͯ͘͜͠ͱͰϨεϙϯε࣌ؒΛॖ͢Δ
30 ಈతʹQSFSFOEFSΛઃఆ͢Δ ϚεΧʔιϧ͕ΞΠίϯʹ ͬͨΒMJOLλάΛૠೖ ݕࡧը໘ͷભҠΛߴԽ QSFSFOEFS$ISPNF͔Β ແޮԽ͞Ε͍ͯΔ
IUUQTHPPHMO);X IUUQTHPPHM&+K5$.
31 ࣮ࡍ͑Δͷʁ ϒϥβͷରԠঢ়گ·ͪ·ͪ 4BGBSJ*&Λߟྀ͢Δ߹EOT QSFGFUDI͔͠ݱঢ়બࢶ͕ͳ͍ ϒϥβ͕ະαϙʔτͰಈ࡞ʹӨ ڹΛ༩͑ͳ͍ͷͰ࠾༻͍͢͠
ϢʔεέʔεΛߟྀ͢Δ͜ͱ
32 SOJLLFJDPN7BOJMMB+4 8FCඪ४ͷීٴɺ1PMZpMMͷར༻ ঢ়ଶཧͷ͠͞ +4ϑϨʔϜϫʔΫͷϥΠϑαΠΫϧ
ංେԽ͢ΔϑΝΠϧαΠζ 443ɺ55* 5JNF5P*OUFSBDUJWF ͷ 'SBNFXPSL 41" Ұ෦ϖʔδΛআ͖ඇ41"Ͱ࣮
33 ύϑΥʔϚϯεͷϞχλϦϯά
34 چϓϩμΫτڝ߹αʔϏεͱൺֱ ຖܭଌ͢Δ͢Δ͜ͱͰϦϦʔε࣌ͷӨڹ͕Θ͔Δ ݪҼΛಛఆ͘͢͠ͳΔ 4QFFEDVSWFΛར༻
35 ϘτϧωοΫͷௐࠪ ֤ύϑΥʔϚϯεࢦඪΛՄࢹԽͰ͖Δ $16༻ίϯςϯπͷαΠζ 8FC1BHF5FTU%FW5PPMTUJNFMJOFύωϧͰͷ ݁ՌӾཡɺ)"3ͷμϯϩʔυ
36 1FSGPSNBODF#VEHFUͷνΣοΫ ᮢΛ͑ͨΒΞϥʔτ 4MBDLͰ௨
37 มߋޙͷ$44+4ϑΝΠϧαΠζΛ13্ʹ௨ $*ͰϏϧυ͞Εͨ+4$44αΠζΛ1VMM3FRVFTUʹ௨ ࣗͷมߋ͕ϑΝΠϧαΠζʹͲ͏Өڹ͢Δͷ͔ࣄલʹ͔Δ
38 1VTI$BDIFͷΩϟογϡपΓ࠷దԽ $PEF4QMJUUJOH %0.͕ෳࡶʹͳΓ͗͢ 1FSGPSNBODF#VEHFUͷج४͕ෆ໌ྎ
36.Λͬͨܭଌ ύϑΥʔϚϯεɾϞχλϦϯάͷ՝
39 18"
40 18" 1SPHSFTTJWF8FC"QQT 3FMJBCMF ωοτϫʔΫঢ়گʹґଘ͠ͳ͍ 'BTU
ϢʔβΞΫγϣϯͷԠ ϖʔδϩʔυͷ &OHBHJOH ϓογϡ௨ ϗʔϜʹՃ ")4 ৄࡉνΣοΫϦετΛIUUQTEFWFMPQFSTHPPHMFDPNXFCQSPHSFTTJWFXFCBQQTDIFDLMJTU
41 18"ʹ4FSWJDF8PSLFS͕ෆՄܽ⚙
42 ॳظSOJLLFJDPNʹ͓͚Δ4FSWJDF8PSLFS ༗ྉձһʹQBZXBMMΛදࣔ ϩάΠϯલͷϖʔδΛΩϟογϡ͍ͯͨ͠ Ωϟογϡͨ͠ϖʔδΛදࣔ͢Δͱ$44ద༻ લͷVOTUZMFEͳϖʔδ͕දࣔ͞ΕΔ هࣄͷߋ৽͕ө͞Εͳ͍
43 όάͩΒ͚
44 Կ͕͍͚ͳ͔ͬͨͷ͔ $*Ͱͷςετ͕ͳ͍ ϦϦʔε͢ΔҎ֎ʹຊ൪ڥ૬Ͱݕূ͢Δखஈ͕ͳ͍
45 Ͳ͏ͬͯ4FSWJDF8PSLFSͷςετΛ͢Δ͔ ղܾࡦ ࣮ࡍʹϒϥβΛ্ཱͪ͛ͯςετ ࣮ߦڥͷϞοΫԽ SOJLLFJDPNͰݱঢ়4FMFOJVNΛͬͨςετΛ$*ʹΈࠐΜͰ͍Δ
IUUQTHJUIVCDPN(PPHMF$ISPNF-BCTTFMFOJVNBTTJTUBOU IUUQTHJUIVCDPN(PPHMF$ISPNF-BCTTXUFTUJOHIFMQFST 50%0'FBUVSF'MBHTΛ*OEFYFE%#ʹಉظͤ͞Δ ίʔυมߋɺ2"ΛΑΓ༰қʹ
46 OHSPLΛͬͨຊ൪ڥͰͷݕূ OHSPLͳͲͷ)5515$1τϯωϧΛͬͯϩʔΧϧڥΛ֎෦ʹެ։ 'BTUMZͷϧʔςΟϯάΛ্ॻ͍ͯTXKTͷ͖ઌΛϩʔΧϧʹมߋ ˞ݱࡏOHSPLͰͳ͘νʔϜϝϯόʔ͕ࣗ࡞ͨ͠πʔϧΛར༻
47 OHSPLΛͬͨຊ൪ڥͰͷݕূ 'BTUMZ্Ͱ)551ϔομͱ$PPLJFΛݕূ ΦʔόʔϥΠυ༻ͷϔομ͕ଘࡏ͍ͯ͠ΕϓϩΩγαʔόʹόοΫ ΤϯυΛಈతʹมߋ͢Δ ϓϩΩγαʔόͰΩϟογϡԚછ͠ͳ͍Α͏ʹ7BSZϔομΛ͚ͭΔ
48 ੩తϑΝΠϧͷΩϟογϡ τοϓϖʔδهࣄϖʔδͷΦϑϥΠϯΞΫηε هࣄͷߋ৽νΣοΫ ใͷϓογϡ௨ ݱࡏͷSOJLLFJDPNʹ͓͚Δ4FSWJDF8PSLFS
49 4FSWJDF8PSLFSʹରͱͳΔϑΝΠϧΛϦετͰอ࣋ GFUDIΠϕϯτΛΩϟϓνϟͯ֘͠ͷϦιʔεͰ͋ΕΩϟογϡ͢Δ Ωϟογϡ͕ଘࡏ͢ΕΩϟογϡΛɺͳ͚ΕωοτϫʔΫϦΫΤετ ੩తϑΝΠϧͷΩϟογϡ
50 ՕॴͰ࣮ࢪ τοϓϖʔδͷΩϟογϡ ࠷৽ͷهࣄҰཡΛࣄલΩϟογϡ ே༦ץϖʔδͱ֤هࣄΛࣄલΩϟογϡ ಈతίϯςϯπͷΩϟογϡ
51 ΦϑϥΠϯͰΞΫηεͰ͖Δ
52 τοϓهࣄɾே༦ץͷࣄલΩϟογϡ ࣄલΩϟογϡͰߴԽɾΦϑϥΠϯͰͷΞΫηεΛ࣮ݱ 4FSWJDF8PSLFSͳ͠ 4FSWJDF8PSLFS͋Γ
53 ࣄલΩϟογϡͬͯσʔλ௨৴ྔ͍͢͝Μ͡Όʜ
54 /FUXPSL*OGPSNBUJPO"1* ௨৴ڥΛऔಘͰ͖Δ"1* ଓͷछྨʢXJp͔DFMMVMBS͔ʣɺճઢʢ( (ʣɺ355ͳͲ͕औ ಘՄೳ େ͖ͳϦιʔεͷμϯϩʔυXJpଓ࣌ͷΈʹݶఆ͍ͯ͠Δ
55 Ϣʔβ͕ϩάΠϯͨ͠ͱ͖ɺඇϩάΠϯ࣌ͷݹ͍Ωϟογϡ͕ͬͯ͠·͏ ༗ྉձһͱͯ͠ϩάΠϯ͍ͯ͠ΔͣͳͷʹQBZXBMM͕දࣔ͞Εͯ͠·͏ ݹ͍Ωϟογϡ͕Γଓ͚Δ Ωϟογϡಉظͷ
56 Ωϟογϡಉظͷ 4FSWJDF8PSLFSͰϩάΠϯϩάΞτ࣌ͷ63-ΛΩϟϓνϟ͢Δ ϩάΠϯલޙͰΩϟογϡআ
57 Ωϟογϡಉظͷ QPTU.FTTBHFΛ͏ GSPOUKT TXKT
58 ݹ͍Ωϟογϡͷআ ΩϟογϡετϨʔδͷ༰ྔσ όΠεґଘ ্ݶ౸ୡ࣌ͷڍಈϒϥβґଘ ʢجຊ-36ʣ ׂͱϦιʔεʹ༨༟͕͋Δ͕ɺ
ෆཁͳΩϟογϡͬ͞͞ͱআ ͨ͠ํ͕͍͍ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTJOTUBOUBOEP⒐JOFXFCTUPSBHFP⒐JOFGPSQXB
59 ݹ͍Ωϟογϡͷআ Ωϟογϡͨ͠63-ͱλΠϜελϯϓΛ*OEFYFE%#ʹอଘ $BDIF4UPSBHFͷϦιʔεͱಉظͤ͞Δ ΩϟογϡՃϦΫΤετͷલॲཧͱͯ͠ಉ࣌ʹҰఆ࣌ؒܦաޙʹআ
60 ݹ͍Ωϟογϡͷআ #BDLHSPVOE4ZODͰ48ʹΩϟογϡཁٻ *OEFYFE%#͔Βݹ͍Ωϟογϡͷআ
61 ϓογϡ௨ ใͷ௨ʹར༻ ʹ ճఔ৴͞ΕΔ ϢʔβͷΤϯήʔδϝϯτ্
62 ϓογϡ௨ αʔό ΫϥΠΞϯτʢݹ͍ํࣜͳͷͰࢀߟʹ͠ͳ͍͜ͱʂʣ
63 ύʔϛογϣϯ৻ॏʹ ѱ͍69Λආ͚Δ ϖʔδΛ։͍ͨॠؒʹύʔϛογϣϯΛ ཁٻ͠ͳ͍ ωΠςΟϒΞϓϦͳ͔ͥͦΕ͕ڐ͞Εͯ ͍Δ͕ʜ
Ϣʔβ͕ٻΊ͍ͯΔՁͷ͋ΔใΛఏڙ ͢Δ IUUQNJ[DIJIBUFOBCMPHDPNFOUSZ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTQVTIOPUJpDBUJPOTQFSNJTTJPOVY IMKB
64 SOJLLFJDPNʹ͓͚Δ18"ରԠͷ՝ ߋ৽ܥॲཧͷΦϑϥΠϯରԠ ݱࡏهࣄͷอଘͳͲ͕ΦϑϥΠϯͰͰ͖ͳ͍ ఆظ࣮ߦ͕Ͱ͖ͳ͍ ேץͷΩϟογϡͳͲ৸͍ͯΔؒʹউखʹ͍ͬͯͯ΄͍͠
ݱঢ়ΞΫηε͕ͳ͍ͱಈ࡞͠ͳ͍࣮ 1FSJPEJD4ZOD͕ݱࡏࡦఆத ϓογϡ௨ ଞͷϢʔεέʔεʹඇରԠʢ͓ؾʹೖΓίϥϜͷ৽ணهࣄͳͲʣ ։෧ͳͲͷܭଌ͕Ͱ͖͍ͯͳ͍ ࣮͕ݹ͍ϓϩτίϧʢHDN@TFOEFS@JEར༻ʣͷ··
65 αΠτߴԽʴ18"ରԠͷ݁Ռ
66 چϞόΠϧ൛ͱͷൺֱʢ-JHIUIPVTFʣ ύϑΥʔϚϯεͷείΞഒҎ্վળ چϞόΠϧ൛ SOJLLFJDPN
67 ݱߦ1$൛ͱͷൺֱʢ8FC1BHF5FTUʣ 4QFFE*OEFYɺ4UBSU3FOEFS͕ʹ XXXOJLLFJDPN ݱߦ1$൛ SOJLLFJDPN
68 ͪͳΈʹ
69 Ѩ෦ͬͱ͍
70 ·ͱΊ ύϑΥʔϚϯε Ωϟογϡઃఆѹॖɺ)551ͳͲʹͭͭରԠ͢Δ ඇಉظಡΈࠐΈࣄલϩʔυΛར༻͢ΔɺΫϦςΟΧϧϨϯμϦϯά ύεΛݮΒ͢
֤ϝτϦΫεܧଓతʹϞχλϦϯά͢Δ 18" 4FSWJDF8PSLFSڧྗɺσόοάςετڥΛඋ͢Δ Ωϟογϡͷಉظɺσʔλ༰ྔΛߟྀ͢Δ ϓογϡ௨దʹ༻͢Δ
71 ༨ஊ ࠓͨ͠ߴԽʹ͍ͭͯઌൃച͞Εͨ ʮʂ8FCϖʔδվળΨΠυʯʹ΄΅ શͯॻ͍ͯ͋Δ ϑϩϯτΤϯυΤϯδχΞͥͻಡ͏
72 ͋Γ͕ͱ͏͍͟͝·ͨ͠