$30 off During Our Annual Pro Sale. View Details »

WordPress でも大丈夫!実例で見るウェブパフォーマンス改善

Kite
June 15, 2019

WordPress でも大丈夫!実例で見るウェブパフォーマンス改善

ウェブパフォーマンス、あるいはウェブページの表示速度は、ウェブサイト品質の重要な指標の1つです。今注目されているウェブパフォーマンス改善ですが、そもそも何をすればいいのか、具体例を交えながらその施策を紹介いたします。具体例としては、WordPress を利用したブログの PageSpeed Insights (Lighthouse) のパフォーマンススコアを、30点以下から95点以上に改善した際、実際に行った施策を用います。

Kite

June 15, 2019
Tweet

More Decks by Kite

Other Decks in Technology

Transcript

  1. WordPress Ͱ΋େৎ෉ʂ
    ࣮ྫͰݟΔ΢ΣϒύϑΥʔϚϯεվળ
    WEB
    Kite @ixkaito

    View Slide

  2. KITE
    KITERETZ inc. CEO & Founder
    ­ kite.koga ¬ ixkaito ® ixkaito
    Ŷ ixkaito Ʃ ixkaito ŧ ixkaito
    Web & graphic designer
    Programmer
    WordPress core contributer
    Ruby on Rails contributer
    React contributer
    Wocker developer
    Bathe developer
    Frasco developer

    View Slide

  3. ੈքҰΘ͔Γ΍͍͢
    8PSE1SFTT
    ಋೖͱ
    αΠ
    τ੍࡞ͷ
    ڭՊॻ
    ൃച
    ஶऀɿ҆౻ಞ࢙ɼԬຊलߴɼݹլւਓɼਂ୔޾࣏࿠
    IUUQTXXXBNB[PODPKQEQ

    View Slide

  4. ݖ



    ʂ
    ϧ
    ϒ
    Π
    ό
    ͷ
    ܾ
    ղ
    ϧ
    ϒ
    ϥ
    τ
    ݖ


    ݖ


    Ϋ
    Ϧ
    Τ
    Π
    λ
    ͷ
    ͷ
    Ί
    ͨ
    ͷ
    ஶɹେ۲ഹɹ๺ଜਸɹ໦ଜ߶େɹݹլւਓɹᜊ໦߂थɹ֯ాҁՂɹછ୩ণར
    ݱ৔ͰτϥϒϧʹͳΓ͕ͪͳݖརͷ໰୊ʹ͍ͭͯ
    ɹ ΫϦΤΠλʔͱͯ͠΍ͬͯ͸͍͚ͳ͍͜ͱ
    ɹ ݖརΛ৵֐͞Εͨ࣌ͷ۩ମతͳରॲ๏
    Λɺ
    Θ͔Γ΍͘͢·ͱΊͨΫϦΤΠλʔͷͨΊͷόΠϒϧ
    ൃച
    ஶऀɿେ۲ഹɼ๺ଜਸɼછ୩ণརɼ໦ଜ߶େɼ
    ݹլւਓɼᜊ໦߂थɼ֯ాҁՂ
    IUUQTXXXBNB[PODPKQEQ
    ஶ࡞ݖτϥϒϧղܾͷόΠϒϧʂ
    ΫϦΤΠ
    λʔͷͨΊͷ
    ݖརͷຊ

    View Slide

  5. ࠓճͷ࣮ྫͷର৅αΠτ
    σβΠφʔͷΠϥετϊʔτ
    https://in.spicagraph.com/
    @spicagraph

    View Slide

  6. ·ͣ͸݁Ռ͔Β͓ݟͤ͠Α͏

    View Slide

  7. Before
    Lighthouse

    View Slide

  8. After
    Lighthouse

    View Slide

  9. After
    WebPageTest

    View Slide

  10. 1. ௐࠪɾܭଌ
    1

    View Slide

  11. 1. ௐࠪɾܭଌ
    Lighthouse
    Chrome ֦ுػೳ
    2019.6.15࣌఺ͷόʔδϣϯ: Lighthouse 5.1.0
    https://developers.google.com/web/tools/lighthouse/
    ύϑΥʔϚϯεɺΞΫηγϏϦςΟɺ
    ϕετϓϥΫςΟεɺSEOɺPWA ͷ
    5߲໨ΛௐࠪɾܭଌͰ͖Δ

    View Slide

  12. 1. ௐࠪɾܭଌ
    Lighthouse ίϚϯυϥΠϯπʔϧ
    2019.6.15࣌఺ͷόʔδϣϯ: Lighthouse 5.1.0
    https://www.npmjs.com/package/lighthouse
    $ lighthouse https://example.com/
    ܭଌ݁Ռ͸ HTML ͱͯ͠อଘ͞ΕΔ

    View Slide

  13. 1. ௐࠪɾܭଌ
    Chrome Audits
    2019.6.15࣌఺ͷόʔδϣϯ: Lighthouse 4.3.1
    Lighthouse Chrome ֦ுػೳɺίϚϯυϥΠϯ
    πʔϧͱ΄΅ಉ݁͡Ռ

    View Slide

  14. 1. ௐࠪɾܭଌ
    PageSpeed Insights
    https://developers.google.com/speed/pagespeed/insights/
    ௐ߲ࠪ໨͸ύϑΥʔϚϯεͷΈɺ೔ຊޠ͋Γ

    View Slide

  15. 1. ௐࠪɾܭଌ
    WebPageTest
    https://www.webpagetest.org/

    View Slide

  16. Lighthouse ΍ PageSpeed Insights Ͱ͸௿είΞ͚ͩͲ
    ମײతʹ͸஗͘ײ͡ͳ͍৔߹͕͋Γɺ
    ٯʹߴείΞͰ΋ɺ࣮ࡍ͸଎͍ͱ͸ݶΒͳ͍৔߹͕͋Δɻ
    ͨͩɺվળͰ͖Δ಺༰Λ۩ମతʹࣔͯ͘͠ΕΔͨΊɺ
    Lighthouse (PageSpeed Insights) ΛࢀߟʹվળΛߦ͏ɻ

    View Slide

  17. 22. վળࢪࡦ

    View Slide

  18. ͘͞ΒΠϯλʔωοτ ΤοΫεαʔόʔ ϩϦϙοϓ ϔςϜϧ
    ΢Σϒαʔό Nginx + Apache Nginx + Apache Apache Apache
    PHP
    7.2 (7.3΁Ҡߦத)

    Ϟδϡʔϧ
    7.2

    FastCGI
    7.1

    Ϟδϡʔϧ
    7.1

    Ϟδϡʔϧ
    HDD/SSD DB ͷΈ SSD Φʔϧ SSD DB ͷΈ SSD Φʔϧ SSD
    HTTP HTTP/2 HTTP/2 HTTP/2 HTTP/2
    ͦͷଞ Ϧιʔεϒʔετ
    ϝϞϦ256GB

    αʔόʔΩϟογϡ

    ϒϥ΢βΩϟογϡ

    XΞΫηϥϨʔλ
    WPΩϟογϡ

    ੩తΩϟογϡ
    2. վળࢪࡦ
    αʔό

    View Slide

  19. 2. վળࢪࡦ
    Nginx
    ΤοΫεαʔόʔʮnginxʹ͍ͭͯʯΑΓ
    https://www.xserver.ne.jp/manual/man_server_nginx.php

    View Slide

  20. 2. վળࢪࡦ
    HTTP/2
    ΤοΫεαʔόʔʮHTTP/2ʹ͍ͭͯʯΑΓ
    https://www.xserver.ne.jp/manual/man_server_http2.php

    View Slide

  21. 2. վળࢪࡦ
    PHP7ɺPHP ϞδϡʔϧϞʔυɺFastCGIɺSSD
    ʹ͍ͭͯ͸ׂѪɻͱʹ͔͘ϓϩάϥϜͷॲཧΛߴ଎ԽͰ͖Δ΍ͭΒɻ

    View Slide

  22. 2. վળࢪࡦ
    ෆཁϓϥάΠϯͷΞϯΠϯετʔϧ

    View Slide

  23. ͳΜͱ1ઍສϨίʔυҎ্ʂ1.4GBʂͷσʔλʹૺ۰ʂ
    2. վળࢪࡦ
    ෆཁϓϥάΠϯͷΞϯΠϯετʔϧ

    View Slide

  24. 2. վળࢪࡦ
    ෆཁϓϥάΠϯͷΞϯΠϯετʔϧ
    σʔλϕʔεʹେྔͷϨίʔυΛอଘ͢ΔϓϥάΠϯ͕͋ΔͷͰɺͦ͏͍͏ϓϥάΠϯͷར༻͸ආ͚Α͏ɻ
    ݟ͚ͭͨ৔߹͸ʮఀࢭʯ͚ͩͰ͸ͳ͘ɺ؅ཧը໘Ͱʮ࡟আʯ΋͘͠͸ WP-CLI ͰΞϯΠϯετʔϧ͠Α͏ɻ
    ͖ͪΜͱ࡞ΒΕͨϓϥάΠϯͰ͋Ε͹ΞϯΠϯετʔϧͰσʔλ΋࡟আ͢Δɻ
    தʹ͸ΞϯΠϯετʔϧॲཧΛͪΌΜͱ͍ͯ͠ͳ͍ϓϥάΠϯ΋͋ΔͷͰɺ
    ΞϯΠϯετʔϧޙͷσʔλϕʔε֬ೝ΋๨Εͣʹɻ
    ͞ΒʹɺϓϥάΠϯʹ͸ελΠϧγʔτ΍εΫϦϓτΛૠೖ͢Δ΋ͷ΋ଟ͘ɺ
    ෆཁͳϓϥάΠϯ͸ۃྗఀࢭ΋͘͠͸ΞϯΠϯετʔϧ͠Α͏ɻ

    View Slide

  25. ϗʔϜ΍ΞʔΧΠϒϖʔδͰ͸ Gutenberg ͷίϯςϯπ͕ͳ͘ɺ
    jQuery ΋࢖༻͍ͯ͠ͳ͍ͨΊɺؔ࿈ͷ CSS ͱ jQuery ΛಡΈࠐ·ͳ͍Α͏ʹ͢Δɻ
    ؅ཧը໘Ͱ͸ΞΫγϣϯϑοΫʹ௥Ճ͠ͳ͍Α͏আ֎͓ͯ͘͠ɻ
    2. վળࢪࡦ
    ϖʔδʹΑͬͯ CSS ΍ JavaScript ͷಡΈࠐΈΛ੍ޚ
    function example_dequeue_scripts() {
    if ( is_home() || is_archive() ) {
    wp_dequeue_style( 'wp-block-library' );
    wp_dequeue_script( 'jquery' );
    }
    }
    if ( ! is_admin() ) {
    add_action( 'wp_enqueue_scripts', 'example_dequeue_scripts', 99 );
    }

    View Slide

  26. 2. վળࢪࡦ
    Ωϟογϡͱ੩తԽ
    ಈతॲཧ͕ඞཁͳ͍ϖʔδ͸ϓϥάΠϯ΍αʔόͷػೳͰΩϟογϡ͢Δ͔੩తԽ͠Α͏ɻ
    WordPress Λ੩తϑΝΠϧͰ
    ϗεςΟϯά͢ΔαʔϏε Shifter
    https://www.getshifter.io/

    View Slide

  27. 2. վળࢪࡦ
    PWA / Service Worker
    PWA (Progressive Web Apps) ͷࠜװΛࢧ͑Δٕ
    ज़Ͱ͋Δ Service Worker ʹΑΔΩϟογϡίϯ
    τϩʔϧͰɺମײతͳ଎͞Λ͔ͳΓ޲্Ͱ͖Δɻ
    Ωϟογϡ͸ϒϥ΢βʹอଘ͞ΕΔͨΊɺαʔό
    ΩϟογϡΑΓ΋Ϣʔβʹ͍ۙɻ
    WordPress Ͱ͸ϓϥάΠϯΛར༻͢Δ͜ͱͰ͔
    ͳΓ͓खܰʹಋೖͰ͖Δɻ

    View Slide

  28. ը૾ܗࣜ ֦ுࢠ ֓ཁ
    JPEG
    δΣΠϖοΫ
    .jpg / .jpeg ࣸਅ΍άϥσʔγϣϯͳͲɺ৭มԽ͕ଟ͍ը૾ʹద͍ͯ͠Δɻ

    ΋ͬͱ΋࢖ΘΕ͍ͯΔը૾ܗࣜɻඇՄٯѹॖɻ
    GIF
    δϑ/Ϊϑ
    .gif
    ৭มԽ͕গͳ͍ը૾ʹద͍ͯ͠Δɻ256৭·ͰɻಁաɺΞχϝʔγϣϯΛαϙʔτɻ

    Մٯѹॖ (ඇՄٯѹॖ΋Ͱ͖Δ͕΄ͱΜͲ࢖ΘΕͳ͍)
    PNG
    ϐϯά
    .png
    ओʹ8Ϗοτɺ24Ϗοτ͕͋Δɻ8Ϗοτ͸ GIF ͱಉ༷256৭·Ͱɻ৭มԽ͕গͳ͍ը૾ʹద͍ͯ͠Δɻ

    ࣸਅ΍άϥσʔγϣϯͩͱϑΝΠϧαΠζ͕େ͖͘ͳΔɻಁաΛαϙʔτɻՄٯѹॖɻ
    WebP
    ΢Σοϐʔ
    .webp Google ʹΑΔ࠷৽ͷը૾ܗࣜɻJPEG ΍ PNG ͳͲΑΓϑΝΠϧαΠζΛখ͘͞Ͱ͖ΔՄೳੑ͕ߴ͍ɻ

    ՄٯѹॖɺඇՄٯѹॖɺಁաɺΞχϝʔγϣϯΛαϙʔτ͍ͯ͠Δɻ
    SVG
    ΤεϰΟʔδʔ
    .svg
    ֦ॖ΍มܗͯ͠΋ྼԽ͠ͳ͍ɻϏοτϚοϓը૾΍ϒϥ΢β͕ೝࣝͰ͖ΔςΩετΛؚΉ͜ͱ͕Ͱ͖Δɻ

    ৭มԽ͕গͳ͍ը૾Ͱ͋Ε͹ SVG ͷ΄͏͕ϑΝΠϧαΠζ͕খ͍͞Մೳੑ͕ߴ͍ɻΞχϝʔγϣϯΛαϙʔτɻ
    2. վળࢪࡦ
    ࠷దͳը૾ܗࣜͷબ୒ ϥελʔܗࣜ (ϏοτϚοϓը૾)
    ϕΫλʔܗࣜ

    View Slide

  29. 2. վળࢪࡦ
    WebP
    ݱ࣌఺ͷ WordPress ίΞ͸α
    ϙʔτ͍ͯ͠ͳ͍ͨΊɺϓϥάΠ
    ϯͳͲΛಋೖ͢Δඞཁ͕͋Δɻ
    ·ͨɺWebP Ͱॻ͖ग़͠Ͱ͖Δը
    ૾ฤूιϑτ΋΄ͱΜͲͳ͍ͨ
    Ίɺͪ͜Β΋ϓϥάΠϯ͋Δ͍͸
    ม׵͢Δඞཁ͕͋Δɻ

    View Slide

  30. 2. վળࢪࡦ
    SVG
    ࠓճ͸৭มԽͷগͳ͍ը૾ɺ͔ͭAdobe Πϥετ
    ϨʔλʔͷϕΫλʔσʔλ͕࢒͍ͬͯͨͨΊɺ΄
    ͱΜͲͷΞΠΩϟονը૾ͷܗࣜʹ SVG Λબ୒ɻ

    View Slide

  31. ΠϥετϨʔλʔͷ৔߹ɺʮผ໊อଘʯͰ͸ͳ͘ʮεΫϦʔϯ༻ʹॻ͖ग़͠ʯɻ
    XDɺSketchɺFigma ͳͲ͸ͦͷ··Ͱେৎ෉ (ͱ͍͏ΑΓ΄ͱΜͲઃఆͰ͖ͳ͍) ɻ
    ্هͰ͋Ε͹ SVG ͷ࠷దԽΛߦΘͳͯ͘΋ϑΝΠϧαΠζ͸े෼খ͘͞ͳΔɻ
    2. վળࢪࡦ
    SVG ͷॻ͖ग़͠

    View Slide

  32. 2. վળࢪࡦ
    SVG ͷ࠷దԽ
    SVGO
    https://github.com/svg/svgo
    • SVGOMG: ΢Σϒ GUI

    https://jakearchibald.github.io/svgomg/
    • ImageOptim: Mac ΞϓϦ

    https://imageoptim.com/mac
    • Imagemin: ϓϩάϥϜɺλεΫϥϯφʔͳͲͰར༻Ͱ͖Δ

    https://github.com/imagemin/imagemin

    View Slide

  33. 2. վળࢪࡦ
    WordPress Ͱ SVG Λ࢖͏
    ηΩϡϦςΟͷ؍఺ͰɺσϑΥϧτঢ়ଶͰ͸ WordPress ΁ͷ SVG Ξοϓϩʔυ
    ͸Ͱ͖ͳ͍ɻSVG ͷΞοϓϩʔυΛڐՄ͢Δ͚ͩͳΒɺͦ͜·Ͱ௕͘ͳ͍ίʔυ
    Λ functions.php ͳͲʹ௥ه͢Ε͹͍͍͕ɺϝσΟΞϥΠϒϥϦͳͲͰϓϨϏϡʔ
    ͞ΕΔΑ͏ʹ͢Δʹ͸গʑෳࡶͳͷͰɺϓϥάΠϯΛར༻͢ΔͱΑ͍Ͱ͠ΐ͏ɻ

    View Slide

  34. 2. վળࢪࡦ
    SVG Support
    https://wordpress.org/plugins/svg-support/
    SVG ϑΝΠϧʹ ͷ௥Ճ͕ඞཁʹͳͬͨɻ

    View Slide

  35. 2. վળࢪࡦ
    Safe SVG
    https://wordpress.org/plugins/safe-svg/

    View Slide

  36. 2. վળࢪࡦ
    SVG Λར༻͢Δࡍͷ஫ҙ఺
    og:image ͸ SVG Λαϙʔτ͍ͯ͠ͳ͍ͨΊɺ
    OGP ը૾ͱͯ͠ΞΠΩϟονը૾ͳͲʹઃఆͨ͠ SVG ͕ࣗಈతʹ࢖ΘΕΔ৔߹ɺ
    ผ్खಈͰ JPEG ΍ PNG ͳͲΛࢦఆ͢Δඞཁ͕͋Δɻ

    View Slide


  37. 2. վળࢪࡦ
    ΦϑεΫϦʔϯը૾ͷ஗ԆಡΈࠐΈ
    img ʹ decoding="async" ଐੑΛ͚ͭΔ͜ͱͰɺ
    ଞͷίϯςϯπͷද͕ࣔ஗Εͳ͍Α͏ɺ
    ϒϥ΢β͕ը૾Λඇಉظతʹσίʔυ͢Δɻ
    ࢒೦ͳ͕Β Lighthouse ʹը૾ͷ஗ԆಡΈࠐΈͱͯ͠͸ධՁ͞Εͳ͍ɻ

    View Slide

  38. 2. վળࢪࡦ
    amp-img
    ը૾ͷ஗ԆಡΈࠐΈͷϥΠϒϥϦ͸ͨ͘͞Μ͋Δ͕ɺ
    ͔ͤͬ͘ͳͷͰ AMP ͷը૾දࣔํ๏ (amp-img) Λར༻ͯ͠ΈΑ͏ɻ
    AMP ʹ͍ͭͯৄ͘͠͸খ઒҆ಸ͞ΜͷηογϣϯͰɻ
    ࣮͸ AMP ରԠ͠ͳͯ͘΋ɺAMP JS ϥΠϒϥϦΛಡΈࠐΉ͜ͱͰɺ
    AMP ͷߴ଎ԽػೳΛར༻Ͱ͖Δɻ

    View Slide

  39. function example_scripts() {
    wp_enqueue_script( 'amp', 'https://cdn.ampproject.org/v0.js', array(), null );
    }
    add_action( 'wp_enqueue_scripts', 'example_scripts' );
    AMP JS ΛಡΈࠐΉɻϨϯμϦϯάΛ๦͛ͳ͍ͨΊͷ async ଐੑʹ͍ͭͯޙड़ɻ
    src=""
    width="350"
    height="183"
    layout="responsive">

    img ͷ୅ΘΓʹ amp-img Λ࢖༻ɻϨεϙϯγϒʹରԠ͢ΔͨΊ layout ଐੑʹ responsive Λࢦఆɻ
    2. վળࢪࡦ
    WordPress Ͱ amp-img Λར༻͢Δྫ

    View Slide

  40. ௨ৗɺscript ͷϑΣονͱ࣮ߦ͸ϨϯμϦϯάΛ๦͛Δɻ(ಉظ)
    async ͔ defer ଐੑΛ͚ͭΔ͜ͱͰɺϨϯμϦϯάΛ๦͛Δ͜ͱͳ͘ɺ
    ฒߦͯ͠ script ͷϑΣονΛߦ͏͜ͱ͕Ͱ͖Δɻ(ඇಉظ)
    async ͱ defer ʹɺύϑΥʔϚϯεࠩ͸͋·Γͳ͍ɻ
    ࣮ߦͷॱ൪͕هड़ॱͰͳ͍Մೳੑ͕͋Δ async ΑΓɺdefer ͷ΄͏͕ແ೉ɻ
    2. վળࢪࡦ
    ϨϯμϦϯάΛ๦͛ΔϦιʔεͷআ֎
    <br/><script async><br/><script defer><br/>HTML ύʔε script ϑΣον script ࣮ߦ<br/>

    View Slide

  41. async ΋͘͠͸ defer ͕͍͍ͭͯͳ͍ script ʹҰׅͰ defer Λ͚ͭΔɻ
    ؅ཧը໘Ͱ͸ΤϥʔʹͳΔͨΊআ֎͓ͯ͘͠ɻ
    function add_defer_to_scripts( $tag, $handle ) {
    if ( ! preg_match( '/\b(async|defer)\b/', $tag ) ) {
    return str_replace( ' src', ' defer src', $tag );
    }
    return $tag;
    }
    if ( ! is_admin() ) {
    add_filter( 'script_loader_tag', 'add_defer_to_scripts', 10, 2 );
    }
    2. վળࢪࡦ
    WordPress ͷ script ʹ defer Λ͚ͭΔ

    View Slide

  42. WebFont.load({
    google: {
    families: ['Montserrat', 'Noto+Sans+JP:400,700']
    }
    });
    function example_scripts() {
    wp_enqueue_script( 'webfont', 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js', array(), null );
    wp_enqueue_script( 'main', get_theme_file_uri( 'js/main.js' ), array( 'webfont' ), null );
    }
    add_action( 'wp_enqueue_scripts', 'example_scripts' );
    Web Font Loader ͱࣗ༝ʹهड़Ͱ͖Δ JavaScript ϑΝΠϧΛಡΈࠐΉɻ
    ࣗ༝ʹهड़Ͱ͖Δ JavaScript ϑΝΠϧ (ྫͰ͸ main.js) ʹɺ্هͷΑ͏ʹ഑ྻͰϑΥϯτΛࢦఆɻ
    ௨ৗͷ Google Fonts ͷϦϯΫ͸࡟আɻ

    2. վળࢪࡦ
    Google Fonts ΋ඇಉظతʹಡΈࠐΉ

    View Slide

  43. 2. վળࢪࡦ
    Resource Hints
    preload ϦιʔεΛͰ͖Δ͚ͩૣ͘ϑΣον͢ΔΑ͏ϒϥ΢βʹ௨஌͢Δɻ

    Ϣʔεέʔε: ࣄલʹ URL ͕Θ͔͍ͬͯͯɺ͔ͭॏཁͳϦιʔεͷ৔߹ʹ࢖͏ͱΑ͍ɻ΢ΣϒϑΥϯτͳͲɻ
    preconnect ଞΦϦδϯ΁ͷ઀ଓΛͰ͖Δ͚ͩૣ͘։࢝͢ΔΑ͏ϒϥ΢βʹ௨஌͢Δɻ
    Ϣʔεέʔε: Ͳ͔͜Βऔಘ͢Δ͔͸Θ͔͍ͬͯΔ͕ԿΛϑΣον͢Δ͔͕Θ͔Βͳ͍৔߹ɻCDNɺSNS ͳͲɻ
    dns-prefetch preconnect ͷαϒηοτͷΑ͏ͳ΋ͷɻ઀ଓ͸ߦΘͣɺDNS ͷ໊લղܾͷΈߦ͏ͨΊɺpreconnect ʹൺ΂Δͱϩʔίετɻ·ͨɺ
    preconnect ΑΓαϙʔτ͍ͯ͠Δϒϥ΢β͕ଟ͍ɻ
    prefetch
    ࠓޙͷφϏήʔγϣϯ΍Ϣʔβʔૢ࡞ͰඞཁʹͳΔͱ༧૝͞ΕΔϦιʔεΛࣄલʹϑΣον͠ɺΩϟογϡʹอଘ͢ΔΑ͏ϒϥ΢β
    ʹ௨஌͢Δɻ༏ઌ౓͸௿͍ɻ
    Ϣʔεέʔε: ϖʔδ۠੾Γίϯςϯπͷ࣍ϖʔδͷϦιʔεɺݕࡧ݁Ռ1ҐͷϖʔδͷϦιʔεͳͲɻ
    prerender prefetch ͱࣅ͍ͯΔ͕ɺͪ͜Β͸ϖʔδશମΛόοΫάϥ΢ϯυͰϨϯμϦϯά͢ΔɻϋΠίετɻ1ϖʔδͷΈࢦఆͰ͖Δɻ
    Ϣʔεέʔε: ϩάΠϯϖʔδʹ͓͚ΔϩάΠϯޙͷભҠઌϖʔδͳͲɻ

    View Slide

  44. function example_resource_hints( $urls, $relation_type ) {
    if ( 'dns-prefetch' === $relation_type ) {
    $urls = array_merge( $urls, array(
    ‘//example.com',
    ‘//example.net',
    ‘//example.org',
    ) );
    }
    return $urls;
    }
    add_filter( 'wp_resource_hints', ‘example_resource_hints', 10, 2 );
    ͪͳΈʹɺwp_enqueue_script Ͱ௥Ճͨ͠֎෦Ϧιʔε͸ɺ
    ࣗಈతʹ dns-prefetch ͕௥Ճ͞ΕΔɻ
    2. վળࢪࡦ
    WordPress Ͱ dns-prefetch Λ௥Ճ͢Δྫ

    View Slide

  45. 3. ·ͱΊ
    CONCLUSION

    View Slide

  46. 3. ·ͱΊ
    ڀۃͷύϑΥʔϚϯε
    h1 ͱ meta description ͷΈΛهड़ͨ͠ϖʔδ

    View Slide

  47. ੜ·Εͨͯͷ΢ΣϒαΠτ͸100఺Ͱ͢ɻ
    ίϯςϯπ͕૿͑ΔͷʹͭΕɺϦιʔε͕ංେԽ͠ແବ͕ੜ͡Δɻ
    ·ΔͰΤϯτϩϐʔ૿େͷ๏ଇͷΑ͏ʹɻ
    ͪͳΈʹΤϯτϩϐʔΛݮগͤ͞ΒΕΔͷ͸ਓؒ׆ಈͷΈΒ͍͠ɻ͔͠΋෦෼తʹɻ
    ଎౓Λ஗͘͢Δͷ΋଎͘͢Δͷ΋ɺզʑਓؒͰ͋Δɻ
    ύϑΥʔϚϯεΛอͭʹ͸ɺ࠷ॳͷઃܭ͔Β೔ʑͷӡ༻·Ͱɺ஍ಓʹߦ͏ඞཁ͕͋Δɻ
    3. ·ͱΊ
    Τϯτϩϐʔ૿େͷ๏ଇ

    View Slide

  48. 3. ·ͱΊ
    ΢ΣϒαΠτͱ΢ΣϒύϑΥʔϚϯεվળ
    ύϑΥʔϚϯεվળʹ͍ͭͯɺࠓճ͸ͨ·ͨ·͏·͍͕ͬͨ͘ɺ
    ͢΂ͯͷέʔεʹ͓͍ͯύϑΥʔϚϯεվળͰ͖Δͱ͸ݶΒͳ͍ɻ
    ΢ΣϒαΠτͱ΢ΣϒύϑΥʔϚϯεվળͷؔ܎ੑ͸ɺ
    ंͷۭؾ఍߅ΛݮΒ͢͜ͱʹࣅ͍ͯΔɻ
    ڀۃʹۭؾ఍߅ΛݮΒ͔ͨͬͨ͠Β݁ہ F1 Ϛγϯʹͳͬͯ͠·͏ɻ
    ंͱಉ͡Α͏ʹɺ΢ΣϒαΠτʹ΋͞·͟·ͳ໨త͕͋Δɻ
    ৘ใΛ഑৴͢ΔͨΊ͚ͩͷ৔߹΋͋Ε͹ɺੈք؍ΛັͤΔͨΊͷ৔߹΋͋Δɻ
    ؍ޫόε͕ F1 Ϛγϯͱಉ͡଎͞Ͱ૸Δͷ͸ෆՄೳͰ͋Δɻ

    View Slide

  49. KITERETZ inc.
    JOIN OUR TEAM
    גࣜձࣾΩςϨπͰ͸ɺ৽ਓσβΠφʔΛืूதʂ
    https://kiteretz.com/careers/

    View Slide