Complete Guide to Speculative Loading in WordPress
Complete Guide to Speculative Loading in WordPress WordPress 6.8 introduced a highly requested feature: Speculative Loading. But what exactly is it, and how does it affect your website? In simple terms, and in WordPress specifically, it’s a technique that makes your site feel faster by predicting which page(s) a visitor is likely to view next and preloading them. In this guide, we’ll walk through everything you need to know about speculative loading, specifically as it relates to WordPress. By the end, you’ll be able to decide whether to keep it (it’s enabled by default) or disable it. In this article What is Speculative Loading Speculative Loading in WordPress Speculation Rules API Default Speculation Rules in WordPress How to Customize the WordPress Speculation Rules How to Check if Speculative Loading is Working Issues & Concerns With Speculative Loading How to Disable Speculative Loading in WordPress Should You Use Speculative Loading? What is Speculative Loading Speculative loading is a technique where the browser loads resources (like images, scripts, fonts, and even full pages) before the user actually requests them. These actions are based on predictions as to what pages the user is most likely to visit next or based on hints in the code. This can include DNS lookups, resource fetching, or even rendering documents in the background. Predictions can be supplied by developers (like telling the browser which pages are the most popular) or determined by browser heuristics, such as patterns in the user’s browsing history. When it works well, speculative loading can make your pages load noticeably faster or even feel instant. If you’re using Google Fonts, you might’ve seen code like this in your site’s <head> tag. <link rel='dns-prefetch' href='//fonts.googleapis.com' /> This code, added by the wp_resource_hints() function in WordPress core, tells the browser to perform a DNS lookup in advance for the Google Fonts API. As a result, when the font is actually needed, it loads faster because the DNS step has already been completed. Each time a page loads, WordPress checks the enqueued assets. If it detects assets from external domains (like Google Fonts), it adds the appropriate dns-prefetch or preconnect tags. This is a simple example, but speculative loading goes much further. Beyond just hinting at which assets to prefetch, you can now tell the browser to prefetch or even prerender entire URLs. That’s exactly what was introduced in WordPress 6.8. For those who want a deeper technical understanding, Mozilla’s documentation on speculative loading is an excellent resource. Speculative Loading in WordPress In the WordPress 6.8 release announcement, speculative loading was introduced as a new feature. However, it already existed through the Resource Hints API (like the example shared above). What’s new is that WordPress now includes actual speculative preloading powered by the Speculation Rules API . To maintain consistency, from this point on, when I refer to speculative loading, I’m specifically referring to the new functionality introduced in WordPress 6.8. This feature uses the Speculation Rules API to preload full URLs based on what the...
Preview: ~500 words
Continue reading at Wpexplorer
Read Full Article