Written by Manabu Bannai

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

PROGRAMMING WordPress

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

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

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

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読み込みは除外する

WordPressではプログラムの中にjQueryが組み込まれています。これを忘れていて、jQueryを二重で読み込んでいるサイトが多いです。動作面で問題が起きない場合が多いですが、サイトパフォーマンスには影響します。

下記の方法で、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>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.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>

具体的なコードを見たい方は、ディベロッパーツールなどでPhil Portalのソースコードの53行目当たりをご覧ください。

※参考
» 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>

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

ブロガー向け:シンプルで美しいWordPressテーマを販売しています

» ミニマリスト向けのWordPressテーマ『Minimal』を作りました

おすすめ: SEOで最も重要な『キーワード選定方法』をまとめました。

» SEOキーワード選定する方法。具体的に5つの手順で解説します。