20181017_spa_ssr.pdf

Transcript

1. 41"Ͱ443͢Δ 
2. 41"ͱ͸ԿͷུশͰ͠ΐ͏͔
   
3. 41"ͱ͸ԿͷུশͰ͠ΐ͏͔ 
 㱺4JOHMF
   1BHF
   "QQMJDBUJPO
   
4. 443ͱ͸ԿͷུশͰ͠ΐ͏͔
   
5. 443ͱ͸ԿͷུশͰ͠ΐ͏͔ 
 㱺4FSWFS
   4JEF
   3FOEFSJOH
   
6. ͱ͍͏༁Ͱࠓ೔ͷςʔϚ͸
   ʮ4JOHMF
   1BHF
   "QQMJDBUJPOͰ
 4FSWFS
   4JEF
   3FOEFSJOH͢Δʯ
   Ͱ͢
   
7. ࠓ೔ͷΰʔϧ w ϑϩϯτΤϯυͷจ຺Ͱʮ443ʯͱݴΘΕͨ࣌ʹ
 ʮ͋͊͋Εͷ͜ͱͶʯͱࢥ͑ΔΑ͏ʹͳΔ
   w ͳͥ41"Ͱ443Λ͢Δͷ͔ཧ༝Λཧղ͢Δ
   
8. ໨࣍ w ୈҰ෦
   w 41"ʹ͍ͭͯ
   w ୈೋ෦
   w 443ʹ͍ͭͯ
   
9. ୈҰ෦ɿ41"ʹ͍ͭͯ
   
10. 41"ʹ͍ͭͯ  41"ͱ͸
     41"ͱඇ41"ͷॲཧͷྲྀΕ
     ΫϥΠΞϯταΠυʹ͓͚ΔύϑΥʔϚϯεࢦඪ
     41"·ͱΊ
    
11. 41"ͱ͸
    
12. 41"ͱ͸ w 4JOHMF
    1BHF
    "QQMJDBUJPOͷུ
    w 8FCϖʔδ͸+BWB4DSJQUΛ࢖͏ͱಈతͳ)5.-ͷॻ͖׵͕͑Ͱ ͖Δ
    w ϖʔδભҠ΋ؚΊ)5.-ͷߏஙΛશͯ+BWB4DSJQUͰߦ͏͜ͱͰ 69Λ޲্ͤ͞Δ
    
13. 41"ͱඇ41"ͷॲཧͷྲྀΕ
    
14. ඇ41"ͷॲཧͷྲྀΕ
     w Έͳ͞ΜʹೃછΈਂ͍ํͷύλʔϯ
    w 4QSJOH#PPU
    
    5IZNFMFBG
    
    K2VFSZ
    w 1MBZ'SBNFXPSL
    
    4DBMB5FNQBMBUF
    
    K2VFSZ
15. ඇ41"ͷॲཧͷྲྀΕ
    
16. ඇ41"ͷॲཧͷྲྀΕ
    
17. ඇ41"ͷॲཧͷྲྀΕ
    
18. ඇ41"ͷॲཧͷྲྀΕ
    
19. ඇ41"ͷॲཧͷྲྀΕ
    
20. ඇ41"ͷॲཧͷྲྀΕ
    
21. ඇ41"ͷॲཧͷྲྀΕ w 5IZNFMFBG΍+41ͷΑ͏ͳςϯϓϨʔτΤϯδϯͰ)5.-Λߏங͠
 +BWB4DSJQUͰಈతͳ)5.-ͷॻ͖׵͑Λ࣮ݱ͢Δύλʔϯ
    w ϖʔδભҠ࣌͸αʔόʹΞΫηε͠)5.-Λऔಘ͢Δ
    w ϖʔδ಺Ͱ͸+BWB4DSJQUͰΠϯλϥΫςΟϒͳॲཧΛ࣮ݱ͢Δ
    
22. 41"ͷॲཧͷྲྀΕ
    
23. 41"ͷॲཧͷྲྀΕ
    
24. 41"ͷॲཧͷྲྀΕ
    
25. 41"ͷॲཧͷྲྀΕ
    
26. 41"ͷॲཧͷྲྀΕ
     ※ϔЄό΄ݐ஑΅API΁䌏ͭͼ㳨᭔ᶋݶ๗᭗מΨᤈ͜
27. 41"ͷॲཧͷྲྀΕ w αʔό͔Β͸CPEZ͕ۭͬΆͷ)5.-Λऔಘ͠
 )5.-ͷߏஙΛશͯ+BWB4DSJQUͰߦ͏ύλʔϯ
    w ϖʔδભҠ࣌ͷը໘ͷॻ͖׵͑΋+BWB4DSJQUͰߦ͏
    w ϖʔδ಺ͷಈ࡞͚ͩͰͳ͘ϖʔδભҠ΋ؚΊͯΠϯλϥΫςΟϒ ͳಈ࡞Λ࣮ݱͰ͖Δ
    
28. ΫϥΠΞϯταΠυʹ͓͚ΔύϑΥʔϚϯ εࢦඪ
    
29. ϖʔδ͕දࣔ͞ΕΔ·Ͱͷஈ֊
     https://havelog.ayumusato.com/develop/performance/e744-performance_metrics.html 'JSTU
    1BJOU
 Կ͔͕දࣔ͞Ε࢝Ίͨ࣌ 'JSTU
    $POUFOUGVM
    1BJOU
 ίϯςϯπ͕දࣔ͞Ε࢝Ίͨ࣌ 'JSTU
    .FBOJOHGVM
    1BJOU
    ҙຯͷ͋Δදࣔʹͳͬͨ࣌ 5JNF
    UP
    *OUFSBDUJWF
    ૢ࡞͕Մೳʹͳͬͨ࣌
30. ύϑΥʔϚϯεࢦඪʹ͋ͯ͸Ίͯߟ͑Δ w ඇ41"ͷ৔߹
    w )5.-Λฦ٫͞Εͨ࣌఺Ͱ '$1͕࢝·Γ'.1·Ͱୡ͢Δ
    w ͦͷޙ+BWB4DSJQUͷಡΈࠐΈ ͕׬ྃͨ͠λΠϛϯά͕55*
     'JSTU
    .FBOJOHGVM
    1BJOU
 ҙຯͷ͋Δදࣔʹͳͬͨ࣌ 5JNF
    UP
    *OUFSBDUJWF
    ૢ࡞͕Մೳʹͳͬͨ࣌
31. ύϑΥʔϚϯεࢦඪʹ͋ͯ͸Ίͯߟ͑Δ w 41"ͷ৔߹
    w )5.-͸+BWB4DSJQUͰߏங͢ ΔͷͰ'.1͸+4ͷ࣮ߦ͕׬ ྃͨ͠ޙʹͳͬͯ͠·͏
    w '.1ͱ΄΅ಉ࣌ʹ55*Λܴ͑ Δ
     'JSTU
    .FBOJOHGVM
    1BJOU
 ҙຯͷ͋Δදࣔʹͳͬͨ࣌ 5JNF
    UP
    *OUFSBDUJWF
    ૢ࡞͕Մೳʹͳͬͨ࣌
32. ύϑΥʔϚϯεࢦඪʹ͋ͯ͸Ίͯߟ͑Δ w 41"ͷ৔߹
    w )5.-͸+BWB4DSJQUͰߏங͢ ΔͷͰ'.1͸+4ͷ࣮ߦ͕׬ ྃͨ͠ޙʹͳͬͯ͠·͏
    w '.1ͱ΄΅ಉ࣌ʹ55*Λܴ͑ Δ
     'JSTU
    .FBOJOHGVM
    1BJOU
 ҙຯͷ͋Δදࣔʹͳͬͨ࣌ 5JNF
    UP
    *OUFSBDUJWF
    ૢ࡞͕Մೳʹͳͬͨ࣌ શϖʔδ෼ͷॲཧΛؚΉͷͰ
 +4ϑΝΠϧͷαΠζ͕େ͖͘ͳΓ͕ͪ
33. ύϑΥʔϚϯεࢦඪʹ͋ͯ͸Ίͯߟ͑Δ w 41"ͷ৔߹
    w )5.-͸+BWB4DSJQUͰߏங͢ ΔͷͰ'.1͸+4ͷ࣮ߦ͕׬ ྃͨ͠ޙʹͳͬͯ͠·͏
    w '.1ͱ΄΅ಉ࣌ʹ55*Λܴ͑ Δ
     'JSTU
    .FBOJOHGVM
    1BJOU
 ҙຯͷ͋Δදࣔʹͳͬͨ࣌ 5JNF
    UP
    *OUFSBDUJWF
    ૢ࡞͕Մೳʹͳͬͨ࣌ ͜ͷ௨৴͕஗͍ͱ'.1·Ͱͷ
    ଴͕ͪ࣌ؒ௕͘ͳͬͯ͠·͏
34. 41"·ͱΊ
    
35. ඇ41"ͱ41"ͷಈ͖Λൺ΂ͯ w ϖʔδભҠΛΠϯλϥΫςΟϒʹ࣮ߦͰ͖Δͱ͍͏఺Ͱ41"ͷํ ͕ύϑΥʔϚϯε্͸ѹ౗తʹ༏Ґ
    w ॳظϖʔδͷදࣔʹؔͯ͠͸'JSTU
    .FBOJOHGVM
    1BJOU·Ͱͷ଎͞ ͱ͍͏ҙຯͰඇ41"ͷํ͕༏Ґ
    w 㱺41"͸଎͍͚ͲॳظදࣔͷύϑΥʔϚϯε͕՝୊
    
36. ୈೋ෦ɿ443ʹ͍ͭͯ
    
37. 443ʹ͍ͭͯ  443ͱ͸
     443ͷ࢓૊Έ
     443ͷॲཧͷྲྀΕ
     443ͷϝϦοτɾσϝϦοτ
     ؔ࿈ٕज़
     443·ͱΊ
    
38. 443ͱ͸
    
39. 443ͱ͸ w 4FSWFS
    4JEF
    3FOEFSJOHͷུ
    w 41"ͷॳظදࣔͷύϑΥʔϚϯε޲্ςΫχοΫͷҰͭ
    w ॳظද͚ࣔͩαʔόαΠυͰϨϯμϦϯά͠ɺ
 ͦͷޙ͸ΫϥΠΞϯταΠυͰϨϯμϦϯά͢Δͱ͍͏΋ͷ
 㱺41"ͱඇ41"ͷ͍͍ͱ͜ͲΓʂ
    
40. 443ͷ࢓૊Έ
    
41. 443ͷ࢓૊Έ w 41"ͷॲཧ
    w )5.-͸+BWB4DSJQUʹΑͬͯߏ ங͞Ε͍ͯΔ
    
42. 443ͷ࢓૊Έ w 41"ͷॲཧ
    w )5.-͸+BWB4DSJQUʹΑͬͯߏ ங͞Ε͍ͯΔ
 㱺
    +BWB4DSJQU͸αʔόαΠυͰ ΋ಈ͘ /PEFKT
    
43. 443ͷ࢓૊Έ w 41"ͷॲཧ
    w )5.-͸+BWB4DSJQUʹΑͬͯߏ ங͞Ε͍ͯΔ
 㱺
    +BWB4DSJQU͸αʔόαΠυ Ͱ΋ಈ͘ /PEFKT 
 㱺
    αʔόαΠυͰ+4Λಈ͔͠ ͯ)5.-Λߏஙͯ͠͠·͑ʂ
    
44. 443ͷॲཧͷྲྀΕ
    
45. 443ͷॲཧͷྲྀΕ
    
46. 443ͷॲཧͷྲྀΕ
    
47. 443ͷॲཧͷྲྀΕ
     'JSTU
    .FBOJOHGVM
    1BJOU
 ҙຯͷ͋Δදࣔʹͳͬͨ࣌
48. 443ͷॲཧͷྲྀΕ
    
49. 443ͷॲཧͷྲྀΕ
     5JNF
    UP
    *OUFSBDUJWF
    ૢ࡞͕Մೳʹͳͬͨ࣌
50. 443ͷϝϦοτɾσϝϦοτ
    
51. 443ͷϝϦοτɾσϝϦοτ w ϝϦοτ
    w 'JSTU
    .FBOJOHGVM
    1BJOU·Ͱͷ࣌ؒΛ୹ॖͰ͖Δ
    w σϝϦοτ
    w ΞʔΩςΫνϟ͕ෳࡶԽ͠։ൃɾϝϯςͷෛՙ্͕͕Δ
    
52. ؔ࿈ٕज़
    
53. 443࣮ݱͷͨΊͷϥΠϒϥϦ w 41"ϑϨʔϜϫʔΫ͝ͱʹϥΠϒϥϦ͕͋Δ
    w 3FBDU͸/FYUKT
    w 7VF͸/VYUKT
    w "OHVMBS͸"OHVMBS
    6OJWFSTBM
    
54. 443͚ͩ΍Ε͹ྑ͍༁͡Όͳ͍ w 443͸ύϑΥʔϚϯεվળͷखஈͷҰͭʹ͗͢ͳ͍
    w ଞʹ΋৭Μͳٕज़ཁૉ͕͋ΔͷͰΩʔϫʔυΛฒ΂͓ͯ͘
    w 4FSWJDF8PSLFS
    w -B[Z-PBEJOH
    w $PEF4QMJUJOH
    w IUUQ
    
55. 443·ͱΊ
    
56. 443·ͱΊ w ΞʔΩςΫνϟ͕ෳࡶʹͳΔ͚ͲύϑΥʔϚϯεʹͩ͜ΘΔͨΊ ʹ͸ඞཁͳςΫχοΫ
    w ύϑΥʔϚϯε޲্ͷͨΊͷςΫχοΫͷҰͭʹա͗ͳ͍ͷͰଞ ͷςΫχοΫ΋ซ༻͍ͯ͘͠ͱΑΓྑ͍
    
57. %FNP
    
58. σϞ w ಉ͡ػೳͰ443͋Γͱͳ͠ͷ41"Λ༻ҙ
    w ॳظදࣔͷ଎౓Λൺֱ͢Δ
    w ܭଌ͸-JHIUIPVTFΛ࢖͏
     https://developers.google.com/web/tools/lighthouse/?hl=ja
59. σϞ w -JHIUIPVTFͷܭଌ݁Ռ
     SSR΀ͭ SSR͘Π 'JSTU
    .FBOJOHGVM
    1BJOU ͕վળ͍ͯ͠Δʂ
60. ·ͱΊ w 41"͸ϖʔδભҠ͠ͳ͍ͷͰಈ࡞͕଎͍
    w ͨͩ͠ॳظදࣔ͸஗͍
    w 443Λ࢖͏ͱॳظදࣔͷ஗͞ΛվળͰ͖Δ
    
61. ࠓ೔ͷΰʔϧͷ͓͞Β͍ w 443ͬͯԿ
    w 41"ͰॳظදࣔͷύϑΥʔϚϯεΛ޲্ͤ͞ΔςΫχοΫ
    w ͳͥ41"Ͱ443͢Δͷʁ
    w 41"͸ॳظදࣔͷύϑΥʔϚϯε͕՝୊͔ͩΒ
    
62. ͋Γ͕ͱ͏͍͟͝·ͨ͠