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

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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/
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. View Slide

14. View Slide

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

    View Slide

16. WJBIUUQTXXXZPVUVCFDPNXBUDI WQ)'RO1-;
    

    View Slide

17. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

40. IUUQTNFEJVNDPNSFMPBEJOHKBWBTDSJQUTUBSUVQQFSGPSNBODFGC
    

    View Slide

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

    View Slide

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

    View Slide

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ו׏׍׮أ؎أךػٝךせ⵸׵׃ְ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

48. 鎘庠ה鐰⣣䭷垥
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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ך《䖤
    

    View Slide

55. View Slide

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

    View Slide

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*ד⟣䠐ך挿꟦ך䨽銲儗꟦׾鎘庠ׅ׷⢽
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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);
    䖞勻ך銲稆ך歗꬗ⰻךⰅ⳿嗚濼
    

    View Slide

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דずֿׄה׾㹋植ׅ׷
    

    View Slide

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

    View Slide

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

    View Slide

73. IUUQSCZFSTHJUIVCJPTDSPMMMBUFODZIUNM
    4DSPMMKBOLEVFUPUPVDIXIFFMIBOEMFSTEFNP
    

    View Slide

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

    View Slide

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➬✲׾ׅ׷
    

    View Slide

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

    View Slide

77. WJBIUUQTXFCLJUPSHCMPHDTTBOJNBUJPO
    

    View Slide

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

    View Slide

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

    View Slide

80. תה׭
    

    View Slide

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

    View Slide

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

    View Slide

83. 5IBOLZPV
    IUUQBIPNV
    !BIPNV
    HJUIVCDPNBIPNV
    ⌂
    

    View Slide