DNSプリフェッチとは?どうやって設定するの?高速化効果は?

DNSプリフェチ
この記事は約4分で読めます。

DNSプリフェッチとはどういった技術か?

普段ウェブサイトを開く際、必ずDNSルックアップというのが裏側で行われています。

ウェブページの表示速度=DNSルックアップ+サーバーからのデータ準備+サーバーからのデータ転送+ブラウザ上での描画で大まかに構成されています。

DNSプリフェッチではDNSルックアップ部分を事前に済ませておいて、表示速度を改善するとされている高速化手法の1つです。

ただし高速化すると言っても、0.1秒~0.2秒前後の違いとなります。

DNSプリフェッチの設定方法

 

DNS Prefetch Generator

ジェネレーターを使用して必要なコードを生成

DNS Prefetch Generatorからオレンジ色のブックマークボタンをブラウザのブックマークバーへドラッグアンドドロップします。

DNS Prefetch Generator
This is JavaScript Bookmarklet can generate DNS Prefetch Tags with 1-Click.

自分が運営するサイトを開いて、ブックマークバーに保存したボタンをクリックすると上記画面の様にヒョ時中のサイトで読み込んでいる外部ドメインのDNSプリフェチ情報が自動生成されます。

このサイトは下記の情報が生成されました。アドセンス等を使っていると結構読み込む外部ドメインが多いです。

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//www.google.com">
<link rel="dns-prefetch" href="//secure.gravatar.com">
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//assets.pinterest.com">
<link rel="dns-prefetch" href="//www.googletagservices.com">
<link rel="dns-prefetch" href="//www.google-analytics.com">
<link rel="dns-prefetch" href="//pagead2.googlesyndication.com">
<link rel="dns-prefetch" href="//www.googletagmanager.com">
<link rel="dns-prefetch" href="//ajax.googleapis.com">
<link rel="dns-prefetch" href="//cdnjs.cloudflare.com">
<link rel="dns-prefetch" href="//adservice.google.co.jp">
<link rel="dns-prefetch" href="//adservice.google.com">
<link rel="dns-prefetch" href="//s0.wp.com">
<link rel="dns-prefetch" href="//cdn.jsdelivr.net">
<link rel="dns-prefetch" href="//log.pinterest.com">

headタグに生成されたコードを貼付け

WordPressの場合、テーマやプラグインでヘッド内へ様々なHTMLやコードを挿入できる機能があるのでそれを使うのが一番簡単です。そのままhead部分へ貼り付けるだけで設定できます。

DNSプリフェッチの効果はある?

0.1~0.2秒前後の変化のため省いてしまっても大丈夫な高速化手法の1つです。

ただより速くしたいのであれば実装して損はないと言えます。

より大々的に高速化したい場合はWordPress高速化を実現しやすいConohaWordPress専用サーバーでKUSANAGIを利用した高速WP環境を活用するのが手っ取り早いです。

WordPress高速化
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
WordPress高速化の教科書

コメント

タイトルとURLをコピーしました