こんにちは、とち（ @blue_chikippaa ）です。
こんなサイトの表示スピードに悩む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は、改善ポイントも合わせて提案してくれます。
やっぱり画像のやつが悪さを…
当ブログは、もともと以下2つのツールで軽量化しています。
- 「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等の外部が読み込まれている場合は、一気に点数がガタ落ちします。外部リソースに起因する点数ダウンは、テーマ側からはどうしようもありません。
Googleアドセンスの広告設定を変えつつ、サイトスピードが亀とならないような「落とし所」を見つける必要がありますね。
【追記】僕は自身の経験談からですが、アクセスが少ないブログ初期のころのGoogleアドセンスは非推奨です。アドセンスはアクセスありきなので。
Googleアドセンスのために、サイトスピードを落としてユーザーに離脱されたらもったいないです。
参考記事【悩み】Googleアドセンスに通らない？【答え】別にええやん、だって…
いろんな施策をして、数値が改善されなければサーバーがネックになっている可能性もあります。
基本的に著名なエックスサーバー
などのレンタルサーバーだったら問題ないです。無料or格安サーバーを使っていて、サイトスピードに悩む場合は、一度サーバーから見直しましょう。
記事に書いてあること全部やっても、速くならないんですけど…
という人は、テーマ変更も一手です。
Cocoonはユーザー側のカスタマイズを求めるテーマでもあります。
コードの書き込みが影響して遅くなるケースがあります。
が定評あります。僕も他サイトで使用していますが、インパクトあるサイトが作れて、かつ速いです。
.
【検証】人気ブログのサイトスピードは？
優秀なサイトスピードと思いきや…
気になったので、私がよく拝見させてもらってるブログのサイトスピードも測ってみました。
・「manablog」
・「まだ仮想通貨持ってないの？」
・「寝ログ」
・「NOJIブログ」
・「作業ロケット」
・「GAOSNOTE」
サイトスピードよりコンテンツ
気づきました？
ま、まっ赤（低速）じゃねーか！
ですよね。。。
わかったのは、人気ブログが全部が全部、スーパー高速ってわけじゃない！ってこと。
そういえば好きなブログを読むとき、ワクワクして「待ち時間」なんて考えん
つまり、重要性は圧倒的に「コンテンツ＞サイトスピード」ってことです。
これまで何を書いてきたんだってぐらい、元も子もないですけど…。
高速化以外にSEOの重要な施策を知りたい方はやってて良かったSEO【1日2,000人に読まれるブログにする24個の施策】をどうぞ。
画像だけは軽くする対策をして、サイトスピードに一喜一憂しないスタンスがいいかと思います。
Cocoonが遅い？高速化設定してる？【亀ブログじゃ読者が帰る】：まとめ
「サイトスピードがGoogleの評価を左右する」みたいに書かれているところもあってビクッとするけど、Google先生が1番見ているのは間違いなくコンテンツですね。
それが実証できただけでも、本記事の価値はあったかな。
今回、実は一瞬、Cocoonを疑った自分がいました。
ブッてください、わいひらさん。
では！
TinyPNGは、かなり重いときだけ使う感じ（1枚1枚は、かなりめんどい…）。