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

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

Kite
December 07, 2019

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

今注目されているウェブパフォーマンス改善ですが、そもそも何をすればいいのか、WordPress でコーディングなし・ありに分けて、具体例を交えながらその施策を紹介いたします。具体例としては、WordPress を利用したブログの PageSpeed Insights (Lighthouse) のパフォーマンススコアを、30点以下から95点以上に改善した際、実際に行った施策を用います。

Kite

December 07, 2019
Tweet

More Decks by Kite

Other Decks in Programming

Transcript

  1. View Slide

  2. KITE WordPress
    Core Contributor
    Wocker
    Developer
    Bathe
    Developer
    Frasco
    Developer
    ViewportScale
    Developer
    Ruby on Rails
    Contributor
    React
    Contributor
    Vue CLI
    Contributor
    Designer Programmer Director Manager
    KITERETZ inc. CEO & Founder
    ­kite.koga¬® ŶƩŧ ixkaito
    kiteretz.com

    View Slide

  3. View Slide

  4. View Slide

  5. https://wocker.dev

    View Slide

  6. https://wocker.dev
    ★ Star 475

    View Slide

  7. https://wocker.dev
    Starͨ͠ਓ

    View Slide

  8. https://wocker.dev
    ໌೔Ͱ ★ Star 600?

    View Slide

  9. ݖ



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


    ݖ


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

    View Slide

  10. Figma ͕޷͖ʂ ࣮͸ WordPress ͷσβΠϯ͸ Figma Ͱ࡞ΒΕ͍ͯΔ

    View Slide

  11. ࠷ۙ͸ Notion ʹ΋
    ϋϚ͍ͬͯ·͢ʂ

    View Slide

  12. View Slide

  13. ͓͠ΌͿΓࣾ௕ʹόϒόϒΧΠτ

    View Slide

  14. #όϒόϒΧΠτ
    ຊ೔ͷϋογϡλά

    View Slide

  15. ຊ೔ͷϋογϡλά
    #wcosaka2019

    View Slide

  16. SPEAKER
    DECK
    εϥΠυ͸ޙ΄Ͳެ։͠·͢

    View Slide

  17. 00. ͸͡Ίʹ
    WEB

    View Slide

  18. Web αΠτΛߏங͢Δʹ͸ɺHTMLɺCSSɺ͓Αͼ JavaScript ͕ඞཁͰ͢ɻਓʑ
    ͕࢖༻͍ͨ͠ Web αΠτ΍ΞϓϦέʔγϣϯΛߏங͠ɺϢʔβΛҾ͖෇͚ͯҡ࣋
    ͢Δʹ͸ɺ༏ΕͨϢʔβΤΫεϖϦΤϯεΛ࡞੒͢Δඞཁ͕͋Γ·͢ɻྑ޷ͳϢʔ
    βΤΫεϖϦΤϯεͷҰ෦͸ɺίϯςϯπͷಡΈࠐΈ͕ਝ଎Ͱ͋ΓɺϢʔβͷૢ࡞
    ʹ൓Ԡ͢Δ͜ͱΛอূ͢Δ͜ͱͰ͢ɻ͜Ε͸ Web ύϑΥʔϚϯεͱݺ͹Εɺ͜ͷ
    ϞδϡʔϧͰ͸ύϑΥʔϚϯεͷΑ͍ Web αΠτΛߏங͢ΔͨΊʹඞཁͳ͢΂ͯ
    Λֶश͠·͢ɻ
    ग़య: Web ύϑΥʔϚϯε - ΢Σϒ։ൃΛֶͿ | MDN web docs
    https://developer.mozilla.org/ja/docs/Learn/Performance
    0. ͸͡Ίʹ
    ΢ΣϒύϑΥʔϚϯεͱ͸

    View Slide

  19. Web αΠτΛߏங͢Δʹ͸ɺHTMLɺCSSɺ͓Αͼ JavaScript ͕ඞཁͰ͢ɻਓʑ
    ͕࢖༻͍ͨ͠ Web αΠτ΍ΞϓϦέʔγϣϯΛߏங͠ɺϢʔβΛҾ͖෇͚ͯҡ࣋
    ͢Δʹ͸ɺ༏ΕͨϢʔβΤΫεϖϦΤϯεΛ࡞੒͢Δඞཁ͕͋Γ·͢ɻྑ޷ͳϢʔ
    βΤΫεϖϦΤϯεͷҰ෦͸ɺίϯςϯπͷಡΈࠐΈ͕ਝ଎Ͱ͋ΓɺϢʔβͷૢ࡞
    ʹ൓Ԡ͢Δ͜ͱΛอূ͢Δ͜ͱͰ͢ɻ͜Ε͸ Web ύϑΥʔϚϯεͱݺ͹Εɺ͜ͷ
    ϞδϡʔϧͰ͸ύϑΥʔϚϯεͷΑ͍ Web αΠτΛߏங͢ΔͨΊʹඞཁͳ͢΂ͯ
    Λֶश͠·͢ɻ
    ग़య: Web ύϑΥʔϚϯε - ΢Σϒ։ൃΛֶͿ | MDN web docs
    https://developer.mozilla.org/ja/docs/Learn/Performance
    0. ͸͡Ίʹ
    ΢ΣϒύϑΥʔϚϯεͱ͸

    දࣔ଎౓

    View Slide

  20. ฏۉϖʔδಡΈࠐΈ࣌ؒΛ 850 ϛϦඵ୹ॖͨ͠ͱ͜Ζɺίϯόʔδϣϯ਺͕ 7% ૿Ճ͠ɺ
    ௚ؼ཰͕ 7% ݮগ͠ɺηογϣϯ౰ͨΓͷӾཡϖʔδ਺͕ 10% ૿Ճͨ͠ɻ
    ϖʔδͷಡΈࠐΈʹ͔͔Δ͕࣌ؒ 3 ඵΛ௒͑Δͱɺ
    53% ͷϢʔβʔ͕ϞόΠϧαΠτͷ๚໰Λ͖͋ΒΊΔɻ
    ग़య: ύϑΥʔϚϯε͕ॏཁͳͷ͸ͳ͔ͥ
    https://developers.google.com/web/fundamentals/performance/why-performance-matters?hl=ja

    0. ͸͡Ίʹ
    ύϑΥʔϚϯε͕ॏཁͳͷ͸ͳ͔ͥ


    View Slide

  21. 0. ͸͡Ίʹ
    Chrome Ͱ௿଎αΠτʹ
    ෆ໊༪ͳόοδදࣔΛݕ౼த

    View Slide

  22. 0. ͸͡Ίʹ
    ࠓճͷ࣮ྫͷର৅αΠτ
    σβΠφʔͷΠϥετϊʔτ
    https://in.spicagraph.com/
    @spicagraph

    View Slide

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

    View Slide

  24. Before
    Lighthouse

    View Slide

  25. After
    Lighthouse

    View Slide

  26. After
    WebPageTest

    View Slide

  27. 1. ௐࠪɾܭଌ
    1

    View Slide

  28. 1. ௐࠪɾܭଌ
    αΠτϔϧε
    WordPress 5.1 ʹಋೖ͞ΕͨαΠτͷ҆શੑͱ
    ଎౓ΛνΣοΫͯ͘͠ΕΔػೳ

    View Slide

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

    View Slide

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

    View Slide

  31. 1. ௐࠪɾܭଌ
    Lighthouse CI
    2019.12.5࣌఺ͷόʔδϣϯ: Lighthouse CI 0.3.6
    https://github.com/GoogleChrome/lighthouse-ci
    CI Ͱ Lighthouse Λར༻Ͱ͖Δπʔϧ

    View Slide

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

    View Slide

  33. 1. ௐࠪɾܭଌ
    PageSpeed Insights
    https://developers.google.com/speed/pagespeed/insights/
    ௐ߲ࠪ໨͸ύϑΥʔϚϯεͷΈɺ೔ຊޠ͋ΓɺChrome Ϣʔβʔ
    ΤΫεϖϦΤϯε ϨϙʔτͷσʔλΛܭࢉʹؚΉ

    View Slide

  34. 1. ௐࠪɾܭଌ
    Site Kit
    2019.12.5࣌఺ͷόʔδϣϯ: 1.1.1
    https://wordpress.org/plugins/google-site-kit/
    Search ConsoleɺAnalyticsɺAdsenseɺ
    PageSpeed Insight ͷ৘ใΛ WordPress ͷ
    μογϡϘʔυʹදࣔ͢ΔϓϥάΠϯ

    View Slide

  35. 1. ௐࠪɾܭଌ
    Test My Site
    https://www.thinkwithgoogle.com/feature/testmysite/
    ϞόΠϧ޲͚ͷύϑΥʔϚϯενΣοΫπʔϧ

    View Slide

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

    View Slide

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

    View Slide

  38. 22. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ
    IMPROVEMENTS
    WITHOUT CODING

    View Slide

  39. ͘͞ΒΠϯλʔωοτ ΤοΫεαʔόʔ
    ϩϦϙοϓ
    (ϋΠεϐʔυϓϥϯ)
    ϔςϜϧ
    ΢Σϒαʔό Nginx + Apache Nginx + Apache LiteSpeed Apache
    PHP 7.3

    Ϟδϡʔϧ
    7.3

    FastCGI
    7.3

    LSAPI
    7.3

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

    αʔόʔΩϟογϡ

    ϒϥ΢βΩϟογϡ

    XΞΫηϥϨʔλ
    ϩϦϙοϓʂΞΫηϥϨʔλ
    2. ίʔσΟϯάͳ͠Ͱ
    Ͱ͖Δվળࢪࡦ
    αʔό
    2019.12.5࣌఺

    View Slide

  40. 2. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ
    Nginx
    ΤοΫεαʔόʔʮnginxʹ͍ͭͯʯΑΓ
    https://www.xserver.ne.jp/manual/man_server_nginx.php

    View Slide

  41. 2. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ
    LiteSpeed
    ୈ4ͷ΢ΣϒαʔόɺApache ͱ׬શͳޓ׵ੑ͕͋Γɺ
    Apache ͱ Nginx ͷ͍͍ͱ͜औΓ

    View Slide

  42. 2. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ
    HTTP/2
    ΤοΫεαʔόʔʮHTTP/2ʹ͍ͭͯʯΑΓ
    https://www.xserver.ne.jp/manual/man_server_http2.php

    View Slide

  43. 2. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ
    PHP7ɺPHP ϞδϡʔϧϞʔυɺ
    FastCGIɺLSAPIɺSSD
    ͳͲʹ͍ͭͯ͸ׂѪɻ

    View Slide

  44. 2. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ
    ෆཁϓϥάΠϯͷΞϯΠϯετʔϧ

    View Slide

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

    View Slide

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

    View Slide

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

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

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

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

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

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

    View Slide

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

    View Slide

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

    View Slide

  50. 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

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

    View Slide

  52. 2. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ
    SVG Support
    https://wordpress.org/plugins/svg-support/
    SVG ϑΝΠϧʹ ͷ௥Ճ͕ඞཁʹͳͬͨɻ

    View Slide

  53. 2. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ
    Safe SVG
    https://wordpress.org/plugins/safe-svg/
    ͬͪ͜ͷํ͕ແ೉͔΋…

    View Slide

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

    View Slide

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

    View Slide

  56. 2. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ
    ΦϑεΫϦʔϯը૾ͷ஗ԆಡΈࠐΈ
    ը໘্ʹදࣔ͞Ε͍ͯͳ͍ը૾Λ࠷ॳʹಡΈࠐ·ͣɺ
    εΫϩʔϧͳͲͰදࣔ͞Εͨͱ͖ʹಡΈࠐΉΑ͏ʹ͢Δɻ

    View Slide


  57. 2. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ
    loading="lazy"
    Chrome Ͱ͸ JavaScript ʹΑΔॲཧΛඞཁͱͤͣɺ
    img ʹ loading="lazy" ଐੑΛ͚ͭΔ͚ͩͰɺ
    ϒϥ΢βϨϕϧͰը૾ͷ஗ԆಡΈࠐΈΛͯ͘͠ΕΔɻ

    View Slide

  58. 2. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ
    Native Lazyload
    https://ja.wordpress.org/plugins/native-lazyload/
    img ʹ loading="lazy" ଐੑΛ௥Ճ͠ɺ
    ඇରԠϒϥ΢βʹ͸ JavaScript ʹΑΔ
    ιϦϡʔγϣϯΛఏڙɻ

    View Slide

  59. 2. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ
    Ωϟογϡ
    ಈతॲཧ͕ඞཁͳ͍ϖʔδ͸
    ϓϥάΠϯ΍αʔόͷػೳͰΩϟογϡ͠Α͏ɻ

    View Slide

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

    View Slide

  61. 2. ίʔυͳ͠ͰͰ͖Δվળࢪࡦ
    ੩తԽ
    CMS ػೳΛར༻ͭͭ͠ɺαΠτΛ੩తԽ͠Α͏ɻ
    WordPress Λ੩తϑΝΠϧͰ
    ϗεςΟϯά͢ΔαʔϏε Shifter
    https://www.getshifter.io/

    View Slide

  62. 3
    3. ίʔυʹΑΔվળࢪࡦ
    IMPROVEMENTS
    WITH CODING

    View Slide

  63. ϗʔϜ΍ΞʔΧΠϒϖʔδͰ͸ Gutenberg ͷίϯςϯπ͕ͳ͘ɺ
    jQuery ΋࢖༻͍ͯ͠ͳ͍ͨΊɺؔ࿈ͷ CSS ͱ jQuery ΛಡΈࠐ·ͳ͍Α͏ʹ͢Δɻ
    ؅ཧը໘Ͱ͸ΞΫγϣϯϑοΫʹ௥Ճ͠ͳ͍Α͏আ֎͓ͯ͘͠ɻ
    3. ίʔυʹΑΔվળࢪࡦ
    ϖʔδʹΑͬͯ 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

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

    View Slide

  65. 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 );
    }
    3. ίʔυʹΑΔվળࢪࡦ
    WordPress ͷ script ʹ defer Λ͚ͭΔ

    View Slide

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

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

    View Slide

  67. 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 ͕௥Ճ͞ΕΔɻ
    3. ίʔυʹΑΔվળࢪࡦ
    WordPress Ͱ dns-prefetch Λ௥Ճ͢Δྫ

    View Slide

  68. 3. ίʔυʹΑΔվળࢪࡦ
    JAMstack
    WordPress ͷ REST API ͷΈར༻͠ɺNuxt.js ΍ GatsbyJS ͷΑ͏ͳ
    JavaScript ϑϨʔϜϫʔΫͱ૊Έ߹ΘͤͯαΠτΛߏங͢Δɻ

    View Slide

  69. 4
    CONCLUSION
    4. ·ͱΊ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  73. THANK YOU

    View Slide