Cocoonおすすめのサイト高速化設定

テーマ設定
この記事は約4分で読めます。

Cocoonは、出来る限りGoogleのPageSpeed Insightsに最適化した作りになっています。

PageSpeed Insights

Cocoonテーマのみ使用した場合なら、PageSpeed Insightsで「モバイル:99点」「パソコン:100点」前後は取れるようになっていると思います。

新しいPageSpeed Insightsの点数

アドセンス、Analytics、Facebook、Twitter等の外部が読み込まれている場合は、一気に点数がガタ落ちします。外部リソースに起因する点数ダウンは、テーマ側からはどうしようもありません。

以下では、Cocoonテーマでサイトの高速化設定をする方法を紹介します。

\エックスサーバー開発のWordPressテーマ/
エックスサーバー開発のWordPressテーマ

Cocoonで出来る高速化設定

テーマのみで行える高速化設定は、WordPress管理画面から「Cocoon設定→高速化」メニューを選択してください。

Cocoonの高速化メニューを選択

「サイト高速化」設定画面で、以下の項目にチェックを入れて設定を保存してください。

  1. ブラウザキャッシュの有効化(ブラウザにリソースを保存する)
  2. CSSを縮小化する(CSSのサイズを減らす)
  3. JavaScriptを縮小化する(JavaScriptのサイズを減らす)
  4. 変更を保存

バージョン1.4.0(2018/11/22)以前にブラウザキャッシュを有効化した場合は、一旦無効にしてから保存して、再度有効にして保存してください。
2018-11-21_20h26_11
ブラウザーキャッシュ設定が更新されます。

これだけで、PageSpeed Insightsでモバイル・パソコン双方90点前後は出るのではないかと思います。

高速化設定のみのPageSpeed Insights

外部リソースが多数あると、点数は下がります。
さらに点数を上げるには、ページキャッシュプラグインの使用は必須かと思います。

サーバー速度が遅い場合はページキャッシュプラグイン

ただ、遅いサーバーを使っているとページのPHP処理に時間がかかり、減点される可能性があります。

そういった場合は、ページキャッシュプラグインの利用をおすすめします。

Apache系のサーバーの場合は、以下のプラグインがお勧めです。

WP Fastest Cache
最もシンプルで速いWP キャッシュシステム

LiteSpeed系サーバーの場合は、LiteSpeed Cacheの利用をお勧めします。

LiteSpeed Cache
オールインワンの無敵の高速化 PageSpeed を改善:キャッシング、画像/ CSS / JS を最適化...

Cocoonテーマでは、パソコンとモバイルのソースコードが100%同じになるよう完全レスポンシブで作成されています。

ですので、ページキャッシュプラグインの「モバイル設定」は不要となります。

計測結果

ここまで、高速化設定を行えば、CocoonテーマのみでのPageSpeed Insights計測であれば90点後半はいけるのではないかと思います(※プラグインの影響がない場合)。

様々な、計測サイトの結果はこちら。

PageSpeed Insights

新しいPageSpeed Insightsの点数[5]

GTmetrix

GTmetrixのCocoon計測結果

WebPageTest

WebPageTestのCocoon計測結果

Pingdom Website Speed Test

Pingdom Website Speed TestのCocoon計測結果

テーマのみなら良い点数は出るが

これはあくまで、Cocoonテーマに、ページキャッシュプラグインを合わせたデモページでの計測結果です。

通常の運営サイトであれば、以下のような多くの外部リソースを使用します。

  • 多くのプラグインを使用
  • アドセンスを掲載
  • Analyticsでアクセス解析
  • FacebookやTwitterのスクリプト使用
  • アフィリエイトのバナー掲載
  • アフィリエイトのインプレッション画像読み込み

こういったことが積み重なると、普通にモバイルとかは50点以下とかになります。

外部リソースに起因する点数ダウンは、どうしようもない部分があります。

「現在使用しているサイトで高速化したけど点数悪いぞ」ということは十分ありえるのでご了承ください。

まとめ

というか、最後にこういうこと言うと身も蓋もないですが、PageSpeed Insightsで100点を取ろうが、大事なのはサイトの内容です。

たとえ、PageSpeed Insightsで50点のサイトだったとしても、内容が良ければ100点のサイトより上位表示されると思います。

なので、あまりページスピードにこだわるよりは、コンテンツに注力するのが、正しい時間の使い方だと思います。

コメント テーマの質問はフォーラムへ

  1. あれはんどろ より:

    PageSpeed Insightsの計測方法が変わったのか、https://wp-cocoon.comの評価が落ちてましたよ。私が確認した時はモバイルで「29」、パソコンで「82」でした。

    体感速度は早いと思うんですけど。

    ですので、この記事内に記載されている「Cocoonテーマ内の設定だけでも、PageSpeed Insightsで90点以上は取れるようになっている」という表記が一時的に間違いになってしまいました。

    何か対策を取らねば!

  2. Thanks! より:

    ---------------------
    あまりページスピードにこだわるよりは、コンテンツに注力するのが、正しい時間の使い方だと思います。
    ---------------------

    サイト運営、ブログ運営においてこの部分が一番大事ですよね。

    • わいひら わいひら より:

      そうなんですよね。
      僕も個人的には、ページ表示が超絶遅くない限りは、コンテンツの方がよっぽど大事だと思っています。

      ただ、PageSpeed Insightsの場合、分かりやすくスコアが表示されるためインパクトが強く「点数が悪いと順位を下げられる」と思っている人は多いようですね。

    • 野中光一 より:

      やはりそうですよね

  3. とーや より:

    コメント失礼いたします。質問でございます。

    >Apache系のサーバーの場合は、以下のプラグインがお勧めです。

    とありますが、この表現は初耳で、ひょっとしてnginx系サーバーの場合は「W3 total cache」の効果に変化があるのでしょうか?

    現在エックスサーバーですが、ご指南いただけますと幸いです。

    お忙しい中お手数おかけしますが、よろしくお願いいたします。

  4. wawewawuwa より:

    LiteSpeed Cacheをがっつり設定した場合、cocoonでできる高速化設定は
    不必要ですか?

    • わいひら わいひら より:

      LiteSpeed Cacheは、CSS・JSファイルや、HTMLを縮小化する機能は8確かなかったですよね?
      なければ、Cocoon高速化の縮小化機能は利用しても良いかもしれません。
      あと画像のLazy Load機能。

      Cocoonのブラウザキャッシュ機能は不要です。

      • わいひら わいひら より:

        今LiteSpeed Cacheオプションを見てみたら、「高度なオプション」部分にありますね。
        なのでとLiteSpeed Cacheで縮小化や画像の遅延読み込みも行っている場合は、設定不要です。

タイトルとURLをコピーしました