【Cocoon】超カンタン!遅いサイトを高速化する方法

Cocoon 高速化 遅い

記事内に商品プロモーションを含む場合があります

キップム
キップム

PageSpeed Insightsでサイトスピードを測ったら こんな結果に……
特にモバイルがひどくて…どうしよう……

PageSpeed Insightsモバイルの結果
yoko
yoko

落ち込まなくても大丈夫!Cocoonなら高速化の項目にチェックを入れるだけで、簡単にサイトをスピードアップできるから。

キップム
キップム

え。そうなの!?

yoko
yoko

うん。これから画像付で解説するから読んでみてね。

キップム
キップム

わぁ。ありがとう〜〜〜

スポンサーリンク

この記事はこんな人にオススメ

  • ブログの表示スピードが遅くて悩んでいる人
  • Cocoonユーザー

この記事を読めば、できること


超簡単にCocoonサイトを高速化できる!

なぜ、高速化が大事なの?

ページがちゃんと表示されるまでに3秒以上かかると、53%のユーザーがページを離れてしまう

というGoogleの調査結果があるから。ここからわかるのは、

表示が遅いほどユーザーの離脱につながりやすいということ。せっかく書いているのに離脱されるのはつらい!!!

「ブログを届ける」ためには、コンテンツの質が高いだけではなく、「表示速度」への目配りもめちゃくちゃ大事だなと感じています。

サイトの表示速度を調べる方法は?

コンテンツの読み込み速度をスコアで表示するウェブツール「PageSpeed Insights

で確認できます。

PageSpeed Insights の使い方

1. 「PageSpeed Insights」にアクセス。測定したいページのURLを入力して「分析」ボタンを押すだけ

PageSpeed Insightsの使い方1

2. モバイル・パソコン両方のページ表示速度が確認できる。スコアと評価は下記表の通り、色でわかりやすく表示される

PageSpeed Insightsの使い方2
  スコア     評価   
赤(0〜49)低速
橙(50〜89)平均
緑(90〜100)高速

超簡単!Cocoonを高速化する方法

高速化のおおまかな流れは、たった3ステップ!

  「高速化」にアクセス
  項目にチェックを入れる
  変更をまとめて保存

ここからは、Cocoonでできる高速化設定の方法を画像つきで解説していきます。

1. 「Cocoon設定」から「高速化」を選択

Cocoon高速化設定1

2.「サイト高速化」設定画面が開くので、以下の画像のように7箇所にチェックを入れる

キップム
キップム

全ての項目にチェックを入れればOKだよ!

Cocoon 高速化設定でチェックを入れる項目

  ブラウザキャッシュの有効化
  HTMLを縮小化する
  CSSを縮小化する
  JavaScriptを縮小化する
  Lazy Loadを有効にする
  Googleフォントの非同期読み込みを有効にする
  アイコンフォントの非同期読み込みを有効にする

事前読み込みはデフォルトのままで問題なし。

3. チェックを入れたら、左下の「変更を保存」をクリックで完了!

ちなみに、設定前に「PageSpeed Insights」で計測してみたらこんな結果に……

Cocoon高速化設定前 PageSpeed Insightsの計測結果

設定後はこんな感じ。

Cocoon高速化設定後 PageSpeed Insightsの計測結果

モバイル26→50、パソコン80→92と数値が大幅にアップ!

モバイル速度、平均だからもっと改善しないとダメじゃんと思う人もいるかもしれませんが……、とりあえず最後まで読んで判断してもらえたらと思います。

【実験】人気ブログの表示速度も測ってみた!

有名ブログの表示速度はどうなんだろう?と気になったので、実験してみることにしました。その結果がこちら。

manablog

manablog PageSpeed Insightsの計測結果
yoko
yoko

副業コンパス

副業コンパス PageSpeed Insightsの計測結果
yoko
yoko

!!

作業ロケット

作業ロケット PageSpeed Insightsの計測結果
yoko
yoko

!!!

ガオのノート

ガオのノート PageSpeed Insightsの計測結果

驚いたのですが、モバイルで高速のブログはゼロ!人気ブログもそこまでハイスピードではないというのがわかったので、今回の対策はここまでとすることにしました。

おわりに

ページの速度が遅いと、46%の人がイライラするという調査結果もあります。

Cocoonの高速化はとても簡単で、数値も大幅に改善されるので、ぜひ活用してみてください。

文章: yoko( @_yoko51_

Comment