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. WordPress Ͱ΋େৎ෉ʂ ࣮ྫͰݟΔ΢ΣϒύϑΥʔϚϯεվળ WEB Kite @ixkaito

  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
  3. ੈքҰΘ͔Γ΍͍͢ 8PSE1SFTT ಋೖͱ αΠ τ੍࡞ͷ ڭՊॻ ൃച ஶऀɿ҆౻ಞ࢙ɼԬຊलߴɼݹլւਓɼਂ୔޾࣏࿠ IUUQTXXXBNB[PODPKQEQ

  4. ݖ ར ຊ ஶ ʂ ϧ ϒ Π ό ͷ

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

  6. ·ͣ͸݁Ռ͔Β͓ݟͤ͠Α͏

  7. Before Lighthouse

  8. After Lighthouse

  9. After WebPageTest

  10. 1. ௐࠪɾܭଌ 1

  11. 1. ௐࠪɾܭଌ Lighthouse Chrome ֦ுػೳ 2019.6.15࣌఺ͷόʔδϣϯ: Lighthouse 5.1.0 https://developers.google.com/web/tools/lighthouse/ ύϑΥʔϚϯεɺΞΫηγϏϦςΟɺ

    ϕετϓϥΫςΟεɺSEOɺPWA ͷ 5߲໨ΛௐࠪɾܭଌͰ͖Δ
  12. 1. ௐࠪɾܭଌ Lighthouse ίϚϯυϥΠϯπʔϧ 2019.6.15࣌఺ͷόʔδϣϯ: Lighthouse 5.1.0 https://www.npmjs.com/package/lighthouse $ lighthouse

    https://example.com/ ܭଌ݁Ռ͸ HTML ͱͯ͠อଘ͞ΕΔ
  13. 1. ௐࠪɾܭଌ Chrome Audits 2019.6.15࣌఺ͷόʔδϣϯ: Lighthouse 4.3.1 Lighthouse Chrome ֦ுػೳɺίϚϯυϥΠϯ

    πʔϧͱ΄΅ಉ݁͡Ռ
  14. 1. ௐࠪɾܭଌ PageSpeed Insights https://developers.google.com/speed/pagespeed/insights/ ௐ߲ࠪ໨͸ύϑΥʔϚϯεͷΈɺ೔ຊޠ͋Γ

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

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

    Insights) ΛࢀߟʹվળΛߦ͏ɻ
  17. 22. վળࢪࡦ

  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. վળࢪࡦ αʔό
  19. 2. վળࢪࡦ Nginx ΤοΫεαʔόʔʮnginxʹ͍ͭͯʯΑΓ https://www.xserver.ne.jp/manual/man_server_nginx.php

  20. 2. վળࢪࡦ HTTP/2 ΤοΫεαʔόʔʮHTTP/2ʹ͍ͭͯʯΑΓ https://www.xserver.ne.jp/manual/man_server_http2.php

  21. 2. վળࢪࡦ PHP7ɺPHP ϞδϡʔϧϞʔυɺFastCGIɺSSD ʹ͍ͭͯ͸ׂѪɻͱʹ͔͘ϓϩάϥϜͷॲཧΛߴ଎ԽͰ͖Δ΍ͭΒɻ

  22. 2. վળࢪࡦ ෆཁϓϥάΠϯͷΞϯΠϯετʔϧ

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

  24. 2. վળࢪࡦ ෆཁϓϥάΠϯͷΞϯΠϯετʔϧ σʔλϕʔεʹେྔͷϨίʔυΛอଘ͢ΔϓϥάΠϯ͕͋ΔͷͰɺͦ͏͍͏ϓϥάΠϯͷར༻͸ආ͚Α͏ɻ ݟ͚ͭͨ৔߹͸ʮఀࢭʯ͚ͩͰ͸ͳ͘ɺ؅ཧը໘Ͱʮ࡟আʯ΋͘͠͸ WP-CLI ͰΞϯΠϯετʔϧ͠Α͏ɻ ͖ͪΜͱ࡞ΒΕͨϓϥάΠϯͰ͋Ε͹ΞϯΠϯετʔϧͰσʔλ΋࡟আ͢Δɻ தʹ͸ΞϯΠϯετʔϧॲཧΛͪΌΜͱ͍ͯ͠ͳ͍ϓϥάΠϯ΋͋ΔͷͰɺ ΞϯΠϯετʔϧޙͷσʔλϕʔε֬ೝ΋๨Εͣʹɻ

    ͞ΒʹɺϓϥάΠϯʹ͸ελΠϧγʔτ΍εΫϦϓτΛૠೖ͢Δ΋ͷ΋ଟ͘ɺ ෆཁͳϓϥάΠϯ͸ۃྗఀࢭ΋͘͠͸ΞϯΠϯετʔϧ͠Α͏ɻ
  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 ); }
  26. 2. վળࢪࡦ Ωϟογϡͱ੩తԽ ಈతॲཧ͕ඞཁͳ͍ϖʔδ͸ϓϥάΠϯ΍αʔόͷػೳͰΩϟογϡ͢Δ͔੩తԽ͠Α͏ɻ WordPress Λ੩తϑΝΠϧͰ ϗεςΟϯά͢ΔαʔϏε Shifter https://www.getshifter.io/

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

    ͷࠜװΛࢧ͑Δٕ ज़Ͱ͋Δ Service Worker ʹΑΔΩϟογϡίϯ τϩʔϧͰɺମײతͳ଎͞Λ͔ͳΓ޲্Ͱ͖Δɻ Ωϟογϡ͸ϒϥ΢βʹอଘ͞ΕΔͨΊɺαʔό ΩϟογϡΑΓ΋Ϣʔβʹ͍ۙɻ WordPress Ͱ͸ϓϥάΠϯΛར༻͢Δ͜ͱͰ͔ ͳΓ͓खܰʹಋೖͰ͖Δɻ
  28. ը૾ܗࣜ ֦ுࢠ ֓ཁ JPEG δΣΠϖοΫ .jpg / .jpeg ࣸਅ΍άϥσʔγϣϯͳͲɺ৭มԽ͕ଟ͍ը૾ʹద͍ͯ͠Δɻ ΋ͬͱ΋࢖ΘΕ͍ͯΔը૾ܗࣜɻඇՄٯѹॖɻ

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

    ૾ฤूιϑτ΋΄ͱΜͲͳ͍ͨ Ίɺͪ͜Β΋ϓϥάΠϯ͋Δ͍͸ ม׵͢Δඞཁ͕͋Δɻ
  30. 2. վળࢪࡦ SVG ࠓճ͸৭มԽͷগͳ͍ը૾ɺ͔ͭAdobe Πϥετ ϨʔλʔͷϕΫλʔσʔλ͕࢒͍ͬͯͨͨΊɺ΄ ͱΜͲͷΞΠΩϟονը૾ͷܗࣜʹ SVG Λબ୒ɻ

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

    SVG ͷॻ͖ग़͠
  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
  33. 2. վળࢪࡦ WordPress Ͱ SVG Λ࢖͏ ηΩϡϦςΟͷ؍఺ͰɺσϑΥϧτঢ়ଶͰ͸ WordPress ΁ͷ SVG

    Ξοϓϩʔυ ͸Ͱ͖ͳ͍ɻSVG ͷΞοϓϩʔυΛڐՄ͢Δ͚ͩͳΒɺͦ͜·Ͱ௕͘ͳ͍ίʔυ Λ functions.php ͳͲʹ௥ه͢Ε͹͍͍͕ɺϝσΟΞϥΠϒϥϦͳͲͰϓϨϏϡʔ ͞ΕΔΑ͏ʹ͢Δʹ͸গʑෳࡶͳͷͰɺϓϥάΠϯΛར༻͢ΔͱΑ͍Ͱ͠ΐ͏ɻ
  34. 2. վળࢪࡦ SVG Support https://wordpress.org/plugins/svg-support/ SVG ϑΝΠϧʹ <?xml version="1.0" encoding=“utf-8"?>

    ͷ௥Ճ͕ඞཁʹͳͬͨɻ
  35. 2. վળࢪࡦ Safe SVG https://wordpress.org/plugins/safe-svg/

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

    SVG ͕ࣗಈతʹ࢖ΘΕΔ৔߹ɺ ผ్खಈͰ JPEG ΍ PNG ͳͲΛࢦఆ͢Δඞཁ͕͋Δɻ
  37. <img src="example.jpg" decoding="async"> 2. վળࢪࡦ ΦϑεΫϦʔϯը૾ͷ஗ԆಡΈࠐΈ img ʹ decoding="async" ଐੑΛ͚ͭΔ͜ͱͰɺ

    ଞͷίϯςϯπͷද͕ࣔ஗Εͳ͍Α͏ɺ ϒϥ΢β͕ը૾Λඇಉظతʹσίʔυ͢Δɻ ࢒೦ͳ͕Β Lighthouse ʹը૾ͷ஗ԆಡΈࠐΈͱͯ͠͸ධՁ͞Εͳ͍ɻ
  38. 2. վળࢪࡦ amp-img ը૾ͷ஗ԆಡΈࠐΈͷϥΠϒϥϦ͸ͨ͘͞Μ͋Δ͕ɺ ͔ͤͬ͘ͳͷͰ AMP ͷը૾දࣔํ๏ (amp-img) Λར༻ͯ͠ΈΑ͏ɻ AMP

    ʹ͍ͭͯৄ͘͠͸খ઒҆ಸ͞ΜͷηογϣϯͰɻ ࣮͸ AMP ରԠ͠ͳͯ͘΋ɺAMP JS ϥΠϒϥϦΛಡΈࠐΉ͜ͱͰɺ AMP ͷߴ଎ԽػೳΛར༻Ͱ͖Δɻ
  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 Λར༻͢Δྫ
  40. ௨ৗɺscript ͷϑΣονͱ࣮ߦ͸ϨϯμϦϯάΛ๦͛Δɻ(ಉظ) async ͔ defer ଐੑΛ͚ͭΔ͜ͱͰɺϨϯμϦϯάΛ๦͛Δ͜ͱͳ͘ɺ ฒߦͯ͠ script ͷϑΣονΛߦ͏͜ͱ͕Ͱ͖Δɻ(ඇಉظ) async

    ͱ defer ʹɺύϑΥʔϚϯεࠩ͸͋·Γͳ͍ɻ ࣮ߦͷॱ൪͕هड़ॱͰͳ͍Մೳੑ͕͋Δ async ΑΓɺdefer ͷ΄͏͕ແ೉ɻ 2. վળࢪࡦ ϨϯμϦϯάΛ๦͛ΔϦιʔεͷআ֎ <script> <script async> <script defer> HTML ύʔε script ϑΣον script ࣮ߦ
  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 Λ͚ͭΔ
  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 ΋ඇಉظతʹಡΈࠐΉ
  43. 2. վળࢪࡦ Resource Hints preload ϦιʔεΛͰ͖Δ͚ͩૣ͘ϑΣον͢ΔΑ͏ϒϥ΢βʹ௨஌͢Δɻ
 Ϣʔεέʔε: ࣄલʹ URL ͕Θ͔͍ͬͯͯɺ͔ͭॏཁͳϦιʔεͷ৔߹ʹ࢖͏ͱΑ͍ɻ΢ΣϒϑΥϯτͳͲɻ

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

  46. 3. ·ͱΊ ڀۃͷύϑΥʔϚϯε h1 ͱ meta description ͷΈΛهड़ͨ͠ϖʔδ

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

  48. 3. ·ͱΊ ΢ΣϒαΠτͱ΢ΣϒύϑΥʔϚϯεվળ ύϑΥʔϚϯεվળʹ͍ͭͯɺࠓճ͸ͨ·ͨ·͏·͍͕ͬͨ͘ɺ ͢΂ͯͷέʔεʹ͓͍ͯύϑΥʔϚϯεվળͰ͖Δͱ͸ݶΒͳ͍ɻ ΢ΣϒαΠτͱ΢ΣϒύϑΥʔϚϯεվળͷؔ܎ੑ͸ɺ ंͷۭؾ఍߅ΛݮΒ͢͜ͱʹࣅ͍ͯΔɻ ڀۃʹۭؾ఍߅ΛݮΒ͔ͨͬͨ͠Β݁ہ F1 Ϛγϯʹͳͬͯ͠·͏ɻ

    ंͱಉ͡Α͏ʹɺ΢ΣϒαΠτʹ΋͞·͟·ͳ໨త͕͋Δɻ ৘ใΛ഑৴͢ΔͨΊ͚ͩͷ৔߹΋͋Ε͹ɺੈք؍ΛັͤΔͨΊͷ৔߹΋͋Δɻ ؍ޫόε͕ F1 Ϛγϯͱಉ͡଎͞Ͱ૸Δͷ͸ෆՄೳͰ͋Δɻ
  49. KITERETZ inc. JOIN OUR TEAM גࣜձࣾΩςϨπͰ͸ɺ৽ਓσβΠφʔΛืूதʂ https://kiteretz.com/careers/