Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

1644fba8a219c89987390ef4f23d06bf?s=47 Ayumu Sato
September 24, 2017
Programming
50
18k

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

HTML5 Conference 2017 http://events.html5j.org/conference/2017/9/ で使用したスライドです。本編45分。

1644fba8a219c89987390ef4f23d06bf?s=128

Ayumu Sato

September 24, 2017
Tweet

More Decks by Ayumu Sato

See All by Ayumu Sato
1644fba8a219c89987390ef4f23d06bf?s=48 ahomu
1
460
1644fba8a219c89987390ef4f23d06bf?s=48 ahomu
2
1.4k
1644fba8a219c89987390ef4f23d06bf?s=48 ahomu
0
200
1644fba8a219c89987390ef4f23d06bf?s=48 ahomu
9
5.4k
1644fba8a219c89987390ef4f23d06bf?s=48 ahomu
11
5k
1644fba8a219c89987390ef4f23d06bf?s=48 ahomu
1
1.6k
1644fba8a219c89987390ef4f23d06bf?s=48 ahomu
0
220
1644fba8a219c89987390ef4f23d06bf?s=48 ahomu
18
8.7k
1644fba8a219c89987390ef4f23d06bf?s=48 ahomu
0
920

Other Decks in Programming

See All in Programming
Ce7ab424f600bc83740be0716232d58a?s=48 takaakikakei
0
490
0881bf028854bea223770e6bfc0a4065?s=48 martin_lover
11
4.1k
B3b2139e4f2c0eca4efe2379fcebc1c5?s=48 afilina
PRO
3
420
A1391fea7feb81a26c333c05f831dbf3?s=48 tosh2230
11
2.3k
70adfe7679427fa498899769e632b672?s=48 itok
1
230
2c0947c6a28e7f771ebd9859ecf54e5c?s=48 shinyorke
0
230
72a2082c6a4dd79ad68befb3db911616?s=48 mraible
PRO
2
930
4f2867b43e88bf4fbb6cf9f371dc9501?s=48 guni1192
1
280
D8da26d8c2f31098cb33d5d6087e6668?s=48 shuheiyamada
0
410
9bf923e39671cde83584e3e926296c13?s=48 kishikawakatsumi
0
120
81190ba1ece00c93c5d9736c2940895c?s=48 tasugi
0
110
Ad4c3c738e57a9bbcb800871e81c232d?s=48 itosho
0
110

Featured

See All Featured
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
122
5.1k
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
318
19k
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
336
30k
F29327647a9cff5c69618bae420792ea?s=48 tenderlove
58
3.8k
245cee81a9c424266e5e401d844ea881?s=48 lara
27
3.4k
79acae287842acf29084005533a7fb3b?s=48 hursman
111
9.5k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
74
1.7k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
227
8.9k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
298
39k
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
57
9.6k
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
149
12k

Transcript

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

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

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

    䪮遭劤鿇8FC*OJUJBUJWF$FOUFSًر؍،窟䭍䪮遭䨌殛㹓 !BIPNV

  4. ػؿؓ٦وٝأכꅾ銲

  5. 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/

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

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

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

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

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

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

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

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

    ͑؟٦غ؟؎سⳢ椚 ך넝鸞⻉FUD ل٦آٗ٦س
  13. None
  14. None

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

    ٓٝة؎ي

  16. WJBIUUQTXXXZPVUVCFDPNXBUDI WQ)'RO1-;

  17. None

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

  19. ِ٦ؠ٦ 䎃⵸ךأوم 㖑♴ꉟד獳⹛⚥ 4/4ة؎يٓ؎ַٝ׵ ِ٦ؠ٦# 剑倜أوم 㖑倯ח䌓満⚥ ـحؙو٦ַؙ׵ ِ٦ؠ٦$ 䎃⵸ךأوم

    궪굸䏄ך窫劄涸8J 锃ץ暟ד嗚稊ַ׵

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

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

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

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

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

    WJBIUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTQFSGPSNBODFSBJM ו׸ֻ׵ְז׵黝ⴖז䘔瘶鸞䏝ה鎉ִ׷ךַ ٓٝة؎ي

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

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

    -PBEJOH *OUFSBDUJOH

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

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

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

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

    ؙٔذ؍ٕؕٔا٦أך侧ה؟؎ؤ

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

  32. ‣ 嚂錁׃ֹ׸זְ傈劤ך鸐⥋笨♴׶䎂㖱.CQT ٌغ؎ٕ.CQT  WJB"LBNBJ24UBUFPGUIF*OUFSOFU$POOFDUJWJUZ3FQPSU ‣ Ꟛ涪罏ך䠐陎׮׉׸ז׶ח넝ת׏גֹגְ׷ ‣ 黝ⴖז歗⫷䕎䒭ד剑黝⻉הַծذؗأزך剑㼭⻉ H[JQהַ׫׿זװ׷״י

    ‣ رְؕ歗⫷ծ搀꼽זٔا٦أծסא٦ח罋ִ׸לتً׌׏גⴓַ׷ طحزٙ٦ؙך橆㞮הꟚ涪罏ך䠐陎

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

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

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

  36. 4FSWFS4JEF3FOEFSJOH 41"؟؎ز# %PXOMPBET LC LC &WBMVBUFT 7JTJCMFUPUIF6TFS

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

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

    +BWB4DSJQUךⴱ劍⻉؝أزֿ׻ְ

  39. MPEBTI,#   SFBDUEPN,#   SY,#   BDNFKT,#

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

  40. IUUQTNFEJVNDPNSFMPBEJOHKBWBTDSJQUTUBSUVQQFSGPSNBODFGC

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

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

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

    'JSFGPY $ISPNFծ׮ֲּׅ4BGBSJ׮ [PQJ CSPUMJו׏׍׮أ؎أךػٝךせ⵸׵׃ְ

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

  45. <script type="module" src="main.js"></script> <script nomodule src="main-bundled.js"></script> &4NPEVMFT㼎䘔ـٓؐؠぢֽךـ٦زأزٓحفؿ؋؎ٕ &4NPEVMFT劢㼎䘔ـٓؐؠぢֽךغٝسٕؿ؋؎ٕ 4FFBMTP/PEFKTך&4.PEVMFT؟ه٦زך植朐然钠ה⪒ִUFQQFJTCMPH IUUQUFQQFJTIBUFOBCMPHDPNFOUSZFTNPEVMFTJOOPEFKT

  46. ‣ 1SFMPBEכ植㖈ךل٦آך׋׭ח䭷㹀ٔا٦أ׾⮚⯓׃גٗ٦سׅ׷ ‣ 3FTPVSDF)JOUTכ⟃꣬ךل٦آך׋׭ח䫎堣涸Ⳣ椚׾ׅ׷  EOTQSFGFUDI%/4鍑寸ך✲⵸Ⳣ椚  QSFDPOOFDU5$1䱸竲ך✲⵸Ⳣ椚  QSFGFUDIٔا٦أ《䖤ך✲⵸Ⳣ椚

     QSFSFOEFSل٦آךٖٝتؚٔٝך✲⵸Ⳣ椚  1SFMPBE 3FTPVSDF)JOUTז׿הזֻ⡂ג׷ֽוⴽ➬圫

  47. <link rel="preload" href="font.woff" as="font" crossorigin> <link rel="stylesheet" href="main.css"> <link rel="dns-prefetch"

    href="//cdn.example.com"> <link rel="preconnect" href="https://api.example.com"> <link rel="prefetch" href="/libs.js" as="script"> <link rel="prerender" href="/next-page.html"> $44鐰⣣⵸ח1SFMPBEד8FCؿؓٝزך⯓遤ٗ٦س 8FCؿؓٝز䖉׍ד涪欰ׅ׷ذؗأزךٖٝتؚٔٝـٗحؙ׾鯪幾 3FTPVSDF)JOUTぐ⡘

  48. 鎘庠ה鐰⣣䭷垥

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

    ☁⚙ ⬇ ⬇ 8FC؟؎زח ،ؙإأ׃ג鎘庠 ؙٓؐس♳ךؒ٦آؑٝز 鎘庠ر٦ة׾꧊琎

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

    Ý ⬇ ➡ ⬇ 鎘庠ر٦ة׾꧊琎 ؒٝسِ٦ؠ橆㞮ד䞔㜠《䖤

  51. 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♧鿇何㢌

  52. 〢➿ ـٓؐؠ؎كٝز劍 %0.$POUFOU-PBEFE MPBE ـٓؐؠ؎كٝزד➿欽׃גְ׋ 湱ꟼ䚍כ֮׷ָ劤䔲ח鋅׋ְ⦼דכזְ 鵚➿ ؽآُ،ٕ䲽歗ך鎘ꆀ劍 4UBSU3FOEFS 'JSTU1BJOU

     4QFFE*OEFY 䲽歗Ⳣ椚ךة؎ىؚٝחꟼ䗰ָ獳׏׋ 8FC1BHFUFTUָ崧遤׶㨣׭׷ 植➿ ِ٦ؠ٦⡤꿀劍 'JSTU$POUFOUGVM1BJOU 'JSTU.FBOJOHGVM1BJOU 5JNFUP$POTJTUFOUMZ*OUFSBDUJWF ״׶ِ٦ؠ٦⡤꿀ה湫穠ׅ׷䭷垥ָ涫㜥 䠐㄂ָ⠗׻׷邌爙חז׏׋ة؎ىؚٝ 㹋ꥷחⵃ欽〳腉חז׏׋ة؎ىؚٝ ׂ׏ֻ׶ⴓַ׏׋孡חז׸׷䭷垥ך㢌鼂 4FFBMTP8FCؙٓ؎،ٝز؟؎سךػؿؓ٦وٝأًزؙٔأعـ׹ּ IUUQTIBWFMPHBZVNVTBUPDPNEFWFMPQQFSGPSNBODFFQFSGPSNBODF@NFUSJDTIUNM

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

  54. const observer = new PerformanceObserver((list) => { for (const entry

    of list.getEntries()) { // `name` will be either 'first-paint' or 'first-contentful-paint'. const metricName = entry.name; const time = Math.round(entry.startTime + entry.duration); ga('send', 'event', { eventCategory: 'Performance Metrics', eventAction: metricName, eventValue: time, nonInteraction: true, }); } }); // Start observing paint entries. observer.observe({entryTypes: ['paint']}); WJBIUUQTEFWFMPQFSTHPPHMFDPNXFCVQEBUFTVTFSDFOUSJDQFSGPSNBODFNFUSJDTUSBDLJOH@GQGDQ 1BJOU5JNJOH"1*ח״׷'1ה'$1ך《䖤
  55. None

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

  57. let reqCount = 0; const req = new XMLHttpRequest(); req.open('GET',

    url, true); performance.mark('mark_start_xhr'); req.onload = (e) => { performance.mark('mark_end_xhr'); reqCnt++; performance.measure( `measure_xhr_${reqCnt}`, 'mark_start_xhr', 'mark_end_xhr' ); do_something(e.responseText); } req.send(); const entries = performance.getEntriesByType('measure'); entries.forEach((e)=>console.log(`XHR ${e.name} took ${e.duration}ms`)) WJBIUUQTXXXIUNMSPDLTDPNKBUVUPSJBMTXFCQFSGPSNBODFVTFSUJNJOH♧鿇何㢌 6TFS5JNJOH"1*ד⟣䠐ך挿꟦ך䨽銲儗꟦׾鎘庠ׅ׷⢽

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

    ✮皾ך鏣㹀ה㹀䌢涸ז鎘庠 4FFBMTP1FSGPSNBODF#VEHFU.FUSJDT IUUQTUJNLBEMFDDPNQFSGPSNBODFCVEHFUNFUSJDT

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

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

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

    1BJOU &WFOU GSBNF NT

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

    㼎瘻כְֻאַ֮׷

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

    ٖٝتؚٔٝؒٝآٝךꟚ涪⩎׮葿ղװ׏ג׷

  64. ‣ 㹋꿀㜥ד֮׷4FSWPך䧭卓׾ծ؝ٝه٦طٝزה׃ג(FDLPח《׶鴥׬ ‣ 2VBOUVN$44 4UZMP أة؎ٕⳢ椚הإؙٖةوحثך⚛⴨⻉ ‣ 2VBOUVN3FOEFS0QFO(-ك٦أד$44ח暴⻉׃׋ٖٝتٓפך縧ֹ䳔ִ ‣ 2VBOUVN$PNQPTJUPS$PNQPTJUPSךأٖحسַ׵فٗإأפך杝甧

    ‣ 2VBOUVN%0.ぐةـךوٕثفٗإأأٖحس⻉הأ؛آُ٦ٕ盖椚 ‣ FUD 1SPKFDU2VBOUVN 4FFBMTP.P[JMMBכ2VBOUVNفٗآؙؑزד麓⿠ה鏐ⴽ׃ծ劢勻ח颺ֽ׷ IUUQSPDLSJEHFIBUFOBCMPHDPNFOUSZ

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

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

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

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

  69. const target = document.getElementById('target'); let viewport = getViewportSize(); function getViewportSize()

    { return { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight }; } window.addEventListener('scroll', () => { const { width, height } = viewport; const rect = target.getBoundingClientRect(); // ਫฏํ޲ʹ͓͍ͯཁૉͷҰ෦·ͨ͸શ෦͕ը໘಺ʹଘࡏ͠ಘΔ͔ const isInHorizontal = rect.left > 0 && rect.left < width || rect.right > 0 && rect.right < width || rect.left < 0 && rect.right > width; // ਨ௚ํ޲ʹ͓͍ͯཁૉͷҰ෦·ͨ͸શ෦͕ը໘಺ʹଘࡏ͠ಘΔ͔ const isInVertical = rect.top > 0 && rect.top < height || rect.bottom > 0 && rect.bottom < height || rect.top < 0 && rect.bottom > height; // ཁૉͷҰ෦·ͨ͸શ෦͕ը໘಺ʹଘࡏ͢Δ͔ if (isInHorizontal && isInVertical) console.log('ཁૉ͕ը໘಺ʹೖΓ·ͨ͠'); else console.log('ཁૉ͕ը໘಺͔Βग़·ͨ͠'); }, false); 䖞勻ך銲稆ך歗꬗ⰻךⰅ⳿嗚濼

  70. const target = document.getElementById('target'); const observer = new IntersectionObserver(entries =>

    { const entry = entries[0]; // ཁૉ͕গ͠Ͱ΋ը໘಺ʹೖ͍ͬͯΕ͹ਅ if (entry.intersectionRatio > 0) { console.log('ཁૉ͕ը໘಺ʹೖΓ·ͨ͠'); } else { console.log('ཁૉ͕ը໘಺͔Βग़·ͨ͠'); } }); observer.observe(target); *OUFSTFDUJPO0CTFSWFSדずֿׄה׾㹋植ׅ׷

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

    { passive: true });

  72. WJBIUUQTXXXZPVUVCFDPNXBUDI W/1.+H Not passive Use passive

  73. IUUQSCZFSTHJUIVCJPTDSPMMMBUFODZIUNM 4DSPMMKBOLEVFUPUPVDIXIFFMIBOEMFSTEFNP

  74. ‣ Ⳣ椚ׅץֹةأָؙזֻ㸣ⰋחⰅ⸂䖉׍ךהֹ *EMF ח涪抟ׅ׷؝٦ٕغحؙ ‣ TFU5JNFPVU GO  ״׶䛬䠐涸 ‣

    ؿٖ٦يך刿倜׾⮚⯓דֹ׷ ‣ ⢪ְ麣כ葿ղ֮׶׉ֲ SFRVFTU*EMF$BMMCBDL 6TJOHSFRVFTU*EMF$BMMCBDL]8FC](PPHMF%FWFMPQFST IUUQTEFWFMPQFSTHPPHMFDPNXFCVQEBUFTVTJOHSFRVFTUJEMFDBMMCBDL

  75. function myNonEssentialWork (deadline) { // rIC ͷ࣋ͪ࣌ؒ͸ 50ms Ͱ͋ΓɺtimeRemaining() ͸ͦͷ࢒Γ࣌ؒΛฦ͢

    while (deadline.timeRemaining() > 0 && tasks.length > 0) { tasks.shift()(); } if (tasks.length > 0) { requestIdleCallback(myNonEssentialWork); } } requestIdleCallback(myNonEssentialWork); SFRVFTU*EMF$BMMCBDLד内זהֹח剑㣐NT➬✲׾ׅ׷

  76. ‣ ׉ך銲稆ח㢌刿ָ涪欰ׅ׷ֿה׾ծـٓؐؠח✮デׅ׷فٗػذ؍ ‣ ✉凐חְֲהtransform: translate3d(0, 0, 0)عحؙך姻䒭晛 ‣ (16،ؙإٖٓ٦ءّٝזוծـٓؐؠָ⹧䩛ח剑黝⻉ׅ׷׋׭ךو٦ؚؗٝ $448JMM$IBOHF姻׃ֻ⢪׻זְהⶰ⡲欽ָ֮׷ֽו⤑ⵃ

    .element { transform: scale(1); will-change: transform; } .element.clicked { transform: scale(2); } 4FFBMTP$44XJMMDIBOHFفٗػذ؍חאְג濼׏גֶֻץֹֿה IUUQTEFWPQFSBDPNBSUJDMFTKBDTTXJMMDIBOHFQSPQFSUZ

  77. WJBIUUQTXFCLJUPSHCMPHDTTBOJNBUJPO

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

     DPOUBJOQBJOU̔䭷㹀ׁ׸׋銲稆ך㞮歲ך㢩⩎ח㶨㷝銲稆ָل؎ٝزׁ׸זֻז׷ $44$POUBJONFOU⠗׻׵זְ$44فٗػذ؍痥⡘˟⦐➂ך䠬䟝

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

  80. תה׭

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

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

  83. 5IBOLZPV IUUQBIPNV !BIPNV HJUIVCDPNBIPNV ⌂