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

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

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

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

Takayuki Miyauchi

April 15, 2018
Tweet

More Decks by Takayuki Miyauchi

Other Decks in Technology

Transcript

  1. ΢ΣϒαΠτΛ

    ΋ͬͱ଎͘ʂ
    8BDLFS

    ٶ಺ོߦ
    !NJZB

    View full-size slide

  2. w גࣜձࣾλϩεΧΠ
    w Ұൠࣾஂ๏ਓ͸͡Ί·ͨ͠ʂ
    w 8PSE1SFTTͷਓɻ81$-*ίϛολʔͳͲͳͲɻ
    w དྷिຊ԰͞Μ͠·͢ɻ(PPHMF$MPVE8PSE1SFTTͷղઆॻ
    Λߴڮจथ͞Μͱॻ͖·ͨ͠ʂ

    View full-size slide

  3. w ଎͍ͷ͸ਖ਼ٛ
    w ଎͍ͬͯͳʹʁ
    w ϒϥ΢β͕ϖʔδΛදࣔ͢Δ·ͰͷྲྀΕ
    w )551
    w 3FTPVSDF)JOUT
    w ΫϦςΟΧϧ$44
    w 8PSE1SFTTͰͷߴ଎Խ

    View full-size slide

  4. ଎͍ͷ͸ਖ਼ٛ

    View full-size slide

  5. IUUQTXXXUIJOLXJUIHPPHMFDPNNBSLFUJOHSFTPVSDFTEBUBNFBTVSFNFOU
    NPCJMFQBHFTQFFEOFXJOEVTUSZCFODINBSLT

    View full-size slide

  6. w ݸਓͷϒϩάʢIUUQTNJZBJPʣͰ͸ඵ͔Βඵʹॖ·ͬͨ݁Ռ΋17͕૿͑ͨʂ
    w ͜ΕʹऔΓ૊ΉաఔͷதͰ̓ͭ΄Ͳ8PSE1SFTTϓϥάΠϯΛ࡞Γ௚ͨ͠Γ৽نʹ࡞ͬͨΓ
    ͨ͠ɻ
    w ద༻ͨ͠΄΅͢΂ͯͷαΠτͰ্ͷΑ͏ʹ17͕૿Ճͨ͠ɻ

    View full-size slide

  7. ͦ΋ͦ΋଎͍ͬͯԿʁ

    View full-size slide

  8. ௕ڑ཭ϥϯφʔͱͯ͠ͷ଎͞ͱ

    ୹ڑ཭ϥϯφʔͱͯ͠ͷ଎͞͸ผ෺

    View full-size slide

  9. ͨ͘͞ΜͷτϥϑΟοΫʹରͯ͠

    ଎͘Ԡ౴͍ͤͨ͞
    w /HJOY΍"QBDIFɺ.Z42-ͷνϡʔχϯά
    w εέʔϧΞ΢τ΍εέʔϧΞοϓ
    w αʔόʔαΠυΩϟογϡ
    w ΦϒδΣΫτΩϟογϡ
    w ΞϓϦέʔγϣϯͷ࠷దԽ

    View full-size slide

  10. ମײ଎౓Λ଎͍ͨ͘͠
    w $44΍+4ɺը૾ͷαΠζͷ࠷దԽ
    w )551
    w 3FTPVSDF)JOU
    w ΫϥΠΞϯταΠυΩϟογϡ
    w ඇಉظ
    w ଞʹ΋ࢁ΄Ͳʂ

    View full-size slide

  11. ϒϥ΢β͕ϖʔδΛ

    දࣔ͢Δ·ͰͷྲྀΕ

    View full-size slide

  12. ໊લղܾ
    ઀ଓ
    αʔόʔαΠυͷΞϓϦέʔγϣϯ͕ൃՐ
    ϒϥ΢β͕ίϯςϯπΛμ΢ϯϩʔυ
    ϨϯμϦϯά
    ্ͷ͢΂ͯͷϙΠϯτͰߴ଎Խ͕Մೳ

    View full-size slide

  13. IUUQTXXXIUNMSPDLTDPNKBUVUPSJBMTJOUFSOBMTIPXCSPXTFSTXPSL

    View full-size slide

  14. UFMOFUͰ)551ͯ͠ΈΔͱ
    ۩ମతʹΠϝʔδ͠΍͍͔͢΋
    $ telnet example.com 80
    GET / HTTP/1.1
    Host: example.com

    View full-size slide

  15. w )551Ͱ͸ϒϥ΢β͸֤ϦιʔεΛ࠷େͰ̒ͭʢʁʣ
    ·Ͱ͔͠ಉ࣌ʹμ΢ϯϩʔυ͠ͳ͍ɻ
    w ͦͷͨΊʹੲ͸$44εϓϥΠτͱ͔υϝΠϯγϟʔσΟ
    ϯάͱ͔͍Ζ͍Ζؤுͬͨʂ
    w )551Ͱ͸ɺͻͱͭͷ5$1઀ଓͰ·ͱΊͯμ΢ϯϩʔ
    υͰ͖Δɻ

    View full-size slide

  16. )5514FSWFS1VTI

    View full-size slide

  17. w ͋ͱ͔Β࢖༻͢Δ͜ͱ͕Θ͔ͬͯΔ$44΍+4ɺը૾ͳͲ
    Λϒϥ΢β͔ΒͷϦΫΤετΛ଴ͨͣʹ1VTIɻ

    View full-size slide

  18. 8PSE1SFTTϓϥάΠϯΛ࡞ͬͯΈͨ

    View full-size slide

  19. w ϒϥ΢βʹΩϟογϡ͕͋ͬͯ΋1VTIͯ͠͠·͏ͷͰɺͳΜ
    Ͱ΋͔ΜͰ΋1VTIͯ͠͠·͏ͷ͸ɺ͍·͍ͪͳ͜ͱ͕Θ͔ͬ
    ͨɻ8PSE1SFTTϓϥάΠϯͱͯ͠͸΋͏গ͠ݕ౼͕ඞཁɻ
    w ଚܟ͢Δ8PSE1SFTTͷίϛολʔͷҰਓɺ"BSPO+PSCJO͕
    ৯͍͍ͭͯ͘Εͨͷ͕خ͔ͬͨ͠ɻʢҧ

    View full-size slide

  20. 3FTPVSDF)JOUT

    View full-size slide

  21. w %/41SFGFUDI
    w 1SFDPOOFDU
    w 1SFGFUDI
    w 1SFSFOEFS
    IUUQTXDHJUIVCJPSFTPVSDFIJOUT

    View full-size slide

  22. href="//example.com/next-page.html">
    ͨͩ͠1SFSFOEFS͸ϖʔδʹ͖͔ͭͭ͠࢖͑ͳ͍ʜɻ

    3FTPVSDF)JOUT͸ɺMJOLͰຒΊࠐΉ͚ͩͳͷͰ
    ׂͱ؆୯ʹಋೖՄೳ

    View full-size slide

  23. 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 );

    View full-size slide

  24. ΫϦςΟΧϧ$44

    View full-size slide

  25. sleep( 10 ); // すげー重たいCSS
    header( 'Content-Type: text/css; charset=UTF-8' );
    ?>
    h1
    {
    color: #ff0000;
    }
    ͜ΕΛϒϥ΢βͰಡΈࠐΜͩΒͲ͏ͳΔ͔ࢼͯ͠ΈΑ͏ʂ

    View full-size slide

  26. ϑΝʔετϏϡʔͰ͸දࣔ͞Εͯͳ͍ͱ͜Ζ͕͍ͬͺ͍͋Δɻ
    ϝσΟΞΫΤϦʔ౳Λۦ࢖ͯ͠ϑΝʔετϏϡʔͰ

    ෆཁͳ$44΍+4ʹΑΔϨϯμϦϯάϒϩοΫΛ๷͙ɻ

    View full-size slide

  27. IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTQFSGPSNBODFDSJUJDBM
    SFOEFSJOHQBUISFOEFSCMPDLJOHDTT IMKB

    View full-size slide

  28. 8PSE1SFTTͷߴ଎Խ

    View full-size slide

  29. 8PSE1SFTT͸ॏ͍ʁ
    w 8PSE1SFTT͕ॏ͍ͱ͍͏ΑΓ΋ɺ؆୯ʹॏ͘Ͱ͖Δͱ͍
    ͏ͷ͕ਖ਼͍͠ɻ

    View full-size slide

  30. ॏ͘ͳΓ͕ͪͳϙΠϯτ

    View full-size slide

  31. ϓϥάΠϯଟ͗͢
    w ϓϥάΠϯͷઃఆ߲໨͸ϩʔυ࣌ʹ͢΂ͯ·ͱΊͯಡΈࠐ
    ·ΕΔɻϓϥάΠϯΛΞϯΠϯετʔϧͨ͠ޙ΋ͦΕΒ͸
    ࢒ΔͷͰຊ൪؀ڥͰϓϥάΠϯΛ͋Ε͜Εࢼ͚ͩ͢Ͱ΋ύ
    ϑΥʔϚϯε௿ԼͷݪҼʹͳΓ͏Δɻ
    w γϣʔτίʔυͳͲͷϓϥάΠϯ͸ɺͦͷγϣʔτίʔυ
    Λ࢖༻͍ͯ͠ͳ͍ϖʔδͰ΋$44ΛಡΈࠐΉɻͦͷγϣʔ
    τίʔυ΄Μͱʹ࢖ͬͯΔʁ

    View full-size slide

  32. ΩϟογϡܥϓϥάΠϯΛ
    ৴༻͗͢͠
    w ΩϟογϡܥϓϥάΠϯ͸௒ॏ͍αΠτΛͪΐͬͱ͸Ϛγ
    ʹͯ͘͠ΕΔͬͯఔ౓ͷظ଴஋Ͱɻ
    w ڞ༗αʔόʔͰ͸ٯޮՌʹͳΔ͜ͱ͕ଟ͍ɻʢԤถͷڞ༗
    αʔόʔͰ͸ར༻ېࢭʹͳ͍ͬͯΔ͜ͱ͕΄ͱΜͲɻʣ
    w ࢖͍͜ͳͨ͢Ίʹ͸ߴ౓ͳ஌͕ࣝඞཁɻ

    View full-size slide

  33. ॏ͘ͳΔϓϥάΠϯͷύλʔϯ
    w ؔ࿈هࣄܥ
    w ϦϯΫνΣοΫͯ͘͠ΕΔܥ
    ͋ͱ+FU1BDLʜ׼

    View full-size slide

  34. ଎͘͢ΔͨΊͷϙΠϯτ

    View full-size slide

  35. w 1)18PSE1SFTT͸1)1Ҏ্Λਪ঑ʂ
    w /HJOYγϯάϧϓϩηεɺΠϕϯτۦಈɺඇಉظʂ
    w ը૾ͷ࠷దԽKQFHPQUJN QOHRVBOUͳͲͳͲɻ
    w +4ɺ$44ͷ࠷దԽɻಡΈࠐΈλΠϛϯάͷมߋɻ
    ҎԼͷ߲໨͚ͩͰ΋͔ͳΓҧ͏ʂ
    1)1ͷར༻཰͕௿͍ͷͰڞ༗αʔόʔͷਓ͸͍·͙͢ίϯτϩʔϧύωϧ΁ʂ

    View full-size slide

  36. IUUQTNJZBJPPQUJNJ[FJNBHFTGPSXPSEQSFTTXJUIUIF
    KQFHPQUJN
    8PSE1SFTTͰͷKQFHPQUJNʹΑΔ
    ը૾ͷ࠷దԽͷ࣮૷ྫ
    ίΞίϛολʔʹ
    ๙ΊΒΕͨʂ

    View full-size slide

  37. 8PSE1SFTTͰ$44ͷಡΈࠐΈλΠϛϯάΛมߋ͢Δ+4ͷྫ
    ͻͱͭͻͱͭ஍ಓʹؤுͬͨΒɺ

    ͔ͨ͠ʹτοϓϖʔδͰ.#Ҏ্ͷαΠζ࡟ݮʹ੒ޭͨ͠ɻ
    ʢASFMTVCSFTPVSDFAͷ΄͏͕͍͍͔΋ʣ

    View full-size slide

  38. ͦͷଞ
    w 8PSE1SFTTͷ৽ΤσΟλʔɺ(VUFOCFSH͕ಋೖ͞ΕΔͱαʔυ
    ύʔςΟͷϓϥάΠϯʹΑͬͯେྔͷ$44΍+4͕ϩʔυ͞ΕΔ
    Մೳੑ͕͋ΔɻϑϩϯτΤϯυʹؔ͢ΔεΩϧͷཁٻਫ४্͕
    ͕ͬͯ͠·͏͔΋ɻ
    w 8PSE1SFTTͷK2VFSZͱKRVFSZNJHSBUF͸IFBEͰಡΈ
    ࠐ·ΕͯϨϯμϦϯάΛϒϩοΫ͢ΔͷͰཁ஫ҙɻ

    View full-size slide

  39. 5IBOLT
    ͓࢓ࣄͷ૬ஊ͸ҎԼ·Ͱɻ
    IUUQTUBSPTLZDPKQ
    IUUQTMJDUKQ

    View full-size slide