Quantcast
Channel: QWERTY.WORK
Viewing all articles
Browse latest Browse all 394

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

$
0
0

MovableTypeのテンプレートを試しにテーマを変更したら、以前のテンプレートがすべて初期化されてしまいました...。

それまではCloudFlare(CDN)と組み合わせてGTmetrixPageSpeed 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">
<meta charset=UTF-8">の直後あたりでとにかく上の方に書くといいみたいです。SNSのシェアボタンや外部のJavaスクリプトの読込にも使えるようです。

ChromeによるHTTPSでのDNS Prefetch

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

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

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

別の問題があるのかも?

dns-prefetchは主要なほとんどのブラウザが対応しているようです。書いた数のドメインがすべて先読みされるのか不明ですが、AdSenseに限らずSNSのシェアボタンに使われているURLも手あたり次第記載して、ページのスピードテストしてみました。あまりというか全く時間は短縮されませんでした。グラフィカルに数値で比較すればわかるのかもしれませんが、体感できないレベルの効果しかないのかもしれません。またはサーバーの応答時間が5~6秒かかっているので、レンタルサーバーが遅いのかもしれません。それかテンプレートに問題があるのかもしれません。また時間があるときに検証してみたいと思います。

参考ページ


Viewing all articles
Browse latest Browse all 394

Trending Articles