プラグインなしでWordPressサイトを高速化する方法【JS・CSS・キャッシュ設定】
WordPressサイトを高速化することで、ユーザビリティの向上だけではなく、SEO最適化にも繋がります。今回はWordPressサイト高速化施策を４つご紹介します。
プラグインでも同様のことができますが、プラグインはバグの元。ということで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をダウンロードします。
つぎに実装です。下記の感じでどうぞ。
<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：無料メルマガで発信中：過去の僕は「ブログ発信で５億円」を稼ぎました。次は「30億円」を目指します。挑戦しつつ、裏側の思考を「メルマガ」から発信します。不満足なら１秒で解約できます。無料登録は「こちら」です。