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
20181017_spa_ssr.pdf
Search
ozaki25
October 17, 2018
Technology
0
26
20181017_spa_ssr.pdf
ozaki25
October 17, 2018
Tweet
Share
More Decks by ozaki25
See All by ozaki25
20210526_a11y.pdf
ozaki25
0
100
20210525_react_next.pdf
ozaki25
0
79
Webフロントエンドはなぜ複雑なのか
ozaki25
1
77
utility first css
ozaki25
0
41
20201225_how_to_learn_technology.pdf
ozaki25
0
110
20201124_blitz.pdf
ozaki25
0
51
20200727_liff_app.pdf
ozaki25
1
540
20200721_web_vitals.pdf
ozaki25
0
56
20200624_web_otp_api.pdf
ozaki25
1
76
Other Decks in Technology
See All in Technology
ユーザーストーリーのレビューを自動化したみたの
bun913
1
340
HEXA OSINT CTF V3 作戦会議
meow_noisy
0
110
2024/4/26 コンピュータ歴史博物館解説告知
toshi_atsumi
0
200
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
100
Oracle Cloud Infrastructure:2024年4月度サービス・アップデート
oracle4engineer
PRO
1
120
TransitGatewayの基礎
toru_kubota
0
230
Postman v10リリース後を振り返る
nagix
0
140
"好き"との生活/Regularly update profile with GitHub Actions
judeeeee
0
150
少数チームで挑む: SwiftUI, TCA, KMPを用いた 新規動画配信アプリ 「ABEMA Live」の開発について
tomu28
0
550
カオナビの利用実績をアウトカムへつなげる旅 / example-of-data-management-startup-in-kaonavi
kaonavi
0
120
NgRx Signal Store
rainerhahnekamp
0
130
インシデントレスポンスのライフサイクルを廻すポイントってなに / Pinpoints of Incidentresponse Lifecycle for Operation
sakaitakeshi
1
310
Featured
See All Featured
Gamification - CAS2011
davidbonilla
76
4.6k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
Designing for humans not robots
tammielis
247
25k
How to Ace a Technical Interview
jacobian
272
22k
Producing Creativity
orderedlist
PRO
336
39k
What’s in a name? Adding method to the madness
productmarketing
PRO
15
2.6k
Atom: Resistance is Futile
akmur
258
25k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
29
6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
220
21k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
15
1.4k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Transcript
41"Ͱ443͢Δ
41"ͱԿͷུশͰ͠ΐ͏͔
41"ͱԿͷུশͰ͠ΐ͏͔ 㱺4JOHMF1BHF"QQMJDBUJPO
443ͱԿͷུশͰ͠ΐ͏͔
443ͱԿͷུশͰ͠ΐ͏͔ 㱺4FSWFS4JEF3FOEFSJOH
ͱ͍͏༁ͰࠓͷςʔϚ ʮ4JOHMF1BHF"QQMJDBUJPOͰ 4FSWFS4JEF3FOEFSJOH͢Δʯ Ͱ͢
ࠓͷΰʔϧ w ϑϩϯτΤϯυͷจ຺Ͱʮ443ʯͱݴΘΕͨ࣌ʹ ʮ͋͊͋Εͷ͜ͱͶʯͱࢥ͑ΔΑ͏ʹͳΔ w ͳͥ41"Ͱ443Λ͢Δͷ͔ཧ༝Λཧղ͢Δ
࣍ w ୈҰ෦ w 41"ʹ͍ͭͯ w ୈೋ෦ w 443ʹ͍ͭͯ
ୈҰ෦ɿ41"ʹ͍ͭͯ
41"ʹ͍ͭͯ 41"ͱ 41"ͱඇ41"ͷॲཧͷྲྀΕ ΫϥΠΞϯταΠυʹ͓͚ΔύϑΥʔϚϯεࢦඪ 41"·ͱΊ
41"ͱ
41"ͱ w 4JOHMF1BHF"QQMJDBUJPOͷུ w 8FCϖʔδ+BWB4DSJQUΛ͏ͱಈతͳ)5.-ͷॻ͖͕͑Ͱ ͖Δ w ϖʔδભҠؚΊ)5.-ͷߏஙΛશͯ+BWB4DSJQUͰߦ͏͜ͱͰ 69Λ্ͤ͞Δ
41"ͱඇ41"ͷॲཧͷྲྀΕ
ඇ41"ͷॲཧͷྲྀΕ w Έͳ͞ΜʹೃછΈਂ͍ํͷύλʔϯ w 4QSJOH#PPU 5IZNFMFBG K2VFSZ w
1MBZ'SBNFXPSL 4DBMB5FNQBMBUF K2VFSZ
ඇ41"ͷॲཧͷྲྀΕ
ඇ41"ͷॲཧͷྲྀΕ
ඇ41"ͷॲཧͷྲྀΕ
ඇ41"ͷॲཧͷྲྀΕ
ඇ41"ͷॲཧͷྲྀΕ
ඇ41"ͷॲཧͷྲྀΕ
ඇ41"ͷॲཧͷྲྀΕ w 5IZNFMFBG+41ͷΑ͏ͳςϯϓϨʔτΤϯδϯͰ)5.-Λߏங͠ +BWB4DSJQUͰಈతͳ)5.-ͷॻ͖͑Λ࣮ݱ͢Δύλʔϯ w ϖʔδભҠ࣌αʔόʹΞΫηε͠)5.-Λऔಘ͢Δ w ϖʔδͰ+BWB4DSJQUͰΠϯλϥΫςΟϒͳॲཧΛ࣮ݱ͢Δ
41"ͷॲཧͷྲྀΕ
41"ͷॲཧͷྲྀΕ
41"ͷॲཧͷྲྀΕ
41"ͷॲཧͷྲྀΕ
41"ͷॲཧͷྲྀΕ ※ϔЄό΄ݐ΅API䌏ͭͼ㳨᭔ᶋݶ๗᭗מΨᤈ͜
41"ͷॲཧͷྲྀΕ w αʔό͔ΒCPEZ͕ۭͬΆͷ)5.-Λऔಘ͠ )5.-ͷߏஙΛશͯ+BWB4DSJQUͰߦ͏ύλʔϯ w ϖʔδભҠ࣌ͷը໘ͷॻ͖͑+BWB4DSJQUͰߦ͏ w ϖʔδͷಈ࡞͚ͩͰͳ͘ϖʔδભҠؚΊͯΠϯλϥΫςΟϒ ͳಈ࡞Λ࣮ݱͰ͖Δ
ΫϥΠΞϯταΠυʹ͓͚ΔύϑΥʔϚϯ εࢦඪ
ϖʔδ͕දࣔ͞ΕΔ·Ͱͷஈ֊ https://havelog.ayumusato.com/develop/performance/e744-performance_metrics.html 'JSTU1BJOU Կ͔͕දࣔ͞Ε࢝Ίͨ࣌ 'JSTU$POUFOUGVM1BJOU ίϯςϯπ͕දࣔ͞Ε࢝Ίͨ࣌ 'JSTU.FBOJOHGVM1BJOU ҙຯͷ͋Δදࣔʹͳͬͨ࣌
5JNFUP*OUFSBDUJWF ૢ࡞͕Մೳʹͳͬͨ࣌
ύϑΥʔϚϯεࢦඪʹ͋ͯΊͯߟ͑Δ w ඇ41"ͷ߹ w )5.-Λฦ٫͞Εͨ࣌Ͱ '$1͕࢝·Γ'.1·Ͱୡ͢Δ w ͦͷޙ+BWB4DSJQUͷಡΈࠐΈ ͕ྃͨ͠λΠϛϯά͕55*
'JSTU.FBOJOHGVM1BJOU ҙຯͷ͋Δදࣔʹͳͬͨ࣌ 5JNFUP*OUFSBDUJWF ૢ࡞͕Մೳʹͳͬͨ࣌
ύϑΥʔϚϯεࢦඪʹ͋ͯΊͯߟ͑Δ w 41"ͷ߹ w )5.-+BWB4DSJQUͰߏங͢ ΔͷͰ'.1+4ͷ࣮ߦ͕ ྃͨ͠ޙʹͳͬͯ͠·͏ w '.1ͱ΄΅ಉ࣌ʹ55*Λܴ͑ Δ
'JSTU.FBOJOHGVM1BJOU ҙຯͷ͋Δදࣔʹͳͬͨ࣌ 5JNFUP*OUFSBDUJWF ૢ࡞͕Մೳʹͳͬͨ࣌
ύϑΥʔϚϯεࢦඪʹ͋ͯΊͯߟ͑Δ w 41"ͷ߹ w )5.-+BWB4DSJQUͰߏங͢ ΔͷͰ'.1+4ͷ࣮ߦ͕ ྃͨ͠ޙʹͳͬͯ͠·͏ w '.1ͱ΄΅ಉ࣌ʹ55*Λܴ͑ Δ
'JSTU.FBOJOHGVM1BJOU ҙຯͷ͋Δදࣔʹͳͬͨ࣌ 5JNFUP*OUFSBDUJWF ૢ࡞͕Մೳʹͳͬͨ࣌ શϖʔδͷॲཧΛؚΉͷͰ +4ϑΝΠϧͷαΠζ͕େ͖͘ͳΓ͕ͪ
ύϑΥʔϚϯεࢦඪʹ͋ͯΊͯߟ͑Δ w 41"ͷ߹ w )5.-+BWB4DSJQUͰߏங͢ ΔͷͰ'.1+4ͷ࣮ߦ͕ ྃͨ͠ޙʹͳͬͯ͠·͏ w '.1ͱ΄΅ಉ࣌ʹ55*Λܴ͑ Δ
'JSTU.FBOJOHGVM1BJOU ҙຯͷ͋Δදࣔʹͳͬͨ࣌ 5JNFUP*OUFSBDUJWF ૢ࡞͕Մೳʹͳͬͨ࣌ ͜ͷ௨৴͕͍ͱ'.1·Ͱͷ ͕ͪ࣌ؒ͘ͳͬͯ͠·͏
41"·ͱΊ
ඇ41"ͱ41"ͷಈ͖Λൺͯ w ϖʔδભҠΛΠϯλϥΫςΟϒʹ࣮ߦͰ͖Δͱ͍͏Ͱ41"ͷํ ͕ύϑΥʔϚϯε্ѹతʹ༏Ґ w ॳظϖʔδͷදࣔʹؔͯ͠'JSTU.FBOJOHGVM1BJOU·Ͱͷ͞ ͱ͍͏ҙຯͰඇ41"ͷํ͕༏Ґ w 㱺41"͍͚ͲॳظදࣔͷύϑΥʔϚϯε͕՝
ୈೋ෦ɿ443ʹ͍ͭͯ
443ʹ͍ͭͯ 443ͱ 443ͷΈ 443ͷॲཧͷྲྀΕ 443ͷϝϦοτɾσϝϦοτ
ؔ࿈ٕज़ 443·ͱΊ
443ͱ
443ͱ w 4FSWFS4JEF3FOEFSJOHͷུ w 41"ͷॳظදࣔͷύϑΥʔϚϯε্ςΫχοΫͷҰͭ w ॳظද͚ࣔͩαʔόαΠυͰϨϯμϦϯά͠ɺ ͦͷޙΫϥΠΞϯταΠυͰϨϯμϦϯά͢Δͱ͍͏ͷ 㱺41"ͱඇ41"ͷ͍͍ͱ͜ͲΓʂ
443ͷΈ
443ͷΈ w 41"ͷॲཧ w )5.-+BWB4DSJQUʹΑͬͯߏ ங͞Ε͍ͯΔ
443ͷΈ w 41"ͷॲཧ w )5.-+BWB4DSJQUʹΑͬͯߏ ங͞Ε͍ͯΔ 㱺+BWB4DSJQUαʔόαΠυͰ ಈ͘ /PEFKT
443ͷΈ w 41"ͷॲཧ w )5.-+BWB4DSJQUʹΑͬͯߏ ங͞Ε͍ͯΔ 㱺+BWB4DSJQUαʔόαΠυ Ͱಈ͘ /PEFKT
㱺αʔόαΠυͰ+4Λಈ͔͠ ͯ)5.-Λߏஙͯ͠͠·͑ʂ
443ͷॲཧͷྲྀΕ
443ͷॲཧͷྲྀΕ
443ͷॲཧͷྲྀΕ
443ͷॲཧͷྲྀΕ 'JSTU.FBOJOHGVM1BJOU ҙຯͷ͋Δදࣔʹͳͬͨ࣌
443ͷॲཧͷྲྀΕ
443ͷॲཧͷྲྀΕ 5JNFUP*OUFSBDUJWF ૢ࡞͕Մೳʹͳͬͨ࣌
443ͷϝϦοτɾσϝϦοτ
443ͷϝϦοτɾσϝϦοτ w ϝϦοτ w 'JSTU.FBOJOHGVM1BJOU·Ͱͷ࣌ؒΛॖͰ͖Δ w σϝϦοτ w ΞʔΩςΫνϟ͕ෳࡶԽ͠։ൃɾϝϯςͷෛՙ্͕͕Δ
ؔ࿈ٕज़
443࣮ݱͷͨΊͷϥΠϒϥϦ w 41"ϑϨʔϜϫʔΫ͝ͱʹϥΠϒϥϦ͕͋Δ w 3FBDU/FYUKT w 7VF/VYUKT w "OHVMBS"OHVMBS6OJWFSTBM
443͚ͩΕྑ͍༁͡Όͳ͍ w 443ύϑΥʔϚϯεվળͷखஈͷҰͭʹ͗͢ͳ͍ w ଞʹ৭Μͳٕज़ཁૉ͕͋ΔͷͰΩʔϫʔυΛฒ͓ͯ͘ w 4FSWJDF8PSLFS w -B[Z-PBEJOH w
$PEF4QMJUJOH w IUUQ
443·ͱΊ
443·ͱΊ w ΞʔΩςΫνϟ͕ෳࡶʹͳΔ͚ͲύϑΥʔϚϯεʹͩ͜ΘΔͨΊ ʹඞཁͳςΫχοΫ w ύϑΥʔϚϯε্ͷͨΊͷςΫχοΫͷҰͭʹա͗ͳ͍ͷͰଞ ͷςΫχοΫซ༻͍ͯ͘͠ͱΑΓྑ͍
%FNP
σϞ w ಉ͡ػೳͰ443͋Γͱͳ͠ͷ41"Λ༻ҙ w ॳظදࣔͷΛൺֱ͢Δ w ܭଌ-JHIUIPVTFΛ͏ https://developers.google.com/web/tools/lighthouse/?hl=ja
σϞ w -JHIUIPVTFͷܭଌ݁Ռ SSRͭ SSR͘Π 'JSTU.FBOJOHGVM1BJOU ͕վળ͍ͯ͠Δʂ
·ͱΊ w 41"ϖʔδભҠ͠ͳ͍ͷͰಈ࡞͕͍ w ͨͩ͠ॳظද͍ࣔ w 443Λ͏ͱॳظදࣔͷ͞ΛվળͰ͖Δ
ࠓͷΰʔϧͷ͓͞Β͍ w 443ͬͯԿ w 41"ͰॳظදࣔͷύϑΥʔϚϯεΛ্ͤ͞ΔςΫχοΫ w ͳͥ41"Ͱ443͢Δͷʁ w 41"ॳظදࣔͷύϑΥʔϚϯε͕՝͔ͩΒ
͋Γ͕ͱ͏͍͟͝·ͨ͠