【Resource Hints】dns-prefetch(プリフェッチ)とは?リリース！使い方！遅くなる?重くなる！メリットやデメリット

2020.03.29にCocoon設定メニューにある「高速化」に「事前読み込み」設定を追加されました。

linkタグによるdns-prefetchとpreconnectするドメインを設定画面から変更できるようになったとのことです。

ただCocoonの高速化機能に下記の記載がありました。

linkタグでdns-prefetchとpreconnectを用いて、外部リソース読み込みの高速化を行います。よくわからない場合は、デフォルトのままご利用ください。

引用元：https://wp-cocoon.com/2-1-3/

【Resource Hints】dns-prefetch(プリフェッチ)とは?リリース！使い方！遅くなる?重くなる！メリットやデメリット

Resource Hintsとは、dns-prefetch、preconnect、prefetch、prerenderの4つの要素から構成されます。

それぞれが持つ機能に違いはありますが、共通していることは、リソースを事前に読み込んでおくことでページ遷移時のパフォーマンスを向上させる。

Cocoonではdns-prefetchとpreconnectがリリースされたということになりますね。

メリット

1. ユーザのマイページに遷移することが予想されるログインページで使用し、マイページで使われるリソースを事前に取得しておく
2. フォームページなどにおいて、最終確認画面で必要なリソースを事前に取得しておく

バックグラウンドで事前取得するとは言え、JavaScriptを実行する訳ではないので、Googleアナリティクスで開いていない次ページをPV計上、などはされないです。

デメリット

1. ・バックグラウンド（別タブ）で処理しているため、ネットワーク帯域を消費する。
2. 読み込み時にアニメーションするようなページの場合、開くとアニメーションが終わっている可能性がある。
3. スマホユーザーのデータ使用量を無駄に消費する可能性がある。

dns-prefetch(プリフェッチ)の設定の方法

preconnect

DNSルックアップに加えて、connect(TCPハンドシェイク、TLSネゴシエーション等)まで事前に処理します。IE11以外のブラウザではサポートされています。

<link rel=“preconnect” href=“//example.com”>

<link rel=“preconnect” href=“//cdn.example.com” crossorigin>

dns-prefetch

外部サイトからリソースを取得する際は、DNSルックアップというドメイン名からIPアドレスを調べる作業が発生しています。

これを予め行っておくことで遷移時の処理をできるだけ省略しようという機能です。PCではほとんどのブラウザでサポートされています。スマートフォンではサポートされていない場合があります

<link rel=“dns-prefetch” href=“//example.com”>

prefetch

予めリソースをダウンロードしてキャッシュに格納します。

ちらは画像やCSSのようなリソースを取得します。

as属性で取得するリソースに応じてコンテキストを指定することができ、それによってブラウザは最適なプロセスでリソースを取得します。

リソースのサイズが大きかったり、ネットワーク速度が遅かったりする場合ブラウザはprefetchを行いません。Safari以外のブラウザではサポートされています。

<link rel=“prefetch” href=“//example.com/next-page.html” as=“html” crossorigin=“use-credentials”>

<link rel=“prefetch” href=“/library.js” as=“script”>

prerender

イメージとしては、不可視のタブでページを先に開いているような感覚です。

このときCSSの適用やJavaScriptの実行も行われるため、アクセス前なのに解析ビーコンが反応したり、CSSのアニメーションが動いてしまい、遷移したときには終わった状態になってしまう可能性があります。

その場合は Page Visibility API などで対策する必要があります。

まとめ

cocoonの場合は名前解決を事前に設定しておきますよということなんですね。

→JETPACKとは？必要か？重くなったWEBサイトやブログ！メリットやデメリット！