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

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

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

1644fba8a219c89987390ef4f23d06bf?s=128

Ayumu Sato

April 22, 2017
Tweet

Transcript

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

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

  3. ‣ ⡟谏娄ׁהֲ֮ײ׬ ‣ せ〢㾊ה幪靼׾䖂䗁⚥ך8FCر؍كٗحػ٦ ‣ 剑鵚ךꟼ䗰כXFCQFSGהBZה➂✲罋铬 ‣ $ZCFS"HFOU *ODת׋כ"CFNB57 *OD

     䪮遭劤鿇8FC*OJUJBUJWF$FOUFS⚺㹫ًر؍،窟䭍䪮遭䨌殛㹓 !BIPNV
  4. ‣ ػؿؓ٦وٝأךꅾ銲䚍 ‣ ػؿؓ٦وٝأך㛇劤涸זչ罋ִ倯ծ䯝ִ倯պ ‣ ػؿؓ٦وٝأהؙٓ؎،ٝز橆㞮ךչ㢳圫䚍պ ‣ ؙٓ؎،ٝز؟؎سꟚ涪חֶֽ׷չㅷ颵պךꅾ銲䚍 ،آؑٝت

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

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

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

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

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

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

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

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

    ͑؟٦غ؟؎سⳢ椚 ך넝鸞⻉FUD ل٦آٗ٦س
  13. IUUQTXXXZPVUVCFDPNXBUDI W0R):FM/"V+L

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

    ٓٝة؎ي
  17. IUUQTXXXZPVUVCFDPNXBUDI WQ)'RO1-;

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

  20. 6*ךٖأهٝأ NT ،صً٦ءّٝG NT NT ،؎سٕ⚥ךⳢ椚 NT ل٦آٗ٦س  NT

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

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

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

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

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

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

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

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

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

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

  31. 湡⯓ך69 ␡

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

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

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

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

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

  37. תה׭

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

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

    倜׃ְ䪮遭׮ㅷ颵׾넝׭ֲ׷
  40. 5IBOLZPV❤ IUUQBIPNV !BIPNV HJUIVCDPNBIPNV ⌂