Speculative Loading

外掛說明

這個外掛能為網站加入對 Speculation Rules API 的支援,這個 API 允許依據使用者互動方式動態擷取某些網址以定義規則。

請參考 Speculation Rules WICG 規格草案

By default, the plugin is configured to prerender WordPress frontend URLs when the user hovers over a relevant link. This can be customized via the “Speculative Loading” section under Settings > Reading.

A filter can be used to exclude certain URL paths from being eligible for prefetching and prerendering (see FAQ section). Alternatively, you can add the ‘no-prerender’ CSS class to any link (<a> tag) that should not be prerendered. See FAQ for more information.

瀏覽器支援

The Speculation Rules API is a new web API, and the functionality used by the plugin is supported in Chromium-based browsers such as Chrome, Edge, or Opera using version 121 or above. Other browsers such as Safari and Firefox will ignore the functionality with no ill effects but will not benefit from the speculative loading. Note that extensions may disable preloading by default (for example, uBlock Origin does this).

Other browsers will not see any adverse effects, however the feature will not work for those clients.

這個外掛就是之前的 Speculation Rules 外掛。

安裝方式

自動安裝

  1. 前往 [外掛]→[安裝外掛]
  2. 搜尋「Speculative Loading」
  3. 安裝並啟用 Speculative Loading 外掛。

手動安裝

  1. 將外掛安裝壓縮檔解壓縮所得的 speculation-rules 資料夾上傳至網站的 /wp-content/plugins/ 目錄中。
  2. 前往 [外掛] 頁面。
  3. 啟用 Speculative Loading 外掛。

常見問題集

如何將某些網址排除於預先擷取及預先轉譯之外?

Not every URL can be reasonably prerendered. Prerendering static content is typically reliable, however prerendering interactive content, such as a logout URL, can lead to issues. For this reason, certain WordPress core URLs such as /wp-login.php and /wp-admin/* are excluded from prefetching and prerendering. Additionally, any URL generated with wp_nonce_url() (or which contain the _wpnonce query var) is also ignored. You can exclude additional URL patterns by using the plsr_speculation_rules_href_exclude_paths filter.

This example would ensure that URLs like https://example.com/cart/ or https://example.com/cart/foo would be excluded from prefetching and prerendering.

<?php

add_filter(
    'plsr_speculation_rules_href_exclude_paths',
    function ( array $exclude_paths ): array {
        $exclude_paths[] = '/cart/*';
        return $exclude_paths;
    }
);

Keep in mind that sometimes it may be useful to exclude a URL from prerendering while still allowing it to be prefetched. For example, a page with client-side JavaScript to update user state should probably not be prerendered, but it would be reasonable to prefetch.

For this purpose, the plsr_speculation_rules_href_exclude_paths filter receives the current mode (either “prefetch” or “prerender”) to provide conditional exclusions.

The following example would ensure that URLs like https://example.com/products/... cannot be prerendered, while still allowing them to be prefetched.

<?php

add_filter(
    'plsr_speculation_rules_href_exclude_paths',
    function ( array $exclude_paths, string $mode ): array {
        if ( 'prerender' === $mode ) {
            $exclude_paths[] = '/products/*';
        }
        return $exclude_paths;
    },
    10,
    2
);

As mentioned above, adding the no-prerender CSS class to a link will prevent it from being prerendered (but not prefetched). Additionally, links with rel=nofollow will neither be prefetched nor prerendered because some plugins add this to non-idempotent links (e.g. add to cart); such links ideally should rather be buttons which trigger a POST request or at least they should use wp_nonce_url().

How will this impact analytics and personalization?

Prerendering can affect analytics and personalization.

For client-side JavaScript, is recommended to delay these until the page clicks and some solutions (like Google Analytics) already do this automatically for prerender. See Impact on Analytics. Additionally, cross-origin iframes are not loaded until activation which can further avoid issues here.

Speculating on hover (moderate) increases the chance the page will be loaded, over preloading without this signal, and thus reduces the risk here. Alternatively, the plugin offers to only speculate on mouse/pointer down (conservative) which further reduces the risk here and is an option for sites which are concerned about this, at the cost of having less of a lead time and so less of a performance gain.

A prerendered page is linked to the page that prerenders it, so personalisation may already be known by this point and changes (e.g. browsing other products, or logging in/out) may require a new page load, and hence a new prerender anyway, which will take these into account. But it definitely is something to be aware of and test!

使用者可以在何處提交外掛意見反應?

非常鼓勵也感謝使用者提供意見反應,尤其是這個外掛會是將來 WordPress 核心程式的功能。使用者如果有任何建議或功能要求,可以在 WordPress 效能團隊的 GitHub 存放庫提出。如果對這個外掛有需要疑難排解協助或提出問題之處,請在外掛的技術支援論壇提出。

在何處可以回報安全性程式碼錯誤?

效能團隊及 WordPress 社群對安全性程式碼錯誤一向嚴陣以待,我們非常感謝使用者披露相關發現所付出的心力,並會盡全力解決使用者提出的問題。

如需回報安全性問題,請參考 WordPress HackerOne 計畫。

如何為這個外掛做出貢獻?

非常感謝各位的各種貢獻!請參考核心程式效能團隊手冊以進一步了解參與的方式。

使用者評論

2024 年 7 月 19 日 1 則留言
I was using another plugin which does a similar job but Speculative Loading appears to be substantially quicker. Using on about 10 sites and no issues. Thank you
2024 年 5 月 27 日
Es verkürzt die Ladzeit für einen Benutzer sichtbar, auch wenn im Hintergrund die Seite gleichschnell geladen wird, so fühlt es sich für einen Benutzer extrem schnell an.
2024 年 5 月 8 日 1 則留言
I’ve currently activated this plugin on five sites, some on one server, and then others on another. The plugin has yet to present any plugin conflicts or other issues. The time to load pages is drastically improved based on user intent, and based on this alone, I cannot recommend this plugin enough. I haven’t tested the sites with Lighthouse, but honestly, I don’t feel the need to do that, because it’s about the user experience first, and that is such an improvement with this plugin. Thank you!
閱讀全部 16 則使用者評論

參與者及開發者

以下人員參與了開源軟體〈Speculative Loading〉的開發相關工作。

參與者

〈Speculative Loading〉外掛目前已有 8 個本地化語言版本。 感謝全部譯者為這個外掛做出的貢獻。

將〈Speculative Loading〉外掛本地化為台灣繁體中文版

對開發相關資訊感興趣?

任何人均可瀏覽程式碼、查看 SVN 存放庫,或透過 RSS 訂閱開發記錄

變更記錄

1.3.1

Bug Fixes

  • Check if rel contains nofollow instead of being just nofollow when excluding speculative loading. (1232)

1.3.0

Enhancements

  • Prevent speculatively loading links to the uploads, content, plugins, template, or stylesheet directories. (1167)
  • Facilitate embedding Speculative Loading in other plugins/themes. (1159)
  • Improve overall code quality with stricter static analysis checks. (775)
  • Bump minimum PHP requirement to 7.2. (1130)

1.2.2

Bug Fixes

  • Fix composition of href exclude paths to account for JSON encoding and differing site/home URLs. (1164)

Documentation

  • Update readme with browser support and FAQ section about analytics and personalization. (1155)

1.2.1

Enhancements

  • Add settings link to Speculative Loading plugin action links. (1145)
  • Bump minimum PHP version to 7.2. (1130)

Bug Fixes

  • Exclude _wpnonce URLs in speculation rules. (1143)
  • Exclude rel=nofollow links from prefetch/prerender. (1142)

1.2.0

  • Add missing uninstall.php to remove plugin’s database option. (1128)

1.1.0

  • Allow excluding URL patterns from prerendering or prefetching specifically. (1025)
  • Rename plugin to “Speculative Loading”. (1101)
  • Add Speculative Loading generator tag. (1102)
  • Bump minimum required WP version to 6.4. (1062)
  • Update tested WordPress version to 6.5. (1027)

1.0.1

  • Escape path prefix and restrict it to be a pathname in Speculation Rules. (951)
  • Force HTML5 script theme support when printing JSON script. (952)
  • Add icon and banner assets for plugin directory. (987)

1.0.0

  • Initial release of the Speculative Loading plugin as a standalone plugin. (733)