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