塚原 藍子塚原 藍子

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

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

 

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

ブログの表示速度は

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

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

 

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

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

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

経験があります。

 

それから

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

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

解説していきますね。

 

ちなみに導入した後、

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

パソコン速度：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の高速化が完了した後は記事作成をしよう

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

 

ブログの高速化に時間を

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

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

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

 

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

方法を実施した方は、

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

【最新】ブログ・記事のSEO攻略！ロングテール戦略のSEO対策も解説！
【最新】ブログ・記事のSEO攻略！ロングテール戦略のSEO対策も解説！
塚原 藍子 ブログを始めたばかりで全然アクセスが来ない…どうやってアクセスを稼げばいいんだろう…？ SEOってのが大切らしいけど、何をどうすればいいのか教えてほしいです。 このような悩みに答えます。   本記事・・・

 

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

コピーライティングのスキルに大切な事＆学習のコツを解説【初心者向け】
コピーライティングのスキルに大切な事＆学習のコツを解説【初心者向け】
このような悩みに答えます。   ライティングスキルとは、文章を書くスキルです。   ライティングスキルが身に付くと、それはあなたの武器になります。 あなたのライティングが相手の心を射抜き、相手を意のま・・・

 

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

ブログを収益化させるおすすめ知識6選！収益化の近道も解説！
ブログを収益化させるおすすめ知識6選！収益化の近道も解説！
このような悩みに答えます。   私自身、ブログを毎日更新をして340日ぐらいが経過しています。 毎日更新をし始めた当初は、記事の書き方なんて全然分からなかったし、 全然稼げなかったですが、少しずつブログの知識を・・・

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

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

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

 

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

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

是非お試しくださいね。