ウェブサイトをもっと速く！

2018年4月に和歌山のITコミュニティWackerで発表した資料です。

Transcript

1. ΢ΣϒαΠτΛ
 ΋ͬͱ଎͘ʂ 8BDLFS
   
   ٶ಺
   ོߦ
   !NJZB
2. w גࣜձࣾλϩεΧΠ
   w Ұൠࣾஂ๏ਓ͸͡Ί·ͨ͠ʂ
   w 8PSE1SFTTͷਓɻ81$-*ίϛολʔͳͲͳͲɻ
   w དྷिຊ԰͞Μ͠·͢ɻ(PPHMF
   $MPVE
   
   8PSE1SFTT
   ͷղઆॻ Λߴڮจथ͞Μͱॻ͖·ͨ͠ʂ
3. ΞδΣϯμ
4. w ଎͍ͷ͸ਖ਼ٛ
   w ଎͍ͬͯͳʹʁ
   w ϒϥ΢β͕ϖʔδΛදࣔ͢Δ·ͰͷྲྀΕ
   w )551
   w 3FTPVSDF
   )JOUT
   w ΫϦςΟΧϧ$44
   w 8PSE1SFTTͰͷߴ଎Խ
5. ଎͍ͷ͸ਖ਼ٛ
6. IUUQTXXXUIJOLXJUIHPPHMFDPNNBSLFUJOHSFTPVSDFTEBUBNFBTVSFNFOU NPCJMFQBHFTQFFEOFXJOEVTUSZCFODINBSLT
10. w ݸਓͷϒϩάʢIUUQTNJZBJPʣͰ͸ඵ͔Βඵʹॖ·ͬͨ݁Ռ΋17͕૿͑ͨʂ
    w ͜ΕʹऔΓ૊ΉաఔͷதͰ̓ͭ΄Ͳ
    8PSE1SFTT
    ϓϥάΠϯΛ࡞Γ௚ͨ͠Γ৽نʹ࡞ͬͨΓ ͨ͠ɻ
    w ద༻ͨ͠΄΅͢΂ͯͷαΠτͰ্ͷΑ͏ʹ17͕૿Ճͨ͠ɻ
11. ͦ΋ͦ΋଎͍ͬͯԿʁ
12. ௕ڑ཭ϥϯφʔͱͯ͠ͷ଎͞ͱ
 ୹ڑ཭ϥϯφʔͱͯ͠ͷ଎͞͸ผ෺
13. ͨ͘͞ΜͷτϥϑΟοΫʹରͯ͠
 ଎͘Ԡ౴͍ͤͨ͞ w /HJOY΍"QBDIFɺ.Z42-ͷνϡʔχϯά
    w εέʔϧΞ΢τ΍εέʔϧΞοϓ
    w αʔόʔαΠυΩϟογϡ
    w ΦϒδΣΫτΩϟογϡ
    w ΞϓϦέʔγϣϯͷ࠷దԽ
14. ମײ଎౓Λ଎͍ͨ͘͠ w $44΍+4ɺը૾ͷαΠζͷ࠷దԽ
    w )551
    w 3FTPVSDF
    )JOU
    w ΫϥΠΞϯταΠυΩϟογϡ
    w ඇಉظ
    w ଞʹ΋ࢁ΄Ͳʂ
15. ϒϥ΢β͕ϖʔδΛ
 දࣔ͢Δ·ͰͷྲྀΕ
16.  ໊લղܾ
     ઀ଓ
     αʔόʔαΠυͷΞϓϦέʔγϣϯ͕ൃՐ
     ϒϥ΢β͕ίϯςϯπΛμ΢ϯϩʔυ
     ϨϯμϦϯά ্ͷ͢΂ͯͷϙΠϯτͰߴ଎Խ͕Մೳ
17. IUUQTXXXIUNMSPDLTDPNKBUVUPSJBMTJOUFSOBMTIPXCSPXTFSTXPSL
18. UFMOFU
    Ͱ
    )551
    ͯ͠ΈΔͱ ۩ମతʹΠϝʔδ͠΍͍͔͢΋ $ telnet example.com 80 GET / HTTP/1.1 Host: example.com
19. )551
20. )551 )551
21. w )551Ͱ͸ϒϥ΢β͸֤ϦιʔεΛ࠷େͰ̒ͭʢʁʣ ·Ͱ͔͠ಉ࣌ʹμ΢ϯϩʔυ͠ͳ͍ɻ
    w ͦͷͨΊʹੲ͸
    $44εϓϥΠτͱ͔υϝΠϯγϟʔσΟ ϯάͱ͔͍Ζ͍Ζؤுͬͨʂ
    w )551
    Ͱ͸ɺͻͱͭͷ5$1઀ଓͰ·ͱΊͯμ΢ϯϩʔ υͰ͖Δɻ
22. )551
    4FSWFS
    1VTI
23. w ͋ͱ͔Β࢖༻͢Δ͜ͱ͕Θ͔ͬͯΔ$44΍+4ɺը૾ͳͲ Λϒϥ΢β͔ΒͷϦΫΤετΛ଴ͨͣʹ
    1VTIɻ
24. 8PSE1SFTTϓϥάΠϯΛ࡞ͬͯΈͨ
25. w ϒϥ΢βʹΩϟογϡ͕͋ͬͯ΋1VTIͯ͠͠·͏ͷͰɺͳΜ Ͱ΋͔ΜͰ΋
    1VTI
    ͯ͠͠·͏ͷ͸ɺ͍·͍ͪͳ͜ͱ͕Θ͔ͬ ͨɻ8PSE1SFTTϓϥάΠϯͱͯ͠͸΋͏গ͠ݕ౼͕ඞཁɻ
    w ଚܟ͢Δ8PSE1SFTTͷίϛολʔͷҰਓɺ"BSPO
    +PSCJO͕ ৯͍͍ͭͯ͘Εͨͷ͕خ͔ͬͨ͠ɻʢҧ
26. 3FTPVSDF
    )JOUT
27. w %/4
    1SFGFUDI
    w 1SFDPOOFDU
    w 1SFGFUDI
    w 1SFSFOEFS IUUQTXDHJUIVCJPSFTPVSDFIJOUT
28. <link rel=“prerender" href="//example.com/next-page.html"> ͨͩ͠
    1SFSFOEFS
    ͸ϖʔδʹ͖͔ͭͭ͠࢖͑ͳ͍ʜɻ 3FTPVSDF
    )JOUT
    ͸ɺMJOL
    
    ͰຒΊࠐΉ͚ͩͳͷͰ
    ׂͱ؆୯ʹಋೖՄೳ
29. 8PSE1SFTTͰ͸
    ҎԼͷΑ͏ͳײ͡Ͱ࣮૷Մೳ function makewp_example_resource_hints( $hints, $relation_type ) { if ( 'dns-prefetch' === $relation_type ) { $hints[] = '//make.wordpress.org'; } else if ( 'prerender' === $relation_type ) { $hints[] = 'https://make.wordpress.org/great-again'; } return $hints; } add_filter( 'wp_resource_hints', 'makewp_example_resource_hints', 10, 2 );
30. ΫϦςΟΧϧ$44
31. <?php sleep( 10 ); // すげー重たいCSS header( 'Content-Type: text/css; charset=UTF-8' ); ?> h1 { color: #ff0000; } ͜ΕΛϒϥ΢βͰಡΈࠐΜͩΒͲ͏ͳΔ͔ࢼͯ͠ΈΑ͏ʂ
32. ϑΝʔετϏϡʔͰ͸දࣔ͞Εͯͳ͍ͱ͜Ζ͕͍ͬͺ͍͋Δɻ
    ϝσΟΞΫΤϦʔ౳Λۦ࢖ͯ͠ϑΝʔετϏϡʔͰ
 ෆཁͳ$44΍+4ʹΑΔϨϯμϦϯάϒϩοΫΛ๷͙ɻ
33. IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTQFSGPSNBODFDSJUJDBM SFOEFSJOHQBUISFOEFSCMPDLJOHDTT IMKB
34. 8PSE1SFTTͷߴ଎Խ
35. 8PSE1SFTT͸ॏ͍ʁ w 8PSE1SFTT͕ॏ͍ͱ͍͏ΑΓ΋ɺ؆୯ʹॏ͘Ͱ͖Δͱ͍ ͏ͷ͕ਖ਼͍͠ɻ
36. ॏ͘ͳΓ͕ͪͳϙΠϯτ
37. ϓϥάΠϯଟ͗͢ w ϓϥάΠϯͷઃఆ߲໨͸ϩʔυ࣌ʹ͢΂ͯ·ͱΊͯಡΈࠐ ·ΕΔɻϓϥάΠϯΛΞϯΠϯετʔϧͨ͠ޙ΋ͦΕΒ͸ ࢒ΔͷͰຊ൪؀ڥͰϓϥάΠϯΛ͋Ε͜Εࢼ͚ͩ͢Ͱ΋ύ ϑΥʔϚϯε௿ԼͷݪҼʹͳΓ͏Δɻ
    w γϣʔτίʔυͳͲͷϓϥάΠϯ͸ɺͦͷγϣʔτίʔυ Λ࢖༻͍ͯ͠ͳ͍ϖʔδͰ΋$44ΛಡΈࠐΉɻͦͷγϣʔ τίʔυ΄Μͱʹ࢖ͬͯΔʁ
38. ΩϟογϡܥϓϥάΠϯΛ
    ৴༻͗͢͠ w ΩϟογϡܥϓϥάΠϯ͸௒ॏ͍αΠτΛͪΐͬͱ͸Ϛγ ʹͯ͘͠ΕΔͬͯఔ౓ͷظ଴஋Ͱɻ
    w ڞ༗αʔόʔͰ͸ٯޮՌʹͳΔ͜ͱ͕ଟ͍ɻʢԤถͷڞ༗ αʔόʔͰ͸ར༻ېࢭʹͳ͍ͬͯΔ͜ͱ͕΄ͱΜͲɻʣ
    w ࢖͍͜ͳͨ͢Ίʹ͸ߴ౓ͳ஌͕ࣝඞཁɻ
39. ॏ͘ͳΔϓϥάΠϯͷύλʔϯ w ؔ࿈هࣄܥ
    w ϦϯΫνΣοΫͯ͘͠ΕΔܥ ͋ͱ
    +FU1BDL
    ʜ
    ׼
40. ଎͘͢ΔͨΊͷϙΠϯτ
41. w 1)1
    
    8PSE1SFTT
    ͸
    1)1
    Ҏ্Λਪ঑ʂ
    w /HJOY
    
    γϯάϧϓϩηεɺΠϕϯτۦಈɺඇಉظʂ
    w ը૾ͷ࠷దԽ
    
    KQFHPQUJN
    QOHRVBOU
    ͳͲͳͲɻ
    w +4ɺ$44ͷ࠷దԽɻಡΈࠐΈλΠϛϯάͷมߋɻ ҎԼͷ߲໨͚ͩͰ΋͔ͳΓҧ͏ʂ 1)1ͷར༻཰͕௿͍ͷͰڞ༗αʔόʔͷਓ͸͍·͙͢ίϯτϩʔϧύωϧ΁ʂ
42. IUUQTNJZBJPPQUJNJ[FJNBHFTGPSXPSEQSFTTXJUIUIF KQFHPQUJN 8PSE1SFTTͰͷKQFHPQUJNʹΑΔ
    ը૾ͷ࠷దԽͷ࣮૷ྫ ίΞίϛολʔʹ
    ๙ΊΒΕͨʂ
43. 8PSE1SFTTͰ$44ͷಡΈࠐΈλΠϛϯάΛมߋ͢Δ+4ͷྫ
    ͻͱͭͻͱͭ஍ಓʹؤுͬͨΒɺ
 ͔ͨ͠ʹτοϓϖʔδͰ.#Ҏ্ͷαΠζ࡟ݮʹ੒ޭͨ͠ɻ
    ʢASFMTVCSFTPVSDFA
    ͷ΄͏͕͍͍͔΋ʣ
44. ͦͷଞ w 8PSE1SFTTͷ৽ΤσΟλʔɺ(VUFOCFSH͕ಋೖ͞ΕΔͱαʔυ ύʔςΟͷϓϥάΠϯʹΑͬͯେྔͷ$44΍+4͕ϩʔυ͞ΕΔ Մೳੑ͕͋ΔɻϑϩϯτΤϯυʹؔ͢ΔεΩϧͷཁٻਫ४্͕ ͕ͬͯ͠·͏͔΋ɻ
    w 8PSE1SFTT
    ͷ
    K2VFSZ
    ͱ
    KRVFSZNJHSBUF
    ͸
    IFBE
    
    ͰಡΈ ࠐ·ΕͯϨϯμϦϯάΛϒϩοΫ͢ΔͷͰཁ஫ҙɻ
45. 5IBOLT ͓࢓ࣄͷ૬ஊ͸ҎԼ·Ͱɻ
    IUUQTUBSPTLZDPKQ
    IUUQTMJDUKQ