Performance: preload/prefetch/prerender pages & assets into browser cache

[garrett]

When looking through a few issues today, I saw https://github.com/cockpit-project/cockpit/issues/9055, which talks about using Cockpit over a slow connection, from the point of view of page loading feedback.

This issue is about speeding up interactive performance through HTML5 hints to instruct browsers to pull down content when idle on pages.

Example uses:

• The log in screen could pull in resources (CSS, fonts, JS accessible when not logged in) used by the shell, dashboard view (if applicable) and host overview page.
• The shell could pull in resources used by the host pages.
• Hovering over links in the navigation could start loading assets before the click happens.
• Pages could be pre-rendered before switching, so switching is instant.
• Machines page could warm up connections to externals (like the link to VMs and oVirt)

These preload/prefetch/prerender (and other related, like preconnect and dns-prefetch) hints are nicely explained at https://medium.com/@luisvieira_gmr/html5-prefetch-1e54f6dda15d

Almost all browsers* now support most of these pre- directives, so it would definitely be a perceived speed boost.

(* Unsprisingly, IE & Safari lag behind in support in half of these and Edge is shaky with a preconnect. But other browsers now have full support of all of the directives. And if a browser doesn't support it, it just ignores it and nothing bad happens.)

[garrett]

There's another useful article @ https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/

[garrett]

Note: Browser support has improved since I opened this, so it's even more useful to do.