Cocoonでpreconnectやdns-prefetchを追加したい【WordPress】

Cocoonでpreconnectやdns-prefetchを追加したい【WordPress】 WordPress

こんにちは、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なら設定の高速化から簡単設定

Cocoonでpreconnectとdns-prefetchを設定する
Cocoonでpreconnectとdns-prefetchを設定する

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

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