browser page preloading

[mikewra]

Hi,

 

If tl;dr, then will adding this to the header.tpl get the quick-order page preloaded if cart quantity is greater than zero:

{if isset($cart_qties > $0)}
<link rel="preload" href="//example.com/quick-order" as="html" loadpolicy="next inert">
{/if}

If not tl;dr, the long story:

First, I admittedly rot at PHP so please go easy if I'm completely wrong.

Today, I came across the article One Step Ahead: Improving Performance with Prebrowsing  in A List Apart by S. Valdarrama.  He discusses the pros and cons of preloading the next page.

In my shop, the only page with a high probability as the next page is the shopping cart when an item is added to the cart. Even if they continue shopping, the cart would still reside in the browser's cache until they eventually go to the cart.

There are too many options on the other pages to predict which page is next to justify the load/cost on the user (e.g., cell phone data payment plans).

Ideally, I would like to preload just the css and js for the cart as those two are biggest on that page.  But those file names may well change over time, e.g., client turns off minify or cache.

Which leads me to preloading the quick-order page itself.

Further research led me to W3C "Resource Hints,"   where there are further refinements to preloading. Of those, this one seemed most appropriate.

{if isset($cart_qties > $0)}
<!-- low-priority fetch + do not preprocess -->
<link rel="preload" href="//example.com/quick-order" as="html" loadpolicy="next inert">
{/if}

Any suggestions, critiques are much appreciated.
 

[mikewra]

Quick update.  The above code yields the white screen of death.  More proof of my prowess with php

 

Simply putting this line into header.tpl produces the correct "hint" in the page source.

<link rel="preload" href="//example.com/quick-order" as="html" loadpolicy="next inert">

However, this is not very satisfying as the "hint" to preload comes on any general page load and therefore not at a time of high probability that quick-order will be the next page called.