塚原 藍子賢威の表示速度を上げたいな。
キャッシュ系プラグインを使ったら表示が
崩れたからあまり使いたくないし…
あまりバグが起きない高速化のやり方を知りたいです。
このような悩みに答えます。
ブログの表示速度は
ある程度ブログを運営していると
気になってくる問題です。
私もキャッシュ系プラグインで
改善しても表示バグなどが発生し、
振り出しに戻ってしまった
経験があります。
それから
バグが起きない高速化の方法が
分かったので、この記事で
解説していきますね。
ちなみに導入した後、
ブログの表示速度の点数が以下のように変化しました。
モバイル版の糞低い点数から
及第点ぐらいまで回復しました。
私のテーマは賢威7なので、
同じ賢威を使っている方も
違うテーマを使っているからも
モバイルの表示速度が遅い場合
はお試しください。
ちなみにブログの表示速度は
こちらのサイトから確認できます。
もし、測定が赤文字だった場合は、この記事を読み進めてみてくださいね。
※この記事は4分で読み終わります。
WordPressの高速化手順!賢威7の表示速度を上げる方法!

ブログを表示速度を改善しようと
奮闘すると大量の時間を使って
しまいますよね。
その主な原因としては、
何が一番ベストなのか分からないところが多いです。
WordPressの高速化でキャッシュ系プラグインは要注意!
ググると大抵は
キャッシュ系プラグインを導入すれば解決できる!
みたいな事を書いている記事が
多いですが、導入した後に
表示が変になってしまったり、
解決方法が分からない状態になってしまうケースが多いと思います。
そういった時間を無くせるように
「これだけしておけばOK」
というブログの表示速度の
改善方法を解説していきます。
WordPressの高速化する手順
①JavaScriptを非同期読み込みにする
javaScriptの非同期で読み込む設定を行います。
設定する画面に遷移方法はコチラ

管理画面の【外観】の中にある
テーマエディターを選択。
その後は、【テーマヘッダー】を選択。
表示されたコード内の<head>~</head>
に以下の変更を行います。
コード内のjavascriptの末尾に” async”を追加します。
②jQueryをCDNのみで読み込む。
CDNとは、
Contents Delivery Network(コンテンツデリバリネットワーク)のことです。
jQueryを使うならCDNのほうが早い場合が多いです。
下記の方法でコードをfunction.phpに追記してください。

図の通りに入力をしてください。
③WordPressの既存のjQuery読み込みは除外
こちらもCDN関係のコードを入力します。
以下のコードをフッター内に記入しましょう。

図の通りにコードを入力してください。
④CSSを非同期にする
これは【loadCSS】というプラグイン
有志の方が制作されたワードプレスの
プラグインです。
filamentgroup/loadCSS
↑こちらからDLをしましょう。

解凍した後、
loadCSS-master⇒srcまでフォルダを開き
この2つをブログのルートディレクトリに設置しましょう。
サーバーにデータを設置する方法
まずは、FFFTPを使って
サーバーにアクセスします。
サーバーにアクセスする方法が
分からない人は
「FFFTP あなたが使っているサーバー名 使い方」
でググってみてください。

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

続いて、public_htmlを選択。

↑でDLしたloadCSSの2つのjsデータを
ドロップ&ドロップでサーバー内に設置します。
CSS非同期の設定方法
以下のコードを設置してください

ここにコードを入力してください。
⑤キャッシュを有効化
続いて、キャッシュを有効化する為に
.htaccessの先頭に以下を追記してください。
コードの入力関連は以上です!
⑥Autoptimizeをインストール
続いて、wordpressのプラグインの
Autoptimizeをインストールしてください。
設定内容は以下になります。




以上の設定にしておけばOK!
⑦Async JavaScriptをインストール
続いて、同じくwordpressのプラグイン
Async JavaScriptをインストールします。
【Settings】の設定内容はコチラです。

上記の画像の通りに設定した後
一番下までスクロールします。

図の様に設定出来た後、「Save Settings」を押して完了です。
wordpressの高速化が完了した後は記事作成をしよう
ブログのメインは記事作成です。
ブログの高速化に時間を
使っていてはもったいないです。
この記事で解説した方法で、
速度の改善に使う時間を短縮できます。
なので、この記事で解説した
方法を実施した方は、
次に記事を作り始めましょう!
ライティングスキルも磨いておきましょう。
記事を書く時の必要な5つの知識も知っておきましょう。
まとめ:wordpressの高速化設定はこれだけでOK
この記事では、賢威7に特化したwordpressの高速化方法を解説していきました。
ブログの表示速度に悩みの方は、是非この記事で解説した方法を試してみてください。
ブログの速度改善しようとすると、時間がどんどん無くなってしまいます。
なので、この記事の方法をして頂ければ、後は何もしなくてOK!
是非お試しくださいね。