I love a fast website. But it's hard to achieve.
You can make your site faster when you preload the next page the user will navigate to and render it in the background.
The current libraries that do this do not support older browsers.
Every user deserves blazing fast load times.
This is why I made prerender.js, which loads pages before a user clicks on them.
How is this different from current solutions?
prerender.js is designed to work on a mobile phone from 2020 or a PC running Internet Explorer 8. It is designed to be universal.
Isn't prerender expensive for bandwidth? You can't just prerender every link!
Prerender is expensive for bandwidth, so I made prerendering occur on touchstart or mouseover.
Can I make links prerender that are loaded from button clicks?
Here's how to use prerender.js with button hovers:
function buttonRender() {
var x = document.createElement("link");
x.setAttribute("rel", "prerender");
x.setAttribute("href", location.href); //location.href = "/example.html"
document.head.appendChild(x);
}
document.getElementById("mybutton").onmouseover = function() {buttonRender()};
document.getElementById("mybutton").ontouchstart = function() {buttonRender()};
Can I be part of this?
If you want to make the functionality for buttons nicer and neater, make a pull request to the Github repo. Please. I'm asking nicely.
Top comments (12)
Interesting approach. I have been using Flying Pages for some months. Here is what this plugin do (pasting it from the original article):
Flying Pages is built to fix issues with both Quicklink and Instant.page
wpspeedmatters.com/quicklink-vs-in...
Do check this once.
Thanks
prerender.js has better support for older browsers than Flying Pages. Flying Pages is also not useful for me because my website uses many buttons that are not links.
Thanks for the thought.
DEV uses functionality like this. It's definitely a useful approach
Interesting idea, but in non enterprise sites people test the speed using google s pagespeed. Test your approach with pagespeed too
Can you elaborate on this, are we looking for less biased data, or a common place of reference?
My website requires users to log in, so I test speed as a logged in user. How would PageSpeed do that? I need to test the real functionality.
Pagespeed gives you some info about what is refucing your sites speed.
Regarding your accesed users page speed, if your site is slow.. it will be slow in bot parts. Plus i don't create accounts on sites that never load, except if that site really offets something that i need. Like browserstack, when it has to virtualize the selected browser... I hate it , but wait because i need it. When i read your post I thought you wanted to make sites load faster, but can be done by minifying files, reducinf image sizes, adding htaccess ttls, adding cache on the server... Its hard.
Seems like a nice idea. I have used for some time instant.page but trying to focus more on conventional methods of making websites faster (usually is to remove the bloat as much as possible).
Anyway i had a question. Read on the readme file that you create an iframe where you load/prerender the given page. Do you do this for all links on the site (all those that are hovered ofcurse)?
If yes, does each link get its own iframe or they use same iframe ... my question is, if we use these method to help make things faster on websites that have a lot of links and the user is kind of undecided (lets say e-commerce website with a lot of products) ... the website might actually end up getting slow because of the iframes that are being generated.
I dont know if or how you have dealt with this but IMO its something that should be dealt with.
E-commerce is a good use case to think about! Can you make a pull request to the repo where the iframe is generated on mousedown instead of mouseover?
Beware, browser support for prerender is quite limited. That's why a solution like instant.page uses prefetch instead.
Awesome! I should consider adding this someday.
Something like: instant.page/