Written by Manabu Bannai

プラグインなしでWordPressサイトを高速化する方法【JS・CSS・キャッシュ設定】

PROGRAMMING WordPress

WordPressサイトを高速化することで、ユーザビリティの向上だけではなく、SEO最適化にも繋がります。今回はWordPressサイト高速化施策を4つご紹介します。

プラグインでも同様のことができますが、プラグインはバグの元。ということでWordPressプラグインなしでサイトを高速化する方法のみをご紹介します。

JavaScriptを非同期読み込みして、サイト表示を高速化する方法

JavaScriptを非同期で読み込む方法です。asyncをつけるだけで簡単です。方法は下記のとおり。

// 変更前
<script src="myscript.js"></script>
// 変更後
<script src="myscript.js" async></script>

参考:How we make RWD sites load fast as heck | Filament Group, Inc., Boston, MA

jQueryをCDNのみで読み込む。WordPressの既存のjQuery読み込みは除外する

CDNとは「Contents Delivery Network(コンテンツデリバリネットワーク)」のことで、jQueryを使うならCDNのほうが早い場合が多いです。下記の方法で、jQuery読み込みを最適化しましょう。

まずは、function.phpに以下を記述します。

これでWordPress標準のjQueryが出力されなくなります。

<?php

//Making jQuery to load from Google Library
function replace_jquery() {
  if (!is_admin()) {
    // comment out the next two lines to load the local copy of jQuery
    wp_deregister_script('jquery');
  }
}
add_action('init', 'replace_jquery');

つぎに、Footer内でCDNを使い、jQueryの読み込みをします。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

参考:Load WordPress jQuery Script From CDN (Google Libraries) – Colorlib

CSSを非同期読み込みしてサイトを高速化する

loadCSSというプラグインを利用します。使い方は簡単。「え?プラグイン使ってるじゃん」と言われそうですが、タイトルにあるプラグインなしが意味することは、WordPressプラグインを使いません、という意味合いです。

まずはGithubからLoadCSSをダウンロードします。

» filamentgroup/loadCSS

つぎに実装です。下記の感じでどうぞ。

<script src="loadCSS.min.js"></script>
<script>
  // load a file
  loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
</script>

参考:Loading CSS Asynchronously | Dean Hume

キャッシュを有効化して、WordPressサイトを高速化する。

.htaccessの先頭に以下を追加します。

# キャッシュを有効にする
Header set Cache-Control "max-age=2628000, public"

# キャッシュ設定
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>

# ファイル圧縮設定
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
</IfModule>

以上となります!
これでサイトパフォーマンスが向上するはずです!

※P.S:無料メルマガで発信中:過去の僕は「ブログ発信で5億円」を稼ぎました。次は「30億円」を目指します。挑戦しつつ、裏側の思考を「メルマガ」から発信します。不満足なら1秒で解約できます。無料登録は「こちら」です。