search

liberapay / liberapay.com

Source code of the recurrent donations platform Liberapay
https://liberapay.com/
1.67k stars 215 forks source link

Page preloading and prerendering #277

Open Calinou opened 8 years ago

Calinou commented 8 years ago

smoothState.js is a jQuery plugin that makes page transitions feel faster. Optional animations are supported, and the library is based on the progressive enhancement philosophy - users with JavaScript disabled or with an unsupported browser can continue to browse the site just fine.

Changaco commented 8 years ago

There might be some issues as we treat some AJAX requests differently than normal requests.

[Edit] Specifically we look for the HTTP header X-Requested-With: XMLHttpRequest. If the preloading requests don't contain that then they should work fine.

Changaco commented 5 years ago

Same thing as a standalone instead of a jQuery plugin: https://instant.page/

Edit: Actually, instant.page isn't exactly the same thing as smoothState.js, it uses the browser's native preloading feature instead of replacing the page's content.

Edit: Let's wait for Firefox to fix its implementation of prefetch: https://bugzilla.mozilla.org/show_bug.cgi?id=1527334

Changaco commented 2 months ago

JavaScript isn't really needed to do this anymore, as Chrome has added a mechanism to tell the browser to do this itself by adding a <script type="speculationrules"> tag in the HTML or a Speculation-Rules HTTP header.

I learned about this from Cloudflare's blog post Introducing Speed Brain: helping web pages load 45% faster. (I turned off Speed Brain for liberapay.com, it's counterproductive since the Liberapay webapp doesn't have static HTML pages.)

Direct link to Google's documentation: Prerender pages in Chrome for instant page navigations.