DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 970,177 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for I Created A New Way To Make Your Site Faster
〄
〄

Posted on

I Created A New Way To Make Your Site Faster

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)

Collapse
 
ajeet profile image
Ajeet Yadav

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

  • Preload pages in the viewport (similar to Quicklink)
  • Preload pages on mouse hover (similar to Instant.page)
  • Limits the number of preloads per second
  • Stops preloading if the server is busy
  • Understands the user’s connection and preferences
  • 1KB gzipped

wpspeedmatters.com/quicklink-vs-in...

Do check this once.

Thanks

Collapse
 
fleshmecha profile image
〄 Author • Edited on

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.

Collapse
 
ben profile image
Ben Halpern

DEV uses functionality like this. It's definitely a useful approach

Collapse
 
detzam profile image
webstuff

Interesting idea, but in non enterprise sites people test the speed using google s pagespeed. Test your approach with pagespeed too

Collapse
 
sebbdk profile image
Sebastian Vargr

Can you elaborate on this, are we looking for less biased data, or a common place of reference?

Collapse
 
fleshmecha profile image
〄 Author • Edited on

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.

Collapse
 
detzam profile image
webstuff

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.

Collapse
 
arberbr profile image
Arber Braja

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.

Collapse
 
fleshmecha profile image
〄 Author

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?

Collapse
 
borisschapira profile image
Boris Schapira
Collapse
 
anwar_nairi profile image
Anwar

Awesome! I should consider adding this someday.

Collapse
 
foxcode profile image
foxCode

Something like: instant.page/

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

β­οΈπŸŽ€ JavaScript Visualized: Promises & Async/Await

async await