Tachyon

Make your site faster than light in <1 minute; instant page loads in 723 bytes
GitHub
307
Created 2 years ago, last commit 9 months ago
2 contributors
232 commits
Stars added on GitHub, month by month
0
0
0
0
0
0
N/A
10
11
12
1
2
3
4
5
6
7
8
9
2023
2024
Stars added on GitHub, per day, on average
Yesterday
=
Last week
0.0
/day
Last month
0.0
/day
Last 12 months
0.0
/day
Package on NPM
Monthly downloads on NPM
10
11
12
1
2
3
4
5
6
7
8
9
2023
2024
No dependencies
README

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:

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 tachyonjs

You 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:

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

Star History Chart