【Cocoon】WordPressをGoogle Speed Insightsで80点まで改善!

目次

6/28追記

追加改善を継続していたところ、原因を突き止めることが出来ました。追加設定も発生しますので、本記事ののちにご覧いただけることをおすすめします。

 

とにかく遅い・・・

いくらGoogle Adsenseを使っているからといって、Google Speed Insightsのスコアが20〜30というのはなかなかどうして良くないなと思っていました。

 

いまのうちにしっかり改善をしておこうと思い、設定を見直すことにしました。

 

利用環境

私の利用環境は、以下の通りです。

  • さくらインターネット:スタンダードプラン
  • WordPress 5系
  • PHP7.4系
  • CDN(CloudFlare設定中)

CDN(CloudFlare設定)

さくらインターネットとCDN(CloudFlare)を組み合わせる際、注意事項がありますのでこちらもブログにしてあります。同じ環境の方はご覧ください。

 

利用中プラグイン

  • Akismet Anti-Spam
  • Classic Editor
  • Contact Form 7
  • EWWW Image Optimizer
  • Google XML Sitemaps
  • Image Watermark
  • List category posts
  • SAKURA RS WP SSL
  • WP Fastest Cache
  • WP Multibyte Patch
  • WP-Optimize – Clean, Compress, Cache(データベース最適化時のみ有効化)

 

利用テーマ

Cocoonはわいひらさんが制作、無料で公開しているCocoonを使っています。

 

ここまで記載した環境で全体的に見直し、試行錯誤しました。すると、あれ?もしかしてこの設定が影響しているのか?という点があったため、組み合わせでベストスコアになったものを組み合わせて以下の対策を実施しました。

 

対策項目

  1. Imagick設定
  2. 子テーマスキン適用
  3. 利用していないJavaScript読み込み停止
  4. 高速化設定見直し

 

1. Imagick設定

この設定は、さくらインターネット・スタンダードプランをご利用の方にのみ影響します。ImageMagickとは、画像を操作したり表示したりするためのソフトウェアスイートです。PHPで動作しているWordpressでは有効化した方が高速化が見込まれます。

 

ですが、さくらインターネットスタンダードプランではデフォルトでOFFになっているため、ImageMagickをモジュールで読み込む設定により有効化する必要があります。

 

手順

1-1. さくらインターネットのコントロールパネルにログインし、スクリプト設定 ->php.ini設定を開きます。

 

1-2. 以下を入力して、保存します。

extension=imagick.so

 



2. 子テーマスキン適用

子テーマをインストールしていますが、スキンはなしを選んでいました。

もしかすると、スキンがない状態だと最適化されていないのでは?と思い、この設定を念の為しておきました。

 

手順

2-1.  Cocoon設定 -> スキンを開きます。

 

2-2. 「Child]スキンテンプレート   [作者: わいひら]」を選択し、保存します。

 

3. 利用していないJavaScript読み込み停止

特に、プラグイン等を多くインストールしていると、使用していないページでもJavaScriptを読み込んでいる可能性があります。以下の方の情報を元に設定しました。

 

 

手順

3-1. 外観 -> テーマエディターを開きます。

 

3-2. function.phpを編集し、以下のコードを追加します。

function dc_css_js_dsp() {
  $wp_styles = wp_styles();
  $wp_scripts = wp_scripts();
  $handlename = '<dl><dt>List styles</dt><dd><ul>';
  foreach( $wp_styles->queue as $handle ) :
    $handlename .= '<li>' . $handle .'</li>';
  endforeach;
  $handlename .= '</ul></dd>';
  $handlename .= '<dt>List scripts</dt><dd><ul>';
  foreach( $wp_scripts->queue as $handle ) :
    $handlename .= '<li>' . $handle .'</li>';
  endforeach;
  $handlename .= '</ul></dd></dl>';
  return $handlename;
}
add_shortcode( 'dc_dsp', 'dc_css_js_dsp');

 

3-3. 投稿 / 固定ページを作成し、段落として以下を入力した後、プレビューを押下します。

[dc_dsp]

 

3-4. 表示された項目の中から不要と思われる項目を抽出します。

 

私の場合、contact-form-7やそれに利用されるgoogle-recaptchaはお問い合わせページ(ID43)でのみ必要です。また、すべての投稿・固定ページでブロックエディタは使用していません。

 

3-5. 従って、以下のようなコードを作成し、function.phpに追記しました。

function dc_dq_style_script() {
    wp_dequeue_style( 'wp-block-library' );
 if( ! is_page(43)){
    wp_dequeue_style( 'contact-form-7' );
    wp_dequeue_script( 'contact-form-7' );
    wp_dequeue_script( 'google-recaptcha' );
 }
}
add_action( 'wp_enqueue_scripts', 'dc_dq_style_script' );

 

3-6. 3-3. で作成したページを再表示し、対象の項目が表示されなくなったら成功です。

 

3-7. プラグイン「EWWW Image Optimizer」利用しており、以下の設定が有効化となっている場合には、ここまでの方法でfunction.phpに記載しても消えません。以下項目のチェックを外すことで「eio-lazy-load」は読み込まれなくなります。

 

Cocoon側で既にLazy Loadが有効化されていますので、「EWWW Image Optimizer」で重複して有効化する必要はないと思います。

 

4. 高速化設定見直し

私の環境では、Cocoonの高速化設定でCSSを縮小化するにチェックを入れてしまうと、レイアウトが崩れたり、ヘッダーロゴが表示されなくなったりするので、以下のように設定しました。

 

Cocoon

Cocoon設定高速化を開き、以下の設定に変更します。

 

ブラウザキャッシュの有効化

HTMLを縮小化する

CSSを縮小化する

JavaScriptを縮小化する

 

Lazy Load設定

Lazy Loadを有効にする

Googleフォントの非同期読み込みを有効にする

アイコンフォントの非同期読み込みを有効にする

事前読み込み:デフォルト

 

WP Fastest Cache

キャッシュ:

先読み:

ログインユーザー: ログインユーザーに対してキャッシュを表示しない

モバイル:

新規投稿:

Update Post:

HTML の圧縮:

CSS の圧縮:

Minify Css Plus:

CSS の結合:

Minify Js:

JS の結合: (header)

JS の結合プラス: (footer)

Gzip 圧縮:

ブラウザキャッシュ:

Disable Emojis:

 

設定変更完了・結果は?

ここまでの設定を終え、Google Speed Insightsを再度実行しました。

 

モバイル

なんと、Google Adsenseを有効化していても80点!!

 

PC

PCはもっと高速化!!なんと88点!!!!

 

わいひらさんが作成したWordpressテーマ、Cocoonの素晴らしさをようやく発揮することができました。Cocoonは無料なのにここまで出来るなんて!有料テーマの購入も検討しましたが、購入する必要はないと思います!

 

さいごに

ここ最近ブログのレスポンスが悪く、PVも落ちていました。さくらインターネットのスタンダードプランは遅いなぁとか思っていたりしましたが、十分にブログとして機能する環境にすることができました。

 

WordPress + Cocoonを使っていて、最適化・高速化をご検討の方々の参考になれば幸いです。

 

追記

追加改善を継続していたところ、原因を突き止めることが出来ました。追加設定も発生しますので、本記事ののちにご覧いただけることをおすすめします。

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次