AdSenseの表示を高速化するために「DNS Prefetch」であらかじめ先読みする

Mon, 05 Mar 2018 21:17:48 +0900

きっかけはうっかりテーマを初期化

ブログのデザインをそろそろ変えようかな～とWordpress感覚で試しにMovableTypeのテンプレートをテーマを変更したら、以前のテンプレートがすべて初期化されてしまいました…。

それまではCloudFlare（CDN）と組み合わせてGTmetrixやPageSpeed Insightsの計測でページの表示が1～2秒台でした。

以前のテーマに戻してもコツコツ構築してきた高速化さるための設定を加えたテンプレートがすべて消えしました…。Wordpressの感覚でテーマの雰囲気だけ見たかっただけなのに完全に初期化されてしまいました。バックアップもしていなかったのでショックです。MovableTypeの場合は管理画面の［ツール］-［テーマのエクスポート］からバックアップをとっておかないといけなかったみたいです…。

後戻りもできないので初期化ついでに新しいテーマに変え、コツコツいじってレイアウトやらデザインを変更して、計測したら10～15秒台まで落ちてしまいました。そのうちの5～6秒がサーバーの応答時間でした。なんでだろう？

いままでどうやって高速化のしてきたのか施した方法が思い出せませんが、新しいテーマでのAdSenseの広告表示のもたつきがきになるので、とりあえずここの読み込みを速くできないかな？と調べているとdns-prefetchというのを見つけました。

DNS Prefetchであらかじめ先読み

DNS Prefetchは特定のホスト名に対するDNSの事前解決を強制的に行うもののようです。このブログではどのページにも共通してAdSenseを表示しているので、そういったURLはあらかじめ以下のタグで事前読み込みしておくURLを指定します。効果がどのくらいあるのか確認はしていませんが、とりあえずメモ。

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//pagead2.googlesyndication.com">
<link rel="dns-prefetch" href="//googleads.g.doubleclick.net">
<link rel="dns-prefetch" href="//googleads4.g.doubleclick.net">
<link rel="dns-prefetch" href="//tpc.googlesyndication.com">
<link rel="dns-prefetch" href="//www.gstatic.com">

****の直後あたりでとにかく上の方に書くといいみたいです。SNSのシェアボタンや外部のJavaスクリプトの読込にも使えるようです。

ChromeによるHTTPSでのDNS Prefetch

以下のページを日本語に翻訳してみたところ、「ChromiumはHTTPSページに表示されるハイパーリンク内のホスト名をプリフェッチしません。」とあります。

http://dev.chromium.org/developers/design-documents/dns-prefetching http://dev.chromium.org/developers/design-documents/dns-prefetching

一瞬ドキッとしましたが、最初の1行目のコレ↓でHTTPSページでもChrome（ブラウザ側）のDNS preftch が有効化されるみたいです。いろいろな参考ページで省略されていましたが、絶対書いたほうがよさそうです。

<meta http-equiv="x-dns-prefetch-control" content="on">

Javascript化してソースの見栄えを整理するする

たくさんのURLを事前読込するとタグ下に****がズラズラ並んでソースの見栄えが悪くなります。これを解消したい場合は以下が参考になります。以下のページではJavascript化して先読みするURLを隠していました。

http://tokkono.cute.coocan.jp/demo/prefetch/?page=3 http://tokkono.cute.coocan.jp/demo/prefetch/?page=3

ソースを見ると、タグの直前に以下のJavascriptを読み込むコードがあります。

<!-- DNS プリフェッチの設定 -->
<script src="js/prefetch.js"></script>

そして、このJSのソースを見ると以下のようになっていました。

(function(document) {
var servers = [
　　/* evernote
　　"static.evernote.com" //*/<br>

    
　　/* pocket */
　　,"d7x5nblzs94me.cloudfront.net"
　　,"widgets.getpocket.com"<br>

	
　　/* mixi
　　,"img.mixi.net"
　　,"static.mixi.jp"
　　,"plugins.mixi.jp" //*/<br>

	
　　/* google analytics, google +1 */
　　,"oauth.googleusercontent.com"
　　,"ssl.gstatic.com"
　　,"accounts.google.com"
　　,"apis.google.com"
　　,"www.google-analytics.com"<br>

	
　　/* facebook */
　　,"www.facebook.com"
　　,"s-static.ak.facebook.com"
　　,"static.ak.fbcdn.net"
　　,"static.ak.facebook.com"
　　,"connect.facebook.net"<br>

	
　　/* twitter */
　　,"twitter.com"
　　,"cdn.api.twitter.com"
　　,"p.twitter.com"
　　,"platform.twitter.com"<br>

	
　　/* hatena */
　　,"cdn-ak.b.st-hatena.com"
　　,"cdn.api.b.hatena.ne.jp"
　　,"b.st-hatena.com"<br>

	
　　/* zenback
　　,"web-jp.ad-v.jp"
　　,"w.zenback.jp" //*/
], i, e, link = document.createDocumentFragment();<br>

	
　　for (i = servers.length-1; i >= 0; i--) {
　　　　e = document.createElement('link');
　　　　e.setAttribute('rel', 'dns-prefetch');
　　　　e.setAttribute('href', '//' + servers[i]);
　　　　link.appendChild(e);
	}<br>

	
document.getElementsByTagName('head')[0].appendChild(link);
}(document));

が現れた時点でロードされるみたいです。クライアントサイドで実行するので0.1～0.15秒遅くなるみたいですが、ソースをゴチャゴチャさせたくない場合は試してみてください。

数値で比較しないと効果がわからないかも？

主要なほとんどのブラウザはdns-prefetchに対応しているようです。ZenbackとかSNSボタンとかに使われているドメイン20個ぐらいを指定してみたりして高速化を体感できるか試してみました。指定したドメインのすべて先読みされるのか不明ですが、ページのスピードテストしてみました。全体的にあまり表示時間は短縮されませんでした。数値で比較すればわかるのかもしれませんが、そこまで見ませんでした。体感できないレベルの効果しかないのかもしれませんが、やらないよりはやったほうがいいと思います。

表示が遅いのはサーバーかSNSシェアボタンの問題かも？

そもそもサーバーの応答時間が5～6秒かかっているので、AdSenseが遅いといういより、レンタルサーバーが遅い、またはFacebookやTwitterなどのSNSシェアボタンに問題があるのかもしれません。SNSシェアボタンのソースを見直したところ、3秒くらい短縮できました。他にも原因がありそうなので、また時間があるときに検証してみたいと思います。

参考ページ

https://qiita.com/ShinyaOkazawa/items/f95788c67114d0360e40 https://qiita.com/ShinyaOkazawa/items/f95788c67114d0360e40

http://hayashikejinan.com/wordpress/optimize/730/ http://hayashikejinan.com/wordpress/optimize/730/

http://tokkono.cute.coocan.jp/blog/slow/index.php/programming/boostup-socials-with-dns-prefetch/ http://tokkono.cute.coocan.jp/blog/slow/index.php/programming/boostup-socials-with-dns-prefetch/

先読み on qwerty.work