Speculative Loading

Deskripsi

This plugin adds support for the Speculation Rules API, which allows defining rules by which certain URLs are dynamically prefetched or prerendered based on user interaction.

See the Speculation Rules WICG specification draft.

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.

Browser support

The Speculation Rules API is a new web API, and the specific syntax used by the plugin currently requires using Chrome 121+.

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

This plugin was formerly known as Speculation Rules.

Instalasi

Installation from within WordPress

  1. Visit Plugins > Add New.
  2. Search for Speculative Loading.
  3. Install and activate the Speculative Loading plugin.

Manual installation

  1. Upload the entire speculation-rules folder to the /wp-content/plugins/ directory.
  2. Visit Plugins.
  3. Activate the Speculative Loading plugin.

Tanya Jawab

How can I prevent certain URLs from being prefetched and prerendered?

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().

Where can I submit my plugin feedback?

Feedback is encouraged and much appreciated, especially since this plugin may contain future WordPress core features. If you have suggestions or requests for new features, you can submit them as an issue in the WordPress Performance Team’s GitHub repository. If you need help with troubleshooting or have a question about the plugin, please create a new topic on our support forum.

Where can I report security bugs?

The Performance team and WordPress community take security bugs seriously. We appreciate your efforts to responsibly disclose your findings, and will make every effort to acknowledge your contributions.

To report a security issue, please visit the WordPress HackerOne program.

How can I contribute to the plugin?

Contributions are always welcome! Learn more about how to get involved in the Core Performance Team Handbook.

Ulasan

16 April 2024
I've enabled the plugin on my testing site. It's usually quite slow with poor caching, but it seems to make a big difference in loading time. Almost instant, in some cases. I need to test more, but at fisrt glance, it seems like quite an encouraging step forward.
15 April 2024
Testing figures do not change much, but real life experience greatly improved!
14 April 2024
This is the biggest innovations in web performance since lazy loading.
13 April 2024 1 balasan
It certainly works - I have one site with significant full width banner images and those pages pop open immediately, especially if I have just hesitated before clicking. Trying it on just one site for the moment that has no interactive content. I will be waiting to see more feedback from other users on "Prerendering will lead to faster load times than prefetching. However, in case of interactive content, prefetching may be a safer choice." Hopefully future updates will allow people to search & select pages to be excluded within plugin settings page rather than using filters. While carefully explained in the FAQ section I see many people avoiding using filters or even adding ‘no-prerender’ CSS class to links. That may lead some to have bad experiences. This is especially relevant where WordPress, in recent times, is trying to gain users who have no wish to touch any code no matter how simple. Maybe some Woocommerce pages be pre-excluded In years past pre-loading pages was kind of unethical for bandwidth usage for mobile devices, I appreciate this works on displayed intent of hovering over links. Does the slightest hover trigger the action? ____________________________________ Edit: One example where prerender (and Speculation Mode set to prefetch) caused an issue - I have banners interchanging with smaller cropped versions for mobile devices, this is achieved with css. With prerender or prefetch set both images were displaying. Interestingly "Empty cache and hard reload" of that open page made no difference. Both banner images remained on display. So "interactive content" also includes some CSS and I am assuming js. This could get fiddly to implement. Does it work? Yes Test thoroughly after implementing.
12 April 2024
Thank you! My website has woocommerce and interactive blocks, and with this plugin it seems faster.
Baca semua 7 ulasan

Kontributor & Pengembang

“Speculative Loading” adalah perangkat lunak open source. Berikut ini mereka yang sudah berkontribusi pada plugin ini.

Kontributor

“Speculative Loading” telah diterjemahkan dalam 3 bahasa. Terima kasih kepada para penerjemah untuk kontribusi-nya.

Terjemahkan “Speculative Loading” dalam bahasa Anda.

Tertarik mengembangkan?

Lihat kode, periksa repositori SVN , atau mendaftar ke log pengembangan melalui RSS.

Log Perubahan

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)