PHPerでも知っておきたい、フロントエンドでの 表示速度最適化手法

PHPカンファレンス沖縄2019
https://phpcon.okinawa.jp/

でのセッションのスライドです。

2019/10/14
システムパフォーマンス、Webパフォーマンスの専門家で、株式会社Spelldata 代表取締役社長の竹洞 陽一郎さんより、気になるところの指摘を頂きました。竹洞さん、ありがとうございます。
穏当に「気になるところ」と言っていただきましたが、説明不足や認識違いもありましたので、補足・修正を入れています。
謹んで微妙な内容を含んでいたことをお詫びするとともに、補足版の資料を参照頂いて、より正確な情報を得ていただけると幸いです。

セッション内で触れていた、手を加えたHTMLは以下で参照できます。
https://www.dropbox.com/s/af2n386dyk4dqu5/index_t01.html?dl=0

Transcript

1. View Slide

2. 1)1FSͰ΋஌͓͖͍ͬͯͨɺ
   ϑϩϯτΤϯυͰͷ

   දࣔ଎౓࠷దԽख๏
   גࣜձࣾΦϛΧϨɹલ઒ণ޾
   

   View Slide

3. γεςϜύϑΥʔϚϯεɺ
   8FCύϑΥʔϚϯεͷઐ໳ՈͰɺ
   גࣜձࣾ4QFMMEBUB୅දऔక໾ࣾ௕
   ͷ஛ಎཅҰ࿠͞ΜΑΓɺ
   ؾʹͳΔͱ͜ΖͷࢦఠΛ௖͖·ͨ͠ɻ
   ஛ಎ͞Μɺ
   ͋Γ͕ͱ͏͍͟͝·͢ɻ
   
   Ժ౰ʹ
   ʮؾʹͳΔͱ͜Ζʯ
   ͱݴ͍͖ͬͯͨͩ·͕ͨ͠ɺ
   આ໌ෆ଍΍ೝࣝҧ͍΋͋Γ·ͨ͠ͷͰɺ
   ิ଍
   ɾ
   मਖ਼ΛೖΕ͍ͯ·͢ɻ
   
   ۘΜͰඍົͳ಺༰ΛؚΜͰ͍ͨ͜ͱΛ͓࿳ͼ͢Δͱͱ΋ʹɺ
   ิ଍൛ͷࢿྉΛࢀর௖͍ͯɺ
   ΑΓਖ਼֬
   ͳ৘ใΛಘ͍͚ͯͨͩΔͱ޾͍Ͱ͢ɻ
   ิ଍
   ิ଍ʹ͸ӈԼʹ
   ʮิ଍ʯ
   ͱೖΕ͍ͯ·͢ˠ
   

   View Slide

4. ࠓ೔ͷ͓࿩
   

   View Slide

5. ΢ΣϒαΠτ΍αʔϏεͷදࣔ଎౓ͷ࠷దԽ͸ɺ
   

   αʔόʔαΠυͷϓϩάϥϜɺ
   

   ωο
   τϫʔΫ΍αʔόʔɺ
   σʔλϕʔεͳͲͷ

   όοΫΤϯυํ໘ͷରԠͱɺ
   

   )5.-$44+BWB4DSJQU΍ը૾ͳͲͷ

   ϝσΟΞσʔλΛѻ͏ϑϩϯτΤϯυํ໘ͷରԠͷ྆ํ

   ͕ඞཁʹͳΓ·͢ɻ
   

   View Slide

6. Ͱ͔͢Βɺ
   αʔόʔαΠυͰ

   1)1ͷϓϩάϥϜͷ࠷దԽΛ

   ߦͬͨͱͯ͠΋ظ଴௨Γͷ݁Ռʹ

   ͳΒͳ͍͜ͱ΋ଟʑ͋ΔͰ͠ΐ͏ɻ
   

   View Slide

7. ଟʑ͋ΔͰ͠ΐ͏
   

   View Slide

8. ͦͷ࣌ʹ໰୊ͷ੾Γ෼͚Λߦ͏ʹ͸ɺ
   

   ϑϩϯτΤϯυํ໘Ͱͷදࣔ଎౓ͷ࠷దԽͰ

   ߦΘΕΔ͜ͱΛ஌͓ͬͯ͘ඞཁ͕͋Γ·͢ɻ
   

   View Slide

9. ͜ͷηογϣϯͰ͸ɺ
   

   1)1FSͷօ͞Μͷ࡞੒ͨ͠ϓϩάϥϜΛ

   ΑΓ׆͔ͨ͢Ίͷɺ
   

   ϑϩϯτΤϯυͰͷදࣔ଎౓࠷దԽͷ

   ख๏Λղઆ͠·͢ɻ
   

   View Slide

10. ஗͍ʝʝ
    

    View Slide

11. View Slide

12. View Slide

13. ௒Ͱ͔͍ը૾͕͍ͬͺ͍Ͱ͢Ͷ
    ʂ
    

    View Slide

14. View Slide

15. View Slide

16. ̋̋̋̋̋̋̋̋̋̋̋Ͱ͢Ͷ
    ʂ
    Λ஌͓ͬͯ͘͜ͱ͸େࣄ
    

    View Slide

17. ٯʹ
    

    View Slide

18. ͜Ε͸ϑϩϯτͰ͸ղܾͰ͖·ͤΜͶ
    ͱݴ͑Δ͜ͱ΋େࣄ
    

    View Slide

19. ཁ͸੾Γ෼͚
    ϘτϧωοΫͷΞλϦΛ෇͚͍͖ͯ·͠ΐ͏
    

    View Slide

20. ͓͜ͱΘΓ
    

    View Slide

21. w 41"Λ૝ఆ͍ͯ͠·ͤΜ
    w '14Λ໨ࢦ͢ͱ͍ͬͨ࿩͸͠·ͤΜ
    

    View Slide

22. ࣗݾ঺հ
    લ઒ণ޾
    ʢ·͔͑Θ·͞Ώ͖ʣ
    

    גࣜձࣾΦϛΧϨ

    69σϕϩούʔ
    !NBFQPO
    

    View Slide

23. View Slide

24. ࠗ׆ͱ͍͑͹ΦϛΧϨ
    

    View Slide

25. Copyright ©
    - All Rights Reserved
    4
    
    3
    0,
    3 0
    

    View Slide

26. ࠗ׆ͱ͍͑͹ΦϛΧϨ
    

    View Slide

27. දࣔ଎౓ΛͱΓ·͘ঢ়گ
    όοΫΤϯυʁϑϩϯτΤϯυʁ

    ͻͱ໨ͰݪҼΛ੾Γ෼͚Δํ๏
    ϑϩϯτΤϯυͰͷදࣔ଎౓࠷దԽͷख๏
    վળϙΠϯτΛݟ͚ͭग़͢
    վળϙΠϯτผରԠྫ
    αʔόʔαΠυϓϩάϥϜͰͰ͖ΔϑϩϯτΤϯυͷ଎౓վળ
    

    View Slide

28. දࣔ଎౓ΛͱΓ·͘ঢ়گ
    όοΫΤϯυʁϑϩϯτΤϯυʁ

    ͻͱ໨ͰݪҼΛ੾Γ෼͚Δํ๏
    ϑϩϯτΤϯυͰͷදࣔ଎౓࠷దԽͷख๏
    վળϙΠϯτΛݟ͚ͭग़͢
    վળϙΠϯτผରԠྫ
    αʔόʔαΠυϓϩάϥϜͰͰ͖ΔϑϩϯτΤϯυͷ଎౓վળ
    

    View Slide

29. ʮදࣔ଎౓͕Ϣʔβʔͷ࢖༻ײΛେ͖͘ࠨӈ͢Δʯ
    
    ͱ͍͏ͷ͸Α͘ݴΘΕ͍ͯ·͢
    

    View Slide

30. ૉఢͳϒϩά͕͋Γ·ͨ͠
    8FCͷද͕ࣔʓඵ஗͘ͳΔͱʷʷ·ͱΊɻ
    8FCύϑΥʔϚϯεͷॏཁੑΛࣔ͢ϑϨʔζूΞΠσΞϚϯζϒϩά

    IUUQTCMPHJEFBNBOTDPNXFCQFSGPSNBODFQISBTFTIUNM
    

    View Slide

31. ฐࣾͷྫ
    )5.-ͷॳظදࣔεϐʔυΞοϓΛߦ͏
    ௚ؼ཰
    ɿ
    ໿վળ

    $73
    ɿ
    ໿্ঢ
    ͳΜͰͦΜͳ༨஍͋ͬͨͷʁ͸ஔ͍͓͍ͯͯʝʝ
    

    View Slide

32. ૣ͍ʹͨ͜͜͠ͱ͸ͳ͍
    ʂ
    ͦΕΑΓ΋ʝʝ
    

    View Slide

33. ஗͍
    ʢॏ͍ʣ
    ͷ͸΄Μͱμϝ
    ʂ
    

    View Slide

34. දࣔ଎౓ΛͱΓ·͘ঢ়گ
    όοΫΤϯυʁϑϩϯτΤϯυʁ

    ͻͱ໨ͰݪҼΛ੾Γ෼͚Δํ๏
    ϑϩϯτΤϯυͰͷදࣔ଎౓࠷దԽͷख๏
    վળϙΠϯτΛݟ͚ͭग़͢
    վળϙΠϯτผରԠྫ
    αʔόʔαΠυϓϩάϥϜͰͰ͖ΔϑϩϯτΤϯυͷ଎౓վળ
    

    View Slide

35. දࣔ଎౓ΛͱΓ·͘ঢ়گ
    όοΫΤϯυʁϑϩϯτΤϯυʁ

    ͻͱ໨ͰݪҼΛ੾Γ෼͚Δํ๏
    ϑϩϯτΤϯυͰͷදࣔ଎౓࠷దԽͷख๏
    վળϙΠϯτΛݟ͚ͭग़͢
    վળϙΠϯτผରԠྫ
    αʔόʔαΠυϓϩάϥϜͰͰ͖ΔϑϩϯτΤϯυͷ଎౓վળ
    

    View Slide

36. 55'#ΑΓલ͔ޙ͔ʁ
    ࡶʹݴͬͯ͠·͏ͱ
    5JNFUP'JSTU#ZUF
    

    View Slide

37. (PPHMF%FW5PPMTͷ/FUXPSLλϒ
    

    View Slide

38. ˡϦΫΤετ଴ػ࣌ؒ
    ˡϦΫΤετΛ४උ࣌ؒ
    ˡ%/4ͷղܾ࣌ؒ
    ˡαʔόʔͱͷ઀ଓͷ֬཰
    ˡ઀ଓͷ֬཰ͷ͏ͪɺ
    44-ʹ͔͚ͨ࣌ؒ
    ˡϦΫΤετૹ৴࣌ؒ
    ˡϨεϙϯε
    ʢ55'#ʣ
    ଴ػ࣌ؒ
    ˡίϯςϯπͷμ΢ϯϩʔυ࣌ؒ
    

    View Slide

39. ˡϦΫΤετ଴ػ࣌ؒ
    ˡϦΫΤετΛ४උ࣌ؒ
    ˡ%/4ͷղܾ࣌ؒ
    ˡαʔόʔͱͷ઀ଓͷ֬཰
    ˡ઀ଓͷ֬཰ͷ͏ͪɺ
    44-ʹ͔͚ͨ࣌ؒ
    ˡϦΫΤετૹ৴࣌ؒ
    ˡϨεϙϯε
    ʢ55'#ʣ
    ଴ػ࣌ؒ
    ˡίϯςϯπͷμ΢ϯϩʔυ࣌ؒ
    

    View Slide

40. ˡϨεϙϯε
    ʢ55'#ʣ
    ଴ػ࣌ؒ
    ͕͜͜૝ఆ࣌ؒ಺Ͱ͋Ε͹

    ϓϩάϥϜҎ֎ͷ໰୊
    

    View Slide

41. BKBYͰඞཁͳίϯςϯπʹ͍ͭͯ΋

    ֬ೝ͓͖ͯ͠·͠ΐ͏
    

    View Slide

42. Ұ֓ʹ͸ݴ͑ͳ͍έʔε͸

    ͍ͬͺ͍͋Γ·͢
    

    View Slide

43. αʔόʔͷ໰୊
    ωοτϫʔΫͷ໰୊
    ࣌ؒଳʹΑΔࠩҟ
    FUDʜ
    

    View Slide

44. දࣔ଎౓ΛͱΓ·͘ঢ়گ
    όοΫΤϯυʁϑϩϯτΤϯυʁ

    ͻͱ໨ͰݪҼΛ੾Γ෼͚Δํ๏
    ϑϩϯτΤϯυͰͷදࣔ଎౓࠷దԽͷख๏
    վળϙΠϯτΛݟ͚ͭग़͢
    վળϙΠϯτผରԠྫ
    αʔόʔαΠυϓϩάϥϜͰͰ͖ΔϑϩϯτΤϯυͷ଎౓վળ
    

    View Slide

45. දࣔ଎౓ΛͱΓ·͘ঢ়گ
    όοΫΤϯυʁϑϩϯτΤϯυʁ

    ͻͱ໨ͰݪҼΛ੾Γ෼͚Δํ๏
    ϑϩϯτΤϯυͰͷදࣔ଎౓࠷దԽͷख๏
    վળϙΠϯτΛݟ͚ͭग़͢
    վળϙΠϯτผରԠྫ
    αʔόʔαΠυϓϩάϥϜͰͰ͖ΔϑϩϯτΤϯυͷ଎౓վળ
    

    View Slide

46. දࣔ଎౓ΛͱΓ·͘ঢ়گ
    όοΫΤϯυʁϑϩϯτΤϯυʁ

    ͻͱ໨ͰݪҼΛ੾Γ෼͚Δํ๏
    ϑϩϯτΤϯυͰͷදࣔ଎౓࠷దԽͷख๏
    ʢߟ͑ํ
    ɾ
    ελϯεʣ
    
    վળϙΠϯτΛݟ͚ͭग़͢
    վળϙΠϯτผରԠྫ
    αʔόʔαΠυϓϩάϥϜͰͰ͖ΔϑϩϯτΤϯυͷ଎౓վળ
    

    View Slide

47. ΧϦΧϦνϡʔχϯάͰ͸ͳ͍ײ͡Ͱ
    

    View Slide

48. جຊతͳελϯε
    w ෦඼ΛͳΔ΂͘গͳ͘
    w ෦඼͸ͳΔ΂͘খ͘͞
    w ޙͰྑ͍΋ͷ͸ޙ͔Β
    w Ωϟογϡͷ༗ޮ׆༻
    

    View Slide

49. ͱ͍͍ͭͭɺ
    ࣌୅΋มΘ͍ͬͯ·ͯ͠
    

    View Slide

50. ෦඼ΛͳΔ΂͘গͳ͘
    w $44͕JNQPSUͰܻຕ΋ʜͱ͍͏࣌୅Ͱ͸ͳ͍͔ͳʁ
    w ϑΝΠϧ਺Λগͳ͘͢ΔͨΊʹɺ
    

    ඞཁͷͳ͍هड़͕ଟ͘ͳΔͷͰ͋Ε͹ɺ
    

    ϑΝΠϧΛ෼͚ͨํ͕
    w ࠓ͸ɺ
    $44+4ͷύʔεͷࡍͷ$16ίετ΋ࢹ໺ʹ
    

    View Slide

51. ෦඼ΛͳΔ΂͘খ͘͞
    w ඇৗʹେ͖ͳࣸਅͳͲ͸౰વରԠ͕ඞཁ
    w ը૾αΠζͷௐ੔ɺ
    ܗࣜ
    ʢ8FC1
    ͷݕ౼
    w গ͠Ͱ΋ܰ͘ʜͱ͍͏ͷ͸ίετݟͯߟ͑Δ
    w දࣔ଎౓ΑΓ͸ɺ
    సૹྔରࡦతੑ֨΋ೖΔ
    

    View Slide

52. ޙͰྑ͍΋ͷ͸ޙ͔Β
    w )5.-Λ·ͣૣ͘ग़͢
    w ϨϯμϦϯάͷअຐΛආ͚Δ
    w Ϣʔβʔ͕໨ʹ͢Δը໘Λૣ͘࡞Δ
    w ΦϑεΫϦʔϯ΁ͷରԠ
    ʢ-B[ZMPBEͳͲʣ
    

    View Slide

53. )5.-Λ·ͣૣ͘
    w ੜ੒ʹ͕͔͔࣌ؒΔίϯϙʔωϯτ͸஗ԆͰೖΕΔ

    ͷ΋ݕ౼ɻ
    
    w JOTFSU"EKBDFOU)5.-ͳͲͰͷૠೖ
    w ஗͍ͱμϝͳͷͰ஫ҙɺ
    ֨ಆதͰ͢
    !SVLJBEJB͕
    ʢϘιοʣ
    

    View Slide

54. ϨϯμϦϯάͷअຐΛආ͚Δ
    w $44+4ͷಡΈࠐΈͰϒϩοΫ͠ͳ͍
    w +4͸
    ʮBTZODʯ
    ʮEFGFSʯ
    Ͱඇಉظʹ
    w $44͸ແବͳهड़͕ແ͍͔νΣ
    οΫ
    w ೉͍͠৔߹͸$SJUJDBM1BUI$44Λݕ౼͢Δ
    

    View Slide

55. Ωϟογϡͷ༗ޮ׆༻
    w ॳΊͯདྷͨਓ͸࢖͑ͳ͍͚Ͳ΋΍͸Γେࣄ
    wʮ੩తϑΝΠϧ͸جຊΩϟογϡʯ
    ͙Β͍ͷ੎͍Ͱ

    ˞)5.-Ҏ֎
    w Ωϟογϡ༗ޮແޮΛ੾Γସ͑ͯ֬ೝΛ
    

    View Slide

56. දࣔ଎౓ΛͱΓ·͘ঢ়گ
    όοΫΤϯυʁϑϩϯτΤϯυʁ

    ͻͱ໨ͰݪҼΛ੾Γ෼͚Δํ๏
    ϑϩϯτΤϯυͰͷදࣔ଎౓࠷దԽͷख๏
    վળϙΠϯτΛݟ͚ͭग़͢
    վળϙΠϯτผରԠྫ
    αʔόʔαΠυϓϩάϥϜͰͰ͖ΔϑϩϯτΤϯυͷ଎౓վળ
    

    View Slide

57. දࣔ଎౓ΛͱΓ·͘ঢ়گ
    όοΫΤϯυʁϑϩϯτΤϯυʁ

    ͻͱ໨ͰݪҼΛ੾Γ෼͚Δํ๏
    ϑϩϯτΤϯυͰͷදࣔ଎౓࠷దԽͷख๏
    վળϙΠϯτΛݟ͚ͭग़͢
    վળϙΠϯτผରԠྫ
    αʔόʔαΠυϓϩάϥϜͰͰ͖ΔϑϩϯτΤϯυͷ଎౓վળ
    

    View Slide

58. ྫʣ
    1)1ΧϯϑΝϨϯεԭೄ
    IUUQTQIQDPOPLJOBXBKQ
    

    View Slide

59. ͝஫ҙ
    ݸਓతҙݟͰ͕͢ɺ
    ֘౰αΠτ͸ɺ
    

    දࣔ଎౓͏Μ͵ΜͰίετΛେ͖͔͚͘Δඞཁ͸

    ͦΕ΄Ͳʹ͸ແ͍ͱࢥ͍ͬͯ·͢
    ཧ༝
    w ໨త͕໌֬ͳਓ͕๚໰͢ΔαΠτͰ͋Δ
    w 1)1ͷΧϯϑΝϨϯεʹڝ߹͕ʜͱ͍͏࿩Ͱ΋ແ͍
    w ͦ΋ͦ΋͜Ε͚ͩͷਓ͕ͨͪࢀՃ͍ͯ͠Δ࣌఺Ͱ݁Ռग़ͯ·͢ͷͰ
    

    View Slide

60. $ISPNFͰݟͯΈ·͠ΐ͏ʜ
    

    View Slide

61. ؾʹͳΔͱ͜Ζ
    w ͔ͤͬ͘ͷϝΠϯϏδϡΞϧ͕஗Εͯ͘Δ
    w ϩʔυ͍ͯ͠Δ͕࣌ؒ݁ߏ௕͍
    

    View Slide

62. ϐοΫΞοϓ͢Δͱ
    w $44+4ͰϨϯμϦϯάϒϩοΫ͕ى͖͍ͯΔ
    w NBJOKT͕ͦͦ͜͜ॏް
    ʢλΠϜςʔϒϧͷͨΊʣ
    
    w ΦϑεΫϦʔϯͷը૾ͷಡΈࠐΈ͕

    ΠχγϟϧͰߦΘΕ͍ͯΔ

    ˠ.7ͷը૾͕΍΍஗ΕΔ
    

    View Slide

63. දࣔ଎౓ΛͱΓ·͘ঢ়گ
    όοΫΤϯυʁϑϩϯτΤϯυʁ

    ͻͱ໨ͰݪҼΛ੾Γ෼͚Δํ๏
    ϑϩϯτΤϯυͰͷදࣔ଎౓࠷దԽͷख๏
    վળϙΠϯτΛݟ͚ͭग़͢
    վળϙΠϯτผରԠྫ
    αʔόʔαΠυϓϩάϥϜͰͰ͖ΔϑϩϯτΤϯυͷ଎౓վળ
    

    View Slide

64. දࣔ଎౓ΛͱΓ·͘ঢ়گ
    όοΫΤϯυʁϑϩϯτΤϯυʁ

    ͻͱ໨ͰݪҼΛ੾Γ෼͚Δํ๏
    ϑϩϯτΤϯυͰͷදࣔ଎౓࠷దԽͷख๏
    վળϙΠϯτΛݟ͚ͭग़͢
    վળϙΠϯτผରԠྫ
    αʔόʔαΠυϓϩάϥϜͰͰ͖ΔϑϩϯτΤϯυͷ଎౓վળ
    

    View Slide

65. ϨϯμϦϯάϒϩοΫ΁ͷରԠ
    w +4ͷಡΈࠐΈௐ੔
    w $44ͷಡΈࠐΈௐ੔
    ˞NJOJGZ͸΍ͬͯ΋͍͍͚Ͳɺ
    ͋·Γຊ࣭Ͱ͸ͳ͍ͷͰ৮Ε·ͤΜ
    

    View Slide

66. ϨϯμϦϯάϒϩοΫ΁ͷରԠ
    w +4ͷಡΈࠐΈௐ੔
    w $44ͷಡΈࠐΈௐ੔
    

    View Slide

67. <br/><script type=“text/javascript src=“bar.js” defer><br/>

    View Slide

68. ϨϯμϦϯά
    ैདྷͷ+4ಡΈࠐΈ
    +4ಡΈࠐΈ
    +4࣮ߦ
    

    View Slide

69. ैདྷͷ+4ಡΈࠐΈ
    +4ಡΈࠐΈ
    +4࣮ߦ
    ิ଍
    )5.-ύʔε
    ࢦఠࣄ߲
    ɿ
    

    )5.-ύʔεͷํ͕ਖ਼͍͠Ͱ͢ɻ
    

    ϨϯμϦϯά͸%0.πϦʔ͕ߏங͞Ε͔ͯΒߦΘΕΔͷͰɻ
    

    View Slide

70. BTZOD
    +4ಡΈࠐΈ
    +4࣮ߦ
    )5.-ύʔε
    

    View Slide

71. )5.-ύʔε
    BTZOD
    +4ಡΈࠐΈ
    +4࣮ߦ
    ิ଍
    ࢦఠࣄ߲
    ɿ
    

    +4ͷ࣮ߦ࣌ؒதɺ
    )5.-ͷύʔεॲཧ͕ࢭ·Γ·͢ɻ
    

    $ISPNF%FWFMPQFS5PPMTͷύʔεͷ੨͍෦෼͕அยԽ

    ͯ͠දࣔ͞Ε·͢
    ʢߦ਺΋֬ೝͰ͖·͢ʣ
    ɻ
    

    ˞࣍ͷεϥΠυࢀর
    

    View Slide

72. ิ଍
    BTZODͷK2VFSZͷͨΊʹɺ
    1BSTF)5.-͕தஅ͞Ε͍ͯ·͢
    ˞͜ͷεΫϦʔϯγϣοτ͸લ઒͕࡞੒͍ͯ͠·͢
    

    View Slide

73. EFGFS
    +4ಡΈࠐΈ
    +4࣮ߦ
    )5.-ύʔε
    

    View Slide

74. EFGFS
    +4ಡΈࠐΈ
    +4࣮ߦ
    )5.-ύʔε
    ࢦఠࣄ߲
    ɿ
    

    )5.-ύʔεͰͳ͍ͱEFGFSͷઆ໌ʹ੔߹ੑ͕औΕ·ͤΜɻ
    

    ԿނͳΒɺ
    %0.$POUFE-PBEFE௚લͰ࣮ߦ͞ΕΔ͔ΒͰ͢ɻ
    

    ϨϯμϦϯά͸ผͰ͢ɻ
    ิ଍
    %0.$POUFE-PBEFE
    ࢦఠࣄ߲
    ɿ
    

    %0.$POUFE-PBEFE௚લͰ࣮ߦ͞ΕΔ͜ͱ͸

    ໌ه͞Εͨ΄͏͕͍͍Ͱ͠ΐ͏ɻ
    

    View Slide

75. +4ͷಡΈࠐΈ
    ʮCPEZͷલʹ+4ΛಡΈࠐΉʯ
    ͸ੲͷϋφγ
    ˞ฐࣾ΋ۙʑ௚͠·͢
    

    View Slide

76. +4ͷಡΈࠐΈ
    ʮCPEZͷલʹ+4ΛಡΈࠐΉʯ
    ͸ੲͷϋφγ
    ˞ฐࣾ΋ۙʑ௚͠·͢
    ิ଍
    ࢦఠࣄ߲
    ɿ
    

    +4ͷಡΈࠐΈ͸ɺ
    IFBE಺Ͱ·ͱΊͯߦ͏ํ͕༗རͰ͋Δ͜ͱΛ໌هͨ͠ํ͕͍͍Ͱ͠ΐ͏ɻ
    

    IFBE಺Ͱ+4ͷಡΈࠐΈࢦఆΛॻ͍͓ͯ͘͜ͱͰɺ
    )5.-ύʔεͷॲཧͷഎޙͰ

    +4ͷμ΢ϯϩʔυॲཧ͕Ͱ͖Δ͔ΒͰ͢ɻ
    

    View Slide

77. BTZODEFGFSΛCPEZલʹஔ͘ͱʜ
    +4ಡΈࠐΈ
    +4࣮ߦ
    )5.-ύʔε
    

    View Slide

78. BTZODͱEFGFS
    w 6*ૢ࡞ܥͷ+4͸جຊEFGFSͰ໰୊ͳ͠
    w ͍ΘΏΔ%-$ %0.$POUFOU-PBEFE
    ͕ج४ͳͷͰ
    w τϥοΩϯάܥ͸BTZODͰ࢓ํͳ͠
    w BTZODͰ΋EFGFSͰ΋ͳ͍TDSJQU͸๾໓ͷํ޲Ͱ

    ʢ೉͍͚͠Ͳʣ
    

    View Slide

79. ϨϯμϦϯάϒϩοΫ΁ͷରԠ
    w +4ͷಡΈࠐΈௐ੔
    w $44ͷಡΈࠐΈௐ੔
    

    View Slide

80. $SJUJDBM1BUI$44Λར༻
    IUUQTKPOBTTFCBTUJBOPIMTTPODPNDSJUJDBMQBUIDTTHFOFSBUPS
    w #PPUTUSBQͷ$44ͷΧελϚΠζෆཁ
    w ϝΠϯը૾ͷ༏ઌ౓61ʹ΋ͭͳ͛Δ
    w $44΋࣮࣭తʹඇಉظԽ
    

    View Slide

81. $SJUJDBM1BUI$44Λར༻
    IUUQTKPOBTTFCBTUJBOPIMTTPODPNDSJUJDBMQBUIDTTHFOFSBUPS
    w #PPUTUSBQͷ$44ͷΧελϚΠζෆཁ
    w ϝΠϯը૾ͷ༏ઌ౓61ʹ΋ͭͳ͛Δ
    w $44΋࣮࣭తʹඇಉظԽ
    ࢦఠࣄ߲
    ɿ
    

    ͜Ε͸શൠతʹਖ਼͘͠ͳ͍Ͱ͢ɻ
    $44͸ɺ
    Ͱ͖Δ͚ͩૣظʹಡΈࠐΉඞཁ͕͋Γɺ
    ͦΕ͸ɺ
    $44͕
    35- 3JHIU5P-FGU
    ͷϑϧϚονϯάॲཧ͔ͩΒͰ͢ɻ
    ͜ͷܭࢉྔ͸0 /%4
    Ͱ͔͢Βɺ
    )5.-Ͱͷ
    %0.ͷϊʔυ਺ʹରͯ͠ɺ
    $44ͷఆٛͷਂ͞ͱϧʔϧηο
    τͷ਺Λֻ͚ͨ෼͚ͩͷܭࢉ͕ߦΘΕ·͢ɻ
    
    ैͬͯɺ
    $44ͷϧʔϧηο
    τΛগͳ͘ɺ
    ·ͨઙ͘͢Δͷ΋ॏཁͰ͕͢ɺ
    )5.-ͷϊʔυ਺ΛݮΒ͢ͷ΋ॏཁͳ
    ͷͰ͢ɻ
    $44ͷॲཧͷߴ଎Խ͸ɺ
    ϚονϯάͷείʔϐϯάͷہॴԽʹΑͬͯߦ͏ͷ͕ҰൠతͰ͢ɻ
    
    #&.ه๏͸ɺ
    ਂ͞Λஈʹ͢ΔͷͰ༗ޮʹݟ͑·͕͢ɺ
    ͦͷ෼ɺ
    ϧʔϧηοτ͕૿͑·͢ɻ
    
    ී௨ʹɺ
    $44ͷ໊લۭؒΛ࢖͏ํ͕ޮՌతͰ͢ɻ
    ิ଍
    

    View Slide

82. ิ଍
    ͜ͷ݅ɺ
    ΋͏গ͠ಥͬࠐΜͰ஛ಎ͞Μʹ͓࢕͍͠·ͨ͠
    ࠓճͷྫ
    ʢ1)1ΧϯϑΝϨϯεԭೄͷαΠτʣ
    Ͱ͸ɺ
    

    $ISPNFͷ%FW5PPMTͷ1FSGPNBODFͰݟΔͱ
    ੨͍ઢ͕୹͍ےΈ͍ͨʹͳ͍ͬͯ·͕͢ɺ
    ͜Ε͸ɺ
    

    ը૾ͷμ΢ϯϩʔυ͕அยԽ͍ͯ͠Δঢ়ଶΛ͍ࣔͯ͠·͢ɻ
    
    ͜Ε͕஗ԆཁҼͳͷͰɺ
    $44ࣗମ͕஗ԆͷݪҼʹͳ͍ͬͯͳ͍ͱͷ͜ͱͰ͢ɻ
    

    View Slide

83. ิ଍
    ͜ͷ݅ɺ
    ΋͏গ͠ಥͬࠐΜͰ஛ಎ͞Μʹ͓࢕͍͠·ͨ͠
    ͦͷը૾ͷμ΢ϯϩʔυͷஅยԽΛղফ͢Δඞཁ͕͋Γ·͢ɻ
    

    ʢ஛ಎ͞ΜͷձࣾͰ͸ɺ
    ʮσϑϥάʯ
    ͱݺΜͰ͍Δͦ͏Ͱ͢ʣ
    
    Ͱɺ
    Ͳ͏ͯ͠அยԽ͕ى͖͍ͯΔ͔ͱେ͖͘ཧ༝͸ͭ
    ᶃ
    ᶄ
    ᶅ
    ᶆ
    ͭ໨͸ɺ
    NBJOKTͷ
    %0.$POUFOU-PBEFE࣌ͷ

    λΠϜςʔϒϧͷੜ੒͕

    ࠩ͠ࠐ·Ε͍ͯΔɻ
    

    View Slide

84. ิ଍
    ͜ͷ݅ɺ
    ΋͏গ͠ಥͬࠐΜͰ஛ಎ͞Μʹ͓࢕͍͠·ͨ͠
    $BUDIQPJOU IUUQTXXXDBUDIQPJOUDPN
    Ͱݕূͨ͠ͱ͜Ζɺ
    

    ϝΠϯը૾ʹར༻͞ΕΔNW@CHTWHͷಡΈࠐΈ͕ޙճ͠ʹ͞Ε͍ͯ·͢ɻ
    

    View Slide

85. ิ଍
    ͜ͷ݅ɺ
    ΋͏গ͠ಥͬࠐΜͰ஛ಎ͞Μʹ͓࢕͍͠·ͨ͠
    ͭ໨͸ɺ
    $BUDIQPJOU IUUQTXXXDBUDIQPJOUDPN
    Ͱݕূͨ͠ͱ͜Ζɺ
    

    8FC'POUTͷϑΝΠϧ͕େྔʹಡΈࠐ·Ε͍ͯ·ͨ͠ɻ
    $BUDIQPJOUͰݕग़͞Εͨ8FC'POUTͷϑΝΠϧ܈
    

    View Slide

86. ิ଍
    ͜ͷ݅ɺ
    ΋͏গ͠ಥͬࠐΜͰ஛ಎ͞Μʹ͓࢕͍͠·ͨ͠
    ͬ͟ͱ֬ೝ͍ͯ͠ΔݶΓɺ
    େ͖ͳཧ༝ͱͯ͠ݟड͚ΒΕΔͷ͸
    w +4ʹΑΔॲཧͷࠩ͠ࠐΈͰ)5.-ͷύʔεʹׂΓࠐΈ͕ೖ͍ͬͯΔ

    ˠඇಉظԽͰରԠ
    w ॳظͷදࣔͷࡍʹඞཁͰͳ͍ը૾͕ॳظ͔Βݺͼग़͞Ε͍ͯΔ

    ˠEFDPEJOHlBTZODzͰରԠ
    ʢҰ෦CBDLHSPVOEJNBHFʹͳ͍ͬͯΔ΋ͷ΋JNHʹʣ
    
    w 8FC'POUTͷϑΝΠϧ͕େྔʹॲཧ͞Ε͍ͯΔ

    ˠ(PPHMF'POUT͸ɺ
    ྫ͑͹࢖͍ॴΛݟग़͠ͳͲʹݶఆ͢Δͱɺ
    ϑΝΠϧ਺͸ݮΔͷͰɺ
    ݕ౼͢Δ

    ˠ΢ΣΠτͷ਺
    ʢݱࡏछྨʣ
    Λݕ౼͢Δ
    ͱݴͬͨ͜ͱ͕ڍ͛ΒΕ·͢
    ଞʹ΋)551ͷͨΊʹɺ
    ը૾ྨ͕஗Ԇ͍ͯ͠Δ
    ʢΞΠυϧλΠϜ͕ଟ͍ʣ
    Մೳੑ΋ࢦఠ͞Ε·ͨ͠ɻ
    ˞ຊདྷ͸͔ͬ͠ΓͱίετΛֻ͚ͯݕূ͢Δ΂͖಺༰Ͱ͋Γɺ
    ͋͘·Ͱ΋
    ʮ͓͓·͔ͳʯ
    ΋ͷͰ͢ɻ
    

    ˞ਐΊΔͳΒɺ
    )551Ͱɺ
    ಡΈࠐΈͷඇಉظԽͳͲΛߦͬͯ֬ೝͯ͠Έ͔ͯΒɺ
    ͱ΋ݴΘΕ͍ͯ·ͨ͠
    

    View Slide

87. ิ଍
    ͜ͷ݅ɺ
    ΋͏গ͠ಥͬࠐΜͰ஛ಎ͞Μʹ͓࢕͍͠·ͨ͠
    ͪ͜Βʹ͍ͭͯࢲͷղऍΛ·ͱΊΔͱɺ
    
    ʮϝΠϯϏδϡΞϧΛૣΊʹϢʔβʔʹݟͯ΋Β͏ʯ
    ͱ͍͏໨తͰ$44ͷ࠷దԽΛऔΓ͋͛·͕ͨ͠ɺ
    ໨
    తʹର͢ΔରԠͱͯ͠͸ɺ
    ͜Ε·ͰʹऔΓ্͛ͨݪҼΛղܾ͢Δ͜ͱ͕ॏཁͱ͍͏͜ͱͰ͢ɻ
    
    ·ͨɺ
    ʮ$44ͷ࠷దԽʯ
    ͱ͍͏จ຺Ͱ΋ɺ
    )5.-ͷϊʔυ਺΍$44ͷϧʔϧηοτͷ࡟ݮͳͲ͕ຊདྷ΍Δ
    ΂͖ରԠͱ͍͏͜ͱͰ͢ɻ
    

    View Slide

88. ུ /* Critical Path ͷCSS */

    
    onload=“this.onload=null;this.rel='stylesheet'">
    
    
    
    
    ུ/* preloadͷϙϦϑΟϧ */
    

    View Slide

89. ΦϑεΫϦʔϯը૾΁ͷରԠ
    w ϕλʹ-B[ZMPBEԽ
    w ࠓճ͸
    ʮMPBEJOHlMB[Zʯ
    Ͱζϧͯ͠·͢
    ʢ׼
    w ελοϑ͞Μͷը૾͸ྲྀੴʹେ͖͗͢Δ͔ͳʁ
    

    View Slide

90. ΦϑεΫϦʔϯը૾΁ͷରԠ
    wʮEFDPEJOHlBTZODʯ
    Λར༻͠·͠ΐ͏ɻ
    
    w ελοϑ͞Μͷը૾͸ྲྀੴʹେ͖͗͢Δ͔ͳʁ
    ิ଍
    ࢦఠࣄ߲
    ɿ
    

    MPBEJOHlMB[Zz͸ɺ
    ஛ಎ͞Μͷձࣾ
    ʢגࣜձࣾ4QFMMEBUBʣ
    Ͱɺ
    EFDPEJOHlBTZODzͱൺֱܭଌΛߦͬͯ
    ͍·͕͢ɺ
    EFDPEJOHlBTZODzͷํ͕एׯߴ଎Ͱ͢ɻ
    
    MPBEJOHlMB[Zz͸ɺ
    $ISPNF͔͠ରԠ͍ͯ͠ͳ͍ͷͰɺ
    )5.--JWJOH4UBOEBSEͷ࢓༷ʹैͬͯɺ
    

    EFDPEJOHlBTZODzΛਪ͢ํ͕଎౓తʹ΋ɺ
    ରԠൣғͷ޿͔͞Β΋ΑΖ͍͔͠ͱࢥ͍·͢ɻ
    લ઒஫ऍ
    ɿ
    

    ͜Ε͸EFDPEJOHlBTZODzͱͲͪΒʹ͠Α͏͔બ୒Λߟ͑ͯɺ
    ʮ࿩୊ੑ͕͋Δ͠ɺ
    ͲͷΈͪ4BGBSJͰ͸ର
    Ԡ͍ͯ͠ͳ͍͠
    ʢࢲͷצҧ͍Ͱͨ͠ɺ
    4BGBSJ΋3FMFBTF͔ΒରԠ͍ͯ͠·͢ʣ
    ʯ
    ͱEFDPEJOHlBTZODz
    Λબ୒͠ͳ͔ͬͨࢲͷ७ਮͳϛεͰ͢ɻ
    ࢲ΋ΩϟονΞοϓͰ͖͍ͯͳ͔ͬͨɻ
    ͍͢·ͤΜɻ
    

    View Slide

91. Ϣʔβʔ͕͜ͷϝΠϯϏδϡΞϧΛ໨ʹ͢Δͷ͕ૣ͘ͳΓ·͢

    ʢ͸ͣ
    ʂ
    ʣ
    

    View Slide

92. ΋͏গ͠ਐΊΔͳΒʜ
    w λΠϜςʔϒϧ͕ߴίετͳͷͰɺ
    

    ผͷํ๏Λݕ౼͢Δ
    w CBDLHSPVOEͰॲཧ͍ͯ͠Δը૾Λ

    JNHͳͲʹมߋ͢Δ
    w #PPUTUSBQͷΧελϜϏϧυʹखΛ෇͚Δ
    ͔ͳ͊ʁ
    

    View Slide

93. ͝஫ҙ
    ݸਓతҙݟͰ͕͢ɺ
    ֘౰αΠτ͸ɺ
    

    දࣔ଎౓͏Μ͵ΜͰίετΛେ͖͔͚͘Δඞཁ͸

    ͦΕ΄Ͳʹ͸ແ͍ͱࢥ͍ͬͯ·͢
    ཧ༝
    w ໨త͕໌֬ͳਓ͕๚໰͢ΔαΠτͰ͋Δ
    w 1)1ͷΧϯϑΝϨϯεʹڝ߹͕ʜͱ͍͏࿩Ͱ΋ແ͍
    w ͦ΋ͦ΋͜Ε͚ͩͷਓ͕ͨͪࢀՃ͍ͯ͠Δ࣌఺Ͱ݁Ռग़ͯ·͢ͷͰ
    

    View Slide

94. දࣔ଎౓ΛͱΓ·͘ঢ়گ
    όοΫΤϯυʁϑϩϯτΤϯυʁ

    ͻͱ໨ͰݪҼΛ੾Γ෼͚Δํ๏
    ϑϩϯτΤϯυͰͷදࣔ଎౓࠷దԽͷख๏
    վળϙΠϯτΛݟ͚ͭग़͢
    վળϙΠϯτผରԠྫ
    αʔόʔαΠυϓϩάϥϜͰͰ͖ΔϑϩϯτΤϯυͷ଎౓վળ
    

    View Slide

95. දࣔ଎౓ΛͱΓ·͘ঢ়گ
    όοΫΤϯυʁϑϩϯτΤϯυʁ

    ͻͱ໨ͰݪҼΛ੾Γ෼͚Δํ๏
    ϑϩϯτΤϯυͰͷදࣔ଎౓࠷దԽͷख๏
    վળϙΠϯτΛݟ͚ͭग़͢
    վળϙΠϯτผରԠྫ
    αʔόʔαΠυϓϩάϥϜͰͰ͖ΔϑϩϯτΤϯυͷ଎౓վળ
    

    View Slide

96. ը૾ͷϦαΠζ
    WJFXΛ࡞Δͱ͖ʹIFBE಺ͷΧελϚΠζ

    Մೳͳܗʹ͢Δ
    CPEZ಺ʹKTΛิ׬తʹॻ͍ͨΓ͠ͳ͍Ͱ
    ʂ
    
    ૣ͘)5.-Λग़͢
    ʂ
    

    View Slide

97. ·ͱΊ
    

    View Slide

98. ΧϦΧϦνϡʔχϯάͷ࿩Λظ଴ͯͨ͠ਓɺ
    ͍͢·ͤΜ
    Ͱ΋ɺ
    ΧϦΧϦܥͷ࿩͸ϗϯτʹέʔε
    ɾ
    όΠ
    ɾ
    έʔεͳͷͰʜ
    

    View Slide

99. දࣔ଎౓ͷ࿩͸ɺ
    ؀ڥ΍࣮૷ͷมԽͰมΘ͖͍ͬͯͯ·͢
    جຊతͳͱ͜Ζ͸େ͖͘͸มΘ͍ͬͯ·ͤΜ͕ɺ
    

    ஫ྗ͢΂͖ϙΠϯτͷ༏ઌॱҐ͸มΘ͍ͬͯΔͷͰɺ
    

    ΩϟονΞοϓ͍͖ͯ͠·͠ΐ͏
    

    View Slide

100. ࠗ׆ͱ͍͑͹ΦϛΧϨ
     ͋Γ͕ͱ͏͍͟͝·ͨ͠
     ʂ
     !NBFQPO
     ஛ಎ͞Μɺ
     ͋Γ͕ͱ͏͍͟͝·ͨ͠
     ʂ
     

     View Slide