今日、ウェブページには、ユーザー體験を向上させるためにデザインされた畫像や動(dòng)畫、インタラクティブな要素があふれています。しかし、これらはウェブページの読み込み時(shí)間を遅くする可能性があります。テクノロジーは常に進(jìn)歩していますが、ひとつの目標(biāo)は不変です。誰もがウェブページの読み込みを高速化したいと考えています。ウェブページの読み込みを速くする1つの方法は、ユーザーが閲覧する前にプリレンダリングまたはプリフェッチすることです。

プリレンダリングの歴史

2011年、ChromiumチームはChromeにタブを?qū)毪筏俊?a href="http://gqxi.cn/ja/?golink=aHR0cHM6Ly9ibG9nLmNocm9taXVtLm9yZy8yMDExLzA2L3ByZXJlbmRlcmluZy1pbi1jaHJvbWUuaHRtbA==&nonce=9c4dd4331d" target="_blank" rel="noreferrer noopener">初期のプリレンダリング。.

こうすることで、開発者はユーザーが次に訪れる可能性の高いページをブラウザに警告することができる。ブラウザは、これらのページをバックグラウンドで靜かに取得し、レンダリングする。

利點(diǎn)があるにもかかわらず、この早期プリレンダリング機(jī)能は、多くの帯域幅とCPUリソースを使用し、ユーザーがプリレンダリングされたページを訪問しない場(chǎng)合、プライバシー問題につながる可能性があります。さらに、プリレンダリングするリンクを手動(dòng)で選択する必要がありますが、これは必ずしも効率的とは言えず、実行可能でもありません。

これらの問題のいくつかに対処するため、Chromeではrel=prerenderヒントのプリレンダリング、有利なのはノーステート?プリフェッチ?NoState Prefetchメソッドは、リソースの読み込みを向上させますが、完全なプリレンダリングのように即座にページを読み込むことはできません。

投機(jī)ルールAPIの紹介

投機(jī)ルールAPIは新しい実験的なJSON定義APIで、ナビゲートする前にURLを推測(cè)的にプリロードすることで、レンダリング時(shí)間を短縮し、ユーザーエクスペリエンスを向上させる。

このAPIにより、開発者はJSON形式で定義された構(gòu)造體を使用してルールを設(shè)定できる。script type="speculationrules"ブラウザはこの構(gòu)造を使って、どのURLをプリレンダリングするかを決定することができる。

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "list",
      "urls": ["firstpage.html", "secondpage.html"]
    }
  ]
}
</script>

プリレンダリングの最初のステップであるプリフェッチに関しても同じことが言える：

<script type="speculationrules">
{
  "prefetch": [
    {
      "urls": ["firstpage.html", "secondpage.html"]
    }
  ]
}
</script>

上のコードスニペットは、プリフェッチまたはプリレンダリングするU(xiǎn)RLのリストを指定することで、投機(jī)的ルールAPIがどのように機(jī)能するかを示している。最近、Googleは投機(jī)的ルールAPIへの新たな機(jī)能強(qiáng)化により、以下の機(jī)能が追加された。文書ルールを使って自動(dòng)的にリンクを見つけるオプション。これは、基準(zhǔn)に基づいてドキュメントからURLを取得することによって行われます。どこ.

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "document",
      "where": {
        "and": [
          {
            "href_matches": "/*"
          },
          {
            "not": {
              "href_matches": [
                "/wp-login.php",
                "/wp-admin/*"
              ]
            }
          }
        ]
      },
      "eagerness": "moderate"
    }
  ]
}
</script>

このコード?スニペットでは、WordPressのログインページと管理ページを指すものを除き、ページ上のすべてのURLがプリレンダリングの対象となります。やる気– 熱心(すぐに）、控えめ(200ミリ秒ホバー）と保守的(マウスまたは地面に觸れているとき）。

カスケーディングスタイルシートセレクタはマッチの代わりとして、あるいはマッチと組み合わせて使うこともできる。href = "/stock/stock_detail.html?現(xiàn)在のページのリンクを検索するために使用します：

<script type="speculationrules">
{
  "prerender": [{
    "source": "document",
    "where": {
      "and": [
        { "selector_matches": ".prerender" },
        { "not": {"selector_matches": ".do-not-prerender"}}
      ]
    },
    "eagerness": "moderate"
  }]
}
</script>

推定ルールAPIを使用する場(chǎng)合、Chromeを使用して、ページをチェックする必要があるときにプログラム」タブの「投機(jī)的ロード」バックグラウンド?サービスで確認(rèn)する。

デバッグのセクションで見ていこう。

ブラウザサポート

特定のバージョンから、Chromiumベースのモダンブラウザ（ChromeやEdgeを含む）はどちらも投機(jī)的ルールAPIをサポート.

このAPIはインクリメンタル?エンハンスメントであるため、サポートされているブラウザを使用しているユーザーはロード時(shí)間の短縮の恩恵を受け、その他のブラウザを使用しているユーザーには何ら悪影響はありません。

Speculative Loading WordPressプラグイン

WordPress の投機(jī)的ルール API を利用するためにワードプレス?パフォーマンス?チーム (Googleの開発者を含む）が最近リリースした。おそらくロードされたプラグイン.このプラグインは、読み込まれたページ上のリンクのフロントエンドURLを推測(cè)することをサポートしています。

今のところ、APIがまだ初期段階であるため、このプラグインの採用率は低いが、好意的な評(píng)価も集めている。

デフォルトでは、プラグインは、ユーザーが関連するリンクにマウスを置いたときにWordPressフロントエンドのURLを事前に表示するように設(shè)定されています。セットアップ >読む 下げるおそらく搭載セクションでカスタマイズできる。

つまり、ページ上でリンクされているU(xiǎn)RLはすべてやる気プリレンダリングの設(shè)定控えめこの設(shè)定は通常、リンクの上にカーソルを置いたときにトリガーされます。したがって、プラグインを有効化した後に何かアクションを?qū)g行する必要はありません；箱から出してすぐに使える。.

例えば投機(jī)的ローディングプラグイン。Chrome DevToolsを使ってサイトを検査しエレメント タブ下にスクロールすると、タブがscript type="speculationrules"様々な推測(cè)ルールを追加しました。

プリレンダリングすべきリンクの指定、プリレンダリングすべきでないリンクの指定、熱心さのレベルの設(shè)定に正規(guī)表現(xiàn)を使用する。これらのルールについては、以下で詳しく説明する。

特定のURLがプリフェッチされ、事前に表示されるのを防ぐ

デフォルトでは WP管理者ルーティングはプリレンダリングとプリフェッチから除外される。ルーティングはワードプレス開発者どのルートを優(yōu)先するかを決めることができる。

を使用することができます。plsr_speculation_rules_href_exclude_pathsフィルタは、プリロードされるU(xiǎn)RLのタイプを推測(cè)するためのルールをカスタマイズします。

次のコード例では、URLが類似していることを確認(rèn)している。https://wordpresssite.com/cart/もしかしたらhttps://wordpresssite.com/cart/book/はプリフェッチとプリレンダリングから除外されます：

<?php

add_filter(
    'plsr_speculation_rules_href_exclude_paths'、
    関數(shù) ( $exclude_paths ) { を追加します。
        $exclude_paths[] = '/cart/*'；
        return $exclude_paths；
    }
).

WordPressウェブサイトの投機(jī)的ルールのデバッグ

プリレンダリングされたページは別のレンダラーでレンダリングされるため、アクティブにすると現(xiàn)在のタブに置き換わる隠れた背景タブのように、投機(jī)的ルールのデバッグは厄介です。Chrome チームは、デバッグに使用できるように DevTools で多くの作業(yè)を行いました。

Chrome DevToolsの「アプリケーション タブをクリックし"投機(jī)的ローディング" タブを表示します。このタブでは、推測(cè)、プリレンダリングされたURL、失敗したURLなどに関する詳細(xì)な情報(bào)を開発者に提供します。

ここで、ページ上の5つのリンクは、Speculative rules JSONで設(shè)定されたルールに一致するU(xiǎn)RLに基づいて、以下のようにプリレンダリングできることがわかります。ドキュメントルールによって、ブラウザはページ上の同じソースリンクからこれらのURLを取得することができます。

一部のリンクの「ステータス」が「トリガーされていません」と表示されていますが、これらのリンクのプリレンダリング処理はまだ開始されていません。しかし、ページ上のリンクにカーソルを合わせると、各URLのプリレンダリングによってステータスが変化するのがわかります。

クロームではプリレンダリングに制限を設(shè)けており、緊急度が中程度の場(chǎng)合、プリレンダリングは最大2回までとなっているため、3つ目のリンクにカーソルを合わせると、そのURLの失敗理由が表示される：

右上のドロップダウンメニューを使うか、パネル上部のURLを選択して検査で、DevToolsパネルで使用するレンダラーを切り替えます：

ドロップダウンリスト（および選択された値）は、他のすべてのパネル（たとえば"ネットワーク" パネル)が共有され、リクエストされたページがプリレンダリングされたページであることがわかる：

またはエレメント パネルでページの內(nèi)容を見ることができます：

プリレンダリングされたページをデバッグできるように、プリフェッチすることもできます。投機(jī)的ロード」プラグインでは、必ず「プリフェッチ する「投機(jī)モード.

DevToolsの検査ページを使用し、Speculative Loadingタブに移動(dòng)したら、次のようにします。そうしれいかん プリフェッチは様々なURLに対して行われ、そのルールは変化する。

リンクにカーソルを合わせネットワーク」タブを選択すると、プリフェッチされたリソースが最後に表示される。「タイプカラムが表示されます。これらのリソースは將來のナビゲーション用であり、Chromeは現(xiàn)在のページのリソースを優(yōu)先するため、最も低い優(yōu)先順位で取得されます。

Speculative Rules APIがアナリティクスに與える影響

アナリティクスは、ページビューやイベントを通じてサイトの利用狀況を追跡し、リアルユーザーモニタリング（RUM）を通じてパフォーマンスを評(píng)価するために不可欠です。プリレンダリングがアナリティクスに影響を與えることを知っておくことは重要です。

例えば、Speculative Rules APIを使用する場(chǎng)合、事前にレンダリングされたページが実際に訪問されたときにのみアナリティクスを有効にするための追加コードが必要になる場(chǎng)合があります。Google Analytics、Google Publisher Code (GPT)、Google AdSenseはページがアクティブになるまでトラッキングを遅らせますが、すべてのプロバイダーがデフォルトでこれを行うわけではありません。

これを回避するには、ページがアクティブなときだけ解析を初期化するプロミスを設(shè)定すればよい：

// プリレンダリングされたページのページアクティベーション時(shí)にアナリティクスを有効にするプロミス
const whenActivated = new Promise((resolve) => { {ページアクティベーション時(shí)にアナリティクスを有効にするプロミス。
  if (document.prerendering) {
    document.addEventListener('prerenderingchange', resolve); } else { {.
  } else {
    resolve()；
  }
}).

async function initAnalytics() { // アナリティクスを初期化します。
  await whenActivated; // アナリティクスを初期化します。
  // アナリティクスを初期化する
}

initAnalytics()；

概要

この記事では、Speculative Rules APIとは何か、どのように機(jī)能するのか、WordPressサイトでの使い方について説明します。これはまだ実験的な機(jī)能ですが、徐々に広まりつつあります。投機(jī)的ルールはまだ同じタブ內(nèi)のページに限定されていますが、この制限を減らす努力がなされています。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個(gè)人サイト、中小企業(yè)サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨詢：1025174874
三 Eメール：info@361sale.com
④ 勤務(wù)時(shí)間: 月～金、9:30～18:30、祝日休み