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

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

Transcript

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
5. https://wocker.dev
6. https://wocker.dev ★ Star 475
7. https://wocker.dev Starͨ͠ਓ
8. https://wocker.dev ໌೔Ͱ ★ Star 600?
9. ݖ ར ຊ ஶ ʂ ϧ ϒ Π ό ͷ ܾ ղ ϧ ϒ ϥ τ ݖ ࡞
   ݖ ར ຊ Ϋ Ϧ Τ Π λ ͷ ͷ Ί ͨ ͷ ஶɹେ۲
   ഹɹ๺ଜ
   ਸɹ໦ଜ
   ߶େɹݹլ
   ւਓɹᜊ໦
   ߂थɹ֯ా
   ҁՂɹછ୩
   ণར ݱ৔ͰτϥϒϧʹͳΓ͕ͪͳݖརͷ໰୊ʹ͍ͭͯ ɹ ΫϦΤΠλʔͱͯ͠΍ͬͯ͸͍͚ͳ͍͜ͱ ɹ ݖརΛ৵֐͞Εͨ࣌ͷ۩ମతͳରॲ๏ Λɺ Θ͔Γ΍͘͢·ͱΊͨΫϦΤΠλʔͷͨΊͷόΠϒϧ
10. Figma ͕޷͖ʂ ࣮͸ WordPress ͷσβΠϯ͸ Figma Ͱ࡞ΒΕ͍ͯΔ
11. ࠷ۙ͸ Notion ʹ΋ ϋϚ͍ͬͯ·͢ʂ
13. ͓͠ΌͿΓࣾ௕ʹόϒόϒΧΠτ
14. #όϒόϒΧΠτ ຊ೔ͷϋογϡλά
15. ຊ೔ͷϋογϡλά #wcosaka2019
16. SPEAKER DECK εϥΠυ͸ޙ΄Ͳެ։͠·͢
17. 00. ͸͡Ίʹ WEB
18. Web αΠτΛߏங͢Δʹ͸ɺHTMLɺCSSɺ͓Αͼ JavaScript ͕ඞཁͰ͢ɻਓʑ ͕࢖༻͍ͨ͠ Web αΠτ΍ΞϓϦέʔγϣϯΛߏங͠ɺϢʔβΛҾ͖෇͚ͯҡ࣋ ͢Δʹ͸ɺ༏ΕͨϢʔβΤΫεϖϦΤϯεΛ࡞੒͢Δඞཁ͕͋Γ·͢ɻྑ޷ͳϢʔ βΤΫεϖϦΤϯεͷҰ෦͸ɺίϯςϯπͷಡΈࠐΈ͕ਝ଎Ͱ͋ΓɺϢʔβͷૢ࡞ ʹ൓Ԡ͢Δ͜ͱΛอূ͢Δ͜ͱͰ͢ɻ͜Ε͸ Web ύϑΥʔϚϯεͱݺ͹Εɺ͜ͷ ϞδϡʔϧͰ͸ύϑΥʔϚϯεͷΑ͍ Web αΠτΛߏங͢ΔͨΊʹඞཁͳ͢΂ͯ Λֶश͠·͢ɻ ग़య: Web ύϑΥʔϚϯε - ΢Σϒ։ൃΛֶͿ | MDN web docs https://developer.mozilla.org/ja/docs/Learn/Performance 0. ͸͡Ίʹ ΢ΣϒύϑΥʔϚϯεͱ͸ “
19. Web αΠτΛߏங͢Δʹ͸ɺHTMLɺCSSɺ͓Αͼ JavaScript ͕ඞཁͰ͢ɻਓʑ ͕࢖༻͍ͨ͠ Web αΠτ΍ΞϓϦέʔγϣϯΛߏங͠ɺϢʔβΛҾ͖෇͚ͯҡ࣋ ͢Δʹ͸ɺ༏ΕͨϢʔβΤΫεϖϦΤϯεΛ࡞੒͢Δඞཁ͕͋Γ·͢ɻྑ޷ͳϢʔ βΤΫεϖϦΤϯεͷҰ෦͸ɺίϯςϯπͷಡΈࠐΈ͕ਝ଎Ͱ͋ΓɺϢʔβͷૢ࡞ ʹ൓Ԡ͢Δ͜ͱΛอূ͢Δ͜ͱͰ͢ɻ͜Ε͸ Web ύϑΥʔϚϯεͱݺ͹Εɺ͜ͷ ϞδϡʔϧͰ͸ύϑΥʔϚϯεͷΑ͍ Web αΠτΛߏங͢ΔͨΊʹඞཁͳ͢΂ͯ Λֶश͠·͢ɻ ग़య: Web ύϑΥʔϚϯε - ΢Σϒ։ൃΛֶͿ | MDN web docs https://developer.mozilla.org/ja/docs/Learn/Performance 0. ͸͡Ίʹ ΢ΣϒύϑΥʔϚϯεͱ͸ “ දࣔ଎౓
20. ฏۉϖʔδಡΈࠐΈ࣌ؒΛ 850 ϛϦඵ୹ॖͨ͠ͱ͜Ζɺίϯόʔδϣϯ਺͕ 7% ૿Ճ͠ɺ ௚ؼ཰͕ 7% ݮগ͠ɺηογϣϯ౰ͨΓͷӾཡϖʔδ਺͕ 10% ૿Ճͨ͠ɻ ϖʔδͷಡΈࠐΈʹ͔͔Δ͕࣌ؒ 3 ඵΛ௒͑Δͱɺ 53% ͷϢʔβʔ͕ϞόΠϧαΠτͷ๚໰Λ͖͋ΒΊΔɻ ग़య: ύϑΥʔϚϯε͕ॏཁͳͷ͸ͳ͔ͥ https://developers.google.com/web/fundamentals/performance/why-performance-matters?hl=ja “ 0. ͸͡Ίʹ ύϑΥʔϚϯε͕ॏཁͳͷ͸ͳ͔ͥ
21. 0. ͸͡Ίʹ Chrome Ͱ௿଎αΠτʹ ෆ໊༪ͳόοδදࣔΛݕ౼த
22. 0. ͸͡Ίʹ ࠓճͷ࣮ྫͷର৅αΠτ σβΠφʔͷΠϥετϊʔτ https://in.spicagraph.com/ @spicagraph
23. ·ͣ͸݁Ռ͔Β͓ݟͤ͠Α͏
24. Before Lighthouse
25. After Lighthouse
26. After WebPageTest
27. 1. ௐࠪɾܭଌ 1
28. 1. ௐࠪɾܭଌ αΠτϔϧε WordPress 5.1 ʹಋೖ͞ΕͨαΠτͷ҆શੑͱ ଎౓ΛνΣοΫͯ͘͠ΕΔػೳ
29. 1. ௐࠪɾܭଌ Lighthouse Chrome ֦ுػೳ 2019.12.5࣌఺ͷόʔδϣϯ: Lighthouse 100.0.0.0? https://developers.google.com/web/tools/lighthouse/ ύϑΥʔϚϯεɺΞΫηγϏϦςΟɺ ϕετϓϥΫςΟεɺSEOɺPWA ͷ 5߲໨ΛௐࠪɾܭଌͰ͖Δ
30. 1. ௐࠪɾܭଌ Lighthouse ίϚϯυϥΠϯπʔϧ 2019.12.5࣌఺ͷόʔδϣϯ: Lighthouse 5.6.0 https://www.npmjs.com/package/lighthouse $ lighthouse https://example.com/ ܭଌ݁Ռ͸ HTML ͱͯ͠อଘ͞ΕΔ
31. 1. ௐࠪɾܭଌ Lighthouse CI 2019.12.5࣌఺ͷόʔδϣϯ: Lighthouse CI 0.3.6 https://github.com/GoogleChrome/lighthouse-ci CI Ͱ Lighthouse Λར༻Ͱ͖Δπʔϧ
32. 1. ௐࠪɾܭଌ Chrome Audits 2019.12.5࣌఺ͷόʔδϣϯ: Lighthouse 5.2 Lighthouse Chrome ֦ுػೳɺίϚϯυϥΠϯ πʔϧͱ΄΅ಉ݁͡Ռ
33. 1. ௐࠪɾܭଌ PageSpeed Insights https://developers.google.com/speed/pagespeed/insights/ ௐ߲ࠪ໨͸ύϑΥʔϚϯεͷΈɺ೔ຊޠ͋ΓɺChrome Ϣʔβʔ ΤΫεϖϦΤϯε ϨϙʔτͷσʔλΛܭࢉʹؚΉ
34. 1. ௐࠪɾܭଌ Site Kit 2019.12.5࣌఺ͷόʔδϣϯ: 1.1.1 https://wordpress.org/plugins/google-site-kit/ Search ConsoleɺAnalyticsɺAdsenseɺ PageSpeed Insight ͷ৘ใΛ WordPress ͷ μογϡϘʔυʹදࣔ͢ΔϓϥάΠϯ
35. 1. ௐࠪɾܭଌ Test My Site https://www.thinkwithgoogle.com/feature/testmysite/ ϞόΠϧ޲͚ͷύϑΥʔϚϯενΣοΫπʔϧ
36. 1. ௐࠪɾܭଌ WebPageTest https://www.webpagetest.org/
37. Lighthouse ΍ PageSpeed Insights Ͱ͸௿είΞ͚ͩͲ ମײతʹ͸஗͘ײ͡ͳ͍৔߹͕͋Γɺ ٯʹߴείΞͰ΋ɺ࣮ࡍ͸଎͍ͱ͸ݶΒͳ͍৔߹͕͋Δɻ ͨͩɺվળͰ͖Δ಺༰Λ۩ମతʹࣔͯ͘͠ΕΔͨΊɺ Lighthouse (PageSpeed Insights) ΛࢀߟʹվળΛߦ͏ɻ
38. 22. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ IMPROVEMENTS WITHOUT CODING
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࣌఺
40. 2. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ Nginx ΤοΫεαʔόʔʮnginxʹ͍ͭͯʯΑΓ https://www.xserver.ne.jp/manual/man_server_nginx.php
41. 2. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ LiteSpeed ୈ4ͷ΢ΣϒαʔόɺApache ͱ׬શͳޓ׵ੑ͕͋Γɺ Apache ͱ Nginx ͷ͍͍ͱ͜औΓ
42. 2. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ HTTP/2 ΤοΫεαʔόʔʮHTTP/2ʹ͍ͭͯʯΑΓ https://www.xserver.ne.jp/manual/man_server_http2.php
43. 2. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ PHP7ɺPHP ϞδϡʔϧϞʔυɺ FastCGIɺLSAPIɺSSD ͳͲʹ͍ͭͯ͸ׂѪɻ
44. 2. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ ෆཁϓϥάΠϯͷΞϯΠϯετʔϧ
45. ͳΜͱ1ઍສϨίʔυҎ্ʂ1.4GBʂͷσʔλʹૺ۰ʂ 2. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ ෆཁϓϥάΠϯͷΞϯΠϯετʔϧ
46. 2. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ ෆཁϓϥάΠϯͷΞϯΠϯετʔϧ σʔλϕʔεʹେྔͷϨίʔυΛอଘ͢ΔϓϥάΠϯ͕͋ΔͷͰɺͦ͏͍͏ϓϥάΠϯͷར༻͸ආ͚Α͏ɻ ݟ͚ͭͨ৔߹͸ʮఀࢭʯ͚ͩͰ͸ͳ͘ɺ؅ཧը໘Ͱʮ࡟আʯ΋͘͠͸ WP-CLI ͰΞϯΠϯετʔϧ͠Α͏ɻ ͖ͪΜͱ࡞ΒΕͨϓϥάΠϯͰ͋Ε͹ΞϯΠϯετʔϧͰσʔλ΋࡟আ͢Δɻ தʹ͸ΞϯΠϯετʔϧॲཧΛͪΌΜͱ͍ͯ͠ͳ͍ϓϥάΠϯ΋͋ΔͷͰɺ ΞϯΠϯετʔϧޙͷσʔλϕʔε֬ೝ΋๨Εͣʹɻ ͞ΒʹɺϓϥάΠϯʹ͸ελΠϧγʔτ΍εΫϦϓτΛૠೖ͢Δ΋ͷ΋ଟ͘ɺ ෆཁͳϓϥάΠϯ͸ۃྗఀࢭ΋͘͠͸ΞϯΠϯετʔϧ͠Α͏ɻ ※αΠτͷύϑΥʔϚϯε͸ϓϥάΠϯͷ਺ʹൺྫ͠ͳ͍ɻ ϙΠϯτ͸ϓϥάΠϯ͕Ͳ͏͍͏ॲཧΛ͍ͯ͠Δ͔ɻ
47. ը૾ܗࣜ ֦ுࢠ ֓ཁ JPEG δΣΠϖοΫ .jpg / .jpeg ࣸਅ΍άϥσʔγϣϯͳͲɺ৭มԽ͕ଟ͍ը૾ʹద͍ͯ͠Δɻ ΋ͬͱ΋࢖ΘΕ͍ͯΔը૾ܗࣜɻඇՄٯѹॖɻ GIF δϑ/Ϊϑ .gif ৭มԽ͕গͳ͍ը૾ʹద͍ͯ͠Δɻ256৭·ͰɻಁաɺΞχϝʔγϣϯΛαϙʔτɻ Մٯѹॖ (ඇՄٯѹॖ΋Ͱ͖Δ͕΄ͱΜͲ࢖ΘΕͳ͍) PNG ϐϯά .png ओʹ8Ϗοτɺ24Ϗοτ͕͋Δɻ8Ϗοτ͸ GIF ͱಉ༷256৭·Ͱɻ৭มԽ͕গͳ͍ը૾ʹద͍ͯ͠Δɻ ࣸਅ΍άϥσʔγϣϯͩͱϑΝΠϧαΠζ͕େ͖͘ͳΔɻಁաΛαϙʔτɻՄٯѹॖɻ WebP ΢Σοϐʔ .webp Google ʹΑΔ࠷৽ͷը૾ܗࣜɻJPEG ΍ PNG ͳͲΑΓϑΝΠϧαΠζΛখ͘͞Ͱ͖ΔՄೳੑ͕ߴ͍ɻ ՄٯѹॖɺඇՄٯѹॖɺಁաɺΞχϝʔγϣϯΛαϙʔτ͍ͯ͠Δɻ SVG ΤεϰΟʔδʔ .svg ֦ॖ΍มܗͯ͠΋ྼԽ͠ͳ͍ɻϏοτϚοϓը૾΍ϒϥ΢β͕ೝࣝͰ͖ΔςΩετΛؚΉ͜ͱ͕Ͱ͖Δɻ ৭มԽ͕গͳ͍ը૾Ͱ͋Ε͹ SVG ͷ΄͏͕ϑΝΠϧαΠζ͕খ͍͞Մೳੑ͕ߴ͍ɻΞχϝʔγϣϯΛαϙʔτɻ 2. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ ࠷దͳը૾ܗࣜͷબ୒ ϥελʔܗࣜ (ϏοτϚοϓը૾) ϕΫλʔܗࣜ
48. 2. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ SVG ࠓճ͸৭มԽͷগͳ͍ը૾ɺ͔ͭAdobe Πϥετ ϨʔλʔͷϕΫλʔσʔλ͕࢒͍ͬͯͨͨΊɺ΄ ͱΜͲͷΞΠΩϟονը૾ͷܗࣜʹ SVG Λબ୒ɻ
49. ΠϥετϨʔλʔͷ৔߹ɺʮผ໊อଘʯͰ͸ͳ͘ʮεΫϦʔϯ༻ʹॻ͖ग़͠ʯɻ XDɺSketchɺFigma ͳͲ͸ͦͷ··Ͱେৎ෉ (ͱ͍͏ΑΓ΄ͱΜͲઃఆͰ͖ͳ͍) ɻ ্هͰ͋Ε͹ SVG ͷ࠷దԽΛߦΘͳͯ͘΋ϑΝΠϧαΠζ͸े෼খ͘͞ͳΔɻ 2. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ SVG ͷॻ͖ग़͠
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
51. 2. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ WordPress Ͱ SVG Λ࢖͏ ηΩϡϦςΟͷ؍఺ͰɺσϑΥϧτঢ়ଶͰ͸ WordPress ΁ͷ SVG Ξοϓϩʔυ ͸Ͱ͖ͳ͍ɻSVG ͷΞοϓϩʔυΛڐՄ͢Δ͚ͩͳΒɺͦ͜·Ͱ௕͘ͳ͍ίʔυ Λ functions.php ͳͲʹ௥ه͢Ε͹͍͍͕ɺϝσΟΞϥΠϒϥϦͳͲͰϓϨϏϡʔ ͞ΕΔΑ͏ʹ͢Δʹ͸গʑෳࡶͳͷͰɺϓϥάΠϯΛར༻͢ΔͱΑ͍Ͱ͠ΐ͏ɻ
52. 2. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ SVG Support https://wordpress.org/plugins/svg-support/ SVG ϑΝΠϧʹ <?xml version="1.0" encoding=“utf-8"?> ͷ௥Ճ͕ඞཁʹͳͬͨɻ
53. 2. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ Safe SVG https://wordpress.org/plugins/safe-svg/ ͬͪ͜ͷํ͕ແ೉͔΋…
54. 2. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ SVG Λར༻͢Δࡍͷ஫ҙ఺ og:image ͸ SVG Λαϙʔτ͍ͯ͠ͳ͍ͨΊɺ OGP ը૾ͱͯ͠ΞΠΩϟονը૾ͳͲʹઃఆͨ͠ SVG ͕ࣗಈతʹ࢖ΘΕΔ৔߹ɺ ผ్खಈͰ JPEG ΍ PNG ͳͲΛࢦఆ͢Δඞཁ͕͋Δɻ
55. 2. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ WebP ݱ࣌఺ͷ WordPress ίΞ͸αϙʔτ ͍ͯ͠ͳ͍ͨΊɺϓϥάΠϯͳͲΛಋ ೖ͢Δඞཁ͕͋Δɻ ·ͨɺWebP Ͱॻ͖ग़͠Ͱ͖Δը૾ฤ ूιϑτ΋΄ͱΜͲͳ͍ͨΊɺͪ͜Β ΋ϓϥάΠϯ͋Δ͍͸ม׵͢Δඞཁ͕ ͋Δɻ
56. 2. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ ΦϑεΫϦʔϯը૾ͷ஗ԆಡΈࠐΈ ը໘্ʹදࣔ͞Ε͍ͯͳ͍ը૾Λ࠷ॳʹಡΈࠐ·ͣɺ εΫϩʔϧͳͲͰදࣔ͞Εͨͱ͖ʹಡΈࠐΉΑ͏ʹ͢Δɻ
57. <img src="example.jpg" loading="lazy"> 2. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ loading="lazy" Chrome Ͱ͸ JavaScript ʹΑΔॲཧΛඞཁͱͤͣɺ img ʹ loading="lazy" ଐੑΛ͚ͭΔ͚ͩͰɺ ϒϥ΢βϨϕϧͰը૾ͷ஗ԆಡΈࠐΈΛͯ͘͠ΕΔɻ
58. 2. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ Native Lazyload https://ja.wordpress.org/plugins/native-lazyload/ img ʹ loading="lazy" ଐੑΛ௥Ճ͠ɺ ඇରԠϒϥ΢βʹ͸ JavaScript ʹΑΔ ιϦϡʔγϣϯΛఏڙɻ
59. 2. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ Ωϟογϡ ಈతॲཧ͕ඞཁͳ͍ϖʔδ͸ ϓϥάΠϯ΍αʔόͷػೳͰΩϟογϡ͠Α͏ɻ
60. 2. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ PWA / Service Worker PWA (Progressive Web Apps) ͷࠜװΛࢧ͑Δٕ ज़Ͱ͋Δ Service Worker ʹΑΔΩϟογϡίϯ τϩʔϧͰɺମײతͳ଎͞Λ͔ͳΓ޲্Ͱ͖Δɻ Ωϟογϡ͸ϒϥ΢βʹอଘ͞ΕΔͨΊɺαʔό ΩϟογϡΑΓ΋Ϣʔβʹ͍ۙɻ WordPress Ͱ͸ϓϥάΠϯΛར༻͢Δ͜ͱͰ͔ ͳΓ͓खܰʹಋೖͰ͖Δɻ
61. 2. ίʔυͳ͠ͰͰ͖Δվળࢪࡦ ੩తԽ CMS ػೳΛར༻ͭͭ͠ɺαΠτΛ੩తԽ͠Α͏ɻ WordPress Λ੩తϑΝΠϧͰ ϗεςΟϯά͢ΔαʔϏε Shifter https://www.getshifter.io/
62. 3 3. ίʔυʹΑΔվળࢪࡦ IMPROVEMENTS WITH CODING
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 ); }
64. ௨ৗɺscript ͷϑΣονͱ࣮ߦ͸ϨϯμϦϯάΛ๦͛Δɻ(ಉظ) async ͔ defer ଐੑΛ͚ͭΔ͜ͱͰɺϨϯμϦϯάΛ๦͛Δ͜ͱͳ͘ɺ ฒߦͯ͠ script ͷϑΣονΛߦ͏͜ͱ͕Ͱ͖Δɻ(ඇಉظ) async ͱ defer ʹɺύϑΥʔϚϯεࠩ͸͋·Γͳ͍ɻ ࣮ߦͷॱ൪͕هड़ॱͰͳ͍Մೳੑ͕͋Δ async ΑΓɺdefer ͷ΄͏͕ແ೉ɻ 3. ίʔυʹΑΔվળࢪࡦ ϨϯμϦϯάΛ๦͛ΔϦιʔεͷআ֎ <script> <script async> <script defer> HTML ύʔε script ϑΣον script ࣮ߦ
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 Λ͚ͭΔ
66. 2. ίʔυʹΑΔվળࢪࡦ Resource Hints preload ϦιʔεΛͰ͖Δ͚ͩૣ͘ϑΣον͢ΔΑ͏ϒϥ΢βʹ௨஌͢Δɻ
 Ϣʔεέʔε: ࣄલʹ URL ͕Θ͔͍ͬͯͯɺ͔ͭॏཁͳϦιʔεͷ৔߹ʹ࢖͏ͱΑ͍ɻ΢ΣϒϑΥϯτͳͲɻ preconnect ଞΦϦδϯ΁ͷ઀ଓΛͰ͖Δ͚ͩૣ͘։࢝͢ΔΑ͏ϒϥ΢βʹ௨஌͢Δɻ Ϣʔεέʔε: Ͳ͔͜Βऔಘ͢Δ͔͸Θ͔͍ͬͯΔ͕ԿΛϑΣον͢Δ͔͕Θ͔Βͳ͍৔߹ɻCDNɺSNS ͳͲɻ dns-prefetch preconnect ͷαϒηοτͷΑ͏ͳ΋ͷɻ઀ଓ͸ߦΘͣɺDNS ͷ໊લղܾͷΈߦ͏ͨΊɺpreconnect ʹൺ΂Δͱϩʔίετɻ·ͨɺ preconnect ΑΓαϙʔτ͍ͯ͠Δϒϥ΢β͕ଟ͍ɻ prefetch ࠓޙͷφϏήʔγϣϯ΍Ϣʔβʔૢ࡞ͰඞཁʹͳΔͱ༧૝͞ΕΔϦιʔεΛࣄલʹϑΣον͠ɺΩϟογϡʹอଘ͢ΔΑ͏ϒϥ΢β ʹ௨஌͢Δɻ༏ઌ౓͸௿͍ɻ Ϣʔεέʔε: ϖʔδ۠੾Γίϯςϯπͷ࣍ϖʔδͷϦιʔεɺݕࡧ݁Ռ1ҐͷϖʔδͷϦιʔεͳͲɻ prerender prefetch ͱࣅ͍ͯΔ͕ɺͪ͜Β͸ϖʔδશମΛόοΫάϥ΢ϯυͰϨϯμϦϯά͢ΔɻϋΠίετɻ1ϖʔδͷΈࢦఆͰ͖Δɻ Ϣʔεέʔε: ϩάΠϯϖʔδʹ͓͚ΔϩάΠϯޙͷભҠઌϖʔδͳͲɻ
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 Λ௥Ճ͢Δྫ
68. 3. ίʔυʹΑΔվળࢪࡦ JAMstack WordPress ͷ REST API ͷΈར༻͠ɺNuxt.js ΍ GatsbyJS ͷΑ͏ͳ JavaScript ϑϨʔϜϫʔΫͱ૊Έ߹ΘͤͯαΠτΛߏங͢Δɻ
69. 4 CONCLUSION 4. ·ͱΊ
70. 4. ·ͱΊ ڀۃͷύϑΥʔϚϯε h1 ͱ meta description ͷΈΛهड़ͨ͠ϖʔδ
71. ੜ·Εͨͯͷ΢ΣϒαΠτ͸Έͳ100఺Ͱ͢ɻ ίϯςϯπ͕૿͑ΔͷʹͭΕɺϦιʔε͕ංେԽ͠ແବ͕ੜ͡Δɻ ·ΔͰΤϯτϩϐʔ૿େͷ๏ଇͷΑ͏ʹɻ ͪͳΈʹΤϯτϩϐʔΛݮগͤ͞ΒΕΔͷ͸ਓؒ׆ಈͷΈΒ͍͠ɻ͔͠΋෦෼తʹɻ ଎౓Λ஗͘͢Δͷ΋଎͘͢Δͷ΋ɺզʑਓؒͰ͋Δɻ ύϑΥʔϚϯεΛอͭʹ͸ɺ࠷ॳͷઃܭ͔Β೔ʑͷӡ༻·Ͱɺ஍ಓʹߦ͏ඞཁ͕͋Δɻ 4. ·ͱΊ Τϯτϩϐʔ૿େͷ๏ଇ
72. 3. ·ͱΊ ΢ΣϒαΠτͱ΢ΣϒύϑΥʔϚϯεվળ ύϑΥʔϚϯεվળʹ͍ͭͯɺࠓճ͸ͨ·ͨ·͏·͍͕ͬͨ͘ɺ ͢΂ͯͷέʔεʹ͓͍ͯύϑΥʔϚϯεվળͰ͖Δͱ͸ݶΒͳ͍ɻ ΢ΣϒαΠτͱ΢ΣϒύϑΥʔϚϯεվળͷؔ܎ੑ͸ɺ ंͷۭؾ఍߅ΛݮΒ͢͜ͱʹࣅ͍ͯΔɻ ڀۃʹۭؾ఍߅ΛݮΒ͔ͨͬͨ͠Β݁ہ F1 Ϛγϯʹͳͬͯ͠·͏ɻ ंͱಉ͡Α͏ʹɺ΢ΣϒαΠτʹ΋͞·͟·ͳ໨త͕͋Δɻ ৘ใΛ഑৴͢ΔͨΊ͚ͩͷ৔߹΋͋Ε͹ɺੈք؍ΛັͤΔͨΊͷ৔߹΋͋Δɻ ؍ޫόε͕ F1 Ϛγϯͱಉ͡଎͞Ͱ૸Δͷ͸ෆՄೳͰ͋Δɻ
73. THANK YOU