![キップム](https://yoko51.com/wp-content/uploads/2019/09/37dd1363b0b397038cd927b5913bac71.png)
PageSpeed Insightsでサイトスピードを測ったら こんな結果に……
特にモバイルがひどくて…どうしよう……
![PageSpeed Insightsモバイルの結果](https://yoko51.com/wp-content/uploads/2021/07/c_speedup_01.png)
![yoko](https://yoko51.com/wp-content/uploads/2019/09/0d2672183c26c5975bd9293c8cc5e992.png)
落ち込まなくても大丈夫!Cocoonなら高速化の項目にチェックを入れるだけで、簡単にサイトをスピードアップできるから。
![キップム](https://yoko51.com/wp-content/uploads/2019/09/37dd1363b0b397038cd927b5913bac71.png)
え。そうなの!?
![yoko](https://yoko51.com/wp-content/uploads/2019/09/0d2672183c26c5975bd9293c8cc5e992.png)
うん。これから画像付で解説するから読んでみてね。
![キップム](https://yoko51.com/wp-content/uploads/2019/09/37dd1363b0b397038cd927b5913bac71.png)
わぁ。ありがとう〜〜〜
この記事はこんな人にオススメ
この記事を読めば、できること
超簡単にCocoonサイトを高速化できる!
なぜ、高速化が大事なの?
「ページがちゃんと表示されるまでに3秒以上かかると、53%のユーザーがページを離れてしまう」
というGoogleの調査結果があるから。ここからわかるのは、
表示が遅いほどユーザーの離脱につながりやすいということ。せっかく書いているのに離脱されるのはつらい!!!
「ブログを届ける」ためには、コンテンツの質が高いだけではなく、「表示速度」への目配りもめちゃくちゃ大事だなと感じています。
サイトの表示速度を調べる方法は?
![](https://yoko51.com/wp-content/uploads/2021/07/c_speedup_03d.png)
コンテンツの読み込み速度をスコアで表示するウェブツール「PageSpeed Insights」
で確認できます。
PageSpeed Insights の使い方
1. 「PageSpeed Insights」にアクセス。測定したいページのURLを入力して「分析」ボタンを押すだけ
![PageSpeed Insightsの使い方1](https://yoko51.com/wp-content/uploads/2021/07/c_speedup_04b.png)
2. モバイル・パソコン両方のページ表示速度が確認できる。スコアと評価は下記表の通り、色でわかりやすく表示される
![PageSpeed Insightsの使い方2](https://yoko51.com/wp-content/uploads/2021/07/c_speedup_05.png)
スコア | 評価 |
---|---|
赤(0〜49) | 低速 |
橙(50〜89) | 平均 |
緑(90〜100) | 高速 |
超簡単!Cocoonを高速化する方法
高速化のおおまかな流れは、たった3ステップ!
❶ 「高速化」にアクセス
❷ 項目にチェックを入れる
❸ 変更をまとめて保存
ここからは、Cocoonでできる高速化設定の方法を画像つきで解説していきます。
1. 「Cocoon設定」から「高速化」を選択
![Cocoon高速化設定1](https://yoko51.com/wp-content/uploads/2021/07/c_speedup_06.png)
2.「サイト高速化」設定画面が開くので、以下の画像のように7箇所にチェックを入れる
![キップム](https://yoko51.com/wp-content/uploads/2019/09/37dd1363b0b397038cd927b5913bac71.png)
全ての項目にチェックを入れればOKだよ!
![Cocoon 高速化設定でチェックを入れる項目](https://yoko51.com/wp-content/uploads/2021/07/c_speedup_08.png)
❶ ブラウザキャッシュの有効化
❷ HTMLを縮小化する
❸ CSSを縮小化する
❹ JavaScriptを縮小化する
❺ Lazy Loadを有効にする
❻ Googleフォントの非同期読み込みを有効にする
❼ アイコンフォントの非同期読み込みを有効にする
事前読み込みはデフォルトのままで問題なし。
3. チェックを入れたら、左下の「変更を保存」をクリックで完了!
ちなみに、設定前に「PageSpeed Insights」で計測してみたらこんな結果に……
![Cocoon高速化設定前 PageSpeed Insightsの計測結果](https://yoko51.com/wp-content/uploads/2021/07/c_speedup_09B.png)
設定後はこんな感じ。
![Cocoon高速化設定後 PageSpeed Insightsの計測結果](https://yoko51.com/wp-content/uploads/2021/07/c_speedup_10B.png)
モバイル26→50、パソコン80→92と数値が大幅にアップ!
モバイル速度、平均だからもっと改善しないとダメじゃんと思う人もいるかもしれませんが……、とりあえず最後まで読んで判断してもらえたらと思います。
【実験】人気ブログの表示速度も測ってみた!
有名ブログの表示速度はどうなんだろう?と気になったので、実験してみることにしました。その結果がこちら。
manablog
![manablog PageSpeed Insightsの計測結果](https://yoko51.com/wp-content/uploads/2021/07/c_speedup_11B.png)
![yoko](https://yoko51.com/wp-content/uploads/2019/09/0d2672183c26c5975bd9293c8cc5e992.png)
!
副業コンパス
![副業コンパス PageSpeed Insightsの計測結果](https://yoko51.com/wp-content/uploads/2021/07/c_speedup_12.png)
![yoko](https://yoko51.com/wp-content/uploads/2019/09/0d2672183c26c5975bd9293c8cc5e992.png)
!!
作業ロケット
![作業ロケット PageSpeed Insightsの計測結果](https://yoko51.com/wp-content/uploads/2021/07/c_speedup_13.png)
![yoko](https://yoko51.com/wp-content/uploads/2019/09/0d2672183c26c5975bd9293c8cc5e992.png)
!!!
ガオのノート
![ガオのノート PageSpeed Insightsの計測結果](https://yoko51.com/wp-content/uploads/2021/07/c_speedup_14.png)
驚いたのですが、モバイルで高速のブログはゼロ!人気ブログもそこまでハイスピードではないというのがわかったので、今回の対策はここまでとすることにしました。
おわりに
ページの速度が遅いと、46%の人がイライラするという調査結果もあります。
Cocoonの高速化はとても簡単で、数値も大幅に改善されるので、ぜひ活用してみてください。
文章: yoko( @_yoko51_)
Comment