パフォーマンスはなぜ重要なのか？ - 目先の UX(?) にとらわれないクライアントサイド開発の本質

名古屋マークアップ勉強会 The Final https://758markup.doorkeeper.jp/events/57811 で使用したスライドです。本編20分。

Transcript

1. ػؿؓ٦وٝأכז׈ꅾ銲זךַ
   せ〢㾊و٦ؙ،حف⹈䓼⠓5IF'JOBM㛇锃闌怴
   !BIPNV"ZVNV4BUP
   湡⯓ך69
   חה׵׻׸זְؙٓ؎،ٝز؟؎سꟚ涪ך劤颵
   

   View Slide

2. ֶכ״ֲ׀ְׂתׅ
   !BIPNVדׅ
   

   View Slide

3. ‣ ⡟谏娄ׁהֲ֮ײ׬
   ‣ せ〢㾊ה幪靼׾䖂䗁⚥ך8FCر؍كٗحػ٦
   ‣ 剑鵚ךꟼ䗰כXFCQFSGהBZה➂✲罋铬
   ‣ $ZCFS"HFOU *ODת׋כ"CFNB57 *OD
   䪮遭劤鿇8FC*OJUJBUJWF$FOUFS⚺㹫ًر؍،窟䭍䪮遭䨌殛㹓
   !BIPNV
   

   View Slide

4. ‣ ػؿؓ٦وٝأךꅾ銲䚍
   ‣ ػؿؓ٦وٝأך㛇劤涸זչ罋ִ倯ծ䯝ִ倯պ
   ‣ ػؿؓ٦وٝأהؙٓ؎،ٝز橆㞮ךչ㢳圫䚍պ
   ‣ ؙٓ؎،ٝز؟؎سꟚ涪חֶֽ׷չㅷ颵պךꅾ銲䚍
   ،آؑٝت
   

   View Slide

5. ؙٔٝ׾ةحف׃׋䖓
   ⡦猱תד罣ִ׵׸׷
   

   View Slide

6. أؙٗ٦ָٕꅾְ؟؎ز
   ׄ׏ֻ׶鋅גְ׵׸׷
   

   View Slide

7. ‣ ؟٦غ٦ך䘔瘶׾鹼䒀ׇׁג　渣פך䕦갟׾庠׷㹋꿀
   ‣ 猱ך鹼䒀ˋך幾渣
   ‣ 猱ך鹼䒀ˋך幾渣
   ‣ 猱ך鹼䒀ˋך幾渣
   㣐䩛嗚稊ؒٝآٝה䎢デ　渣ך✲⢽
   IUUQTDPOGFSFODFTPSFJMMZDPNWFMPDJUZWFMPDJUZQVCMJDTDIFEVMFEFUBJM
   

   View Slide

8. ‣ ؔٝٓ؎ٝ㺔➰ꆃفٓحزؿؓ٦يך何⥜
   ‣ 8FCل٦آך邌爙׾넝鸞⻉
   ‣ 㺔➰ך؝ٝغ٦آّٖٝ٦زָぢ♳
   ‣ 剑穄涸ח筨겘⭙碛سٕך㺔➰׾栻䖤
   䎃،ًٔؕ㣐窟걄鼅ך✲⢽
   IUUQLZMFSVTIOFUCMPHNFFUUIFPCBNBDBNQBJHOTNJMMJPOGVOESBJTJOHQMBUGPSN
   

   View Slide

9. ‣ .P[JMMBח״׷'JSFGPYךتؐٝٗ٦سٍؗٝل٦ٝ
   ‣ ٓٝر؍ؚٝل٦آך邌爙׾猱넝鸞⻉
   ‣ تؐٝٗ٦سך؝ٝغ٦آّٖٝ٦زָぢ♳
   ‣ ؝ًٝز奋ד"EEZ0TNBOJָ㋠㏋㡰׏גג疭ִ׷
   اؿزؐؑ،تؐٝٗ٦سך✲⢽
   IUUQTCMPHNP[JMMBPSHNFUSJDTSFGPYQBHFMPBETQFFE&QBSUJJ
   

   View Slide

10. ػؿؓ٦وٝأך
    㛇劤涸זչ罋ִ倯ծ䯝ִ倯պ
    

    View Slide

11. 鐰⣣鯥כ㣐ֹֻⴓֽגא
    ٓٝة؎ي
    ل٦آٗ٦س
    

    View Slide

12. ‣ شؽ؜٦ءّٝךꟚ㨣ַ׵ل٦آָ邌爙ׁ׸׷תדך鸞䏝
    ؙٔذ؍ٕٖؕٝتؚٔٝػأך剑黝⻉
    ꂁ⥋ٔا٦أ 歗⫷זו
    ך侧הؿ؋؎ٕ؟؎ؤך剑黝⻉
    )5.-鵤⽱ ͑؟٦غ؟؎سⳢ椚
    ך넝鸞⻉FUD
    ل٦آٗ٦س
    

    View Slide

13. IUUQTXXXZPVUVCFDPNXBUDI W0R):FM/"V+L
    

    View Slide

14. View Slide

15. View Slide

16. ‣ ل٦آָ邌爙ׁ׸׋֮הך6*ך䘔瘶鸞䏝
    '14 猱֮׋׶ך歗꬗ך刿倜㔐侧
    ך剑㣐⻉PS⿾䘔ך넝鸞⻉
    ؚٓؿ؍حؙ涸זٖٝتؚٔٝ頾蚚ך鯪ꆀ⻉
    歗꬗刿倜׾ׁת׋־׷أؙٔفزⳢ椚ךꤐ⿠FUD
    ٓٝة؎ي
    

    View Slide

17. IUUQTXXXZPVUVCFDPNXBUDI WQ)'RO1-;
    

    View Slide

18. View Slide

19. ‣ 何㊣ׅ׷הֹכ㔓卓ꟼ⤘׾姻然ח䯝ִ׷ֿהָ剑׮ꅾ銲
    ‣ Ꟛ涪儗ךكأزفؙٓذ؍أך琎׫ꅾי׮㣐✲דכ֮׷ָ˘
    ‣ さְ鎉衝כչ傍ֺׅ׷剑黝⻉כ长䝤ך呎彁պ
    ‣ 葿ղז鎘庠٥锃叨ך倯岀׾鋙ִ׷ֿהכ溪㹋ח鵚בֻ鎮箺
    ػؿؓ٦وٝأ׾䯝ִ׷׋׭ך鎘庠٥锃叨
    

    View Slide

20. 6*ךٖأهٝأ
    NT
    ،صً٦ءّٝG
    NT NT
    
    ،؎سٕ⚥ךⳢ椚
    NT
    ل٦آٗ٦س
    NT
    IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTQFSGPSNBODFSBJM
    ו׸ֻ׵ְז׵黝ⴖז䘔瘶鸞䏝ה鎉ִ׷ךַ
    

    View Slide

21. ‣ 铩׮鹼ְ׮ך׾⡲׹ֲהכ䙼׏גְזְכ׆׌ָ˘
    ‣ 椚䟝涸ז勴⟝׃ַ鋅גְזְ
    ‣ 鸞ֻׅ׷倯岀ָ׻ַ׵זְծ儗꟦ָזְ
    ‣ ׉׮׉׮ꟼ䗰ָ搀ְ馯㄂
    ז׈8FCل٦آכ鹼ֻז׷ךַ
    

    View Slide

22. ؙٓ؎،ٝز橆㞮ך㢳圫䚍ָ
    欥ֻ鋅׵׸ג׃ת׏גְ׷
    

    View Slide

23. ػؿؓ٦وٝأה
    ؙٓ؎،ٝز橆㞮ךչ㢳圫䚍պ
    

    View Slide

24. ‣ رغ؎أⳢ椚䚍腉ծأؙٔ٦ٝ؟؎ؤծ乼⡲倯岀
    ‣ ـٓؐؠծ04㹋遤䚍腉ծِ٦ؠ٦ָ鷄⸇׃׋䭁䓸堣腉
    ‣ طحزٙ٦ؙؔؿ؍أծ荈㸓ծⰕ遚8Jծٌغ؎ٕ
    ‣ ِ٦ؠ٦䎃룳װ⦐➂䊴ח״׷钠濼暴䚍ך䊴殯
    ؙٓ؎،ٝز橆㞮ך㢌侧 ק׿ך♧鿇
    
    

    View Slide

25. 
    $MJFOU $POOFDUJPO /FUXPSL 4FSWFS
    䱸竲ךٖ؎ذٝء٦ 堣㐻꟦ךؔ٦غ٦قحس
    ألحؙח״׷Ⳣ椚鹼䒀 ر٦ةك٦أזוך鹼䒀
    

    View Slide

26. $16ךأٗحزؚٔٝⳢ椚䚍腉ךؒىُٖ٦ز
    طحزٙ٦ؙךأٗحزؚٔٝ䌒㚖䚍腉ךؒىُٖ٦ز
    

    View Slide

27. ֮׵ײ׷㢳圫䚍ך⚥ח
    ˑ鹼ְ˒ˑ⢪ִזְ˒ָ悵׬
    

    View Slide

28. ˒⢪ִזְ˒כِ٦ؠ٦⡤꿀ה׃ג
    ؟٦غ٦ꥺ㹱הずֻׄ׵ְ帾ⵟז㉏겗
    

    View Slide

29. ؙٓ؎،ٝز؟؎سꟚ涪חֶֽ׷
    չㅷ颵պךꅾ銲䚍
    

    View Slide

30. 湡䭷ׅץֹؽآطأ؞٦ٕ
    銲実ׁ׸׷فٗتؙزך鋅׋湡ծ堣腉
    فٗتؙزה׃ג⢪ְ׮ךחז׷ㅷ颵
    

    View Slide

31. 湡⯓ך69
    
    
    ␡
    

    View Slide

32. 
    
    
    ؕح؝ְְ ؙاꅾְ
    椚䟝 植㹋
    

    View Slide

33. 歗劍涸ז6* 罋䣁♶駈ד⢪ְב׵ְ
    椚䟝 植㹋
    
    ⚠
    
    ♥
    ˟Ꟛ涪罏ָ)1׾⵴׏ג⡦הַ׃״ֲה׃׋ֽו⡦ה׮ז׵זַ׏׋
    

    View Slide

34. ➂➂➂➂➂➂➂
    խ剑넝ך69խ
    :?:?:?:?:?:
    
    ␡
    ˖ ل٦آְָאתד׮Ꟛַזְ
    ˖ Ꟛְ׋ֽוأؙٗ٦ָٕꅾֺׅ׷
    ˖ ؗ٦ن٦سד乼⡲דֹזְ
    ˖ וָֿ乼⡲דֹ׷ךַⴓַ׵זְ
    ˖ ז׿ַ׮ֲװ׌
    

    View Slide

35. 湡䭷ׅץֹؽآطأ؞٦ٕ
    銲実ׁ׸׷فٗتؙزך鋅׋湡ծ堣腉
    فٗتؙزה׃ג⢪ְ׮ךחז׷ㅷ颵
    ػؿؓ٦وٝأ
    ،ؙإءؽٔذ؍
    إُؗٔذ؍
    ِ٦ؠؽٔذ؍FUD
    3FTQPOTJWF8FC%FTJHO
    鋅׋湡ծ堣腉ךؙٗأـٓؐؠ
    

    View Slide

36. ‣ ؙٓ؎،ٝز橆㞮ך㢳圫䚍׾⼧ⴓח罋䣁׃גㅷ颵׾넝׭׷
    ‣ 堣⠓䴦㣟׾幾׵׃ծفٗتؙزך⣣⦼׾剑㣐⻉ׅ׷
    搀ꣲח*&㼎䘔׃״ֲהְֲ䠐㄂דכזְ
    ׮׍׹׿椚䟝כؕح؝葺ֻג⢪ְװֻׅג鸞ְֿה✨
    ؙٓ؎،ٝز؟؎سꟚ涪ך劤颵涸ז䕵ⶴ
    

    View Slide

37. תה׭
    

    View Slide

38. ‣ ػؿؓ٦وٝأה،ؙإءؽٔذ؍הإُؗٔذ؍כ⡦״׶׮㼣ְ
    ‣ 㢳圫ז橆㞮דفٗتؙزך⣣⦼׾䬐⥂ׅ׷ךָ䧮ղך劤颵
    ‣ 湡⯓ך69
    ״׶չ׍ׯ׿ה⢪ִ׷պהְֲ⡤꿀ָת׆ꅾ銲
    ‣ ⳿晛ׁ׸׋׵顠׏גֻ׌ְׁ
    鎉ְ׋ַ׏׋ֿה
    

    View Slide

39. ‣ 倜׃ְ䪮遭װٓ؎ـٓٔכ״׶⸬桦涸ז倯岀ך〳腉䚍
    ‣ 湡涸׌ָֽ㣐✲זךדכזְ
    ‣ 湡涸פך荈׵ך➬✲ך⣣⦼ ㅷ颵
    ׾剑㣐⻉ׅ׷ֿה׮㣐✲
    ‣ ׉ך捀ך䩛媮׮ת׋ず圫ח㣐✲זךדسٝسٝװ׹ֲ
    倜׃ְ䪮遭׮ㅷ颵׾넝׭ֲ׷
    

    View Slide

40. 5IBOLZPV❤
    IUUQBIPNV
    !BIPNV
    HJUIVCDPNBIPNV
    ⌂
    

    View Slide