study/centering_hidari 【Resource HintsAPI】dnsプリフェッチでGoogleアドセンス広告の表示高速化

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

自分でやるをバックアップするソクラテツチップスのバナー画像

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

 /

画像最適化でpagespeedinsightスコア改善をグラフにした画像 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 Hint notes
preconnect connect(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(CSS)
縦スクロール時に横揺れするサイトの修正方法

縦スクロール時に横揺れするサイトの修正方法

縦クロールしたときブレたり横揺れてしまう場合のCSS対処法を解説(スマホタブレット)

PC(CSS)
中央寄せした文字列を左揃えで折り返す方法をイメージした画像

中央寄せした文字列を左揃えで折り返す方法

折り返しは左寄せ、文字は中央に配置したい。簡単だけどヘッダーエリアでは必須テクです。

PC(CSS)
グーグルアドセンス広告がはみ出す時の修正方法

グーグルアドセンス広告がはみ出す時の修正方法

レスポンシブ広告が横にはみ出すために起こるスマホの横揺れを解消!

PC(HP)
Googleアドセンスが中央に寄らない場合の対処法解説画面

Googleアドセンスが中央に寄らない場合のやり方

デフォルトで画面いっぱいに表示されるアドセンスですが、なぜかセンタリング出来ない場合の対処法を解説します。