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

by Kite

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

https://wocker.dev

Slide 6

Slide 6 text

https://wocker.dev ★ Star 475

Slide 7

Slide 7 text

https://wocker.dev Starͨ͠ਓ

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

࠷ۙ͸ Notion ʹ΋ ϋϚ͍ͬͯ·͢ʂ

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

ຊ೔ͷϋογϡλά #wcosaka2019

Slide 16

Slide 16 text

SPEAKER DECK εϥΠυ͸ޙ΄Ͳެ։͠·͢

Slide 17

Slide 17 text

00. ͸͡Ίʹ WEB

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

·ͣ͸݁Ռ͔Β͓ݟͤ͠Α͏

Slide 24

Slide 24 text

Before Lighthouse

Slide 25

Slide 25 text

After Lighthouse

Slide 26

Slide 26 text

After WebPageTest

Slide 27

Slide 27 text

1. ௐࠪɾܭଌ 1

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

͘͞ΒΠϯλʔωοτ ΤοΫεαʔόʔ ϩϦϙοϓ (ϋΠεϐʔυϓϥϯ) ϔςϜϧ ΢Σϒαʔό 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࣌఺

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

ը૾ܗࣜ ֦ுࢠ ֓ཁ JPEG δΣΠϖοΫ .jpg / .jpeg ࣸਅ΍άϥσʔγϣϯͳͲɺ৭มԽ͕ଟ͍ը૾ʹద͍ͯ͠Δɻ ΋ͬͱ΋࢖ΘΕ͍ͯΔը૾ܗࣜɻඇՄٯѹॖɻ GIF δϑ/Ϊϑ .gif ৭มԽ͕গͳ͍ը૾ʹద͍ͯ͠Δɻ256৭·ͰɻಁաɺΞχϝʔγϣϯΛαϙʔτɻ Մٯѹॖ (ඇՄٯѹॖ΋Ͱ͖Δ͕΄ͱΜͲ࢖ΘΕͳ͍) PNG ϐϯά .png ओʹ8Ϗοτɺ24Ϗοτ͕͋Δɻ8Ϗοτ͸ GIF ͱಉ༷256৭·Ͱɻ৭มԽ͕গͳ͍ը૾ʹద͍ͯ͠Δɻ ࣸਅ΍άϥσʔγϣϯͩͱϑΝΠϧαΠζ͕େ͖͘ͳΔɻಁաΛαϙʔτɻՄٯѹॖɻ WebP ΢Σοϐʔ .webp Google ʹΑΔ࠷৽ͷը૾ܗࣜɻJPEG ΍ PNG ͳͲΑΓϑΝΠϧαΠζΛখ͘͞Ͱ͖ΔՄೳੑ͕ߴ͍ɻ ՄٯѹॖɺඇՄٯѹॖɺಁաɺΞχϝʔγϣϯΛαϙʔτ͍ͯ͠Δɻ SVG ΤεϰΟʔδʔ .svg ֦ॖ΍มܗͯ͠΋ྼԽ͠ͳ͍ɻϏοτϚοϓը૾΍ϒϥ΢β͕ೝࣝͰ͖ΔςΩετΛؚΉ͜ͱ͕Ͱ͖Δɻ ৭มԽ͕গͳ͍ը૾Ͱ͋Ε͹ SVG ͷ΄͏͕ϑΝΠϧαΠζ͕খ͍͞Մೳੑ͕ߴ͍ɻΞχϝʔγϣϯΛαϙʔτɻ 2. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ ࠷దͳը૾ܗࣜͷબ୒ ϥελʔܗࣜ (ϏοτϚοϓը૾) ϕΫλʔܗࣜ

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

ϗʔϜ΍ΞʔΧΠϒϖʔδͰ͸ 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 ); }

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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 Λ͚ͭΔ

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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 Λ௥Ճ͢Δྫ

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

4 CONCLUSION 4. ·ͱΊ

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

THANK YOU