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

English · 简体中文 · 繁體中文 · 한국어

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:

• Google Tag Manager ⭐
• Shopify
• Squarespace
• Webflow
• Wix
• WordPress

	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:

• 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