Site speedup – preloading pages on mouseover

I came across this clever thing for making a website seem faster to user. This is pretty clever since a lot of what makes a computer “seem” fast is the way it responds to the user moreso than how fast it is.

I recall this was an early Apple Macintosh trick – make *something* happen right away when the user interacts so that it seems like the computer is working on the thing. This pleases the user more than actually getting to the work. The comparison at the time was to what Windows would do which is “lock up” and get stuck working on the thing and then eventually inform the user.

What this little snippet of javascript does is it preloads the content of whatever link your mouse hovers over for a little while. Apparently in computer-time, humans hover their mouse *forever* over a link before clicking it. (Not forever really, just a long time in computer-time.) This allows the computer to start loading whatever is at the link just in case the user does happen to click. Making the user’s computer all “be prepared”.

Does this matter? It *should* and stuff. And apparently there are studies that say so. In real life, I shop regularly at amazon.com, target.com, and gap.com and all of them are frustratingly slow — sometimes in the ballpark of 10 seconds to load a page with a lot of products on it (or in amazon’s case a lot of ads for additional products) on it. All these companies seem to be raking in the dollars, so who knows? Maybe it’s just my aging laptop is slow.

Does this code work? I don’t know. Looks like it should in theory work. Just a smidge more javascript for every web page to process. The content claims to be hosted on a Cloudflare something which ought to make it fast to load it.

Is it safe to link to the code the way the author suggests? I don’t know. Seems safe, but I have no idea who this guy is. He says it’s hosted on Cloudflare in some unhackable way, but if someone broke into his account and/or he turned evil then you are loading someone else’s script onto your site and letting it do whatever. That doesn’t sound good.

One could copy the code to their own server and link to it like that, which might improve the safety on that end. I think. At least depending on who you trust more.

It says it is easy to install – just add this code to your site just before </body>. I had read it as before </head> and now that I’m writing about it I realize that’s not what it actually says. I’ll have to look around to see if there is an easy way to do this without modifying theme files.

A lot of this is all so “I don’t know anything at all on the topic” — but it is interesting and something I haven’t seen talked about before.

This is all it takes to add it to your website. Please see the instant page website for exact details, I’m just repeating the code so you can see how easy it is to implement:

Put this HTML snippet just before </body>:

<script src="//instant.page/1.1.0" type="module" integrity="sha384-EwBObn5QAxP8f09iemwAJljc+sU+eUXeL9vSBw1eNmVarwhKk2F9vBEpaN9rsrtp"></script>

Go here for all the details
https://instant.page/

Update

I installed the plugin Woody snippets by William Bontrager. That’s a name I remember from the early internet days and I suspect I was subscribed to the WIllmaster Possibilities newsletter to my aol.com email address. Maybe I’m even still subscribed?

There is a little weirdness in that the website for the plugin does not mention WIlliam Bontrager at all. That’s that thing with WordPress plugins can be acquired by other parties who aren’t the person you thought was making the plugin… another rant coming.

This plugin made it easy to add the instant.page snippet before the </body> tag. Checking on it, it seems like I have a lot of stuff before the </body>, but this snippet is now there too.

So you can see what this does right here on this site. Note that the site also currently uses the W3 Total Cache plugin. So there may be some differences depending on whether you are trying to get a page that has already be created for the cache or not. I’m not sure how that works other than if you load a page once then it should have a cache built until it expires or I change the site (then again, maybe YOUR browser is cacheing the page too?).

Docs on the Woody ad snippets

For Completeness

There are probably a LOT of ways to get that snippet in before the <body> tag.

Adding a code snippet with a Code Snippets plugin is a possibility (which I thought I had installed, but apparently NOT in this site — oh man, another rant! Every WordPress install is it’s own unique install with different plugins and settings!


Every WordPress install is it’s own unique install with different plugins and settings!

– a frustrated Eric Shefferman on 2019-02-16

Plus I found some reference on inserting stuff with WordPress hooks. So some links to let you surf forever:

The actual code that does this magic – since the license is permissive, I made a copy of it in case the original ever disappears.

This talks about the functions.php file
https://kriesi.at/support/topic/insert-code-before/

How to add code to just before closing body tag
https://wordpress.stackexchange.com/questions/77196/how-to-add-code-to-just-before-closing-body-tag/

How to Add Code to WordPress Header and Footer
https://kinsta.com/knowledgebase/add-code-wordpress-header-footer/

This looked like it would also insert stuff, but the author is in some kind of fight with Yoast and that’s a whole ‘nother rant about WordPress so I used the Woody one instead.
https://wordpress.org/plugins/header-footer/
https://www.satollo.net/yoast-and-wordpress-seo-this-is-too-much-conflict-with-header-and-footer

Is this site faster?

Maybe? Do you think it’s fast?

It’s hosted on a basic “Package 3” shared hosting account at pair.com for $17.95 per month.

Enjoy 20% off your first pair Networks bill! Use code: 
pairref-XGp4U9mb

The kind of question that I have no idea how to answer:

If the mouseover event triggers pre-loading the page and the page isn’t already cached by W3TC, will the mouseover trigger the cacheing of that page? ‘Cause that alone ought to make the site seem faster? Or do these two processes step on each other? And what happens if you visit a page and then revisit it later? (I suggest you visit and revisit my lovely World’s Most Interesting Privacy Policy Page on 81766.com since it is some of my best work.) What about the browser cache on the user’s computer?

HA! And the “Update” button crashed with the “autosaving” or whatever stupid stuff and ate whatever else I was writing. Enough WordPress rants for one day. So tired.

Update: November 6, 2019
A new post on this topic since instant.page has updated and now has a WordPress plugin version.