現在デフォルトスキンとして「Season (Summer)」を適用中。

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

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

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

PageSpeed Insights

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

新しいPageSpeed Insightsの点数

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

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

スポンサーリンク

高速化の準備

まず、高速化設定前の準備として画像の圧縮プラグインを利用することをおすすめします。

無料で使えるおすすめの画像圧縮プラグインはEWWW Image Optimizerです。

EWWW Image Optimizer
Speed up your website and improve your visitors' experience by automatically compressing and resizing images and PDFs.

Imagifyは、無料登録をすることで利用できます。

Imagify – WebP & Image Compression and Optimization
Optimize images in one click: reduce image file sizes, convert WebP, keep your images beautiful… and boost your loading time and your SEO!

まずは、こういったプラグインで画像を圧縮しておく必要があります。

厳密に言うと、新仕様のPageSpeed Insights対策では、Lazy Loadを使用するので画像を圧縮していなくても、点数は上がります。ただ、画像サイズは少ないに越したことはないので圧縮しておいた方がユーザーの利便性は上がります。
テーマ自体には画像圧縮機能はありません。

Cocoonで出来る高速化設定

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

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

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

サイトの高速化設定方法

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

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

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

高速化設定のみのPageSpeed Insights

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

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

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

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

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

LiteSpeed Cache
All-in-one unbeatable acceleration & PageSpeed improvement: caching, image/CSS/JS optimization...

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

W3 Total Cache
検索エンジン最適化 (SEO) & キャッシュによるパフォーマンスの最適化 (WPO)。統合キャッシュ: CDN、圧縮、ページ、オブジェクト、フラグメント、データベースのサポート。
WP Fastest Cache
最もシンプルで速いWP キャッシュシステム

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

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

画像を更に最適化する方法(この設定は不要になりました)

v1.4.0以降でLazy Loadを有効にしている場合、この設定は不要になりました。設定している場合は、サイトアクセラレータを無効にしてください
パフォーマンスおよびスピード

JetpackのLazy Loadが有効になっていると、一部画像が表示されない等の不具合が出る可能性があります。CocoonのLazy Loadを有効化した場合は、JetpackのLazy Loadを無効にしてください

前述した画像圧縮プラグインを使用しても、まだPageSpeed Insightsで「画像を圧縮してください」と出る場合もあるかと思います。

この警告は、プラグインで画像を最高レベル(有料機能)で圧縮しても出ることがあるので「PageSpeed Insightsの要求厳しすぎ…」という感じなのですが…。

けれど、そういった場合は、Jetpackの「画像最適化」機能を利用することである程度解決できます。

Jetpack by WordPress.com
統計情報、関連投稿、検索エンジンの最適化、ソーシャル共有、保護、バックアップ、セキュリティ、その他の目的に最適なプラグイン。

Jetpackで画像の最適化を行うには、WordPressの管理画面から「Jetpack→設定」メニューを選択してください。

Jetpackの設定画面を開く

Jetpackの設定画面で「Writing」タブを選択してください。

Jetpackの設定画面のライティングタブを選択

あとは「Speed up your site(あなたのサイトの高速化)」項目にある「Serve images from our servers(私たちのサービスから画像を提供する)」を有効にしてください。

Speed up your site

こうすることで、Jetpack側で画像が最適化されCDN配信されるようになります。

計測結果

ここまで、高速化設定を行えば、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点のサイトより上位表示されると思います。

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

テーマ設定
スポンサーリンク
わいひら

無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。

わいひらをフォローする
わいひらをフォローする
おすすめレンタルサーバー

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
サービス運営期間:1年1ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2019/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:3年

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可
サービス運営期間:16年

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:10ヶ月

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)
サービス運営期間:3年

Cocoon

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

  1. あれはんどろ より:

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

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

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

    何か対策を取らねば!

  2. Thanks! より:

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

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

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

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

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

  3. とーや より:

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

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

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

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

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

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