More prefetch notes and improvements

[chrisblakley]

Prefetch can be used more often and can also be triggered via JavaScript so do it a little more often (but not too aggressive).

Maybe make a function that can be called to prefetch a resource (and only does it for 4G effective connection type) and adds the <link rel="prefetch" href="https://whatever.com" /> to the DOM.

On the PHP side, come up with a way to predictively fetch common next-steps. https://github.com/chrisblakley/Nebula/issues/1798 will help, but I want some core Nebula improvements too so we aren't 100% relying on third-party scripts.

[chrisblakley]

Also look into priority hints too.

[chrisblakley]

I've noted some of these before, but others are new:

https://developers.google.com/analytics/devguides/reporting/core/v4/ https://predictjs.firebaseapp.com/ https://github.com/guess-js/guess

[chrisblakley]

Here's what I came up with to actually do the prefetch in JS:

//Prefetch a resource
function nebulaPrefetch(url, callback){
    if ( navigator.connection.effectiveType.toString().indexOf('2g') >= 0 || navigator.connection.saveData ){ //If network connection is 2G or Save Data is enabled
        return false;
    }

    if ( url ){
        window.requestIdleCallback(function(){ //Wait until the browser is idle before prefetching
            jQuery('<link rel="prefetch" href="' + url + '">').on('load', callback).appendTo('head');
        });
    }
}

It can be called like this:

    nebulaPrefetch('get-started/recommendations/', function(){
        //...do something after prefetch loads (optional)
    });

[chrisblakley]

I modified the Service Worker addToCache() function too. Now if using a SW it'll fetch like normal, but otherwise it will attempt to prefetch the resource rather than doing nothing.

[chrisblakley]

Elements to consider prefetching on window load:

• [x] a.btn (All buttons)
• [x] Top level nav items
• [x] Home page when viewing subpage?
• [ ] Previous breadcrumb node?

I think I already prefetch these (via predictive cache) but double check them:

• [x] First search result
• [ ] First post in a query (cat, tag, and custom queries)
• [x] Exact match on 404 pages
  • What about all suggestions on 404 pages?

May decide to defer some of these to child themes main.js... Not sure yet.

[chrisblakley]

I'm going to close this now as I've got everything added that I want. Will re-open or make new tickets for future resource hints.

[chrisblakley]

Found this after I implemented the above, but still a great read: https://calendar.perfplanet.com/2018/all-about-prefetching/

I like the list/names of each prefetch strategy:

• Interaction-Driven Prefetching
• State-Driven Prefetching
• User-Driven Prefetching
• "Download Everything" Prefetching

We use a combination of all of these in the Nebula predictive (pre)fetching.