「DNS Prefetch」を記入してページアクセススピードアップに貢献

Google AdSenseの広告を導入してから「なかなか表示されない」とか「ページ内の一部だけ表示しない」って症状を見かけるので、しっかり表示できる方法がないかなーっとグーグル先生に問い合わせていたら、今回の「DNS Prefetch」を記入してページアクセス速度アップ方法をみつけたので、メモメモ(´・ω・`)

「DNS Prefetch」で外部サイトからの情報を表示前から先に取得

ページにアクセスした際に、ページの表示を同時に外部サイトからの情報(Google AdSense情報や、Facebook・Twitterブログパーツなど)を事前に取得しておき、表示する際に高速表示ができる様に出来るコードだそうです。

こんな良いところ取りのコードは設置するしかないでしょう!(;°ロ°)

こちらの技術は「Resource Hints」になります(´・ω・`)詳しくは下記のサイトを参考にしてください。

「DNS Prefetch」設置コード

ソースコードはこんな感じに(´・ω・`)つ◎

大手サイトなどをソースコードを参照すると「preconnect」と「dns-prefetch」を併記したほうが良いケースがあるみたいですので、

  • 確実に必要なコード:「dns-prefetch」「preconnect」を併記
    SNSブログパーツ、Google Analyticsなど
  • それ以外で問題ないコード:「dns-prefetch」のみ記述
    アフェリエイト広告など

で、別けています。各サービスごとに別けてますので必要に応じて使い分けてください。

設置の際は、「meta charset=UTF-8″」の直後など、なるだけソースコードの上の方に書くと良いみたい。

注意点として、「dns-prefetch」は、HTTPS(SSL)ページではデフォルトで無効になるのですが、一行目の「meta http-equiv=”x-dns-prefetch-control” content=”on”」を記述すれば、HTTPS(SSL)ページでも使えるようになるみたいです(´・ω・`)

最後に

実はこのコードの書きすぎは逆にアクセススピードが落ちるケースもあるみたいで…(;・∀・)

Chromeの「検証」→「ネットワーク」や、Firefoxの「要素を調査」→「ネットワーク」をみながらアクセス状況をみて微調整したほうが良いのかも知れません!

難しかったら、「Google Analytics」や「各SNS用パーツ」だけでも記述しておけばOKかなっと(=ω=)

とりあえず、こんなコード試してますって感じで( ゜д゜)ノ

参照サイト:

記事TAG :


Leave a Comment

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

PROFILE

MeteorDrive ネコノ

戦略的な提案型デザイナーとして日夜奮闘しています( ゜д゜)ノ

詳細情報はこちら

Amazon SEARCH

ENTRY RANKING