無料テーマCocoonは遅い？高速化のためにできること7つ

この記事は 約6 分で読めます。

無料で使える超ハイクオリティーのワードプレスのテーマ、Cocoon。余分な要素を取り除き、高速表示を実現した同テーマですが、環境によっては遅くなることがあります。そこで表示速度を上げるために僕がやったことをまとめておきます。

１、サイト高速化のためのCocoonの基本設定
２、CocoonのFunction.phpにコードを追加する
３、できる限りプラグインをアンインストールする
４、不必要な広告やウィジェットをできるだけ減らす
５、不必要なCocoonのシェアボタン、フォローボタンを非表示にする
６、CocoonでAMP化する
７、サーバーを変える

１、サイト高速化のためのCocoonの基本設定

まずは公式ページに書かれた「Cocoonおすすめのサイト高速化設定」をやるのは必須です。

公式サイトに書かれてある基本的なことは以下の通り。

画像の圧縮プラグインEWWW Image Optimizer、またはImagifyをインストールする
Cocoon高速設定にチェックを入れる（ブラウザキャッシュの有効化、HTMLを縮小化する、cssを縮小化する、JavaScriptを縮小化する）
キャッシュプラグインをインストールする（ミックスホストならLiteSpeed Cache、それ以外はW3 Total Cache、WP Fastest Cache）
プラグインJetpackの「画像最適化」機能を利用する

とりあえずは以上の施策をしてみましょう。

場合によってはほとんど表示速度が変わらなかったり、遅くなることもあるでしょう。僕の環境だとJetpackは逆に遅くなったし、キャッシュプラグインを入れてもほとんど変わらなかったのでアンインストールしました。

２、CocoonのFunction.phpにコードを追加する

PageSpeed Insightsで自分のブログをチェックすると、どんなプラグインを使おうが「スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSS を除去してください」というメッセージが出て、評価を下げられてしまいました。

そこで以下のコードをCocoonのFunction.phpに追加したら、メッセージが出てこなくなり、スピードが大幅に改善。

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 );
}

（こちらの記事を参考にさせてもらいました）

同ブログの場合だと特にモバイル表示が70から80台後半から90台前半ぐらいまでに改善されています。ビフォア・アフターの証拠がこれ。