こんにちは、mickです。
Googleフォントを使うときなどで、preconnectやdns-prefetchを指定することがあります。
無料テーマCocoonを使っていたら、簡単に指定することができます。
ここではそのやり方を紹介します。
なお、通常のWordPressならプラグインを使うか、PHPを編集する必要があります。
環境：
Cocoon 2.2.6.6
Cocoon-Child 1.1.2
rel属性の値のpreconnectとdns-prefetch
この2つは、link要素のrel属性の値です。
性質上、ヘッダーでCSSやJavaScriptよりも先に指定しておく必要があります。
preconnectはネットワークの事前接続
rel属性の値にpreconnectを指定すると、参照先（href属性の値）にあらかじめ接続要求をすることができます。
複数の接続先（link先）がある場合、並列処理っぽくなるのでリソースの読み込みの待ち時間を減らして、Webサイトの高速化が期待できます。
dns-prefetchは名前解決の事前接続
rel属性の値にdns-prefetchを指定すると、参照先（href属性の値）の名前解決をあらかじめ要求することができます。
これも複数の接続先（link先）がある場合、並列処理っぽくなるので名前解決の待ち時間を減らして、Webサイトの高速化が期待できます。
名前解決は、URLからIPアドレスを探すこと
実は、Webサイトに接続するには、WebサイトのIPアドレスを知る必要があります。
でも、私たち人間が知っているのは、URLだけ。
（例えば、うちならhttps://oneuro.net）
このURLからIPアドレスを探すことが「名前解決」です。
Cocoonなら設定の高速化から簡単設定
WordPressで無料テーマCocoonを使っていたら、簡単に設定できます。
「Cocoon 設定」＞「高速化」
「事前読み込み設定」でドメインを通過すればOK。
例えば、Google Web Fonts なら。
<link rel=”preconnect” href=”https://fonts.gstatic.com”>
を指定することになりますが、これは次を追記するだけでOK。
fonts.gstatic.com
Webページのソースコードをのぞくと次のようになってます。
<link rel="preconnect dns-prefetch" href="//fonts.gstatic.com">ちなみに、Cocoonはあらかじめ「fonts.gstatic.com」の記述があるので追記不要です。
まとめ。
WordPressのCocoonでpreconnectやdns-prefetchを追加する方法を紹介しました。
事前読み込みをあらかじめ設定する場所があるCocoon、最強か。
記事を読んでくれて嬉しいです。
今日もありがとうございました。
初稿 2021/01/31
