Cocoonでアドセンスが表示されない!原因はページが重いから?

ブログ関連

【Cocoonでアドセンスが表示されない!】原因はページが重いからだった話

こんにちは!サラリーマンブロガーひでたにです!

最近合格したグーグルアドセンス審査!

早速広告コードを記事に挿入!

しかしなぜか一部が表示されません。。

今日はその原因と対処した内容について綴りたいと思います!

結論から言うと原因はページの読み込み遅延=ページが重たいでした!

ブログ初心者かつ、使用テーマがCocoonで同じような状況の方はぜひ読んでいただき、参考にしていただければと思います!

スポンサーリンク

前提条件と背景

前提条件

使用サーバー:ロリポップ(ライトプラン)
ブログ:WordPress
使用テーマ:Cocoon
記事内画像:圧縮無し
画像数:記事内見出しごとに1枚
ブログ歴:本格的にやり始めて2ヶ月

アドセンスが表示されない事と思い当たる節

ふとした時に自分の書いた記事って読みたくなりません?

ふと、仕事帰りに『あの記事もう一度読み返してみるか』とアクセス開始。

うーん、こんな読み込み遅かったっけ。。
夕方だから通信遅い?

やっと読み込んで来たかと思うと、

あれ?「スポンサーリンク」の下に真っ白スペースがある、何これ。

そうです、貼り付けたはずの広告が表示されていないのです。

しかも全部じゃなく、一部だけ。。

ただ、わたしもいくつか思い当たる節がいくつかありました。

最近、記事中の見出し毎に画像を付けるようにしたこと、画像のサイズ圧縮なんかは完全に怠っていたこと、などです。

確かにページの読み込み速度まで意識して記事を書けていなかった気がする。。

と、言うわけでページの読み込み速度という観点で調査していくことにしました!

読み込み速度の重要性、評価値について

ページの重さとアドセンスには関係性がある!?

色々と調べてはみたもののこれと言って確かな情報はありませんでした。

少なくともたくさんの高画質の画像が多数挿入されている記事や、文字数の多い記事などは一度に読み込むコンテンツが多すぎてモバイルでの表示だと読み込みにとても時間がかかります。

その場合アドセンスの読み込みが後回しになって、表示されている部分と空白になってしまっている部分が存在していると考えられます。

PageSpeed Insightsで評価・分析する

ページの重さについてはしっかりと数値化できる「PageSpeed Insights」という便利なツールがあります!
「PageSpeed Insights」はGoogle社が提供しているページの重さ評価・分析ツールです。

使い方は簡単で、ページにアクセスし、評価したいURLを入力して[分析]ボタンを押すだけ。
ユーザーが快適にページを表示できるかをパソコン、モバイル両面から100点満点で計測してくれます。

ちなみにわたしのブログで一番重いと思われるアドセンス審査対策ページで試してみると、、

なんと、モバイルが33点です。ヤバし。

個人的には学校のテストでもあまり見たことのない点数です。。

ちなみにパソコンの評価もひどい。


68点。。

hidetani
hidetani

笑ってくれ。笑ってくれていいよもう。涙

まぁ近年はモバイルからのアクセスがほとんどなのでパソコンはおまけ程度に見ておきましょう!

下部にスクロールしていくと、改善ポイントが記載されています。

色々と難しい言葉が並んでいますが読み込んだ画像サイズが1283KBと出ています。
トータルサイズも2.3MB、、格安SIMでお昼休みに表示する人にとってはかなり苦痛なサイズである気もします。。

hidetani
hidetani

どおりでページ読み込みが遅いわけだ。



具体的対処

画像圧縮プラグインを使う

というわけで対処策第一弾!まずはアップロードしている画像を圧縮することにしました!
アップロードした写真を今更全て編集するのも大変なので、画像圧縮プラグインを利用します。

色々と探してみましたがよくおススメされているのが「Compress JPEG & PNG images」でした。

Compress JPEG & PNG images
Speed up your website. Optimize your JPEG and PNG images automatically with TinyPNG.

メールアドレスとニックネームを入れて認証すれば月500枚まで無料で圧縮できます。

プラグイン有効化後に、Wordpressのメニューから

[メディア]→[Bulk Optimization]→[実行]
で500枚以内なら一括で圧縮することができます。

わたしの場合は38.8%も圧縮することができました!

圧縮したからといって画像が汚く見えるということもないのでおススメです!
(ちなみに画像の保存形式はPNGよりもJPEGの方が2~3割サイズが小さいです、その分画像が少し荒くなりますが。。)

画像を選択して圧縮するなど詳しい使い方は下記ブログがとても参考になりますよ↓

きれいにしっかり画像圧縮。WordPressプラグインCompress JPEG & PNG imagesの設定と使い方
画像圧縮サービス【TinyPNG】の公式ワードプレスプラグインを紹介。「元画像のクオリティーを維持して、ファイルサイズもしっかり減らす」やり手の"パンダさん"。その手軽さと柔軟さ、設定から使い方までを徹底解説します。ページ表示時間を高速化しましょう。

さて本題に戻り、再測定!

測定結果にほぼ変化は見られず。。

次へ行きます。

Cocoonの高速化設定

これ、重要です。
Cocoonを利用したらまず設定しておくべきでした。。

特にCSSの編集やカスタマイズをあまりしない初心者にとっては必須とも言えるでしょう。

設定は簡単で[Cocoon設定]→[高速化]から全てにチェックを入れて保存でオッケーです。

詳細は下記を参考にして下さい。(Cocoon産みの親・わいひらさんの公式ページです。)

Cocoonおすすめのサイト高速化設定
Cocoonと相性の良いページの高速化設定方法の紹介です。Cocoonデフォルト機能だけでも十分にPageSpeed Insightsで高得点が狙えます。加えて、ページキャッシュプラグインや、画像最適化プラグインを利用すれば、より良い良いパフォーマンスを目指すことも可能かと思います。

特に、「Lazy Load」というのは通信帯域の狭いモバイル通信において画面に表示されている画像のみを読み込むことで、一度に全画像を読み込む必要が無いため閲覧者の利便性が向上するというものです。(概要程度で理解していただければ。。)

なお、既にLazy Load系プラグインを使っている人は競合する可能性があるためプラグインを停止させる

もしくは、高速化メニューの[Lazy Loadを有効にする]のチェックを外す事に注意しましょう!

ちなみに私は[Lazy Loadを有効にする]にチェックを入れるとなぜか画像が表示されなかったので【A3 Lazy Load】というプラグインを導入しました!

a3 Lazy Load
Use a3 Lazy Load for images, videos, iframes. Instantly improve your sites load time and dramatically improve site users experience.

さて再測定!

結果として得点が11ポイント上昇し44ポイントに!

こんなことなら最初から高速化設定をやっておけば。。

不要なプラグインは停止、カスタマイズはシンプルに

ブログ運営で便利なプラグイン。そんなプラグインもページ表示時に読み込まれ、それが遅延の原因になる場合もあります。

使ってないプラグインは停止させるか削除するなりし、使用するプラグインを極力少なくしましょう!

私はサイドバーにTwitterのリアルタイム表示をできるようにカスタマイズしていたのですが、どうもコチラが重たいようだったので思い切って削除しました!

また、モバイルではサイドバーが表示されない代わりにメニューボタンがありますが、それも非表示にしました!
(だって自分も他人のブログ読むときにメニューボタン押したこと無いですし。。)

[Cocoon設定]→[モバイル]タブ→[ボタンを表示しない]と設定すればOKです。

結果として評価値に大きな変化はありませんでしたが体感として読み込みがストレスフリーになったと感じます!

hidetani
hidetani

1ポイント上昇!笑

さいごに

100点を取る必要性

前章で紹介したPageSpeed Insightsで必ずしも100点を取る必要はないと感じています。

現にCocoonテーマ作成者・わいひらさんもこう仰っています。

通常の運営サイトであれば、以下のような多くの外部リソースを使用します。
・多くのプラグインを使用
・アドセンスを掲載
・Analyticsでアクセス解析 ~以下、一部省略~
こういったことが積み重なると、普通にモバイルとかは50点以下とかになります。
外部リソースに起因する点数ダウンは、どうしようもない部分があります。

「Cocoonおすすめのサイト高速化設定」より

点数ばかりにこだわるのではなく、点数に反映されなくても軽量化やシンプルな作りを心がけ、読み込み速度を意識することが重要だと思いました。

(格安サーバーを使っている私が偉そうに言えませんが。。汗)

まとめ

それではまとめに入りましょう!

WordPressテーマCocoonでアドセンス広告が表示されない時は下記を試してみて下さい!

ページが重過ぎる事が原因かも、、その場合は
1.圧縮プラグインを活用して画像サイズを圧縮する
2.Cocoon設定で高速化の設定をする
3.不要なプラグインを停止し、カスタマイズはほどほどに、シンプルに

上記対処を施せば少なくともページが重いという状況が多少は改善されるはずです!

それでも表示されないという方はアドセンス広告自体が多いのかもしれません。
一度広告数を減らしてみて確認してみるのも1つの手ですよ。

最も重要な事は、「ブログはユーザーに提供するもの」です。
ユーザーが快適に閲覧できる環境を整えましょう!

これでみなさんの問題が解消されますように!

以上、ひでたにでした☆

その他ブログ関連情報はコチラからどうぞ↓

スポンサーリンク
スポンサーリンク
ブログ関連
hidetaniをフォローする
スポンサーリンク
ひでたにのススメ