Important
This package has been deprecated since January 14, 2024 due to changes (previous and upcoming) to prefetch/prerender behavior. Don't use it!
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
Using Tachyon is unbelieveably easy; it's super tiny, so you can just inline it. All you have to do is copy the <script></script> tags below and put them somewhere on your site.
<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>Et voila! Your website is now faster than light!
If you look on the website, there are also easy install instructions for Google Tag Manager, Shopify, WordPress, and more.
Tachyon is also available via npm as tachyonjs.
npm i tachyonjsYou can also get Tachyon from any Javascript CDN—unpkg is recommended, though!
<script src="https://unpkg.com/tachyonjs@2.0.1/tachyon.min.js" integrity="sha384-4iJteL1FYnj4Ju83AJvNthpx5gZ1QaXCamXhY3lxhAjTNXUN+NXq5LQV/fXOSRme" type="module" crossorigin defer></script>Configuration
Tachyon implements the following using data-tachyon-* attributes:
- Custom Timing
- Whitelist
- Blacklist
- Same-Origin Only (Breaking changes in 2.0.0)
Issues
Tachyon subscribes to the following philosophy:
- If this project is not helping you, then there is a bug
- If you are having a bad time using this project, then there is a bug
- If the documentation is confusing, then the documentation is buggy
- 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.
Cheers To
- 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