塚原 藍子塚原 藍子

賢威の表示速度を上げたいな。
キャッシュ系プラグインを使ったら表示が
崩れたからあまり使いたくないし…
あまりバグが起きない高速化のやり方を知りたいです。

このような悩みに答えます。

 

本記事の内容
  • 表示速度改善で時間を無駄にしない方法
  • 賢威の高速表示できる手順が分かる
  • 表示速度を改善した後に行う事が分かる

ブログの表示速度は

ある程度ブログを運営していると

気になってくる問題です。

 

私もキャッシュ系プラグインで

改善しても表示バグなどが発生し、

振り出しに戻ってしまった

経験があります。

 

それから

バグが起きない高速化の方法が

分かったので、この記事で

解説していきますね。

 

ちなみに導入した後、

ブログの表示速度の点数が以下のように変化しました。

パソコン速度:81⇒99

モバイル速度:31⇒53

モバイル版の糞低い点数から

及第点ぐらいまで回復しました。

 

私のテーマは賢威7なので、

同じ賢威を使っている方も

違うテーマを使っているからも

モバイルの表示速度が遅い場合

はお試しください。

 

ちなみにブログの表示速度は

こちらのサイトから確認できます。

 

もし、測定が赤文字だった場合は、この記事を読み進めてみてくださいね。

※この記事は4分で読み終わります。




WordPressの高速化手順!賢威7の表示速度を上げる方法!

ブログを表示速度を改善しようと

奮闘すると大量の時間を使って

しまいますよね。

 

その主な原因としては、

何が一番ベストなのか分からないところが多いです。

WordPressの高速化でキャッシュ系プラグインは要注意!

ググると大抵は

キャッシュ系プラグインを導入すれば解決できる!

 

みたいな事を書いている記事が

多いですが、導入した後に

表示が変になってしまったり、

解決方法が分からない状態になってしまうケースが多いと思います。

 

そういった時間を無くせるように

「これだけしておけばOK」

というブログの表示速度の

改善方法を解説していきます。

WordPressの高速化する手順

  • ①JavaScriptを非同期読み込みにする
  • ②jQueryをCDNのみで読み込む。
  • ③WordPressの既存のjQuery読み込みは除外
  • ④CSSを非同期にする
  • ⑤キャッシュを有効化
  • ⑥Autoptimizeをインストール
  • ⑦Async JavaScriptをインストール

①JavaScriptを非同期読み込みにする

javaScriptの非同期で読み込む設定を行います。

 

設定する画面に遷移方法はコチラ

管理画面の【外観】の中にある

テーマエディターを選択。

その後は、【テーマヘッダー】を選択。

表示されたコード内の<head>~</head>

に以下の変更を行います。

// 変更前
<script src=”ジャバスクリプト.js”></script>// 変更後
<script src=”ジャバスクリプト.js” async></script>

 

コード内のjavascriptの末尾に” async”を追加します。

②jQueryをCDNのみで読み込む。

CDNとは、

Contents Delivery Network(コンテンツデリバリネットワーク)のことです。

 

jQueryを使うならCDNのほうが早い場合が多いです。

下記の方法でコードをfunction.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’);

 

 

図の通りに入力をしてください。

③WordPressの既存のjQuery読み込みは除外

こちらもCDN関係のコードを入力します。

以下のコードをフッター内に記入しましょう。

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

 

 

 

 

図の通りにコードを入力してください。

④CSSを非同期にする

これは【loadCSS】というプラグイン

有志の方が制作されたワードプレスの

プラグインです。

filamentgroup/loadCSS

↑こちらからDLをしましょう。

解凍した後、

loadCSS-master⇒srcまでフォルダを開き

  • loadCSS.js
  • onloadCSS.js

この2つをブログのルートディレクトリに設置しましょう。

サーバーにデータを設置する方法

まずは、FFFTPを使って

サーバーにアクセスします。

 

サーバーにアクセスする方法が

分からない人は

「FFFTP あなたが使っているサーバー名 使い方」

でググってみてください。

ログインした後は、自分のドメインを選択。

続いて、public_htmlを選択。

↑でDLしたloadCSSの2つのjsデータを

ドロップ&ドロップでサーバー内に設置します。

CSS非同期の設定方法

以下のコードを設置してください

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

 

ここにコードを入力してください。

⑤キャッシュを有効化

続いて、キャッシュを有効化する為に

.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>

コードの入力関連は以上です!

⑥Autoptimizeをインストール

続いて、wordpressのプラグインの

Autoptimizeをインストールしてください。

 

設定内容は以下になります。

以上の設定にしておけばOK!

⑦Async JavaScriptをインストール

続いて、同じくwordpressのプラグイン

Async JavaScriptをインストールします。

 

【Settings】の設定内容はコチラです。

上記の画像の通りに設定した後

一番下までスクロールします。

図の様に設定出来た後、「Save Settings」を押して完了です。

wordpressの高速化が完了した後は記事作成をしよう

ブログのメインは記事作成です。

 

ブログの高速化に時間を

使っていてはもったいないです。

この記事で解説した方法で、

速度の改善に使う時間を短縮できます。

 

なので、この記事で解説した

方法を実施した方は、

次に記事を作り始めましょう!

 

ライティングスキルも磨いておきましょう。

 

記事を書く時の必要な5つの知識も知っておきましょう。

まとめ:wordpressの高速化設定はこれだけでOK

この記事では、賢威7に特化したwordpressの高速化方法を解説していきました。

ブログの表示速度に悩みの方は、是非この記事で解説した方法を試してみてください。

 

ブログの速度改善しようとすると、時間がどんどん無くなってしまいます。

なので、この記事の方法をして頂ければ、後は何もしなくてOK!

是非お試しくださいね。