Cocoonを高速化!LOWをGOODに変えた5つの施策

Cocoonを高速化!LOWをGOODに変えた5つの施策 Cocoon

今回は有料級の無料テーマCocoonのカスタマイズ備忘録です。

GoogleのPageSpeed Insightsの評価を改善したので、そのために行った施策を紹介します。

 

改善前のキャプチャ画像は取り忘れましたが、改善前にモバイルでLowの評価(PCはMedium)だったのが、改善後はモバイル・PCともにGoodの評価になりました。

モバイルgood

パソコンgood

今回改善したサイトはモバイルでの順位がパソコンより低めだったので、これで上がってくれると良いなと期待してます。

 

それでは、今回行った施策を紹介したいと思います。

いってみましょう。

 

公式で推奨の高速化設定を実行する

まず、Cocoon公式サイトに書かれている高速化の設定はすべて試してみたので説明したいと思います。

状況次第ではこの設定だけで90点以上も可能なので、必ず確認しておきましょう。

 

1.「EWWW Image Optimizer」で画像の圧縮・最適化

まずは、プラグインを使って画像の最適化を行います。

今回は「EWWW Image Optimizer」を使いました。

 

画像一括最適化

「EWWW Image Optimizer」をインストールして有効化したら、「メディア」→「一括最適化」を選択。

 

最適化されていない画像をスキャン

「最適化されていない画像をスキャンする」をクリック。

 

最適化を開始

最適化が必要な画像がある場合は、上記のように表示されるので「最適化を開始」をクリックしてください。

 

最適化完了

しばらく待てば勝手に最適化されます。

これで最適化は完了です。

 

2.Cocoonの高速化設定

高速化

次にCocoonに標準装備されている高速化機能を設定します。

「Cocoon設定」→「高速化」をクリック。

 

ブラウザキャッシュ

縮小化

変更を保存

すべてにチェックを入れたら、「変更を保存」して完了です。

 

ここまでで、PageSpeed Insightsの評価が90点以上も可能みたいですが、私はLowのままだったので、さらに最適化を試みました。

もし90点以上出ているならここで完了でもいいと思います。

 

3.「WP Fastest Cache」でキャッシュを最適化

ページキャッシュプラグインは、サーバーがMixHostなら「LiteSpeed Cache」、それ以外は「W3 Total Cache」もしくは「WP Fastest Cache」を使います。

ただ、ページキャッシュプラグインは不具合が多いらしいので、もし使うにしても試すのは最後でいいです。

 

私は他の項目の改善だけではどうしても点数が上がらなかったので「WP Fastest Cache」を使いました。

日本語化

まずプラグインをインストールしたら、日本語化をしてください。

「言語」の横から日本語を選択して、「Submit」をクリックすれば言語が日本語に変わります。

 

キャッシュ設定

キャッシュ
Preload(数字は4のまま。Restart After minute以外にチェックを入れてOK)
ログインユーザー
新しい投稿(Clear All Cacheにチェックを入れてOK)
Update Post
Disable Emojis(ブログの絵文字を使わない場合チェックを入れる)

私がチェックを入れた箇所は上記のようになります。

不具合を起こしたくないので、最小限の設定です。

 

キャッシュの有効期限

次にキャッシュの有効期限を設定します。

キャッシュの有効期限のタブから「Add New Rule」をクリック。

 

キャッシュの有効期限の設定

上記のように設定して「Save」をクリックで完了です。
(時間はアクセスが少ない時間なら何時でも構いません)

 

ページキャッシュプラグインについては、もっと最適な設定もあると思います。

最適化するなら、各自で詳しく調べてみてください。

でも、アクセスが月5万くらいあるサイトじゃないと効果がないらしいので、それ以下の場合そもそも設定しなくてもいいかもしれません。

 

今回は下記のサイトを参考にしたので、詳しく知りたい方はそちらもご覧になってみてください。

コチラのサイトを参考にしました。
WP Fastest Cacheの”正しい”設定方法 | Pasolack – パソラック

 

「Jetpack by WordPress.com」 でさらに画像を最適化

jetpack設定

「Jetpack」→「設定」。

 

執筆タブ

執筆タブの・・・。

 

グローバルCDNから画像を提供

「グローバルCDNから画像を提供」をONに。

これで完了です。

※追記
Jetpackは使用しないほうが速度が早くなったので外しました。(1点だけですが…)

機能的にもそこまで必要だとは思わないので、入れなくてもいいと思います。

 

4.「レンダリングをブロックするJavascriptを除去する」を解決

コレは詳しい仕組みがよくわかっていませんが、とりあえずjQueryというやつが悪さをしているようです。

下記のコードを「functions.php」に追加して解決しました。

「functions.php」(テーマのための関数)は「外観」→「テーマの編集」から変更が可能です。
(Cocoonなら「//以下にSimplicity子テーマ用の関数を書く」の下にそのままコピペでOK)

 

if (!(is_admin() )) {
function add_async_to_enqueue_script( $url ) {
if ( FALSE === strpos( $url, ‘.js’ ) ) return $url; //.js以外は対象外
if ( strpos( $url, ‘jquery.min.js’ ) ) return $url; //’jquery.min.js’は、asyc対象外
return “$url’ async charset=’UTF-8”; // async属性を付与
}
add_filter( ‘clean_url’, ‘add_async_to_enqueue_script’, 11, 1 );
}

詳しくは、コチラのサイトを参照して下さい。
WordPressでレンダリングをブロックする~ | しもた帳

 

5.AMP化する

Cocoonは設定から簡単にAMP化が可能です。

アフィリエイトタグもそのままで大丈夫みたいなので、これを機にAMP化しました。(AMP化も不具合が起きる可能性があるので、不安な方はCocoonの公式ページなどで対策を確認しておいてください。)

 

cocoon設定

設定はすごく簡単です。

「Cocoon設定」から・・・。

 

AMPタブ

「AMP」タブを選んで・・・。

 

AMP機能を有効化

「AMP機能を有効化する」にチェックを入れて、「変更をまとめて保存する」をクリックすれば完了です。

 

まとめ

これで私の環境下では
モバイル95点
パソコン89点
まで点数が上がりました。

 

サイトの表示速度は検索順位に影響するので、速度が遅いという方は今回の記事を参考に対策してみてください。

 

今回は以上です。

 

コメント