最近の Web パフォーマンス改善について知っておきたいコト

by Ayumu Sato

Slide 1

Slide 1 text

剑鵚ך8FCػؿؓ٦وٝأ何㊣ח אְג濼׏גֶֹ׋ְ؝ز )5.-$POGFSFODF !BIPNV"ZVNV4BUP

Slide 2

Slide 2 text

וֲ׮ֿ׿ח׍כ !BIPNVדׅ

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

ػؿؓ٦وٝأכꅾ銲

Slide 5

Slide 5 text

PGWJTJUTBSFMJLFMZUPCFBCBOEPOFEJG QBHFTUBLFMPOHFSUIBOTFDPOETUPMPBE The need for mobile speed: How mobile latency impacts publisher revenue https://www.thinkwithgoogle.com/intl/en-154/insights-inspiration/research-data/need-mobile-speed-how-mobile-latency-impacts-publisher-revenue/

Slide 6

Slide 6 text

׉׮׉׮傈刑ח׮ꟼ׻׵׆)5.-$POGFSFODFח勻׷䠐陎ָ 넝ְぐ⡘חػؿؓ٦وٝأ 鸞䏝ծ䚍腉 ָ䝤ֻג׮ְְז׿ג 䙼׏ג׷➂ז׿גְתׇ׿״יկ ׏גְֲַծػؿؓ٦وٝأָ葺ֻז׏׋׵׉׶ׯ,1*הַ $73ח׮葺ְ䕦갟כ֮׷ד׃׳ֲկְװծػؿؓ٦وٝأָ ׉׸׵חוך玎䏝ך؎ٝػؙز׾♷ִ׵׸׷ַכת׋ⴽ㉏겗 ז׿׌ֽוծ׉׸כ׉׸ה׃ג➙㔐כ畭䫓׶תׅկ

Slide 7

Slide 7 text

IUUQTEFWFMPQFSTDZCFSBHFOUDPKQCMPHBSDIJWFTXSJUUFOCZDI ,1*✺ղכ䒦爡ךـؚٗ׾׀鋮ֻ׌ְׁ

Slide 8

Slide 8 text

‣ ػؿؓ٦وٝأחꟼׅ׷㛇燉涸ז罋ִ倯ךֶׁ׵ְ ػؿؓ٦وٝأך㛇劤涸זչ罋ִ倯ծ䯝ִ倯պ ػؿؓ٦وٝأהؙٓ؎،ٝز橆㞮ךչ㢳圫䚍պ ‣ 鵚䎃ծ濼׏גֶֹ׋ְػؿؓ٦وٝأꟼ鸬ךכז׃ ل٦آٗ٦س؝ٝذٝخ׾傍ֻ䲿⣘ׅ׷剑黝⻉ ٓٝة؎ي徽׵ַח⹛ֻ6*ה䘯黝ז乼⡲䠬 ،آؑٝت

Slide 9

Slide 9 text

‣ رٌהַٓ؎ـ؝٦ر؍ؚٝהַכ֮׶תׇ׿ ‣ 䞔㜠ꆀ⮚⯓דأٓ؎س׾帜ղה׭ֻ׏גְֹתׅ ‣ 倜׃ְ䪮遭׮稱➜׃תָׅ㼎䘔ـٓؐؠכぐ荈ד锃ץג♧㋐♧䣮׃ת׃׳ֲ 劤傈ך岣䠐

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

錁挿כ㣐ֹֻⴓֽגא ٓٝة؎ي ل٦آٗ٦س

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

WJBIUUQTXXXZPVUVCFDPNXBUDI WQ)'RO1-;

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

ِ٦ؠ٦ 䎃⵸ךأوم 㖑♴ꉟד獳⹛⚥ 4/4ة؎يٓ؎ַٝ׵ ِ٦ؠ٦# 剑倜أوم 㖑倯ח䌓満⚥ ـحؙو٦ַؙ׵ ِ٦ؠ٦$ 䎃⵸ךأوم 궪굸䏄ך窫劄涸8J 锃ץ暟ד嗚稊ַ׵

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

֮׵ײ׷㢳圫䚍ך⚥ח 鹼ְծ⢪ְב׵ְծ⢪ִזְָ悵׬

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

ل٦آٗ٦س ؝ٝذٝخ׾傍ֻ䲿⣘ׅ׷剑黝⻉

Slide 26

Slide 26 text

‣ شؽ؜٦ءّٝ׾Ꟛ㨣׃ג ‣ ٔا٦أ׾تؐٝٗ٦سך׍鐰⣣׃ג ‣ 8FCل٦آ׾㹋遤ׅ׷ِ٦ؠ٦ָⵃ欽〳腉חז׷ֿה ل٦آٗ٦سהכׅז׻׍ խ אבֹכؐؑـד /BWJHBUJOH -PBEJOH *OUFSBDUJOH

Slide 27

Slide 27 text

‣ %0.$440.3FOEFS5SFF ‣ %PXOMPBESFTPVSDFT3FOEFSQJYFMT5SBOTGFSCJUNBQT ‣ 3"*-ך-PBE׌ָ˘ NTחכ׉ֲ׉ֲֶׁת׵זְ ְ׻ײ׷ؙٔذ؍ٕٖؕٝتؚٔٝػأ WJBIUUQTCJUTPGDPEFVOEFSTUBOEJOHUIFDSJUJDBMSFOEFSJOHQBUI

Slide 28

Slide 28 text

WJBIUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTQFSGPSNBODFDSJUJDBMSFOEFSJOHQBUIBOBMZ[JOHDSQ +4כ$440.׾䖉א׃ծ%0.ח׮䕦갟ׅ׷ +4ָؙٔذ؍ٕؕٔا٦أחז׏גְ׷ TDSJQUTSDNBJOKTBTZODדꬊず劍ٗ٦س ػ٦؟٦ـٗحׇؙ׆ؙٔذ؍ٕؕדזֻז׷

Slide 29

Slide 29 text

‣ )5.-כ%0.ךٕ٦زזךדـٗحׇׂؙ׷׾ִזְ ‣ $44כ$440.׾ـٗحؙׅ׷ ‣ +BWB4DSJQUכ%0.׮$440.׮ـٗحؙׅ׷ ‣ ぐ珏ך鹼䒀ٗ٦سכؙٔذ؍ٕؕػأך瀉簭ח׮䕵甧א ؙٔذ؍ٕؕػأךꞿׁ

Slide 30

Slide 30 text

‣ 鹼䒀דֹ׷TDSJQUכBTZODת׋כEFGFSׅ׷ ‣ 䗳銲ך搀ְ؟٦سػ٦ذ؍أؙٔفز׾铣׫鴥תזְ ‣ ⴱ劍邌爙ח䗳銲ז$44ך׫׾㙵׭鴥׬װװع٦سٕ넝ְ ‣ 㖇簭ֶ״ן؝٦سך剑㼭⻉ָדֹ׷׮ךכ׃גֶֻ ‣ 傈劤铂8FCؿؓٝزכذؗأز䲽歗׾姺׭׷剑穄Ⱔ㐻 ؙٔذ؍ٕؕٔا٦أך侧ה؟؎ؤ

Slide 31

Slide 31 text

‣ ٔا٦أָ鸞ֻ㾈ַֻծ鹼ֻ㾈ַֻהְֲ錁挿 ‣ ٔا٦أך侧הծ؟؎ؤהծ鯄鷏騃ꨄ׾瀉ֻׅ׷ ‣ ׮׍׹׿ꅾ銲דכ֮׷ך׌ָ ل٦آٗ٦سכطحزٙ٦ؙⳢ椚ָꅾ銲

Slide 32

Slide 32 text

‣ 嚂錁׃ֹ׸זְ傈劤ך鸐⥋笨♴׶䎂㖱.CQT ٌغ؎ٕ.CQT WJB"LBNBJ24UBUFPGUIF*OUFSOFU$POOFDUJWJUZ3FQPSU ‣ Ꟛ涪罏ך䠐陎׮׉׸ז׶ח넝ת׏גֹגְ׷ ‣ 黝ⴖז歗⫷䕎䒭ד剑黝⻉הַծذؗأزך剑㼭⻉H[JQהַ׫׿זװ׷״י ‣ رְؕ歗⫷ծ搀꼽זٔا٦أծסא٦ח罋ִ׸לتً׌׏גⴓַ׷ طحزٙ٦ؙך橆㞮הꟚ涪罏ך䠐陎

Slide 33

Slide 33 text

‣ ؙٓ؎،ٝز؟؎سחٗآحָؙ㺔׏גֹגְ׷䒦㹱 ‣ OQNזוד⣛㶷ػح؛٦آך鷄⸇׮㺁僒חז׏גְ׷ ‣ 8FC،فٔכ׮׍׹׿ךֿהծ8FC؟؎ز׮فؚٓ؎ٝת׫׸ד周㢩َغְ ‣ ׉׃ג周㢩ծؿ؋؎ٕ؟؎ؤ׾孡חׅ׷➂ָ㼰זְ 銲⳿Ⱙ ְת侒ִג《׶♳־׋ְךכرְؕ+BWB4DSJQU

Slide 34

Slide 34 text

1VSF4JOHMF1BHF"QQMJDBUJPO؟؎ز" %PXOMPBET LC LC &WBMVBUFT 7JTJCMFUPUIF6TFS

Slide 35

Slide 35 text

1VSF4JOHMF1BHF"QQMJDBUJPO؟؎ز" .PTUPG$166TBHFJT4DSJQUJOH +4TJ[FJTMBSHFSUIBOJNBHFTJ[F

Slide 36

Slide 36 text

4FSWFS4JEF3FOEFSJOH41"؟؎ز# %PXOMPBET LC LC &WBMVBUFT 7JTJCMFUPUIF6TFS

Slide 37

Slide 37 text

4FSWFS4JEF3FOEFSJOH41"؟؎ز# 5IJTBMTP+4TJ[FJTMBSHFSUIBOJNBHFTJ[F )5.-JTQSPWJEFEGSPN443 JUDPOUBJOTBMPUPGMBZPVUQSPDFTTJOH

Slide 38

Slide 38 text

‣ LCך歗⫷״׶LCך+4ךקֲָ媷⫊⸂׾׮א تؐٝٗ٦س׮ػ٦أ׮㹋遤׮㣐㢌ז؝أز ‣ ٓ؎ـٓٔ鼅㹀儗כؿ؋؎ٕ؟؎ؤ׮孡׾אֽזְה㺁僒ח灶笼ׅ׷ ‣ XFCQBDLךDPEFTQMJUUJOH׫׋ְזךכ䗳銲ז堣腉 ‣ 443׮邌爙ָ鸞ְ׌ֽד乼⡲〳腉חז׷תדחכ儗꟦ַַָ׷ +BWB4DSJQUךⴱ劍⻉؝أزֿ׻ְ

Slide 39

Slide 39 text

MPEBTI,# SFBDUEPN,# SY,# BDNFKT,# DPSFKT,# WFMPDJUZBOJNBUF,# JNNVUBCMF,# SFBDU,# ˟NJOJGZ黝欽䖓ծH[JQ黝欽⵸ Generated by https://alexkuz.github.io/webpack-chart

Slide 40

Slide 40 text

IUUQTNFEJVNDPNSFMPBEJOHKBWBTDSJQUTUBSUVQQFSGPSNBODFGC

Slide 41

Slide 41 text

ل٦آٗ٦سחꟼ׻׷زؾحؙ

Slide 42

Slide 42 text

‣ 㢳ꅾ⻉ח״׷⚛⴨䚍ךぢ♳ծقحتך)1"$,㖇簭ծ؟٦غ٦فحءُFUD ‣ ׋׌Ⰵ׸׷׌ֽדכ)551ך䛷䜋כ״׶㣐ְֹ㉏겗ח״׏ג铎䊴חז׶ֲ׷ ‣ سً؎ٝءٍ٦ر؍ؚٝ♶銲הַDPODBU♶銲הַ鎉׻׸גְ׷ )551ד׮رְؕDPODBUכ/(ծ刿倜䚍ָ֮׷ז׵ٍؗحءُؼحز桦׮♴ָ׷ )551㢳ֻך倯ָ׀㶷ׄד׃׳ֲָ

Slide 43

Slide 43 text

‣ [PQJכEFBUF✼䳔דծְֻ׵ַ㖇簭桦ָ넝ְ את׶"DDFQU&ODPEJOHH[JQזؙٓ؎،ٝز湱䩛ז׵⢪ִ׷ 鸐䌢ךH[JQ״׶׮儗꟦׾ַֽג♨㻝ח㖇簭ׅ׷أة؎ٕ̔H[JQ@TUBUJD׮嗚鎢ׅ׷ה葺 ‣ CSPUMJכ倜鋉ך،ٕ؞ٔؤيדծ[PQJ״׶刿ח넝㖇簭 "DDFQU&ODPEJOHCS׾鵤ׇ׷ךכ&EHF 'JSFGPY $ISPNFծ׮ֲּׅ4BGBSJ׮ [PQJ CSPUMJו׏׍׮أ؎أךػٝךせ⵸׵׃ְ

Slide 44

Slide 44 text

‣ JNQPSUNPEGSPNNPEKT׾ـٓؐؠ♳ד׮鍑寸〳腉חז׷ *NQPSUךػأ䭷㹀ךהֶ׶+BWB4DSJQUָٗ٦سׁ׸׷״ֲחז׷ ‣ )551ה䫴ֹさ׻ׇד$PODBU♶銲锷ך㸣䧭ח䗳銲ז剑䖓ךػ٦خ ‣ 1PMZNFSׅ׵)5.-*NQPSUTחⴽ׸׾デ־ג&4.PEVMFTה䳢䩛׃׋ &4.PEVMFT⚺銲ـٓؐؠד剣⸬חז׷תד֮ה׍׳׏ה

Slide 45

Slide 45 text

&4NPEVMFT㼎䘔ـٓؐؠぢֽךـ٦زأزٓحفؿ؋؎ٕ &4NPEVMFT劢㼎䘔ـٓؐؠぢֽךغٝسٕؿ؋؎ٕ 4FFBMTP/PEFKTך&4.PEVMFT؟ه٦زך植朐然钠ה⪒ִUFQQFJTCMPH IUUQUFQQFJTIBUFOBCMPHDPNFOUSZFTNPEVMFTJOOPEFKT

Slide 46

Slide 46 text

‣ 1SFMPBEכ植㖈ךل٦آך׋׭ח䭷㹀ٔا٦أ׾⮚⯓׃גٗ٦سׅ׷ ‣ 3FTPVSDF)JOUTכ⟃꣬ךل٦آך׋׭ח䫎堣涸Ⳣ椚׾ׅ׷ EOTQSFGFUDI%/4鍑寸ך✲⵸Ⳣ椚 QSFDPOOFDU5$1䱸竲ך✲⵸Ⳣ椚 QSFGFUDIٔا٦أ《䖤ך✲⵸Ⳣ椚 QSFSFOEFSل٦آךٖٝتؚٔٝך✲⵸Ⳣ椚 1SFMPBE 3FTPVSDF)JOUTז׿הזֻ⡂ג׷ֽוⴽ➬圫

Slide 47

Slide 47 text

$44鐰⣣⵸ח1SFMPBEד8FCؿؓٝزך⯓遤ٗ٦س 8FCؿؓٝز䖉׍ד涪欰ׅ׷ذؗأزךٖٝتؚٔٝـٗحؙ׾鯪幾 3FTPVSDF)JOUTぐ⡘

Slide 48

Slide 48 text

鎘庠ה鐰⣣䭷垥

Slide 49

Slide 49 text

‣ 暴㹀橆㞮ַ׵8FC؟؎زח،ؙإأ׃גر٦ة׾　꧊ ‣ 植㹋ךِ٦ؠדכזְָ鸞䏝ך♳♴׾鐰⣣׃װְׅ ‣ 畭劣װ㔐简זו勴⟝׾؝ٝزٗ٦ٕדֹ׷ ‣ 鑫稢ז䞔㜠׾ה׸׷ךדꟚ涪罏כ֮׶ָ׋ְ 4ZOUIFUJD.POJUPSJOH Ý ☁⚙ ⬇ ⬇ 8FC؟؎زח ،ؙإأ׃ג鎘庠 ؙٓؐس♳ךؒ٦آؑٝز 鎘庠ر٦ة׾꧊琎

Slide 50

Slide 50 text

‣ ؒٝسِ٦ؠך畭劣♳ד鎸ꐮ׃׋ر٦ة׾　꧊ ‣ 㹋ꥷחِ٦ؠָ⡤꿀׃׋⦼׾ה׸׷ ‣ 鑫稢זفٗؿ؋؎ٕ׾鋅׷׮ךדכזְ ‣ ,1*הךꟼ鸬׾鋅׷ז׵ֿ׏׍ךקֲָ葺ְ 3FBM6TFS.POJUPSJOH ☁ Ý ⬇ ➡ ⬇ 鎘庠ر٦ة׾꧊琎 ؒٝسِ٦ؠ橆㞮ד䞔㜠《䖤

Slide 51

Slide 51 text

dumpTiming(performance.timing); performance.getEntriesByType('resource').forEach(dumpTiming); // φϏήʔγϣϯ·ͨ͸Ϧιʔεͷϩʔυʹ͓͚Δ֤ϑΣʔζͷॴཁ࣌ؒΛग़ྗ function dumpTiming(timing) { console.log(` Name: ${timing.name || location.href} Unload: ${timing.unloadEventEnd - timing.unloadEventStart} Redirect: ${timing.redirectEnd - timing.redirectStart} DNS: ${timing.domainLookupEnd - timing.domainLookupStart} TCP: ${timing.connectEnd - timing.connectStart} Request: ${timing.responseStart - timing.requestStart} Response: ${timing.responseEnd - timing.responseStart} Processing: ${timing.loadEventStart - timing.responseEnd} OnLoad: ${timing.loadEventEnd - timing.loadEventStart}`); } /BWJHBUJPO5JNJOH"1* 3FTPVSDF5JNJOH"1* WJBIUUQTDIOFUQPTUTQFSGPSNBODFBQJIUNM♧鿇何㢌

Slide 52

Slide 52 text

〢➿ ـٓؐؠ؎كٝز劍 %0.$POUFOU-PBEFE MPBE ـٓؐؠ؎كٝزד➿欽׃גְ׋ 湱ꟼ䚍כ֮׷ָ劤䔲ח鋅׋ְ⦼דכזְ 鵚➿ ؽآُ،ٕ䲽歗ך鎘ꆀ劍 4UBSU3FOEFS 'JSTU1BJOU 4QFFE*OEFY 䲽歗Ⳣ椚ךة؎ىؚٝחꟼ䗰ָ獳׏׋ 8FC1BHFUFTUָ崧遤׶㨣׭׷ 植➿ ِ٦ؠ٦⡤꿀劍 'JSTU$POUFOUGVM1BJOU 'JSTU.FBOJOHGVM1BJOU 5JNFUP$POTJTUFOUMZ*OUFSBDUJWF ״׶ِ٦ؠ٦⡤꿀ה湫穠ׅ׷䭷垥ָ涫㜥䠐㄂ָ⠗׻׷邌爙חז׏׋ة؎ىؚٝ 㹋ꥷחⵃ欽〳腉חז׏׋ة؎ىؚٝ ׂ׏ֻ׶ⴓַ׏׋孡חז׸׷䭷垥ך㢌鼂 4FFBMTP8FCؙٓ؎،ٝز؟؎سךػؿؓ٦وٝأًزؙٔأعـ׹ּ IUUQTIBWFMPHBZVNVTBUPDPNEFWFMPQQFSGPSNBODFFQFSGPSNBODF@NFUSJDTIUNM

Slide 53

Slide 53 text

-FWFSBHJOHUIF1FSGPSNBODF.FUSJDTUIBU.PTU"FDU6TFS&YQFSJFODF IUUQTEFWFMPQFSTHPPHMFDPNXFCVQEBUFTVTFSDFOUSJDQFSGPSNBODFNFUSJDT

Slide 54

Slide 54 text

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

‣ ֹׁקוך♧菙涸ז䭷垥׌ֽדכ濼׶׋ְֿהָ濼׸זְֿהָ֮׷ ‣ 鸞ֻ邌爙ׁ׸׷ךכ׮׍׹׿ծ鸞ֻ⹛歗ָⱄ欰Ꟛ㨣׃גק׃ְծהַ ‣ ׉ֿד6TFS5JNJOH"1*ך⳿殢 فٗتؙزח״׏ג劤䔲ח䗳銲ז䭷垥כ

Slide 57

Slide 57 text

Slide 58

Slide 58 text

‣ ؾٝه؎ٝزד鸞ֻׅ׷ىحءָّٝ䗳銲זֿה׮֮׷חכ֮׷ָ ‣ ✮皾㛇彊⦼ ׾寸׭ծ׉׸״׶׮鹼ֻז׵זְ״ֲ麊欽ׅ׷ךָك٦أٓ؎ٝ ‣ 傈䌢涸ח侧㶵הぢֹさ׏גֿ׉溪׏䔲ז넝鸞⻉ך䩛ָ䩧ג׷ ‣ 剣俱׌ֽו4QFFE$VSWFכֶ䩛鯪דꟚ涪罏ָ㥨ֹ׉ֲז䠬ׄ ✮皾ך鏣㹀ה㹀䌢涸ז鎘庠 4FFBMTP1FSGPSNBODF#VEHFU.FUSJDT IUUQTUJNLBEMFDDPNQFSGPSNBODFCVEHFUNFUSJDT

Slide 59

Slide 59 text

ٓٝة؎ي 徽׵ַח⹛ֻ6*ה䘯黝ז乼⡲䠬

Slide 60

Slide 60 text

‣ 6*װ،صً٦ءָّٝ徽׵ַח⹛ַֻ '14ծ3"*-ך"OJNBUJPONT ‣ ِ٦ؠ؎ٝفحزח鴼鸞ח⿾䘔דֹ׷ַ 3"*-ך3FTQPOTFNTה*EMFNT ٓٝة؎ي

Slide 61

Slide 61 text

‣ ـٓؐؠכءؚٕٝأٖحسծ⡦ַָꞿְⳢ椚׾ׅ׸ל➭ךⳢ椚כ鹼׸׷ ‣ ،صً٦ءّٝך׋׭ךⳢ椚ָꅾְהծ㹋ꥷך歗꬗ך刿倜ָ鹼׸׷ ‣ ⡦ַָⳢ椚׾⽑剣׃גְ׷הծِ٦ؠ٦؎ٝفحزפך䘔瘶ָ鹼׸׷ ءؚٕٝأٖحسז⚅歲הぢֹさ׏ג欰ֹ׷ ($ 4DSJQU -BZPVU 1BJOU &WFOU GSBNF NT

Slide 62

Slide 62 text

‣ החַֻⳢ椚׾鯪ֻծ瀉ֻׅ׷ ‣ ً؎ٝأٖحس׾ꞿղה⽑剣׃ג׃תֲ״ֲזⳢ椚׾惓׃גְֻ ؎كٝزٕ٦ف涸ח➭ךⳢ椚ָⶴ׶鴥׭׷״ֲⴓⶴׅ׷ TFU5JNFPVUהַ ⚛⴨⻉דֹ׷Ⳣ椚כ➭ךأٖحسח鷕ָׅ8FC8PSLFSהַ 㼎瘻כְֻאַ֮׷

Slide 63

Slide 63 text

‣ 暴㹀ךⳢ椚׾㼔欽أٖحسחⴖ׶⳿׃ג⚛⴨⻉ׇׁ׋׶ #MJOL׌ה3BTUFS5ISFBE $PNQPTJUPS5ISFBE 4DSJQU4USFBNFS5ISFBEהַ ‣ ٖٝتٓךةأؙ׾➙״׶׮㼭ְׁثٍؙٝחⴓⶴ׃׋׶ ‣ .P[JMMBך1SPKFDU2VBOUVNכせ⵸ָאְגְג剣せז♧鸬ך《׶穈׫ ٖٝتؚٔٝؒٝآٝךꟚ涪⩎׮葿ղװ׏ג׷

Slide 64

Slide 64 text

‣ 㹋꿀㜥ד֮׷4FSWPך䧭卓׾ծ؝ٝه٦طٝزה׃ג(FDLPח《׶鴥׬ ‣ 2VBOUVN$44 4UZMP أة؎ٕⳢ椚הإؙٖةوحثך⚛⴨⻉ ‣ 2VBOUVN3FOEFS0QFO(-ك٦أד$44ח暴⻉׃׋ٖٝتٓפך縧ֹ䳔ִ ‣ 2VBOUVN$PNQPTJUPS$PNQPTJUPSךأٖحسַ׵فٗإأפך杝甧 ‣ 2VBOUVN%0.ぐةـךوٕثفٗإأأٖحس⻉הأ؛آُ٦ٕ盖椚 ‣ FUD 1SPKFDU2VBOUVN 4FFBMTP.P[JMMBכ2VBOUVNفٗآؙؑزד麓⿠ה鏐ⴽ׃ծ劢勻ח颺ֽ׷ IUUQSPDLSJEHFIBUFOBCMPHDPNFOUSZ

Slide 65

Slide 65 text

ٓٝة؎يך暴חٖٝتؚٔٝワ׶ד 涪欰ׅ׷♧菙涸ז㉏겗

Slide 66

Slide 66 text

ז׿ה)5.-$POGFSFODFד涪邌׃׋ⰻ㺁ָת׌颣㄂劍ꣲⰻדׅ 4QFBLFS%FDL IUUQTTQFBLFSEFDLDPNBIPNVXFCGSPOUFOESFOEFSJOHQFSGPSNBODFLOPXMFEHFBOEUJQT :PV5VCF IUUQTXXXZPVUVCFDPNXBUDI WD#5"SFK9&

Slide 67

Slide 67 text

ٓٝة؎يחꟼ׻׷زؾحؙ

Slide 68

Slide 68 text

‣ ֮׷銲稆׾PCTFSWF׃ג㼎韋ָ歗꬗ח⳿׋׶Ⰵ׏׋׶ׅ׷הDBMMCBDLׅ׷ ‣ 䖞勻ךHFU#PVOEJOH$MJFOU3FDUהDMJFOU8JEUI)FJHIUךٗآحַؙ׵鍑佝 ‣ +4ַ׵ٖ؎،ؐز䞔㜠ח⿫撑ׅ׷ꥷך؝٦ر؍ؚٝٔأؙ׾鯪幾דֹ׷ ٔأؙٖ؎،ؐزך麓ⶱזⱄ鎘皾ծְ׻ײ׷'PSDFE-BZPVUװ-BZPVU5ISBTIJOH *OUFSTFDUJPO0CTFSWFSأؙٗ٦ٕず劍Ⳣ椚ך佸⚅⚺

Slide 69

Slide 69 text

Slide 70

Slide 70 text

Slide 71

Slide 71 text

‣ UPVDINPWFװNPVTFXIFFMזוכرغ؎أך乼⡲הず劍׃ג涪欰ׅ׷ ‣ FQSFWFOU%FGBVMU ח⪒ִגծ歗꬗刿倜ך⵸חعٝسٓךⳢ椚䖉׍ָ֮׷ ‣ ☝׾ㄎן⳿ׁזְֿה׾⥂鏾ׅ׸לծأي٦ؤח歗꬗刿倜דֹ׷ 1BTTJWF&WFOU-JTUFOFSTأؙٗ٦ٕآٍؙٝ׾鯪幾 element.addEventListener('touchmove', handler, { passive: true });

Slide 72

Slide 72 text

WJBIUUQTXXXZPVUVCFDPNXBUDI W/1.+H Not passive Use passive

Slide 73

Slide 73 text

IUUQSCZFSTHJUIVCJPTDSPMMMBUFODZIUNM 4DSPMMKBOLEVFUPUPVDIXIFFMIBOEMFSTEFNP

Slide 74

Slide 74 text

‣ Ⳣ椚ׅץֹةأָؙזֻ㸣ⰋחⰅ⸂䖉׍ךהֹ *EMF ח涪抟ׅ׷؝٦ٕغحؙ ‣ TFU5JNFPVU GO ״׶䛬䠐涸 ‣ ؿٖ٦يך刿倜׾⮚⯓דֹ׷ ‣ ⢪ְ麣כ葿ղ֮׶׉ֲ SFRVFTU*EMF$BMMCBDL 6TJOHSFRVFTU*EMF$BMMCBDL]8FC](PPHMF%FWFMPQFST IUUQTEFWFMPQFSTHPPHMFDPNXFCVQEBUFTVTJOHSFRVFTUJEMFDBMMCBDL

Slide 75

Slide 75 text

Slide 76

Slide 76 text

‣ ׉ך銲稆ח㢌刿ָ涪欰ׅ׷ֿה׾ծـٓؐؠח✮デׅ׷فٗػذ؍ ‣ ✉凐חְֲהtransform: translate3d(0, 0, 0)عحؙך姻䒭晛 ‣ (16،ؙإٖٓ٦ءّٝזוծـٓؐؠָ⹧䩛ח剑黝⻉ׅ׷׋׭ךو٦ؚؗٝ $448JMM$IBOHF姻׃ֻ⢪׻זְהⶰ⡲欽ָ֮׷ֽו⤑ⵃ .element { transform: scale(1); will-change: transform; } .element.clicked { transform: scale(2); } 4FFBMTP$44XJMMDIBOHFفٗػذ؍חאְג濼׏גֶֻץֹֿה IUUQTEFWPQFSBDPNBSUJDMFTKBDTTXJMMDIBOHFQSPQFSUZ

Slide 77

Slide 77 text

WJBIUUQTXFCLJUPSHCMPHDTTBOJNBUJPO

Slide 78

Slide 78 text

‣ أة؎ٕծٖ؎،ؐزծ䲽歗ך鎘皾眔㔲׾ꣲ㹀׃ג剑黝⻉דֹ׷ ‣ ֮׷銲稆ⰻך朐䡾ח״׷㢩歲פך䕦갟׾㼓ׄ鴥׭׷فٗػذ؍ DPOUBJOTJ[F̔䭷㹀ׁ׸׋銲稆ך؟؎ؤָ؝ٝذٝخծ㶨㷝銲稆ח䕦갟ׁ׸זֻז׷ DPOUBJOMBZPVU̔䭷㹀ׁ׸׋銲稆ָ鋵⯌䓌銲稆ךٖ؎،ؐزח䕦갟׾♷ִזֻז׷ DPOUBJOTUZMF̔䭷㹀ׁ׸׋銲稆ך㢩ח䕦갟׾⿹רׅ♧鿇ךأة؎ٕ׾ⰻ⩎ד㸣穠ׇׁ׷ DPOUBJOQBJOU̔䭷㹀ׁ׸׋銲稆ך㞮歲ך㢩⩎ח㶨㷝銲稆ָل؎ٝزׁ׸זֻז׷ $44$POUBJONFOU⠗׻׵זְ$44فٗػذ؍痥⡘˟⦐➂ך䠬䟝

Slide 79

Slide 79 text

IUUQTDPEFQFOJPBIPNVGVMM;Q,(S/ )FMMP $44$POUBJONFOU1MBZHSPVOE

Slide 80

Slide 80 text

תה׭

Slide 81

Slide 81 text

‣ החַֻ剑鵚ךرְؕ+BWB4DSJQUחכ孡׾אֽגֶֻה葺ְ ‣ ل٦آٗ٦سך鎘庠䭷垥׾濼׏גֶֻהչזחָ鸞ְךַպָⴻ倖דֹג葺ְ ‣ ٓٝة؎يכ葿ղה"1*ָ⯍㹋׃גֹג׷ַ׵ٍؗحث،حف׃הֻה葺ְ ‣ Ⱗ⡤涸ז锃叨װ何㊣ך؛٦أأةر؍חאְגכ 鎉ְ׋ַ׏׋ֿה

Slide 82

Slide 82 text

衼罏!BIPNV!DI 涪㡰剢傈 ✮㹀 ⳿晛䪮遭鐰锷爡 8FCل٦آ鸞䏝何㊣ؖ؎س 馄鸞 ⟎ ⛱ֲ׀劍䖉

Slide 83

Slide 83 text

5IBOLZPV IUUQBIPNV !BIPNV HJUIVCDPNBIPNV ⌂