Googleアドセンスを速く表示させよう！
Googleアドセンス広告の表示高速化するDNSプリフェッチを導入しよう！~Resource Hints API~
Googleアドセンス広告の表示が遅い
「GoogoleAdsense（アドセンス）広告の表示が遅い」
「「画像も広告も読み込みが重くて、PageSpeed Insightsのスコアが上がらない…」
こんな悩みをお持ちではありませんか？
広告やアフィリエイト画像、オリジナルのバナー画像など、“表示の遅延”が収益にも影響するのは言うまでもありません。クリック率の低下、離脱率の増加…そんな状況を少しでも改善したい方に、今回は「DNSプリフェッチ」を紹介します。
数行のコードを
タグに加えるだけで、Google AdSense広告の表示速度を改善できる可能性があります！よければ参考にしてみてください。linkタグ
まずは基本的なおさらいから。 HTMLの<link>タグは、ブラウザや検索エンジンに「このページは○○と関係している」と伝えるための要素です。主に<head>タグ内に記述され、外部のリソース（CSSやフォント、プリフェッチ用のURLなど）とページをつなげる役割を持ちます。
relは「relation（リレーション）」の略で、関係性を示し、hrefはHypertext Reference（ハイパーテキストリファレンス）の略で、参照先を示します。
link要素とは
- headタグ内に記述する
- ブラウザや検索エンジンに関係性や参照先を知らせる
これだけで記述したページと外部のファイルやサイト（ページ）などが関連付きます。
Resource Hints
Resource Hintsは、Webページが必要とするリソースや接続を事前に準備するための指示をブラウザに出す仕組みです。次の4つが代表的なAPIです
| Resource Hint | notes |
|---|---|
| preconnect | connect(TCPハンドシェイク、TLSネゴシエーションなど)を事前に処理します |
| prefetch | 画像やCSSのリソースを予めダウンロードし、キャッシュに格納します |
| prerender | リンク先のページをダウンロードし、バックグラウンドでDOM構築、JavaScript実行を行います |
| dns-prefetch | 外部からのリソース読み込みの時に、事前に名前解決します |
今回はこの中からdns-prefetchを使用して、グーグルアドセンスの広告表示を少しだけ速く表示できるようにします。
DNSプリフェッチ
DNSプリフェッチ（dns-prefetch）は、ブラウザが外部ドメインにアクセスする前にDNSの名前解決を済ませておく機能です。 これにより、広告や外部画像の読み込み時に発生する“待ち時間”を短縮できます。
<link rel='dns-prefetch' href='参照先' />- rel="dns-prefetch"：DNS解決を先に済ませる指示
- href：事前に解決しておきたい外部ドメイン
rel属性値にdns-prefetch、href属性値にGoogleAdsense関連の参照先を記述します。headタグ内のリンク要素に続いて記述します。
このコードは、できるだけ<head>タグの上部に記述するのがポイントです。
Google AdSenseに効く！DNSプリフェッチの記述例
<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' />これらをすべて<head>内の他の<link>要素の後や、CSSよりも前に設置することで、ユーザーがページを開いた直後から広告の準備が進み、結果的に表示が速くなります。
特にAdSenseやアフィリエイト広告で収益を上げたい方にとって、「表示の速さ」はかなり重要なポイントです。
「ちょっとでも速くなるならやっておきたい」 そんな小さな工夫の積み重ねが、サイトの快適さにつながり、結果的にクリック率や収益アップにもつながると思います。
参考サイト：JPRS用語辞典
まとめ
DNSプリフェッチは最初に読み込んだページ自体に効果がでるのではなく、次のページに移動したときにGoogleアドセンス広告の表示高速化を実現します。
いかがでしたでしょうか？たった5行の記述だけです。PagespeedInsightのスコアダウンもありませんでしたので、やってみる価値はあるかと思います。
以上、プリフェッチでアドセンス広告の表示高速化レポでした( ´ ▽ ` )ﾉ。
画像の遅延読み込み実装でサイト表示高速化
PagespeedInsightのスコア改善に役立つ画像遅延読み込みの実装方法についてわかりやすく解説します
画像を軽くする最適化はお済みですか？
画像にはいろいろな情報が入っています。ムダな部分を削除して容量を小さくしましょう。
CDNとレンタルサーバーのjsファイル読み込み比較
jsファイルを利用できるCDNのパフォーマンスと稼働時間を調べてみました。
ソースコードのハイライト表示のやり方
負担が少ない軽量ライブラリを使用して、ハイライト表示する方法を解説。
縦スクロール時に横揺れするサイトの修正方法
縦クロールしたときブレたり横揺れてしまう場合のCSS対処法を解説（スマホタブレット）
中央寄せした文字列を左揃えで折り返す方法
折り返しは左寄せ、文字は中央に配置したい。簡単だけどヘッダーエリアでは必須テクです。
グーグルアドセンス広告がはみ出す時の修正方法
レスポンシブ広告が横にはみ出すために起こるスマホの横揺れを解消！
Googleアドセンスが中央に寄らない場合のやり方
デフォルトで画面いっぱいに表示されるアドセンスですが、なぜかセンタリング出来ない場合の対処法を解説します。