【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と数値が大幅にアップ!

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

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

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

manabrog

manablog PageSpeed Insightsの計測結果
yoko
yoko

副業コンパス

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

!!

作業ロケット

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

!!!

ガオのノート

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

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

おわりに

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

Cocoonの高速化はとても簡単で、数値も大幅に改善されるので、ぜひ活用してもらえたらと思う。

文章: yoko( @_yoko51_

Comment