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

274c474bb14a19f48ee86907c5be2a1d?s=47 Kite
December 07, 2019

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

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

274c474bb14a19f48ee86907c5be2a1d?s=128

Kite

December 07, 2019
Tweet

Transcript

  1. 1.
  2. 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
  3. 3.
  4. 4.
  5. 9.

    ݖ ར ຊ ஶ ʂ ϧ ϒ Π ό ͷ

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

    Web αΠτΛߏங͢Δʹ͸ɺHTMLɺCSSɺ͓Αͼ JavaScript ͕ඞཁͰ͢ɻਓʑ ͕࢖༻͍ͨ͠ Web αΠτ΍ΞϓϦέʔγϣϯΛߏங͠ɺϢʔβΛҾ͖෇͚ͯҡ࣋ ͢Δʹ͸ɺ༏ΕͨϢʔβΤΫεϖϦΤϯεΛ࡞੒͢Δඞཁ͕͋Γ·͢ɻྑ޷ͳϢʔ βΤΫεϖϦΤϯεͷҰ෦͸ɺίϯςϯπͷಡΈࠐΈ͕ਝ଎Ͱ͋ΓɺϢʔβͷૢ࡞ ʹ൓Ԡ͢Δ͜ͱΛอূ͢Δ͜ͱͰ͢ɻ͜Ε͸

    Web ύϑΥʔϚϯεͱݺ͹Εɺ͜ͷ ϞδϡʔϧͰ͸ύϑΥʔϚϯεͷΑ͍ Web αΠτΛߏங͢ΔͨΊʹඞཁͳ͢΂ͯ Λֶश͠·͢ɻ ग़య: Web ύϑΥʔϚϯε - ΢Σϒ։ൃΛֶͿ | MDN web docs https://developer.mozilla.org/ja/docs/Learn/Performance 0. ͸͡Ίʹ ΢ΣϒύϑΥʔϚϯεͱ͸ “
  8. 19.

    Web αΠτΛߏங͢Δʹ͸ɺHTMLɺCSSɺ͓Αͼ JavaScript ͕ඞཁͰ͢ɻਓʑ ͕࢖༻͍ͨ͠ Web αΠτ΍ΞϓϦέʔγϣϯΛߏங͠ɺϢʔβΛҾ͖෇͚ͯҡ࣋ ͢Δʹ͸ɺ༏ΕͨϢʔβΤΫεϖϦΤϯεΛ࡞੒͢Δඞཁ͕͋Γ·͢ɻྑ޷ͳϢʔ βΤΫεϖϦΤϯεͷҰ෦͸ɺίϯςϯπͷಡΈࠐΈ͕ਝ଎Ͱ͋ΓɺϢʔβͷૢ࡞ ʹ൓Ԡ͢Δ͜ͱΛอূ͢Δ͜ͱͰ͢ɻ͜Ε͸

    Web ύϑΥʔϚϯεͱݺ͹Εɺ͜ͷ ϞδϡʔϧͰ͸ύϑΥʔϚϯεͷΑ͍ Web αΠτΛߏங͢ΔͨΊʹඞཁͳ͢΂ͯ Λֶश͠·͢ɻ ग़య: Web ύϑΥʔϚϯε - ΢Σϒ։ൃΛֶͿ | MDN web docs https://developer.mozilla.org/ja/docs/Learn/Performance 0. ͸͡Ίʹ ΢ΣϒύϑΥʔϚϯεͱ͸ “ දࣔ଎౓
  9. 20.

    ฏۉϖʔδಡΈࠐΈ࣌ؒΛ 850 ϛϦඵ୹ॖͨ͠ͱ͜Ζɺίϯόʔδϣϯ਺͕ 7% ૿Ճ͠ɺ ௚ؼ཰͕ 7% ݮগ͠ɺηογϣϯ౰ͨΓͷӾཡϖʔδ਺͕ 10% ૿Ճͨ͠ɻ

    ϖʔδͷಡΈࠐΈʹ͔͔Δ͕࣌ؒ 3 ඵΛ௒͑Δͱɺ 53% ͷϢʔβʔ͕ϞόΠϧαΠτͷ๚໰Λ͖͋ΒΊΔɻ ग़య: ύϑΥʔϚϯε͕ॏཁͳͷ͸ͳ͔ͥ https://developers.google.com/web/fundamentals/performance/why-performance-matters?hl=ja “ 0. ͸͡Ίʹ ύϑΥʔϚϯε͕ॏཁͳͷ͸ͳ͔ͥ
  10. 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࣌఺
  11. 47.

    ը૾ܗࣜ ֦ுࢠ ֓ཁ JPEG δΣΠϖοΫ .jpg / .jpeg ࣸਅ΍άϥσʔγϣϯͳͲɺ৭มԽ͕ଟ͍ը૾ʹద͍ͯ͠Δɻ ΋ͬͱ΋࢖ΘΕ͍ͯΔը૾ܗࣜɻඇՄٯѹॖɻ

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

    2. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ WordPress Ͱ SVG Λ࢖͏ ηΩϡϦςΟͷ؍఺ͰɺσϑΥϧτঢ়ଶͰ͸ WordPress ΁ͷ SVG

    Ξοϓϩʔυ ͸Ͱ͖ͳ͍ɻSVG ͷΞοϓϩʔυΛڐՄ͢Δ͚ͩͳΒɺͦ͜·Ͱ௕͘ͳ͍ίʔυ Λ functions.php ͳͲʹ௥ه͢Ε͹͍͍͕ɺϝσΟΞϥΠϒϥϦͳͲͰϓϨϏϡʔ ͞ΕΔΑ͏ʹ͢Δʹ͸গʑෳࡶͳͷͰɺϓϥάΠϯΛར༻͢ΔͱΑ͍Ͱ͠ΐ͏ɻ
  14. 57.

    <img src="example.jpg" loading="lazy"> 2. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ loading="lazy" Chrome Ͱ͸ JavaScript ʹΑΔॲཧΛඞཁͱͤͣɺ

    img ʹ loading="lazy" ଐੑΛ͚ͭΔ͚ͩͰɺ ϒϥ΢βϨϕϧͰը૾ͷ஗ԆಡΈࠐΈΛͯ͘͠ΕΔɻ
  15. 60.

    2. ίʔσΟϯάͳ͠ͰͰ͖Δվળࢪࡦ PWA / Service Worker PWA (Progressive Web Apps)

    ͷࠜװΛࢧ͑Δٕ ज़Ͱ͋Δ Service Worker ʹΑΔΩϟογϡίϯ τϩʔϧͰɺମײతͳ଎͞Λ͔ͳΓ޲্Ͱ͖Δɻ Ωϟογϡ͸ϒϥ΢βʹอଘ͞ΕΔͨΊɺαʔό ΩϟογϡΑΓ΋Ϣʔβʹ͍ۙɻ WordPress Ͱ͸ϓϥάΠϯΛར༻͢Δ͜ͱͰ͔ ͳΓ͓खܰʹಋೖͰ͖Δɻ
  16. 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 ); }
  17. 64.

    ௨ৗɺscript ͷϑΣονͱ࣮ߦ͸ϨϯμϦϯάΛ๦͛Δɻ(ಉظ) async ͔ defer ଐੑΛ͚ͭΔ͜ͱͰɺϨϯμϦϯάΛ๦͛Δ͜ͱͳ͘ɺ ฒߦͯ͠ script ͷϑΣονΛߦ͏͜ͱ͕Ͱ͖Δɻ(ඇಉظ) async

    ͱ defer ʹɺύϑΥʔϚϯεࠩ͸͋·Γͳ͍ɻ ࣮ߦͷॱ൪͕هड़ॱͰͳ͍Մೳੑ͕͋Δ async ΑΓɺdefer ͷ΄͏͕ແ೉ɻ 3. ίʔυʹΑΔվળࢪࡦ ϨϯμϦϯάΛ๦͛ΔϦιʔεͷআ֎ <script> <script async> <script defer> HTML ύʔε script ϑΣον script ࣮ߦ
  18. 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 Λ͚ͭΔ
  19. 66.

    2. ίʔυʹΑΔվળࢪࡦ Resource Hints preload ϦιʔεΛͰ͖Δ͚ͩૣ͘ϑΣον͢ΔΑ͏ϒϥ΢βʹ௨஌͢Δɻ
 Ϣʔεέʔε: ࣄલʹ URL ͕Θ͔͍ͬͯͯɺ͔ͭॏཁͳϦιʔεͷ৔߹ʹ࢖͏ͱΑ͍ɻ΢ΣϒϑΥϯτͳͲɻ

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

    3. ίʔυʹΑΔվળࢪࡦ JAMstack WordPress ͷ REST API ͷΈར༻͠ɺNuxt.js ΍ GatsbyJS

    ͷΑ͏ͳ JavaScript ϑϨʔϜϫʔΫͱ૊Έ߹ΘͤͯαΠτΛߏங͢Δɻ
  22. 73.