ウェブパフォーマンス、あるいはウェブページの表示速度は、ウェブサイト品質の重要な指標の1つです。今注目されているウェブパフォーマンス改善ですが、そもそも何をすればいいのか、具体例を交えながらその施策を紹介いたします。具体例としては、WordPress を利用したブログの PageSpeed Insights (Lighthouse) のパフォーマンススコアを、30点以下から95点以上に改善した際、実際に行った施策を用います。
WordPress Ͱେৎʂ࣮ྫͰݟΔΣϒύϑΥʔϚϯεվળWEBKite @ixkaito
View Slide
KITEKITERETZ inc. CEO & Founder kite.koga ¬ ixkaito ® ixkaitoŶ ixkaito Ʃ ixkaito ŧ ixkaitoWeb & graphic designerProgrammerWordPress core contributerRuby on Rails contributerReact contributerWocker developerBathe developerFrasco developer
ੈքҰΘ͔Γ͍͢8PSE1SFTTಋೖͱαΠτ੍࡞ͷڭՊॻൃചஶऀɿ҆౻ಞ࢙ɼԬຊलߴɼݹլւਓɼਂ࣏IUUQTXXXBNB[PODPKQEQ
ݖརຊஶʂϧϒΠόͷܾղϧϒϥτݖ࡞ݖརຊΫϦΤΠλͷͷΊͨͷஶɹେ۲ഹɹଜਸɹଜ߶େɹݹլւਓɹᜊ߂थɹ֯ాҁՂɹછ୩ণརݱͰτϥϒϧʹͳΓ͕ͪͳݖརͷʹ͍ͭͯɹ ΫϦΤΠλʔͱ͍͚ͯͬͯ͠ͳ͍͜ͱɹ ݖརΛ৵͞Εͨ࣌ͷ۩ମతͳରॲ๏ΛɺΘ͔Γ͘͢·ͱΊͨΫϦΤΠλʔͷͨΊͷόΠϒϧൃചஶऀɿେ۲ഹɼଜਸɼછ୩ণརɼଜ߶େɼݹլւਓɼᜊ߂थɼ֯ాҁՂIUUQTXXXBNB[PODPKQEQஶ࡞ݖτϥϒϧղܾͷόΠϒϧʂΫϦΤΠλʔͷͨΊͷݖརͷຊ
ࠓճͷ࣮ྫͷରαΠτσβΠφʔͷΠϥετϊʔτhttps://in.spicagraph.com/@spicagraph
·ͣ݁Ռ͔Β͓ݟͤ͠Α͏
BeforeLighthouse
AfterLighthouse
AfterWebPageTest
1. ௐࠪɾܭଌ1
1. ௐࠪɾܭଌLighthouseChrome ֦ுػೳ2019.6.15࣌ͷόʔδϣϯ: Lighthouse 5.1.0https://developers.google.com/web/tools/lighthouse/ύϑΥʔϚϯεɺΞΫηγϏϦςΟɺϕετϓϥΫςΟεɺSEOɺPWA ͷ5߲ΛௐࠪɾܭଌͰ͖Δ
1. ௐࠪɾܭଌLighthouse ίϚϯυϥΠϯπʔϧ2019.6.15࣌ͷόʔδϣϯ: Lighthouse 5.1.0https://www.npmjs.com/package/lighthouse$ lighthouse https://example.com/ܭଌ݁Ռ HTML ͱͯ͠อଘ͞ΕΔ
1. ௐࠪɾܭଌChrome Audits2019.6.15࣌ͷόʔδϣϯ: Lighthouse 4.3.1Lighthouse Chrome ֦ுػೳɺίϚϯυϥΠϯπʔϧͱ΄΅ಉ݁͡Ռ
1. ௐࠪɾܭଌPageSpeed Insightshttps://developers.google.com/speed/pagespeed/insights/ௐ߲ࠪύϑΥʔϚϯεͷΈɺຊޠ͋Γ
1. ௐࠪɾܭଌWebPageTesthttps://www.webpagetest.org/
Lighthouse PageSpeed Insights ͰείΞ͚ͩͲମײతʹ͘ײ͡ͳ͍߹͕͋ΓɺٯʹߴείΞͰɺ࣮ࡍ͍ͱݶΒͳ͍߹͕͋ΔɻͨͩɺվળͰ͖Δ༰Λ۩ମతʹࣔͯ͘͠ΕΔͨΊɺLighthouse (PageSpeed Insights) ΛࢀߟʹվળΛߦ͏ɻ
22. վળࢪࡦ
͘͞ΒΠϯλʔωοτ ΤοΫεαʔόʔ ϩϦϙοϓ ϔςϜϧΣϒαʔό Nginx + Apache Nginx + Apache Apache ApachePHP7.2 (7.3Ҡߦத)Ϟδϡʔϧ7.2FastCGI7.1Ϟδϡʔϧ7.1ϞδϡʔϧHDD/SSD DB ͷΈ SSD Φʔϧ SSD DB ͷΈ SSD Φʔϧ SSDHTTP HTTP/2 HTTP/2 HTTP/2 HTTP/2ͦͷଞ ϦιʔεϒʔετϝϞϦ256GBαʔόʔΩϟογϡϒϥβΩϟογϡXΞΫηϥϨʔλWPΩϟογϡ੩తΩϟογϡ2. վળࢪࡦαʔό
2. վળࢪࡦNginxΤοΫεαʔόʔʮnginxʹ͍ͭͯʯΑΓhttps://www.xserver.ne.jp/manual/man_server_nginx.php
2. վળࢪࡦHTTP/2ΤοΫεαʔόʔʮHTTP/2ʹ͍ͭͯʯΑΓhttps://www.xserver.ne.jp/manual/man_server_http2.php
2. վળࢪࡦPHP7ɺPHP ϞδϡʔϧϞʔυɺFastCGIɺSSDʹׂ͍ͭͯѪɻͱʹ͔͘ϓϩάϥϜͷॲཧΛߴԽͰ͖ΔͭΒɻ
2. վળࢪࡦෆཁϓϥάΠϯͷΞϯΠϯετʔϧ
ͳΜͱ1ઍສϨίʔυҎ্ʂ1.4GBʂͷσʔλʹૺ۰ʂ2. վળࢪࡦෆཁϓϥάΠϯͷΞϯΠϯετʔϧ
2. վળࢪࡦෆཁϓϥάΠϯͷΞϯΠϯετʔϧσʔλϕʔεʹେྔͷϨίʔυΛอଘ͢ΔϓϥάΠϯ͕͋ΔͷͰɺͦ͏͍͏ϓϥάΠϯͷར༻ආ͚Α͏ɻݟ͚ͭͨ߹ʮఀࢭʯ͚ͩͰͳ͘ɺཧը໘Ͱʮআʯ͘͠ WP-CLI ͰΞϯΠϯετʔϧ͠Α͏ɻ͖ͪΜͱ࡞ΒΕͨϓϥάΠϯͰ͋ΕΞϯΠϯετʔϧͰσʔλআ͢ΔɻதʹΞϯΠϯετʔϧॲཧΛͪΌΜͱ͍ͯ͠ͳ͍ϓϥάΠϯ͋ΔͷͰɺΞϯΠϯετʔϧޙͷσʔλϕʔε֬ೝΕͣʹɻ͞ΒʹɺϓϥάΠϯʹελΠϧγʔτεΫϦϓτΛૠೖ͢Δͷଟ͘ɺෆཁͳϓϥάΠϯۃྗఀࢭ͘͠ΞϯΠϯετʔϧ͠Α͏ɻ
ϗʔϜΞʔΧΠϒϖʔδͰ 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 );}
2. վળࢪࡦΩϟογϡͱ੩తԽಈతॲཧ͕ඞཁͳ͍ϖʔδϓϥάΠϯαʔόͷػೳͰΩϟογϡ͢Δ͔੩తԽ͠Α͏ɻWordPress Λ੩తϑΝΠϧͰϗεςΟϯά͢ΔαʔϏε Shifterhttps://www.getshifter.io/
2. վળࢪࡦPWA / Service WorkerPWA (Progressive Web Apps) ͷࠜװΛࢧ͑Δٕज़Ͱ͋Δ Service Worker ʹΑΔΩϟογϡίϯτϩʔϧͰɺମײతͳ͞Λ͔ͳΓ্Ͱ͖ΔɻΩϟογϡϒϥβʹอଘ͞ΕΔͨΊɺαʔόΩϟογϡΑΓϢʔβʹ͍ۙɻWordPress ͰϓϥάΠϯΛར༻͢Δ͜ͱͰ͔ͳΓ͓खܰʹಋೖͰ͖Δɻ
ը૾ܗࣜ ֦ுࢠ ֓ཁJPEGδΣΠϖοΫ.jpg / .jpeg ࣸਅάϥσʔγϣϯͳͲɺ৭มԽ͕ଟ͍ը૾ʹద͍ͯ͠ΔɻͬͱΘΕ͍ͯΔը૾ܗࣜɻඇՄٯѹॖɻGIFδϑ/Ϊϑ.gif৭มԽ͕গͳ͍ը૾ʹద͍ͯ͠Δɻ256৭·ͰɻಁաɺΞχϝʔγϣϯΛαϙʔτɻՄٯѹॖ (ඇՄٯѹॖͰ͖Δ͕΄ͱΜͲΘΕͳ͍)PNGϐϯά.pngओʹ8Ϗοτɺ24Ϗοτ͕͋Δɻ8Ϗοτ GIF ͱಉ༷256৭·Ͱɻ৭มԽ͕গͳ͍ը૾ʹద͍ͯ͠ΔɻࣸਅάϥσʔγϣϯͩͱϑΝΠϧαΠζ͕େ͖͘ͳΔɻಁաΛαϙʔτɻՄٯѹॖɻWebPΣοϐʔ.webp Google ʹΑΔ࠷৽ͷը૾ܗࣜɻJPEG PNG ͳͲΑΓϑΝΠϧαΠζΛখ͘͞Ͱ͖ΔՄೳੑ͕ߴ͍ɻՄٯѹॖɺඇՄٯѹॖɺಁաɺΞχϝʔγϣϯΛαϙʔτ͍ͯ͠ΔɻSVGΤεϰΟʔδʔ.svg֦ॖมܗͯ͠ྼԽ͠ͳ͍ɻϏοτϚοϓը૾ϒϥβ͕ೝࣝͰ͖ΔςΩετΛؚΉ͜ͱ͕Ͱ͖Δɻ৭มԽ͕গͳ͍ը૾Ͱ͋Ε SVG ͷ΄͏͕ϑΝΠϧαΠζ͕খ͍͞Մೳੑ͕ߴ͍ɻΞχϝʔγϣϯΛαϙʔτɻ2. վળࢪࡦ࠷దͳը૾ܗࣜͷબ ϥελʔܗࣜ (ϏοτϚοϓը૾)ϕΫλʔܗࣜ
2. վળࢪࡦWebPݱ࣌ͷ WordPress ίΞαϙʔτ͍ͯ͠ͳ͍ͨΊɺϓϥάΠϯͳͲΛಋೖ͢Δඞཁ͕͋Δɻ·ͨɺWebP Ͱॻ͖ग़͠Ͱ͖Δը૾ฤूιϑτ΄ͱΜͲͳ͍ͨΊɺͪ͜ΒϓϥάΠϯ͋Δ͍ม͢Δඞཁ͕͋Δɻ
2. վળࢪࡦSVGࠓճ৭มԽͷগͳ͍ը૾ɺ͔ͭAdobe ΠϥετϨʔλʔͷϕΫλʔσʔλ͕͍ͬͯͨͨΊɺ΄ͱΜͲͷΞΠΩϟονը૾ͷܗࣜʹ SVG Λબɻ
ΠϥετϨʔλʔͷ߹ɺʮผ໊อଘʯͰͳ͘ʮεΫϦʔϯ༻ʹॻ͖ग़͠ʯɻXDɺSketchɺFigma ͳͲͦͷ··Ͱେৎ (ͱ͍͏ΑΓ΄ͱΜͲઃఆͰ͖ͳ͍) ɻ্هͰ͋Ε SVG ͷ࠷దԽΛߦΘͳͯ͘ϑΝΠϧαΠζेখ͘͞ͳΔɻ2. վળࢪࡦSVG ͷॻ͖ग़͠
2. վળࢪࡦSVG ͷ࠷దԽSVGOhttps://github.com/svg/svgo• SVGOMG: Σϒ GUI https://jakearchibald.github.io/svgomg/• ImageOptim: Mac ΞϓϦ https://imageoptim.com/mac• Imagemin: ϓϩάϥϜɺλεΫϥϯφʔͳͲͰར༻Ͱ͖Δ https://github.com/imagemin/imagemin
2. վળࢪࡦWordPress Ͱ SVG Λ͏ηΩϡϦςΟͷ؍ͰɺσϑΥϧτঢ়ଶͰ WordPress ͷ SVG ΞοϓϩʔυͰ͖ͳ͍ɻSVG ͷΞοϓϩʔυΛڐՄ͢Δ͚ͩͳΒɺͦ͜·Ͱ͘ͳ͍ίʔυΛ functions.php ͳͲʹه͢Ε͍͍͕ɺϝσΟΞϥΠϒϥϦͳͲͰϓϨϏϡʔ͞ΕΔΑ͏ʹ͢ΔʹগʑෳࡶͳͷͰɺϓϥάΠϯΛར༻͢ΔͱΑ͍Ͱ͠ΐ͏ɻ
2. վળࢪࡦSVG Supporthttps://wordpress.org/plugins/svg-support/SVG ϑΝΠϧʹ ͷՃ͕ඞཁʹͳͬͨɻ
2. վળࢪࡦSafe SVGhttps://wordpress.org/plugins/safe-svg/
2. վળࢪࡦSVG Λར༻͢Δࡍͷҙog:image SVG Λαϙʔτ͍ͯ͠ͳ͍ͨΊɺOGP ը૾ͱͯ͠ΞΠΩϟονը૾ͳͲʹઃఆͨ͠ SVG ͕ࣗಈతʹΘΕΔ߹ɺผ్खಈͰ JPEG PNG ͳͲΛࢦఆ͢Δඞཁ͕͋Δɻ
2. վળࢪࡦΦϑεΫϦʔϯը૾ͷԆಡΈࠐΈimg ʹ decoding="async" ଐੑΛ͚ͭΔ͜ͱͰɺଞͷίϯςϯπͷද͕ࣔΕͳ͍Α͏ɺϒϥβ͕ը૾Λඇಉظతʹσίʔυ͢Δɻ೦ͳ͕Β Lighthouse ʹը૾ͷԆಡΈࠐΈͱͯ͠ධՁ͞Εͳ͍ɻ
2. վળࢪࡦamp-imgը૾ͷԆಡΈࠐΈͷϥΠϒϥϦͨ͘͞Μ͋Δ͕ɺ͔ͤͬ͘ͳͷͰ AMP ͷը૾දࣔํ๏ (amp-img) Λར༻ͯ͠ΈΑ͏ɻAMP ʹ͍ͭͯৄ͘͠খ҆ಸ͞ΜͷηογϣϯͰɻ࣮ AMP ରԠ͠ͳͯ͘ɺAMP JS ϥΠϒϥϦΛಡΈࠐΉ͜ͱͰɺAMP ͷߴԽػೳΛར༻Ͱ͖Δɻ
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 ଐੑʹ͍ͭͯޙड़ɻsrc=""width="350"height="183"layout="responsive">img ͷΘΓʹ amp-img Λ༻ɻϨεϙϯγϒʹରԠ͢ΔͨΊ layout ଐੑʹ responsive Λࢦఆɻ2. վળࢪࡦWordPress Ͱ amp-img Λར༻͢Δྫ
௨ৗɺscript ͷϑΣονͱ࣮ߦϨϯμϦϯάΛ͛Δɻ(ಉظ)async ͔ defer ଐੑΛ͚ͭΔ͜ͱͰɺϨϯμϦϯάΛ͛Δ͜ͱͳ͘ɺฒߦͯ͠ script ͷϑΣονΛߦ͏͜ͱ͕Ͱ͖Δɻ(ඇಉظ)async ͱ defer ʹɺύϑΥʔϚϯεࠩ͋·Γͳ͍ɻ࣮ߦͷॱ൪͕هड़ॱͰͳ͍Մೳੑ͕͋Δ async ΑΓɺdefer ͷ΄͏͕ແɻ2. վળࢪࡦϨϯμϦϯάΛ͛ΔϦιʔεͷআ֎<br/><script async><br/><script defer><br/>HTML ύʔε script ϑΣον script ࣮ߦ<br/>
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 Λ͚ͭΔ
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 ͷϦϯΫআɻ2. վળࢪࡦGoogle Fonts ඇಉظతʹಡΈࠐΉ
2. վળࢪࡦResource Hintspreload ϦιʔεΛͰ͖Δ͚ͩૣ͘ϑΣον͢ΔΑ͏ϒϥβʹ௨͢Δɻ Ϣʔεέʔε: ࣄલʹ URL ͕Θ͔͍ͬͯͯɺ͔ͭॏཁͳϦιʔεͷ߹ʹ͏ͱΑ͍ɻΣϒϑΥϯτͳͲɻpreconnect ଞΦϦδϯͷଓΛͰ͖Δ͚ͩૣ͘։࢝͢ΔΑ͏ϒϥβʹ௨͢ΔɻϢʔεέʔε: Ͳ͔͜Βऔಘ͢Δ͔Θ͔͍ͬͯΔ͕ԿΛϑΣον͢Δ͔͕Θ͔Βͳ͍߹ɻCDNɺSNS ͳͲɻdns-prefetch preconnect ͷαϒηοτͷΑ͏ͳͷɻଓߦΘͣɺDNS ͷ໊લղܾͷΈߦ͏ͨΊɺpreconnect ʹൺΔͱϩʔίετɻ·ͨɺpreconnect ΑΓαϙʔτ͍ͯ͠Δϒϥβ͕ଟ͍ɻprefetchࠓޙͷφϏήʔγϣϯϢʔβʔૢ࡞ͰඞཁʹͳΔͱ༧͞ΕΔϦιʔεΛࣄલʹϑΣον͠ɺΩϟογϡʹอଘ͢ΔΑ͏ϒϥβʹ௨͢Δɻ༏ઌ͍ɻϢʔεέʔε: ϖʔδ۠Γίϯςϯπͷ࣍ϖʔδͷϦιʔεɺݕࡧ݁Ռ1ҐͷϖʔδͷϦιʔεͳͲɻprerender prefetch ͱࣅ͍ͯΔ͕ɺͪ͜ΒϖʔδશମΛόοΫάϥϯυͰϨϯμϦϯά͢ΔɻϋΠίετɻ1ϖʔδͷΈࢦఆͰ͖ΔɻϢʔεέʔε: ϩάΠϯϖʔδʹ͓͚ΔϩάΠϯޙͷભҠઌϖʔδͳͲɻ
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 ΛՃ͢Δྫ
3. ·ͱΊCONCLUSION
3. ·ͱΊڀۃͷύϑΥʔϚϯεh1 ͱ meta description ͷΈΛهड़ͨ͠ϖʔδ
ੜ·ΕͨͯͷΣϒαΠτ100Ͱ͢ɻίϯςϯπ͕૿͑ΔͷʹͭΕɺϦιʔε͕ංେԽ͠ແବ͕ੜ͡Δɻ·ΔͰΤϯτϩϐʔ૿େͷ๏ଇͷΑ͏ʹɻͪͳΈʹΤϯτϩϐʔΛݮগͤ͞ΒΕΔͷਓؒ׆ಈͷΈΒ͍͠ɻ͔͠෦తʹɻΛ͘͢Δͷ͘͢ΔͷɺզʑਓؒͰ͋ΔɻύϑΥʔϚϯεΛอͭʹɺ࠷ॳͷઃܭ͔Βʑͷӡ༻·Ͱɺಓʹߦ͏ඞཁ͕͋Δɻ3. ·ͱΊΤϯτϩϐʔ૿େͷ๏ଇ
3. ·ͱΊΣϒαΠτͱΣϒύϑΥʔϚϯεվળύϑΥʔϚϯεվળʹ͍ͭͯɺࠓճͨ·ͨ·͏·͍͕ͬͨ͘ɺͯ͢ͷέʔεʹ͓͍ͯύϑΥʔϚϯεվળͰ͖ΔͱݶΒͳ͍ɻΣϒαΠτͱΣϒύϑΥʔϚϯεվળͷؔੑɺंͷۭؾ߅ΛݮΒ͢͜ͱʹࣅ͍ͯΔɻڀۃʹۭؾ߅ΛݮΒ͔ͨͬͨ͠Β݁ہ F1 Ϛγϯʹͳͬͯ͠·͏ɻंͱಉ͡Α͏ʹɺΣϒαΠτʹ͞·͟·ͳత͕͋ΔɻใΛ৴͢ΔͨΊ͚ͩͷ߹͋Εɺੈք؍ΛັͤΔͨΊͷ߹͋Δɻ؍ޫόε͕ F1 Ϛγϯͱಉ͡͞ͰΔͷෆՄೳͰ͋Δɻ
KITERETZ inc.JOIN OUR TEAMגࣜձࣾΩςϨπͰɺ৽ਓσβΠφʔΛืूதʂhttps://kiteretz.com/careers/
ixkaito
minorun365
hanaseleb
shunsukeono_am
you
iamshunta
route06
takesection
coconala_engineer
pkshadeck
akkie76
knsg16
tanoku
chrislema
lara
csswizardry
sonatard
chriscoyier
michaelherold
jakevdp
schacon
sugarenia
ddemaree
deanohume