某全国紙新聞社でスポーツ記者として、オリンピックやプロ野球、Jリーグなどを担当してきた、とちです。真面目にかるく、わかりやすくが執筆信条。現在は編集者として、日々のスポーツ紙の制作をしています。
「Cocoon使ってるけど、なんかブログが重いかも…」
サイトの表示スピードに悩むCocoonユーザーの疑問を解消します。
Googleによると、モバイルサイトの読み込みに3秒以上かかると50％以上が閲覧を止めてしまうというデータもあります。
つまり『サイトスピードが遅い＝ピンポンを押してくれた読者に、ドアを開けずに帰られる』という損失となるわけ。
本記事を読んで、なるはや（なるべく速く）でドアを開ける対策をしましょう！
- Cocoonブログのサイトスピードをアップする方法
- あの人気ブログのサイトスピード
- サイトスピードより重要なもの
Cocoonが遅い？高速化設定してる？
Cocoonのサイトスピード計測
サイトスピードを測るには、Googleの無料ツール「PageSpeed Insights」が簡単です。
当ブログは「超速」と名高いCocoonを使ってますが、80記事ほどを入れた段階でトップページを計測してみると…
28！？
特にモバイルで、「なんじゃこりゃ～！？」と悲鳴を上げる数値に。
Cocoonは本来超速
当ブログは完全にCocoonのポテンシャルを殺している…。
これ他の記事を書いたところで、表示が遅くて見られないんじゃね？
常に引っ掛かりながらの執筆作業も集中できないんで、サイトスピードの改善をファーストミッションに位置づけました。
Cocoonが遅い？『高速化設定』で改善
Cocoon「高速化」に✔入れるだけで
Cocoonには「高速化」というカテゴリーがあり、チェックするだけでサイトスピードのアップを図ることができます。
高速化検証
すべて✔が外れた状態、PageSpeed Insights測定「モバイル28 パソコン73」からスタート。
①「ブラウザキャッシュの有効化」に✔
（こんな感じで1項目ごとの数値の変化を追います）
→モバイル29 パソコン72
②「HTMLを縮小化する」に✔
→モバイル27 パソコン66
③「CSSを縮小化する」に✔
→モバイル40 パソコン80
④「JavaScriptを縮小化する」に✔
→モバイル39 パソコン85
⑤「Lazy Loadを有効にする」に✔
→モバイル43 パソコン87
⑥「Googleフォントの非同期読み込みを有効にする」に✔
→モバイル42 パソコン85
⑦「JavaScriptをフッターで読み込む」に✔
→モバイル40 パソコン83
以上がCocoonの「高速化」すべてに✔を入れた数値の変化です。
当サイトの場合は、けっこうCSSのコードを入れていることもあって「CSSを縮小化する」の項目で、数値が大幅にアップしました。
結果的には、Cocoonの「高速化」すべてに✔を入れると
- モバイル数値「12」アップ
- パソコン数値「10」アップ
となりました！
うん、だいぶ改善しましたね。
ただ、もうちょっと上げたい、ということで貪欲にCocoon設定以外の策も打ちます。
Cocoonの高速化設定以外の対策は
サイトスピードを遅くするのは画像
PageSpeed Insightsは、改善ポイントも合わせて提案してくれます。
やっぱり画像のやつが悪さを…
当ブログは、もともと
・「EWWW Image Optimizer」（WordPressプラグイン）
・「TinyPNG」（オンライン軽量化サイト）
を使って画像圧縮はしてます。
EWWW Image Optimizerは基本入れるだけで自動圧縮かけてくれる優秀なプラグインなんですが、「最適化されていない画像をスキャンする」をクリックすると結構画像が出てきたんで、これも、もちろん最適化。
→モバイル40 パソコン82
と直後には、そこまでの変化が見られませんでした。
次世代画像フォーマット「WebP」に
あと、やったことは「次世代フォーマットでの画像の配信」ってやつ。
JPEG 2000、JPEG XR、WebPなど、従来のJPEGやPNGより圧縮効率の高い画像フォーマットを使うべし、という指摘です。
当ブログは、最も推奨する声が多かったWebPに変換しました。
WebPへの変換方法は、下記のサイトを参考にさせていだだきました。
さぁ「PageSpeed Insights」の変化は…
→モバイル32 パソコン82
げっ下がった〜！もはや、よう分からん…
遅いのはGoogleアドセンスのせい！？
サイトの高速化策を調べまくったら「Googleアドセンスが重くなる要因」と書いてある記事を発見です。
藁にもすがる思いで、一度アドセンスの自動広告を外してみたら
おぉ～！
大幅に改善しました。（※現在当ブログでは、自動広告はオンにしています））
モバイルの読み込み時に表示されるモニタいっぱいの広告も、逆にブログの読み込み自体を遅くしている可能性があるみたい。
つまり、Googleアドセンスを外せばサイトスピードはアップするけど、収益はダウンする（可能性がある）トレードオフってやつ…。
サイトスピードも、アドセンス収益もどっちも失いたくない…
では、どっちも失います。
テーマ製作者のわいひらさんも、Cocoonサイトで
アドセンス、Analytics、Facebook、Twitter等の外部が読み込まれている場合は、一気に点数がガタ落ちします。外部リソースに起因する点数ダウンは、テーマ側からはどうしようもありません。
と、おっしゃってます。
Googleアドセンスの広告設定を変えつつ、サイトスピードがカメ中のカメとならないような「落とし所」を見つける必要がありますね。
いろんな施策をして、数値が改善されなければサーバーがネックになっている可能性もあります。
ブロガーに人気の高いエックスサーバーなら、まず問題ないです。
この記事に書いてあること全部やっても
速くならないんですけど…
って人は、テーマ変更も手かなと。Cocoonはユーザー側のカスタマイズを求めているテーマでもあるので、コードの書き込みが影響して遅くなるケースがあります。
WordPressの”速いテーマ”は下記で紹介していますので、ご参考に。
>>>WordPressおすすめの有料テーマ
人気ブログのサイトスピードは？
優秀なサイトスピードと思いきや…
気になったので、私がよく拝見させてもらってるブログのサイトスピードも測ってみました。
・「manablog」
・「まだ仮想通貨持ってないの？」
・「寝ログ」
・「NOJIブログ」
・「作業ロケット」
・「GAOSNOTE」
サイトスピードよりコンテンツ
気づきました？
まっ赤（低速）じゃねーか！
わかったのは、人気ブログが全部が全部、スーパー高速ってわけじゃない！ってこと。
そういえば好きなブログを読むとき、ワクワクして「待ち時間」なんて考えたこともなかった。
つまり、重要性は圧倒的に「コンテンツ＞サイトスピード」ってことです。
これまで何を書いてきたんだってぐらい、元も子もないですけど…。
画像だけは軽くする対策をして、サイトスピードに一喜一憂しないスタンスがいいかと思います。
重すぎはNGですけど。
Cocoonが遅い？高速化設定してる？【亀ブログじゃ読者が帰る】：まとめ
「サイトスピードがGoogleの評価を左右する」みたいに書かれているところもあってビクッとするけど、Google先生が1番見ているのは間違いなくコンテンツですね。
それが実証できただけでも、本記事の価値はあったかな。
今回、実は一瞬、Cocoonを疑った自分がいました。
ブッてください、わいひらさん。
では👋
コメント待ってます！