WordPressでfuinctions.phpを用いてDNSプリフェッチを追加する

Cat WEBサイト構築Tag by cubismer
DNSプリフェッチをWordPressに追加する
DNSプリフェッチをWordPressに追加する

DNSプリフェッチを削除する情報は見かけますが、追加する情報はあまり見かけなかったのでメモとして。

追加しても、必ずしも良い効果があるわけではなさそうなのが残念です。

構築環境
WordPress4.6.1
PHP7.0.9
MySQL5.5

実現したいこと

実現したいことは以下の通り。

  • DNSプリフェッチを任意で追加する
  • functions.phpに記述して動作させる

なお、functions.phpではなく、jsで追加する情報としては以下の記事がありましたので、functions.phpを使うやり方を探した次第です。

コード

設定しているアドレスは一例ですが、以下の記述でhead内に表示されます。


function add_resource_hints( $hints, $relation_type ) {
  if(!is_admin()){
    if ( 'dns-prefetch' === $relation_type ) {
        $hints[] = '//www.cdn-ak.b.st-hatena.com';
        $hints[] = '//b.st-hatena.com';
        $hints[] = '//cdn.api.b.hatena.ne.jp';
        $hints[] = '//connect.facebook.net';
        $hints[] = '//cdn-ak.b.st-hatena.com';
        $hints[] = '//staticxx.facebook.com';
    }
  }
    return $hints;
}
add_filter( 'wp_resource_hints', 'add_resource_hints', 10, 2 );

なお、例えば http://www.cdn-ak.b.st-hatena.com と記載した場合、httpは削除されますが、wwwプレフィックスは削除されません。

配列に値を追加するためにarray_pushがありますが、$array[]で１つ１つ入れていく方が早いようで、この形にしてみました。

参考にしたのは以下のサイトです。

以下補足。

wp_resource_hints()の引数

wp_resource_hints()の引数ですが、前述のwp_resource_hints()に詳細が書かれていますので、以下に引用します。

/**
* Filters domains and URLs for resource hints of relation type.
*
* @since 4.6.0
*
* @param array $urls URLs to print for resource hints.
* @param string $relation_type The relation type the URLs are printed for, e.g. ‘preconnect’ or ‘prerender’.
*/

dns-prefetchへのURLのセット

dns-prefetchのみ、wp_enqueue_script()かwp_enqueue_style()でセットしたアドレスを自動で取得して表示しているようです。

逆に言えば、wp_enqueue_script()かwp_enqueue_style()でセットしていないものは自動で表示されず、手動で追加する必要があります。

この点を前述のResource Hints in 4.6から引用します。

Well, if a site is not using `wp_enqueue_script()` or `wp_enqueue_style()` for an asset, no hints can be added for that. Otherwise you should ask in the support forums or open a ticket on trac with steps to reproduce.

DNSプリフェッチ使用の可否

ここまで書いては見たものの、現時点ではDNSプリフェッチが有用かどうかの判断がついていません。

ツールによる簡易的な計測なので確かなものではありませんが、自分で計測したところ向上したようには見えませんでした。

この件について、いくつかのサイトから関連する部分を引用します。

有用となる条件

以下のページでは、DNSプリフェッチが有用となる条件が記載されています。

外部サイトの写真やスクリプト等の情報を大量に扱うサイトでは『DNSルックアップ』が頻繁に行われるため、この『DNSプリフェッチ』は非常に有効な機能となり得ます。
しかし外部コンテンツをそれほど使用していないサイトでは無用の機能です。

遅くなる可能性

以下のページでは、DNSプリフェッチを使用すると遅くなる可能性が記載されています。

やってみた感じでは適当にやるだけでは劇的に速くなることは無いし、 むしろ遅くなってしまうと言う感じ。
多分、今のブラウザは賢くなってるので余計な事はしない方が良い、ということだと思います。

モバイルでは有用である可能性

以下はMozilla Developer Networkのページですが、モバイルであれば効果が期待できると書かれています。

特にモバイル環境においては、 DNS プリフェッチによりページの読み込みにかかる時間が劇的に改善されます。例えば、多数の画像が表示されるページにおいて、画像が要求される前に名前解決が行われている場合では読み込み時間が 5% 以上削減されるでしょう。

特定ページのみでの使用

前項と同様、Mozilla Developer Networkのページからの引用となりますが、TOPページで名前解決を図ることで、TOPページではなくサイト全体の速度向上を意図する使い方が書かれています。

特定のホスト名について強制的に予め名前解決を行うというのは、次のような場合に有効と考えられます: トップページそのものでは参照されていないものの、サイト内の他のページでは頻繁に参照されている外部ドメインをトップページにて強制的に名前解決を行うことで、トップページ自体の速度向上は望めませんが、サイト全体でのパフォーマンス向上が期待できます。

検索にしろリンクにしろ、TOPページに最初にランディングする可能性が低い以上、効果はあまり期待できない方法かもしれません。

そこで、ランディングしたページのみを特定して表示させることができればとも思いましたが、その特定方法が思いつかず試せていません。

Firefoxでの有用性の有無

少し本旨とずれますが、FirefoxならDNSの名前解決で遅延があっても悪影響はないと書かれています。

Firefox での実装においては、実際のページコンテンツの取得と並行して DNS による名前解決が行われるため、名前解決に時間がかかっても実際のページコンテンツの取得に遅れが生じることはありません。

上記はDNSプリフィッチの効果というよりは、一般的な状態での名前解決に要する時間についての言及に見えますので、考え方によってはFirefoxにはサイト側によるDNSプリフィッチの効果はないと言えるかもしれません。

結び

色々考えた結果、当サイトではとりあえずUA分岐でモバイルのみDNSプリフェッチを使ってみることにしました。

記事下部に付けているSNSのボタンも、種類が増えればそれなりの数のDNS Lookupが生じていたので、対象はSNS関連に絞っています。

なお、調べた範囲ではDNSプリフェッチが現在有効な方法なのかは疑問がある、という感想です。

計測関連の知識も貧弱なため、何か気付いたことがあれば効果測定を試みたいと思います。

WordPressとDNSプリフェッチ

気になるのは、WordPressが2016年のアップデート(WordPress4.6以降)でDNSプリフェッチを採用した理由です。

英語が不得手なためかよくわかりませんでしたが、preconnectprefetchprerenderを含めて全体として見れば意味があるという意図なのかな、とは考えました。

そういう説明を目にした訳ではないので、根拠のない話ではありますが。

4人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。

コメント欄