Googleアドセンスを速く表示させよう!

2020.10.23 

dns-prefetchでアドセンス広告の表示高速化~Resource Hints API~

Planet20xxPC用バナー Planet20xxモバイル用バナー

GoogoleAdsense(アドセンス)広告の表示が遅い!少しでも速く表示したい!表示するオリジナル画像、GoogleAdsense広告、アフェリエイト広告、この三つ巴とも言える画像処理が遅くては、PagespeedInsightのスコア改善は見込めません。表示が遅いと広告としての意味も微妙…、クリック率低下に直結してしまいます。

今から紹介するのはごく当たり前に記述しているリンク要素についてですが、少しでも速くなる見込みがあるならやらない手はなし!。とても簡単ですので、よければ参考にしてみてください( ´ ▽ ` )ノ。

linkタグとは

リンクタグであらかじめ検索エンジンやサーバーに情報を知らせることで読み込みが速くなるイメージ図

まずは基本的なおさらいから。linkタグはhead内において、検索エンジンやブラウザに関係性や参照先などの情報を記述する要素です。

relは「relation(リレーション)」の略で、関係性を示し、hrefはHypertext Reference(ハイパーテキストリファレンス)の略で、参照先を示します。

link要素とは

  1. headタグ内に記述する
  2. ブラウザや検索エンジンに関係性や参照先を知らせる

これだけで記述したページと外部のファイルやサイト(ページ)などが関連付きます。

そういうことだったねワトソン君

Resource Hintsとは

Resource Hintsとは、dns-prefetch・preconnect・prefetch・prerenderの4つのAPI群から構成されています。

Resource Hintnotes
preconnectconnect(TCPハンドシェイク、TLSネゴシエーションなど)を事前に処理します
prefetch画像やCSSのリソースを予めダウンロードし、キャッシュに格納します
prerenderリンク先のページをダウンロードし、バックグラウンドでDOM構築、JavaScript実行を行います
dns-prefetch外部からのリソース読み込みの時に、事前に名前解決します

今回はこの中からdns-prefetchを使用して、グーグルアドセンスの広告表示を少しだけ速く表示できるようにします。

DNSプリフェッチ

基本的な記述の仕方

<link rel='dns-prefetch' href='参照先' />

rel属性値にdns-prefetch、href属性値にGoogleAdsense関連の参照先を記述します。headタグ内のリンク要素に続いて記述します。

 

GoogleAdsenseに関連する参照先

<link rel='dns-prefetch' href='//lh3.googleusercontent.com' />
<link rel='dns-prefetch' href='//pagead2.googlesyndication.com' />
<link rel='dns-prefetch' href='//adservice.google.co.jp' />
<link rel='dns-prefetch' href='//adservice.google.com' />
<link rel='dns-prefetch' href='//googleads.g.doubleclick.net' />

DNSプリフェッチとは、Webブラウザーやアプリケーションにおいて、リンクで指定されたドメイン名を事前に名前解決することです。 一部のWebブラウザーでは、DNSプリフェッチにより今後アクセスされる可能性の高いドメイン名を事前に名前解決しておくことで、実際にアクセスされた際のコンテンツ読み込みにかかわる時間の短縮を図ります。

参考サイト:JPRS用語辞典

まとめ

DNSプリフェッチは最初に読み込んだページ自体に効果がでるのではなく、次のページに移動したときにGoogleアドセンス広告の表示高速化を実現します。

いかがでしたでしょうか?たった5行の記述だけです。PagespeedInsightのスコアダウンもありませんでしたので、やってみる価値はあるかと思います。

以上、プリフェッチでアドセンス広告の表示高速化レポでした( ´ ▽ ` )ノ。

【関連記事】

PC(html/Javascript)
スマホでの画像遅延読み込みイメージイラスト

表示スピードアップ!画像遅延読み込み実装

PagespeedInsightのスコア改善に役立つ画像遅延読み込みの実装方法についてわかりやすく解説します

PC
画像の最適化手順を説明したページへのリンク画像

画像を軽くする最適化はお済みですか?

画像にはいろいろな情報が入っています。ムダな部分を削除して容量を小さくしましょう。

PC(Javascript)
CDNとサーバー読み込みのイメージ画像

CDNとレンタルサーバーのjsファイル読み込み比較

jsファイルを利用できるCDNのパフォーマンスと稼働時間を調べてみました。

PC(html/CSS)
ソースコードのハイライト表示のやり方を説明したページへのリンク画像

ソースコードのハイライト表示のやり方

負担が少ない軽量ライブラリを使用して、ハイライト表示する方法を解説。

PC(HP)
Googleアナリティクスで特定のIP除外する方法

Googleアナリティクスで特定のIPアドレスを除外する方法

自分アクセスによる訪問カウントを取得しないための設定

PC(Windows)

WindowsでもHelveticaフォントを使いたい!Arialじゃ満足できない方必見

TOP