Cocoonのスキンでブログ表示速度の変化は?早いスキンと遅いスキン!

Cocoon

Cocoonは速度も速く使いやすいテーマです。デザインもスキン機能を使えば簡単にイメチェンすることができます。スキンによっては背景画像まで設定されますが、画像を使えば読み込み速度の低下が気になります。

と言う事で今回はCocoonのスキン機能を使うとブログの表示速度がどのように変化するのかを調べて見ました。

なお各スキンの測定結果スコアだけを一覧でご覧になりたい方は目次より最後のまとめをご覧ください。

測定条件

測定条件は以下のとおりです。ほぼ初期状態の素のエックスサーバー&WordPress&Cocoonです。

  • レンタルサーバ:エックスサーバーのX10プラン
    • WordPressインストール
    • SSL設定:独自SSL設定あり
    • それ以外は全て初期設定
  • ブログ:WordPress
    • 全て初期設定
  • テーマ:Cocoon
  • 測定ページ:テスト用記事
    • 文字数:約4,000文字
    • 画像数:8ファイル(合計1.3MB)

スキン未使用時

まずは比較の前提となるスキン未使用時のスコアを確認しておきます。

記事本文のイメージ

投稿文のイメージはこんな感じです。とてもシンプルです。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

PageSpeed Insightsスコア

モバイル版で96点です。初期状態はシンプルなので高速です。画像数が多くても96点も出るんですね。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

続いてパソコン版のスコアです。98点とこちらもかなりの高得点です。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

こちらのモバイル96点、パソコン98点が基準となります。100点満点である必要もないのでスキン適用&プラグイン未使用の状態で90点を超えていれば合格点です。

Like Simplicity使用時

記事本文のイメージ

こちらのスキンも見た目はシンプルです。シンプルだとイメージ的に表示速度も速そうでスコアを期待してしまいますね。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

PageSpeed Insightsスコア

モバイルのスコアは94点と90点越えで合格です。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

パソコンのスコアは97点と余裕の合格点です。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

COLORS(レッド)使用時

続いてCOLORSの(レッド)を適用させて測定をしていきます。COLORSシリーズはレッド以外にもブルー、イエロー、グリーン、ピンク、ブラック6種類があります。スコアは恐らくどれも同じになると思うのでとりあえずレッドで測定をしていきます。

記事本文のイメージ

スキン適用時のイメージはこんな感じです。選択したカラーで統一されています。すっきりしたイメージですね。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

PageSpeed Insightsスコア

スコアはモバイルで93点と合格点ですね。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

パソコン版のスコアは98点とかなりの高得点です。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

モダンブラック使用時

続いてモダンブラックのスキンを適用してスコアを測ります。

記事本文のイメージ

スキン適用イメージはこんな感じです。モダンかつシンプルなスキンですね。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

PageSpeed Insightsスコア

表示速度をPageSpeed Insightsで測定していきます。まずはモバイルからですが、95点とかなり高得点です。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

続いてパソコンのスコアですが97点とこちらも高得点でした。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

Fuwari -海老茶(えびちゃ)-使用時

続いてFuwariシリーズのスキンを適用してスコアを測定していきます。Fuwariシリーズには今回テストした海老茶(えびちゃ)以外にも海松茶(みるちゃ)、御召茶(おめしちゃ)、褐色(かちいろ)があり、合計4種類のラインナップが揃っています。

記事本文のイメージ

スキンの名前どおりふわりとした可愛らしい女性向けのスキンですね。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

PageSpeed Insightsスコア

PageSpeed Insightsスコアを測定してみました。モバイルも94点と十分なスコアです。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

パソコン版でも97点と高得点です。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

旅カメラ使用時

続いて「旅カメラ」スキンを適用してスコアを測定していきます。旅行ネタなどを扱うブログをターゲットにしたスキンです。

記事本文のイメージ

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

PageSpeed Insightsスコア

モバイルのスコアは95点と問題ない点数です。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

つづいてパソコン版のスコアを測定しましたが、99点と文句なしのハイスコアでした。なんとスキン無しよりも高得点が出てしまいました。どれも1回しか測定していないのでタイミングの問題かもしれません。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

いつもの深海使用時

続いては「いつもの深海」スキンを適用して速度を計測していきます。この「いつもの」シリーズはほかにもコーヒー、ローズと合計3種類のスキンが用意されています。

記事本文のイメージ

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

PageSpeed Insightsスコア

スコアはモバイル版で91点と合格点です。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

パソコンでも97点と非常に高速なスコアを記録しています。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

おでかけピンク使用時

続いて「おでかけピンク」スキンを適用して計測していきます。この「おでかけ」シリーズも他にブルーとレモンがあり、合計3種類用意されています。

記事本文のイメージ

下記はスキン適用時のイメージです。可愛らしい女性向けのスキンですね。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

PageSpeed Insightsスコア

スコアはモバイル版で89点と90点を割ってしまいました。タイミングの問題かもしれませんが、次第点といったところですね。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

パソコン版のスコアは97点と高得点です。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

m-tomato使用時

続いてm-tomatoスキンを適用してスコアを計測していきます。今までのスキンと違い背景画像がセットになっているのでサイトデザインがガラッと変わります。

記事本文のイメージ

スキン適用時のイメージはこんな感じです。トマトの赤が映えますね。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

PageSpeed Insightsスコア

背景画像を使用したスキンのスコアが気になるところですが、モバイル版でも93点と高得点です。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

パソコンでも95点と立派な点数です。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

ドット・ワインレッド使用時

次は「ドット・ワインレッド」スキンを適用してスコアを測定していきます。ドットシリーズはほかにもドット・レイニーブルーも用意されています。

記事本文のイメージ

こちらのスキンの特徴は背景がかわいいドット柄なところですね。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

PageSpeed Insightsスコア

スコアを測定していきます。モバイル版も91点と合格点です。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

パソコンでのスコアは96点とハイスコアです。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

ミックスグリーン使用時

続いて「ミックスグリーン」スキンを適用します。「ミックス」シリーズは他にもブルーとレッドの合計3種類が用意されています。

記事本文のイメージ

スキンのイメージはシンプルです。所々ラインにスキンのカラーがアクセントになっています。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

PageSpeed Insightsスコア

スコアはモバイルで94点と合格です。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

パソコンも97点と高得点です。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

サムライブルー(無印)使用時

次はサムライブルー(無印)です。シンプルでカッコよかったので現在はこのスキンを適用しています。

Cocoonのスキン機能は気軽にイメチェンできるのが良いですね。

記事本文のイメージ

スキン適用時のイメージはこんな感じです。濃い青を基調としていますがアクセントもあり、かっこいいと思っています。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

PageSpeed Insightsスコア

スキン適用時のスコアはモバイルで95点と高得点です。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

パソコン版はなんと99点と超高得点です。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

おしゃれなスキンでスコアも良かった点が当ブログでも採用している理由です。

サムライブルー(勝色)使用時

もうひとつサムライブルーシリーズのスキンがあります。勝色パターンで背景が若干変わっているのが無印との違いです。

記事本文のイメージ

イメージはこなんな感じです。より青が強くなったイメージです。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

PageSpeed Insightsスコア

スコアはモバイルで93点とこちらも高得点です。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

パソコン版も95点と高い点数を記録しています。表示速度的には何の問題もありません。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

ほんわかライトニング使用時

次はまた違うジャンルのスキンです。ほんわかライトニングスキンでの測定です。

記事本文のイメージ

スキン適用時のイメージはこんな感じです。背景に絵本のようなかわいい柄がセットされます。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

PageSpeed Insightsスコア

背景画像を使用していますがスコアはモバイルでも94点と合格点ですね。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

パソコン版では97点と高得点を記録しています。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

Hygiene使用時

続いて「Hygiene」スキンのスコア測定です。ちなみに「Hygiene」とは健康とか衛生と言った意味があるようです。

記事本文のイメージ

スキン適用時のイメージはこんな感じです。ピンクを使った可愛らしいイメージです。サンプルで張り付けた猫ちゃん写真とも相性がいいですね。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

PageSpeed Insightsスコア

スコアの測定ですがモバイルで93点と十分なスコアです。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

続いてパソコン版のスコアですが92点と合格点です。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

Metal Styles使用時

最後に「Metal Styles」スキンでのスコア測定です。

記事本文のイメージ

スキン適用時のイメージはこんな感じです。特徴はシンプルな1カラム型のスキンです。サイドバーなどが無く、非常にシンプルになります。文字を読ませたいブログに適しているかと思います。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

PageSpeed Insightsスコア

スコアですがモバイル版ではまさかの39点です。ランクも遅いに分類されてしまいます。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

パソコン版でも77点と良くないです。スコア分類は「平均」ですが他のスキンが軒並み90点を超えている事情を考慮するとやはり物足りないです。

Cocoonのスキンでブログ表示速度の変化は?早いスキン!遅いスキン!

スキン別スコアまとめ

スコアをまとめると以下の通りになります。どれを選んでも総じて優秀なスキンと言えます。ただひとつ「Metal Styles」を除いて…。ここは改善をお願いしたいところです。

スキンモバイルスコアパソコンスコア
スキン無し9698
Like Simplicity9497
COLORS(レッド)9398
モダンブラック9597
Fuwari -海老茶(えびちゃ)-9497
旅カメラ9599
いつもの深海9197
おでかけピンク8997
m-tomato9395
ドット・ワインレッド9196
ミックスグリーン9497
サムライブルー(無印)9599
サムライブルー(勝色)9395
ほんわかライトニング9497
Hygiene9392
Metal Styles3977

コメント