ソロ活@自由人

雑記ブログの限界を突破する

はてなブログでアドセンス広告を遅延読込する方法!表示を高速化!

ねえ~あんたの記事
ググったら前より検索順位さがってない?

えっ?

まあまあ落ち着いてください!

Google様も毎日クロールbot様が巡回してますからね~

それに色んな基準をAIの神様が毎日更新してるそうですから

10位や20位は誤差ですよねぇ......

|ω・)チラ

えっ!!!!なにこれ?順位っていうか.....圏外ばっかり......

(((( ;゚д゚))))アワワワワ

   f:id:sorokatu:20210807155649p:plain

ということで今回はこんなあなたへ

こんなあなたへ
  • Googleアドセンス合格後になぜか?記事の検索順位が下がった
    (৹˃̵﹏˂̵৹)
  • アドセンス広告を貼ったらスマホサイトが急に重くなった
    (゚`ω´ ゚)゚
  • アドセンス広告を貼ったらpagespeed Insightsの点数が急に下がった
    。゚゚(*´□`*。)°゚。

大丈夫!解決出来ますよ!

※僕は、はてなPROです。はてな無料版は試してません。ご了承くださいm(_ _ )m

 

※本ページはプロモーションが含まれています。

 

はてなブログでも出来た!Googleアドセンス広告を
遅延読込して表示高速化

表示高速化しなければならない訳

f:id:sorokatu:20210919152741j:plain

先に結論を言います。

検索順位が極端に下がっていた原因。

それは

表示速度が
とんでもなく
遅くなっていた

ことでした。

 

僕は

Googleアドセンスに合格した直後から

何も考えずに広告を貼りまくりました。

トップページにインフィード広告2枚。

サイドバーにディスプレイ広告3枚。

記事内広告3枚。

 

しめしめ~これで収益化はバッチリだぜ!!!

あとはSEOをしっかりしながら

記事を書くことに集中しよう!

そう思っていました。

 

事件が起きたのは

アドセンス広告を貼って3日後。

記事をググって検索順位確認していると

あれ?

オーガニック検索で3位だった記事が

同じキーワードなのに30位まで落ちてるな・・・

いやな予感がして

全ての記事をいつものキーワードで検索した結果・・・

30位以内だった記事は100位へ

50位以内だった記事は圏外へ

お見事に飛んでいます!!!

    f:id:sorokatu:20210723142056p:plain

いくらGoogle様がエライとはいえ

これはひどいよ~と思いながら

思い当たる原因を考えました!

 

サイトデザインは何も触ってないので

数日前と変わったことと言えば

Googleアドセンス広告を貼ったことだけ。

 

まさか?と思いながら

Googleアナリティクスのサイトの速度ページを確認すると・・・

f:id:sorokatu:20210919152852j:plain

2秒台前半だった平均読込時間が.....

10秒台ってなにこれ?

それにサーバーの応答時間が遅すぎます。

(いつも0.1秒以内)

さらには

f:id:sorokatu:20210919152928j:plain

8月の末日あたりに20秒近い日が....

w(゜o゜)w

(実際は20秒近い日が3日連続)

 

アナリティクスのデータ分析から

アドセンス広告が原因なのは

疑いようもありません。

 

アドセンス広告によって

サイトの表示速度が極端に遅くなり

ユーザーが使いづらいサイトと

判断され検索順位を落とした。

これが原因です。

Googleが公式に

ページの読込速度を検索ランキングの

要素に使用する!と言っている以上、

間違いないでしょう。

 

引用サイト

webmaster-ja.googleblog.com

とにかく読込速度がここまで遅いと

もはや誰にも見ていただけないレベル。

せっかく合格したアドセンスですが

広告を外すしかありません ( ̄^ ̄゜)

     f:id:sorokatu:20210807155739p:plain

と思いながらも

あきらめることができない僕...

とりあえずトップページのインフィード広告2枚を外し。

サイドバー広告を3枚から1枚へ減らし

PageSpeed Insightsで計測して見ました。

f:id:sorokatu:20210919152957j:plain

良くなるどころか悪くなってます!

 

PageSpeed Insightsの点数が

実際の表示速度とイコールでないことは

前回の記事でも書きました。

※実際の表示速度の確認方法は

サイトの停止または利用不可問題解決でGoogleアドセンス合格!をぜひ読んでみてください!

 

けれど表示が最適化されているか?

の指標としてはPageSpeed Insightsは

とても役に立ちます。

 

それにしても

21点は
ひどすぎる!

このまま数日待ってアナリティクスの

実際の表示速度を見てからでも

遅くはありませんね....

と待っていることは気が短い僕には

とても出来ません!

画像みたいに遅延読込
できたらいいのにね?

それだ!

と思い立った僕は

図書館で調べまくった後

関連記事を読みあさって確信しました。

出来る!

アドセンス広告の遅延読込で表示高速化する方法

f:id:sorokatu:20210919153036j:plain

では具体的にアドセンス広告を

遅延読込設定にする方法を解説していきます!

 

遅延読込設定の手順
  • ①貼り付け済の全てのアドセンスコードを変更する
  • ②遅延読込コード(script)を貼り付ける

の簡単2ステップです!

※自動広告コードを使われてる方は対象外

①貼り付け済の広告コードの変更

まずは、すでに手動で貼り付けてあるGoogleアドセンスの広告コードを変更します。

こんな感じのコードになってますよね?

 

どこを変更するのかと言うと

上2行を削除するだけです!

 

この1行目と2行目を削除してください。

削除した後は

こんな感じになるはずです。

 

この1行目~2行目の削除作業を貼り付け済のアドセンス広告コード全てに実施してください。

1箇所でも1行目~2行目が残っていると全てが動作しませんので、必ず全てのアドセンスコードから削除してください!

②遅延読込コードを貼り付ける

次に遅延読込コードを貼り付けます。

貼り付け場所は

デザイン⇒カスタマイズ⇒フッターです。

こちらをフッターの

1番最後尾に貼り付けて

保存して完了です!

 

作業後にPageSpeed Insightsで計測すると

f:id:sorokatu:20210919153141j:plain

とりあえずは元に戻りました!

 

現在は、

またデザインなどを色々いじって

PageSpeed Insightsの点数はさがってます....

けれど表示速度自体は日増しに

高速化しているので

とりあえずは成功でしょうかね!

 

※注:僕の環境では正常に動作してますが、なんらかの不具合が出ても対処しかねますのであらかじめご了承ください

遅延読込のメリットとデメリット

f:id:sorokatu:20210919153211j:plain

今のところ僕の環境では

不具合は出ていないのですが

少し気になるところもあります。

 

念のため、

アドセンス広告を遅延読込に設定する

メリットとデメリットを整理しておきます。

メリット
  • ページの読込速度が確実に上がる
  • 表示速度が上がることでSEO効果が見込める

一方でデメリットもあります。

リスクも含めて整理すると

デメリット
  • ファーストビュー(最初の表示)に広告が含まれる場合、スクロールするまで非表示(例えば記事タイトル直下の広告)。スクロールすると記事内に突然広告が出現するので、意図しない誤クリックが発生しやすい
  • スマホを高速でスクロールすると、表示が追いつかないので、クリック数が減る可能性がある

デメリットやリスクもあるんだ?

そうなんですよ!

ファーストビューの広告を誤クリックするリスクに関しては、Googleに減点されるリスクもありますよね?

だから僕はタイトル直下の広告は抜いちゃいました。

結構クリック率の高い箇所ですが

検索順位の方が優先ですから!

Googleアドセンス広告遅延読込のまとめ

f:id:sorokatu:20210919153237j:plain

では簡単におさらいです。

まとめ
  • 検索順位が下がった理由はページの表示速度が極端に遅かったから
  • 表示速度が遅かった理由はGoogleアドセンスの広告が原因だった
  • アドセンス広告を遅延読込にすることで表示速度の高速化が可能
  • 遅延読込設定にはデメリットやリスクもある

アドセンス広告の遅延読込に関しては

ワードプレスの関連記事は山ほどあります。

 

ところが、はてなブログに限定すると

まったく関連記事が見つかりません。

だから僕が記事にしてみました!

 

アドセンス広告コードの遅延読込の他にも、サイトの高速化に有効な改善方法はいくつもあります!

高速化対策ははてなブログを高速化する表示速度改善法6選【2022年最新】にまとめましたので、ぜひ読んでみてください!

 

少しでもあなたのお役に立てたなら

とてもうれしく思います。

 

最後まで読んでいただき

ありがとうございます!