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

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

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

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

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

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

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

Masayuki Maekawa

October 12, 2019
Tweet

More Decks by Masayuki Maekawa

Other Decks in Technology

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
    Ͱݕূͨ͠ͱ͜Ζɺ

    ϝΠϯը૾ʹར༻͞ΕΔ[email protected]ͷಡΈࠐΈ͕ޙճ͠ʹ͞Ε͍ͯ·͢ɻ

    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