coreinfrastructure / best-practices-badge

🏆Open Source Security Foundation (OpenSSF) Best Practices Badge (formerly Core Infrastructure Initiative (CII) Best Practices Badge)
https://www.bestpractices.dev
MIT License
1.22k stars 202 forks source link

Add prefetch on hover in a way that is compatible with Turbolinks #1321

Open david-a-wheeler opened 5 years ago

david-a-wheeler commented 5 years ago

Our performance is acceptable, but there are many ways to improve performance.

We're adding Turbolinks, which helps, but unfortunately Turbolinks doesn't include support for prefetch on hover and isn't directly compatible with InstantClick (which does this). So this page discusses how to have both Turbolinks and prefetch on hover: "Instant page loads with Turbolinks and prefetch".

Basically, it appears that we just need to add the gem Jquery::HoverIntent::Rails and add a line to application.js. We already have JQuery, so it's no big deal to add it. It won't help with touchscreens (which have no hover event), but it should help shave an average of 200msec for laptop users when doing a GET (the most common request). It will add a few bytes to our initial JavaScript download, but since it's compressed that's tiny, and since that's cached that is quickly amortized once the viewer sees more than one page.

We obviously need to test this first, but it looks promising.

david-a-wheeler commented 5 years ago

There are many proposed ways to do this, making it complicated. Ideally Turbolinks would just do this, but it doesn't. So instead, we need to sift through this:

https://github.com/turbolinks/turbolinks/issues/313