ブログ初心者・Web制作の情報サイト
Cocoonの高速化設定でどれくらい速くなる?

Cocoonの高速化設定でどれくらい速くなる?

Webサイトを作成しているとページの表示速度はどうしても気になってしまいます。そしてGoogleのPageSpeed Insightsでページを評価し低評価がでてしまうと改善したくなるのは当然です。

CocoonテーマにはCocoon設定の中に高速化という項目があります。この高速化が実際どれほど有効なのか試してみようと思いました。

この記事ではCocoonで行える高速化の方法とPageSpeed Insightsでの改善結果を紹介していきます。

どれくらい速くなる?

高速化設定を行うと実際にどのくらい評価が向上するのでしょうか? ここでは高速化の前と後でPageSpeed Insightsのスコアがどれほど変化するかの実験例を紹介します。

以下の結果はモバイルに対する評価です。PCの表示速度はそれほど問題にならないことが多いのでここには載せていません。

測定したページ:https://cooeil.com/free-image-sites/

高速化前

PageSpeed Insights:高速化前 50点

高速化後

PageSpeed Insights:高速化後 75点

PageSpeed Insightsの測定結果は変動するため高速化の前と後でそれぞれ10回ずつ測定して平均値に近い結果を掲載しました。

回数12345678910平均
高速化前4255425250514353515048.9
高速化後8074737975687276796974.5

高速化前の平均は48.9、高速化後の平均は74.5、差は25.6です。ラボデータでは最大コンテンツ描画の項目が大幅に向上しているのが分かります。

Cocoonの高速化で設定した具体的な項目を次に紹介していきます。

Cocoonの高速化設定

普段からサイトが重くならないように高速なサーバーを選び無駄なプラグインを減らしていてもPageSpeed Insightsで49点以下の評価がでてしまう。これはよくあることです。

この原因はアドセンス・アフィリエイト・SNSなどで実行されるJavaScript・Googleアナリティクスといった外部要因が大きく影響してページを表示速度を落としています。アドセンスなんて一つ貼っただけで大幅に点数が下がってしまう場合がある激重広告です。

しかし収益が発生するこれらの広告を外すわけにはいきません。そこでサイト側で行える高速化設定を最大限利用して少しでもページの表示速度を改善したいところです。

Cocoonにはサイト高速化の設定が Cocoon設定 > 高速化にまとめてあります。

Cocoonの高速化設定
  • ブラウザキャッシュ
  • HTML・CSS・JavaScriptの縮小化
  • 画像の遅延読込み
  • GoogleフォントとWebフォントの非同期読込み

※ WordPress5.5でRazy Loadの機能が実装されたので、Cocoonの画像遅延読込み機能はSafari以外では必要ありません。

ブラウザキャッシュ

一度訪れたページのリソースをローカルに保存しておき再訪時に利用するブラウザキャッシュです。キャシュと聞くとページ再編集やCSS書き換え・追加に影響が出るのでは?と思うかもしれませんがCocoonのブラウザキャッシュ機能ではそういった問題は起こりません。

Cocoonのブラウザーキャッシュについて  

HTML・CSS・JavaScriptの縮小化

HTML・CSS・JavaScript内の余分な改行・余白・コメントを削除してソースを軽量化します。地味ですが縮小化するとPageSpeed Insightsの点数は少し改善します。

縮小化を行うと自分が追加したCSSやJavaScriptが動かなくなる問題が発生する場合があります。例えばCSSの先頭に記述して他のCSSを読込む @importが効かなくなったり、すでに縮小化されている外部スクリプトが機能しなるというエラーが起こりました。

Cocoonの縮小化でエラーが発生する場合は除外設定を利用しましょう。

Cocoon:CSSの縮小化除外設定

画像の遅延読込み

Lazy Loadと呼ばれる機能です。見えていないコンテンツをロードせず置いておき表示されるタイミングで読み込みます。ユーザーにとってはページ表示の体感速度が上がると言われています。

GoogleフォントとWebフォントの非同期読込み

Webフォント・アイコンフォントはサイズが大きく読み込みに時間がかかります。読み込みはheadタグ内で行われるのでWebフォント・アイコンフォントのロードが終わるまでbodyタグ内の要素が読み込まれず、記事のコンテンツが表示されない白紙の状態が続いてしまいます。

非同期読込みを有効にすることでフォントの読込みと並列してコンテンツを表示できるようになります。

最も効果的な高速化方法

PageSpeed Insightsの結果を改善する最も効果的な高速化方法して「最初に表示される画面内に重たいコンテンツを配置しない」というものがあります。最初に表示される画面内の描画コンテンツを軽くすることでPageSpeed Insightsの点数を大きく改善することができます。

記事のトップにサイズの大きなアイキャッチ画像を表示するサイトが多いですがこれはモバイル通信時のページ表示速度において大きなマイナス要素になるのです。

モバイルのおけるアイキャッチ画像の有無の比較
画像の有無による差は大きい

PageSpeed Insightsの点数を決めるのは下記のラボデータの5項目です。この方法はラボデータ「最大コンテンツ描画」を改善します。最大コンテンツ描画とは記事内の最も大きなコンテンツが描画されるまでにかかった時間のことです。

最大コンテンツ描画を改善する

私はCocoonテーマの機能を使い記事タイトル下に150kbほどの大きなアイキャッチ画像を挿入していたのですがこれがPageSpeed Insightsの評価を下げる大きな要因になっていました。アイキャッチ画像を下に移動し最初の描画範囲から外すと最大コンテンツ描画の項目が改善し点数も上昇しています。

高速化方法の紹介

PCでは通信速度が速いため大きなアイキャッチ画像を使用してもほとんど問題ではありませんがモバイルでの影響は大きいです。ここではモバイル時にアイキャッチ画像を表示させない方法と表示位置を変える方法を紹介します。

  • モバイル時にアイキャッチ画像を非表示にする
  • モバイル時にアイキャッチ画像の表示位置を変える

モバイル時にアイキャッチ画像を非表示にする

モバイルの場合CSSでアイキャッチ画像を非表示にする方法です。非表示にできるのはCocoonの機能(Cocoon設定 > 画像 本文中にアイキャッチを表示するのオプション)を使用して出力したアイキャッチ画像のみです。

Cocoon子テーマstyle.cssの@media screen and (max-width: 480px) 内に下記コードを追加してください。スクリーンの横幅が480px以下の時にアイキャッチ画像が非表示になります。

.eye-catch-wrap {
  display: none;
}

追加すると下のようになります。間違って別の場所に追加するとPCでも記事内のアイキャッチ画像が表示されなくなるので注意してください。

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
  .eye-catch-wrap {
    display: none;
  }
}

これでモバイル時はアイキャッチ画像が非表示になります。ロード中の画像よりも文字が最初に表示されている方がユーザビリティが向上するはずです。

モバイル時にアイキャッチ画像の表示位置を変える

モバイルでもアイキャッチ画像を表示したい場合があります。

この場合アイキャッチ画像を移動させて最初の描画範囲外に移動させれば高速化できるのですがCocoonの機能を使って表示させたアイキャッチ画像は表示場所を指定できません。

Cocoon機能をオフにして自分で画像を挿入する方法がありますがこれだとPC表示の時に画像がSNSシェアボタンの下に配置されてしまいます。

画像がSNSボタンの下に配置される

また各記事に直接アイキャッチ画像を直接挿入するのは保守的な面からみても変更に対応しにくく使い勝手が悪いです。

そこでウィジェットとショートコードを使用してアイキャッチ画像を任意の場所に挿入することにします。ウィジェットを使用するのでウィジェットが配置できる場所ならどこでも挿入できます。

手順

手順はアイキャッチ画像を表示するショートコードを作成し、ウィジェットを配置してショートコードを使用します。

前提としてCocoonのアイキャッチ画像表示機能を停止します。Cocoon設定 > 画像の「本文上にアイキャッチを表示する」のチェックを外してください。

ショートコード作成

アイキャッチ画像とキャプションを表示させる「ショートコード」を追加するコードです。functions.phpに追加します。

add_shortcode('add_eyecatch_and_caption', function() {
  return get_the_post_thumbnail().'<figcaption>'.get_the_post_thumbnail_caption().'</figcaption>';
});

ウィジェットの配置

WordPressの外観 > ウィジェットで[C] テキスト (PC用)[C] テキスト (モバイル用)の2つのウィジェットを用意しテキスト欄にショートコードを記入します。

[add_eyecatch_and_caption]

後はウィジェットを好きな場所へ配置すればOKです。タイトル下にアイキャッチ画像を表示したい場合は「投稿タイトル下」です。PCとモバイル別々に配置できます。

これでCocoonの高速化設定は終わりです。これらすべてを行ったのが上の実験結果です。

PageSpeed Insightsの点数の意味

PageSpeed Insightsの点数にこだわってきましたが実際にこの数字は何を意味しているのでしょうか? 点数が高いと読み込みが速い快適なサイトなのかというとそうではありません。

PageSpeed Inshgtsの点数はいかにファーストビューが速く完成して操作できるようになるか、それが全てということです。

参考:PageSpeed Insightsの真実

記事内の他のコンテンツが重くてもファーストビューが素早く表示されて操作できるようになればユーザーは不満を持ちにくいでしょう。これはユーザーの直帰を防ぐうえでとても合理的です。

この記事で紹介した「最初に表示される画面内に重たいコンテンツを配置しない」という内容もこれを元にした改善案になっています。

最後に

Cocoonで行える高速化の方法とPageSpeed Insightsでの改善結果を紹介しました。Cocoonの高速化を行うと思った以上にPageSpeed Insightsの評価が向上して驚いています。

ここで紹介した方法以外にもEWWWという画像圧縮のWordPressプラグインを利用する方法があります。私は画像アップロード前にリサイズと圧縮を行っているので試してはいませんが普段画像をそのままアップロードしている人には画像圧縮も効果があると思います。気になる人は試してみてはどうでしょうか?