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

274c474bb14a19f48ee86907c5be2a1d?s=47 Kite
June 15, 2019

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

ウェブパフォーマンス、あるいはウェブページの表示速度は、ウェブサイト品質の重要な指標の1つです。今注目されているウェブパフォーマンス改善ですが、そもそも何をすればいいのか、具体例を交えながらその施策を紹介いたします。具体例としては、WordPress を利用したブログの PageSpeed Insights (Lighthouse) のパフォーマンススコアを、30点以下から95点以上に改善した際、実際に行った施策を用います。

274c474bb14a19f48ee86907c5be2a1d?s=128

Kite

June 15, 2019
Tweet

Transcript

  1. 2.

    KITE KITERETZ inc. CEO & Founder ­ kite.koga ¬ ixkaito

    ® ixkaito Ŷ ixkaito Ʃ ixkaito ŧ ixkaito Web & graphic designer Programmer WordPress core contributer Ruby on Rails contributer React contributer Wocker developer Bathe developer Frasco developer
  2. 4.

    ݖ ར ຊ ஶ ʂ ϧ ϒ Π ό ͷ

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

    ͘͞ΒΠϯλʔωοτ ΤοΫεαʔόʔ ϩϦϙοϓ ϔςϜϧ ΢Σϒαʔό Nginx + Apache Nginx +

    Apache Apache Apache PHP 7.2 (7.3΁Ҡߦத) Ϟδϡʔϧ 7.2 FastCGI 7.1 Ϟδϡʔϧ 7.1 Ϟδϡʔϧ HDD/SSD DB ͷΈ SSD Φʔϧ SSD DB ͷΈ SSD Φʔϧ SSD HTTP HTTP/2 HTTP/2 HTTP/2 HTTP/2 ͦͷଞ Ϧιʔεϒʔετ ϝϞϦ256GB αʔόʔΩϟογϡ ϒϥ΢βΩϟογϡ XΞΫηϥϨʔλ WPΩϟογϡ ੩తΩϟογϡ 2. վળࢪࡦ αʔό
  4. 25.

    ϗʔϜ΍ΞʔΧΠϒϖʔδͰ͸ Gutenberg ͷίϯςϯπ͕ͳ͘ɺ jQuery ΋࢖༻͍ͯ͠ͳ͍ͨΊɺؔ࿈ͷ CSS ͱ jQuery ΛಡΈࠐ·ͳ͍Α͏ʹ͢Δɻ ؅ཧը໘Ͱ͸ΞΫγϣϯϑοΫʹ௥Ճ͠ͳ͍Α͏আ֎͓ͯ͘͠ɻ

    2. վળࢪࡦ ϖʔδʹΑͬͯ 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 ); }
  5. 27.

    2. վળࢪࡦ PWA / Service Worker PWA (Progressive Web Apps)

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

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

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

    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
  8. 33.

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

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

    2. վળࢪࡦ SVG Λར༻͢Δࡍͷ஫ҙ఺ og:image ͸ SVG Λαϙʔτ͍ͯ͠ͳ͍ͨΊɺ OGP ը૾ͱͯ͠ΞΠΩϟονը૾ͳͲʹઃఆͨ͠

    SVG ͕ࣗಈతʹ࢖ΘΕΔ৔߹ɺ ผ్खಈͰ JPEG ΍ PNG ͳͲΛࢦఆ͢Δඞཁ͕͋Δɻ
  10. 37.

    <img src="example.jpg" decoding="async"> 2. վળࢪࡦ ΦϑεΫϦʔϯը૾ͷ஗ԆಡΈࠐΈ img ʹ decoding="async" ଐੑΛ͚ͭΔ͜ͱͰɺ

    ଞͷίϯςϯπͷද͕ࣔ஗Εͳ͍Α͏ɺ ϒϥ΢β͕ը૾Λඇಉظతʹσίʔυ͢Δɻ ࢒೦ͳ͕Β Lighthouse ʹը૾ͷ஗ԆಡΈࠐΈͱͯ͠͸ධՁ͞Εͳ͍ɻ
  11. 38.

    2. վળࢪࡦ amp-img ը૾ͷ஗ԆಡΈࠐΈͷϥΠϒϥϦ͸ͨ͘͞Μ͋Δ͕ɺ ͔ͤͬ͘ͳͷͰ AMP ͷը૾දࣔํ๏ (amp-img) Λར༻ͯ͠ΈΑ͏ɻ AMP

    ʹ͍ͭͯৄ͘͠͸খ઒҆ಸ͞ΜͷηογϣϯͰɻ ࣮͸ AMP ରԠ͠ͳͯ͘΋ɺAMP JS ϥΠϒϥϦΛಡΈࠐΉ͜ͱͰɺ AMP ͷߴ଎ԽػೳΛར༻Ͱ͖Δɻ
  12. 39.

    function example_scripts() { wp_enqueue_script( 'amp', 'https://cdn.ampproject.org/v0.js', array(), null ); }

    add_action( 'wp_enqueue_scripts', 'example_scripts' ); AMP JS ΛಡΈࠐΉɻϨϯμϦϯάΛ๦͛ͳ͍ͨΊͷ async ଐੑʹ͍ͭͯޙड़ɻ <amp-img alt="<?php the_title(); ?>ͷαϜωΠϧը૾" src="<?php the_post_thumbnail_url(); ?>" width="350" height="183" layout="responsive"> </amp-img> img ͷ୅ΘΓʹ amp-img Λ࢖༻ɻϨεϙϯγϒʹରԠ͢ΔͨΊ layout ଐੑʹ responsive Λࢦఆɻ 2. վળࢪࡦ WordPress Ͱ amp-img Λར༻͢Δྫ
  13. 40.

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

    ͱ defer ʹɺύϑΥʔϚϯεࠩ͸͋·Γͳ͍ɻ ࣮ߦͷॱ൪͕هड़ॱͰͳ͍Մೳੑ͕͋Δ async ΑΓɺdefer ͷ΄͏͕ແ೉ɻ 2. վળࢪࡦ ϨϯμϦϯάΛ๦͛ΔϦιʔεͷআ֎ <script> <script async> <script defer> HTML ύʔε script ϑΣον script ࣮ߦ
  14. 41.

    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 ); } 2. վળࢪࡦ WordPress ͷ script ʹ defer Λ͚ͭΔ
  15. 42.

    WebFont.load({ google: { families: ['Montserrat', 'Noto+Sans+JP:400,700'] } }); function example_scripts()

    { wp_enqueue_script( 'webfont', 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js', array(), null ); wp_enqueue_script( 'main', get_theme_file_uri( 'js/main.js' ), array( 'webfont' ), null ); } add_action( 'wp_enqueue_scripts', 'example_scripts' ); Web Font Loader ͱࣗ༝ʹهड़Ͱ͖Δ JavaScript ϑΝΠϧΛಡΈࠐΉɻ ࣗ༝ʹهड़Ͱ͖Δ JavaScript ϑΝΠϧ (ྫͰ͸ main.js) ʹɺ্هͷΑ͏ʹ഑ྻͰϑΥϯτΛࢦఆɻ ௨ৗͷ Google Fonts ͷϦϯΫ͸࡟আɻ <link href=“https://fonts.googleapis.com/css?family=Montserrat|Noto+Sans+JP:400,700&display=swap” rel="stylesheet"> 2. վળࢪࡦ Google Fonts ΋ඇಉظతʹಡΈࠐΉ
  16. 43.

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

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

    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 ͕௥Ճ͞ΕΔɻ 2. վળࢪࡦ WordPress Ͱ dns-prefetch Λ௥Ճ͢Δྫ