WordPress：Speculative Loading 投機的読み込み

久しぶりに W3C の Validator で当サイトをチェックしてみましたら「Bad value speculationrules for attribute type on element script: Subtype missing.」というエラーが表示されています。なにこれ？ ということで調べてみました。

• Speculative Loading はログインしていると働かない
• Speculative Loading（投機的読み込み）とは
• WordPress の投機的読み込み実装
• W3C の Validator のエラーについて

01Speculative Loading はログインしていると働かない

エラーはこれです。

で、サイトの HTMLソースを見てみたのですが、そもそもそんな行自体がありません。

しばらく悩みました（笑）。

あれこれググり、WordPress 6.8 から Speculative Loading という新機能が導入されたことはわかったんですが、HTMLソースにないものがどうして Validator に引っかかるんでしょう？

ログアウトしてみてわかりました。この Speculative Loading という機能はログインしていますと働かない設定になっています。ログアウトしますと次のコードがフッターに追加されます。私はログイン状態で見ていたのに、当然ながら Validator はログインしていなかったということです。

<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/palmtree\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>

この機能は wp-includes/speculative-loading.php によって追加されるものですが、確かにログインしていますと機能しないようになっています。

なお、この Speculative Loading は以前から公式のプラグインとして存在していたようで、WordPress 6.8 から公式に本体に導入されたということです。

02Speculative Loading（投機的読み込み）とは

で、その Speculative Loading とはなにかですが、Google の AI によれば、

投機的読み込み（Speculative Loading）とは、ユーザーが実際にアクセスする前に、次に訪問する可能性の高いページを予測して、そのページのコンテンツやリソースを事前に読み込むことで、ウェブサイトの表示速度を向上させる技術です。

ということです。具体的にはフッターに追加される JSONデータでブラウザに先読みを指示するわけですが、対応ブラウザは、これも Google AI によれば、

Speculation Rules API は、Chromium ベースのブラウザでサポートされています。具体的には、Chrome と Edge が対応しています。Chrome for Developers、Kinstaによると、他のブラウザ、特にSafariやFirefoxは、まだこのAPIをサポートしていません。

• ブラウザーの互換性

詳しくはこちらのリンク先にあります。

対応していなければ働かないだけですのでデフォルトのままにしておいてもいいように思います。設定変更もいろいろ可能なようですし、無効にすることもできます。

03WordPress の投機的読み込み実装

Speculation Rules API 投棄ルール API の詳しい解説は MDN Web Docs にあります。

• 投棄ルール API

また、WordPress への導入についての説明は WORDPRESS.org にあります。

• Speculative Loading in 6.8

私が悩んだとおり、ユーザーがログインしている場合は無効になっています。また、パーマリンクが「基本」のままの場合も無効になるとのことです。https://ドメイン/?p=123 というやつですね。それ以外はすべてのページで投機的読み込みが有効になっています。

で、デフォルトで実装される投機的読み込みの設定 JSON を整形しますとこうなります。

{
  "prefetch": [
    {
      "source": "document",
      "where": {
        "and": [
          {
            "href_matches": "/*"
          },
          {
            "not": {
              "href_matches": [
                "/wp-*.php",
                "/wp-admin/*",
                "/wp-content/uploads/*",
                "/wp-content/*",
                "/wp-content/plugins/*",
                "/wp-content/themes/palmtree/*",
                "/*\\?(.+)"
              ]
            }
          },
          {
            "not": {
              "selector_matches": "a[rel~=\"nofollow\"]"
            }
          },
          {
            "not": {
              "selector_matches": ".no-prefetch, .no-prefetch a"
            }
          }
        ]
      },
      "eagerness": "conservative"
    }
  ]
}

これを自身のサイトに応じて調整するのは結構難しそうです。

• Complete Guide to Speculative Loading in WordPress
• WordPress 6.8新機能のSpeculative Loadingについて徹底解説!

こちらの記事が参考になりますがそれでも難しそうです。

投機的読み込みを無効にする場合は、functions.php に以下を書き込めば無効にできます。

add_filter( 'wp_speculation_rules_configuration', '__return_null' );

進歩するということは作業が増えるということですね。

04W3C の Validator のエラーについて

これについては

• https://core.trac.wordpress.org/ticket/63289

こちらのこの件についてのスレッドがあります。特に問題はないでしょう。