Tachyon is a byte sized script that makes your website feel blazingly fast. It does this by prerendering pages before a user navigates to them, making page transitions virtually instant.
Documentation for Tachyon lives at fasterthanlight.net
Quick Links:
- Website (Start here)
- NPM package
- Package source
- Why Tachyon exists
Easy Setup Instructions:
| Tachyon | Instant.Page | Quicklink | Turbolinks | |
|---|---|---|---|---|
| Size | 738 b | 3.14 kb (4.3x larger) |
60.1 kb (83x larger) |
111 kb (153x larger) |
| Bandwidth Overhead |
Lowest | Low | Highest | High |
| Prerendering (Fastest Loads) |
✅ | ❌ | ✅ | ❌ |
| No Addl. Code Required |
✅ | ✅ | ❌ | ❌ |
| Works on ALL links |
✅ | ❌ | ❌ | ❌ |
| Whitelist & Blacklist |
✅ | ❌ | ❌ | ❌ |
Using Tachyon is unbelieveably easy. If you're not using node, you can just include it via script tags. Provided below is the script hosted by unpkg. The source itself lives in the tachyon directory.
<script src="https://unpkg.com/tachyonjs@2.0.1/tachyon.min.js" integrity="sha384-4iJteL1FYnj4Ju83AJvNthpx5gZ1QaXCamXhY3lxhAjTNXUN+NXq5LQV/fXOSRme" type="module" crossorigin defer></script>If you look on the website, there are also easy install instructions for Google Tag Manager, Shopify, WordPress, and more.
npm i tachyonjsTachyon is super tiny, so you can also inline it. If you use the following inlined <script> tags, you are waived from the legal requirement to include a copy of the license.
<script type="module" defer>/* tachyon 2.0.1 */var e=document.body.dataset;const o="tachyonWhitelist"in e,n="tachyonSameOrigin"in e,a=e.tachyonTimer||50;let r=null;function i(){r=r?null:this;const t="tachyon";var e=document.getElementById(t);e?e.remove():setTimeout(()=>{var e;r===this&&((e=document.createElement("link")).id=t,e.href=this.href,e.rel="prerender",document.head.appendChild(e))},a)}function t(t){var e;t.dataset&&(e="tachyon"in t.dataset,"A"!==t.tagName||!t.href||e!=o&&!n||n&&!e&&t.origin!==window.location.origin||["mouseover","mouseout","touchstart","touchend"].forEach(e=>t.addEventListener(e,i,{passive:!0})))}new MutationObserver(e=>e.forEach(e=>e.addedNodes.forEach(t))).observe(document.body,{childList:!0,subtree:!0}),document.querySelectorAll("a").forEach(t);
</script>Tachyon implements the following using data-tachyon-* attributes:
- Custom Timing
- Whitelist
- Blacklist
- Same-Origin Only (Breaking changes in 2.0.0)
This project follows jordansissel's issue guidelines:
- If this project is not helping you, then there is a bug
- If you are having a bad time with this project, then there is a bug
- If the documentation is confusing, then this is a bug
- If there is a bug in this project, then we can work together to fix it.
There is a list of known issues on the website- if anything else comes up, though, please do open an issue in the issue tracker.
- You (the reader) for your support, contribution, and time; I'm glad this project has been beneficial to you
- Alexandre Dieulot, creator of instant.page which undoubtedly paved the way for Tachyon
- frontendfoc.us for the completely unexpected positive press while this project was still in its infancy