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

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

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