Prerender demo

In this case prerendering means that the web browser will fetch the URL's and (pre)renders those web pages in the background.

Injected into this web page

The following script tag is injected into this web page.

Supported webbrowsers will fetch and prerender the URL's listed in the speculationrules object in the background.

The next pages, in the above main menu, should load much faster.

<script type="speculationrules">
{
    "prerender": [{
        "source": "list",
        "urls": [
            "/prerender/index.html",
            "/prerender/movie-detail.html",
            "/prerender/about.html",
            "/prerender/catalog.html"
        ]
    }]
}
</script>

Debugging speculation rules

• Open the Chrome Dev. Tools (F12)
• Click on the "Application" -tab
• And search for "Speculative loads" -panel in the sidebar.
• Expand this menu item and click on the "Speculations" -item

Here you'll find a list of all the speculative loaded URL's and their status.

Inspecting other prerendered pages

In the top right part, of the Chrome Dev. Tools, you'll see a dropdown initially named "Main". Which is the current web page. Clickiing on the menu you can go to, and use all the Dev. Tools, to inspect those "prerenders" URL's.