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

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

1)1FSͰ΋஌͓͖͍ͬͯͨɺ ϑϩϯτΤϯυͰͷ  දࣔ଎౓࠷దԽख๏ גࣜձࣾΦϛΧϨɹલ઒ণ޾

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

ࠓ೔ͷ͓࿩

Slide 5

Slide 5 text

΢ΣϒαΠτ΍αʔϏεͷදࣔ଎౓ͷ࠷దԽ͸ɺ   αʔόʔαΠυͷϓϩάϥϜɺ   ωο τϫʔΫ΍αʔόʔɺ σʔλϕʔεͳͲͷ  όοΫΤϯυํ໘ͷରԠͱɺ   )5.-$44+BWB4DSJQU΍ը૾ͳͲͷ  ϝσΟΞσʔλΛѻ͏ϑϩϯτΤϯυํ໘ͷରԠͷ྆ํ  ͕ඞཁʹͳΓ·͢ɻ

Slide 6

Slide 6 text

Ͱ͔͢Βɺ αʔόʔαΠυͰ  1)1ͷϓϩάϥϜͷ࠷దԽΛ  ߦͬͨͱͯ͠΋ظ଴௨Γͷ݁Ռʹ  ͳΒͳ͍͜ͱ΋ଟʑ͋ΔͰ͠ΐ͏ɻ

Slide 7

Slide 7 text

ଟʑ͋ΔͰ͠ΐ͏

Slide 8

Slide 8 text

ͦͷ࣌ʹ໰୊ͷ੾Γ෼͚Λߦ͏ʹ͸ɺ   ϑϩϯτΤϯυํ໘Ͱͷදࣔ଎౓ͷ࠷దԽͰ  ߦΘΕΔ͜ͱΛ஌͓ͬͯ͘ඞཁ͕͋Γ·͢ɻ

Slide 9

Slide 9 text

͜ͷηογϣϯͰ͸ɺ   1)1FSͷօ͞Μͷ࡞੒ͨ͠ϓϩάϥϜΛ  ΑΓ׆͔ͨ͢Ίͷɺ   ϑϩϯτΤϯυͰͷදࣔ଎౓࠷దԽͷ  ख๏Λղઆ͠·͢ɻ

Slide 10

Slide 10 text

஗͍ʝʝ

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

ٯʹ

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

͓͜ͱΘΓ

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

ࣗݾ঺հ લ઒ণ޾ ʢ·͔͑Θ·͞Ώ͖ʣ   גࣜձࣾΦϛΧϨ  69σϕϩούʔ !NBFQPO

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

ࠗ׆ͱ͍͑͹ΦϛΧϨ

Slide 25

Slide 25 text

Slide 26

Slide 26 text

ࠗ׆ͱ͍͑͹ΦϛΧϨ

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

ฐࣾͷྫ )5.-ͷॳظදࣔεϐʔυΞοϓΛߦ͏ ௚ؼ཰ ɿ ໿վળ  $73 ɿ ໿্ঢ ͳΜͰͦΜͳ༨஍͋ͬͨͷʁ͸ஔ͍͓͍ͯͯʝʝ

Slide 32

Slide 32 text

ૣ͍ʹͨ͜͜͠ͱ͸ͳ͍ ʂ ͦΕΑΓ΋ʝʝ

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

55'#ΑΓલ͔ޙ͔ʁ ࡶʹݴͬͯ͠·͏ͱ 5JNFUP'JSTU#ZUF

Slide 37

Slide 37 text

(PPHMF%FW5PPMTͷ/FUXPSLλϒ

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Slide 40

Slide 40 text

ˡϨεϙϯε ʢ55'#ʣ ଴ػ࣌ؒ ͕͜͜૝ఆ࣌ؒ಺Ͱ͋Ε͹  ϓϩάϥϜҎ֎ͷ໰୊

Slide 41

Slide 41 text

BKBYͰඞཁͳίϯςϯπʹ͍ͭͯ΋  ֬ೝ͓͖ͯ͠·͠ΐ͏

Slide 42

Slide 42 text

Ұ֓ʹ͸ݴ͑ͳ͍έʔε͸  ͍ͬͺ͍͋Γ·͢

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

ͱ͍͍ͭͭɺ ࣌୅΋มΘ͍ͬͯ·ͯ͠

Slide 50

Slide 50 text

෦඼ΛͳΔ΂͘গͳ͘ w $44͕JNQPSUͰܻຕ΋ʜͱ͍͏࣌୅Ͱ͸ͳ͍͔ͳʁ w ϑΝΠϧ਺Λগͳ͘͢ΔͨΊʹɺ   ඞཁͷͳ͍هड़͕ଟ͘ͳΔͷͰ͋Ε͹ɺ   ϑΝΠϧΛ෼͚ͨํ͕ w ࠓ͸ɺ $44+4ͷύʔεͷࡍͷ$16ίετ΋ࢹ໺ʹ

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

)5.-Λ·ͣૣ͘ w ੜ੒ʹ͕͔͔࣌ؒΔίϯϙʔωϯτ͸஗ԆͰೖΕΔ  ͷ΋ݕ౼ɻ w JOTFSU"EKBDFOU)5.-ͳͲͰͷૠೖ w ஗͍ͱμϝͳͷͰ஫ҙɺ ֨ಆதͰ͢ !SVLJBEJB͕ ʢϘιοʣ

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

Ωϟογϡͷ༗ޮ׆༻ w ॳΊͯདྷͨਓ͸࢖͑ͳ͍͚Ͳ΋΍͸Γେࣄ wʮ੩తϑΝΠϧ͸جຊΩϟογϡʯ ͙Β͍ͷ੎͍Ͱ  ˞)5.-Ҏ֎ w Ωϟογϡ༗ޮແޮΛ੾Γସ͑ͯ֬ೝΛ

Slide 56

Slide 56 text

Slide 57

Slide 57 text

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

͝஫ҙ ݸਓతҙݟͰ͕͢ɺ ֘౰αΠτ͸ɺ   දࣔ଎౓͏Μ͵ΜͰίετΛେ͖͔͚͘Δඞཁ͸  ͦΕ΄Ͳʹ͸ແ͍ͱࢥ͍ͬͯ·͢ ཧ༝ w ໨త͕໌֬ͳਓ͕๚໰͢ΔαΠτͰ͋Δ w 1)1ͷΧϯϑΝϨϯεʹڝ߹͕ʜͱ͍͏࿩Ͱ΋ແ͍ w ͦ΋ͦ΋͜Ε͚ͩͷਓ͕ͨͪࢀՃ͍ͯ͠Δ࣌఺Ͱ݁Ռग़ͯ·͢ͷͰ

Slide 60

Slide 60 text

$ISPNFͰݟͯΈ·͠ΐ͏ʜ

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

Slide 64

Slide 64 text

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

Slide 68

Slide 68 text

ϨϯμϦϯά ैདྷͷ+4ಡΈࠐΈ +4ಡΈࠐΈ +4࣮ߦ

Slide 69

Slide 69 text

ैདྷͷ+4ಡΈࠐΈ +4ಡΈࠐΈ +4࣮ߦ ิ଍ )5.-ύʔε ࢦఠࣄ߲ ɿ   )5.-ύʔεͷํ͕ਖ਼͍͠Ͱ͢ɻ   ϨϯμϦϯά͸%0.πϦʔ͕ߏங͞Ε͔ͯΒߦΘΕΔͷͰɻ

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

)5.-ύʔε BTZOD +4ಡΈࠐΈ +4࣮ߦ ิ଍ ࢦఠࣄ߲ ɿ   +4ͷ࣮ߦ࣌ؒதɺ )5.-ͷύʔεॲཧ͕ࢭ·Γ·͢ɻ   $ISPNF%FWFMPQFS5PPMTͷύʔεͷ੨͍෦෼͕அยԽ  ͯ͠දࣔ͞Ε·͢ ʢߦ਺΋֬ೝͰ͖·͢ʣ ɻ   ˞࣍ͷεϥΠυࢀর

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

EFGFS +4ಡΈࠐΈ +4࣮ߦ )5.-ύʔε ࢦఠࣄ߲ ɿ   )5.-ύʔεͰͳ͍ͱEFGFSͷઆ໌ʹ੔߹ੑ͕औΕ·ͤΜɻ   ԿނͳΒɺ %0.$POUFE-PBEFE௚લͰ࣮ߦ͞ΕΔ͔ΒͰ͢ɻ   ϨϯμϦϯά͸ผͰ͢ɻ ิ଍ %0.$POUFE-PBEFE ࢦఠࣄ߲ ɿ   %0.$POUFE-PBEFE௚લͰ࣮ߦ͞ΕΔ͜ͱ͸  ໌ه͞Εͨ΄͏͕͍͍Ͱ͠ΐ͏ɻ

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

+4ͷಡΈࠐΈ ʮCPEZͷલʹ+4ΛಡΈࠐΉʯ ͸ੲͷϋφγ ˞ฐࣾ΋ۙʑ௚͠·͢ ิ଍ ࢦఠࣄ߲ ɿ   +4ͷಡΈࠐΈ͸ɺ IFBE಺Ͱ·ͱΊͯߦ͏ํ͕༗རͰ͋Δ͜ͱΛ໌هͨ͠ํ͕͍͍Ͱ͠ΐ͏ɻ   IFBE಺Ͱ+4ͷಡΈࠐΈࢦఆΛॻ͍͓ͯ͘͜ͱͰɺ )5.-ύʔεͷॲཧͷഎޙͰ  +4ͷμ΢ϯϩʔυॲཧ͕Ͱ͖Δ͔ΒͰ͢ɻ

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

$SJUJDBM1BUI$44Λར༻ IUUQTKPOBTTFCBTUJBOPIMTTPODPNDSJUJDBMQBUIDTTHFOFSBUPS w #PPUTUSBQͷ$44ͷΧελϚΠζෆཁ w ϝΠϯը૾ͷ༏ઌ౓61ʹ΋ͭͳ͛Δ w $44΋࣮࣭తʹඇಉظԽ ࢦఠࣄ߲ ɿ   ͜Ε͸શൠతʹਖ਼͘͠ͳ͍Ͱ͢ɻ $44͸ɺ Ͱ͖Δ͚ͩૣظʹಡΈࠐΉඞཁ͕͋Γɺ ͦΕ͸ɺ $44͕ 35- 3JHIU5P-FGU ͷϑϧϚονϯάॲཧ͔ͩΒͰ͢ɻ ͜ͷܭࢉྔ͸0 /%4 Ͱ͔͢Βɺ )5.-Ͱͷ %0.ͷϊʔυ਺ʹରͯ͠ɺ $44ͷఆٛͷਂ͞ͱϧʔϧηο τͷ਺Λֻ͚ͨ෼͚ͩͷܭࢉ͕ߦΘΕ·͢ɻ ैͬͯɺ $44ͷϧʔϧηο τΛগͳ͘ɺ ·ͨઙ͘͢Δͷ΋ॏཁͰ͕͢ɺ )5.-ͷϊʔυ਺ΛݮΒ͢ͷ΋ॏཁͳ ͷͰ͢ɻ $44ͷॲཧͷߴ଎Խ͸ɺ ϚονϯάͷείʔϐϯάͷہॴԽʹΑͬͯߦ͏ͷ͕ҰൠతͰ͢ɻ #&.ه๏͸ɺ ਂ͞Λஈʹ͢ΔͷͰ༗ޮʹݟ͑·͕͢ɺ ͦͷ෼ɺ ϧʔϧηοτ͕૿͑·͢ɻ ී௨ʹɺ $44ͷ໊લۭؒΛ࢖͏ํ͕ޮՌతͰ͢ɻ ิ଍

Slide 82

Slide 82 text

ิ଍ ͜ͷ݅ɺ ΋͏গ͠ಥͬࠐΜͰ஛ಎ͞Μʹ͓࢕͍͠·ͨ͠ ࠓճͷྫ ʢ1)1ΧϯϑΝϨϯεԭೄͷαΠτʣ Ͱ͸ɺ   $ISPNFͷ%FW5PPMTͷ1FSGPNBODFͰݟΔͱ ੨͍ઢ͕୹͍ےΈ͍ͨʹͳ͍ͬͯ·͕͢ɺ ͜Ε͸ɺ   ը૾ͷμ΢ϯϩʔυ͕அยԽ͍ͯ͠Δঢ়ଶΛ͍ࣔͯ͠·͢ɻ ͜Ε͕஗ԆཁҼͳͷͰɺ $44ࣗମ͕஗ԆͷݪҼʹͳ͍ͬͯͳ͍ͱͷ͜ͱͰ͢ɻ

Slide 83

Slide 83 text

ิ଍ ͜ͷ݅ɺ ΋͏গ͠ಥͬࠐΜͰ஛ಎ͞Μʹ͓࢕͍͠·ͨ͠ ͦͷը૾ͷμ΢ϯϩʔυͷஅยԽΛղফ͢Δඞཁ͕͋Γ·͢ɻ   ʢ஛ಎ͞ΜͷձࣾͰ͸ɺ ʮσϑϥάʯ ͱݺΜͰ͍Δͦ͏Ͱ͢ʣ Ͱɺ Ͳ͏ͯ͠அยԽ͕ى͖͍ͯΔ͔ͱେ͖͘ཧ༝͸ͭ ᶃ ᶄ ᶅ ᶆ ͭ໨͸ɺ NBJOKTͷ %0.$POUFOU-PBEFE࣌ͷ  λΠϜςʔϒϧͷੜ੒͕  ࠩ͠ࠐ·Ε͍ͯΔɻ

Slide 84

Slide 84 text

ิ଍ ͜ͷ݅ɺ ΋͏গ͠ಥͬࠐΜͰ஛ಎ͞Μʹ͓࢕͍͠·ͨ͠ $BUDIQPJOU IUUQTXXXDBUDIQPJOUDPN Ͱݕূͨ͠ͱ͜Ζɺ   ϝΠϯը૾ʹར༻͞ΕΔNW@CHTWHͷಡΈࠐΈ͕ޙճ͠ʹ͞Ε͍ͯ·͢ɻ

Slide 85

Slide 85 text

ิ଍ ͜ͷ݅ɺ ΋͏গ͠ಥͬࠐΜͰ஛ಎ͞Μʹ͓࢕͍͠·ͨ͠ ͭ໨͸ɺ $BUDIQPJOU IUUQTXXXDBUDIQPJOUDPN Ͱݕূͨ͠ͱ͜Ζɺ   8FC'POUTͷϑΝΠϧ͕େྔʹಡΈࠐ·Ε͍ͯ·ͨ͠ɻ $BUDIQPJOUͰݕग़͞Εͨ8FC'POUTͷϑΝΠϧ܈

Slide 86

Slide 86 text

ิ଍ ͜ͷ݅ɺ ΋͏গ͠ಥͬࠐΜͰ஛ಎ͞Μʹ͓࢕͍͠·ͨ͠ ͬ͟ͱ֬ೝ͍ͯ͠ΔݶΓɺ େ͖ͳཧ༝ͱͯ͠ݟड͚ΒΕΔͷ͸ w +4ʹΑΔॲཧͷࠩ͠ࠐΈͰ)5.-ͷύʔεʹׂΓࠐΈ͕ೖ͍ͬͯΔ  ˠඇಉظԽͰରԠ w ॳظͷදࣔͷࡍʹඞཁͰͳ͍ը૾͕ॳظ͔Βݺͼग़͞Ε͍ͯΔ  ˠEFDPEJOHlBTZODzͰରԠ ʢҰ෦CBDLHSPVOEJNBHFʹͳ͍ͬͯΔ΋ͷ΋JNHʹʣ w 8FC'POUTͷϑΝΠϧ͕େྔʹॲཧ͞Ε͍ͯΔ  ˠ(PPHMF'POUT͸ɺ ྫ͑͹࢖͍ॴΛݟग़͠ͳͲʹݶఆ͢Δͱɺ ϑΝΠϧ਺͸ݮΔͷͰɺ ݕ౼͢Δ  ˠ΢ΣΠτͷ਺ ʢݱࡏछྨʣ Λݕ౼͢Δ ͱݴͬͨ͜ͱ͕ڍ͛ΒΕ·͢ ଞʹ΋)551ͷͨΊʹɺ ը૾ྨ͕஗Ԇ͍ͯ͠Δ ʢΞΠυϧλΠϜ͕ଟ͍ʣ Մೳੑ΋ࢦఠ͞Ε·ͨ͠ɻ ˞ຊདྷ͸͔ͬ͠ΓͱίετΛֻ͚ͯݕূ͢Δ΂͖಺༰Ͱ͋Γɺ ͋͘·Ͱ΋ ʮ͓͓·͔ͳʯ ΋ͷͰ͢ɻ   ˞ਐΊΔͳΒɺ )551Ͱɺ ಡΈࠐΈͷඇಉظԽͳͲΛߦͬͯ֬ೝͯ͠Έ͔ͯΒɺ ͱ΋ݴΘΕ͍ͯ·ͨ͠

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

ུ /* Critical Path ͷCSS */  ུ/* preloadͷϙϦϑΟϧ */

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

ΦϑεΫϦʔϯը૾΁ͷରԠ wʮEFDPEJOHlBTZODʯ Λར༻͠·͠ΐ͏ɻ w ελοϑ͞Μͷը૾͸ྲྀੴʹେ͖͗͢Δ͔ͳʁ ิ଍ ࢦఠࣄ߲ ɿ   MPBEJOHlMB[Zz͸ɺ ஛ಎ͞Μͷձࣾ ʢגࣜձࣾ4QFMMEBUBʣ Ͱɺ EFDPEJOHlBTZODzͱൺֱܭଌΛߦͬͯ ͍·͕͢ɺ EFDPEJOHlBTZODzͷํ͕एׯߴ଎Ͱ͢ɻ MPBEJOHlMB[Zz͸ɺ $ISPNF͔͠ରԠ͍ͯ͠ͳ͍ͷͰɺ )5.--JWJOH4UBOEBSEͷ࢓༷ʹैͬͯɺ   EFDPEJOHlBTZODzΛਪ͢ํ͕଎౓తʹ΋ɺ ରԠൣғͷ޿͔͞Β΋ΑΖ͍͔͠ͱࢥ͍·͢ɻ લ઒஫ऍ ɿ   ͜Ε͸EFDPEJOHlBTZODzͱͲͪΒʹ͠Α͏͔બ୒Λߟ͑ͯɺ ʮ࿩୊ੑ͕͋Δ͠ɺ ͲͷΈͪ4BGBSJͰ͸ର Ԡ͍ͯ͠ͳ͍͠ ʢࢲͷצҧ͍Ͱͨ͠ɺ 4BGBSJ΋3FMFBTF͔ΒରԠ͍ͯ͠·͢ʣ ʯ ͱEFDPEJOHlBTZODz Λબ୒͠ͳ͔ͬͨࢲͷ७ਮͳϛεͰ͢ɻ ࢲ΋ΩϟονΞοϓͰ͖͍ͯͳ͔ͬͨɻ ͍͢·ͤΜɻ

Slide 91

Slide 91 text

Ϣʔβʔ͕͜ͷϝΠϯϏδϡΞϧΛ໨ʹ͢Δͷ͕ૣ͘ͳΓ·͢  ʢ͸ͣ ʂ ʣ

Slide 92

Slide 92 text

΋͏গ͠ਐΊΔͳΒʜ w λΠϜςʔϒϧ͕ߴίετͳͷͰɺ   ผͷํ๏Λݕ౼͢Δ w CBDLHSPVOEͰॲཧ͍ͯ͠Δը૾Λ  JNHͳͲʹมߋ͢Δ w #PPUTUSBQͷΧελϜϏϧυʹखΛ෇͚Δ ͔ͳ͊ʁ

Slide 93

Slide 93 text

Slide 94

Slide 94 text

Slide 95

Slide 95 text

Slide 96

Slide 96 text

ը૾ͷϦαΠζ WJFXΛ࡞Δͱ͖ʹIFBE಺ͷΧελϚΠζ  Մೳͳܗʹ͢Δ CPEZ಺ʹKTΛิ׬తʹॻ͍ͨΓ͠ͳ͍Ͱ ʂ ૣ͘)5.-Λग़͢ ʂ

Slide 97

Slide 97 text

·ͱΊ

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

දࣔ଎౓ͷ࿩͸ɺ ؀ڥ΍࣮૷ͷมԽͰมΘ͖͍ͬͯͯ·͢ جຊతͳͱ͜Ζ͸େ͖͘͸มΘ͍ͬͯ·ͤΜ͕ɺ   ஫ྗ͢΂͖ϙΠϯτͷ༏ઌॱҐ͸มΘ͍ͬͯΔͷͰɺ   ΩϟονΞοϓ͍͖ͯ͠·͠ΐ͏

Slide 100

Slide 100 text

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