Tachyon is a byte-sized script that improves the user experience of your website by making navigation between pages significantly quicker.
To test if Tachyon would’ve helped, No! Yes! (Saved )Remove cursor!
On average, Tachyon could benefit your site with:
🤯 Instant feeling page loads
🤑 2% increase in conversion rate 1
😍 8% increase in customer satisfaction 2
🧐 5% increase in page views 2
😳 0.0003% increase in page weight 3
And just when you thought it couldn’t get any better…
🤪 Full support for mobile browsers
🤓 Developed by an industry leading growth hacker
🤩 Completely set up in one minute or less on any website
In the above demo, the time “saved” refers to time that would have been wasted watching the next page load without Tachyon.
<script src="https://email@example.com/tachyon.min.js" integrity="sha384-4iJteL1FYnj4Ju83AJvNthpx5gZ1QaXCamXhY3lxhAjTNXUN+NXq5LQV/fXOSRme" type="module" crossorigin defer></script>
Deploying Tachyon to your site is extremely easy. For most people the steps will look like this:
Add them between your website’s
That’s it! Your website will now feel blazingly fast 🔥
Easy Setup Instructions
Provided below are instructions for adding Tachyon to popular content management systems, website builders, and e-commerce platforms.
How Tachyon Works
Tachyon leverages features built into your user’s web browser; it generates
<link rel="prerender" href="..."> tags to preload content when a user hovers their cursor on any
<a href="..."></a> tag for more than 50ms (by default).
Basically, this tells the browser to start loading the page the user is about to visit before they actually click/tap on the link. This tells the web browser to start getting it ready in the background.
When the user actually clicks on the link and is ready to go to the next page, that page is already prepared and is pulled into frame- this results in a significantly faster page load time.
Tachyon & Alternatives
Tachyon could be considered an alternative to projects like instant.page or quicklink which offer a similar feature set. That being said, Tachyon has some serious advantages compared to competing projects.
|Size||738 b||3.14 kb|
The Why; The How
Tachyon is built with simplicity at its core, and this is no accident. This focus on simplicity allows everyone that uses Tachyon, from admins to end-users, to reap the benefits in performance, extensibility, maintainability, security, and ease of use.
One of the major improvements Tachyon makes over every alternative is the use of
" href="..."> instead of the common
" href="..."> making page loads significantly faster. The difference between the two should be self-evident;
prefetch just downloads the page, and
prerender downloads and begins rendering the page.
Tachyon also implements the preloading behavior in a way that is much more efficient and less intrusive than alternatives- it only preloads pages that are likely to be clicked, and it stops preloading pages when the user’s cursor leaves the link. This was actually the reason I created Tachyon, and to this day I still have no idea why the alternatives don’t do this. As a result, Tachyon will add literally a fraction of the bandwidth load to your site compared to any alternative.
It’s not like Tachyon offers less features than other projects, either (it has virtual feature parity with instant.page plus some extra features); it’s just that Tachyon’s features are implemented in a more concise manner than other projects. It supports mobile with no configuration, implements whitelisting, blacklisting, custom timing, and same origin restriction, and it makes these features arguably easier to use. If you need something ultra complex, Tachyon may not be the best option for you- for everyone else, Tachyon is built from the ground up to be the best option.
By default, Tachyon will run on all
<a href="..."> tags. When an end-user hovers their cursor over a link for more than 50ms, Tachyon will generate a
<link id="tachyon" rel="prerender" href="..."> tag for the anchor’s
href="..." attribute. This will cause the browser to begin downloading the page content of
href="..." in the background, so when the user clicks through the link, the page is already being downloaded and ready to begin loading into frame.
When a user unhovers their cursor from a link, Tachyon will remove the
<link id="tachyon" rel="prerender" href="..."> tag, canceling the download. This is done to prevent the browser from downloading content that the user may not click on and to avoid wasting bandwidth. There will only ever be one page prerendering at a time, saving additional bandwidth.
These preload requests are given extremely low priority; they will not interfere with the speed of other requests.
Tachyon is completely safe to use on your website. It does not contain any tracking, analytics, or other malicious code- it’s completely open-source and plenty of sites trust Tachyon in production right now.
Tachyon leverages unpkg, a CDN that is trusted by many popular websites and powered by Cloudflare. Subresource integrity is used to ensure that the script delivered to your users’ browsers hasn’t been tampered with.
The npm package (which is unpkg’s source for Tachyon) is published from a dedicated machine; the subresource integrity hash and minified script are computed locally and updated on the dev branch of the GitHub repository ahead of new versions being published to npm.
All official Tachyon pages, i.e. this website and the repository, are hosted by GitHub.
Tachyon allows you to fine tune the script to your site’s needs with a few simple properties. The vast majority of Tachyon users will not need to change these, but they are available for those who wish to do so.
Tachyon’s configuration features are toggled on with
If you’re able to determine that the 50ms default timing is not optimal for your site, you can change it by adding the
data-tachyon-timer attribute to website’s
<body> tag. This attribute takes an integer (in milliseconds) that will alter the script’s behavior as such, i.e. if you want to set the timing to 100ms, your body tag should look like the following:
<body data-tachyon-timer="100"> ... </body>
If you want Tachyon to ignore certain links, add
data-tachyon to the
<a> tag. The blacklist is the default behavior of Tachyon, so you don’t need to do anything to enable it, just flag the
<a> tag with the
In the following example the first
<a> tag will be ignored by Tachyon and will not be preloaded, but the second
<a> tag will be preloaded as it does not have the
data-tachyon attribute and is therefore not on the blacklist.
<body> <a href="https://example.com" data-tachyon>Blacklisted! ☠️</a> <a href="https://example.com">I'll prerender, though!</a> </body>
To enable whitelist mode, add
data-tachyon-whitelist to the page’s
<body> tag. Tachyon’s whitelist works in the exact opposite way of the blacklist. In whitelist mode, Tachyon will only run on
<a> tags that have the
In the following example the second
<a> tag will be ignored by Tachyon and will not be preloaded, but the first
<a> tag will be preloaded as it has the
data-tachyon attribute and is therefore on the whitelist.
<body data-tachyon-whitelist> <a href="https://example.com" data-tachyon>Whitelisted! 😇</a> <a href="https://example.com">Not on the list! ❌❌❌</a> </body>
By default, Tachyon will preload content from any domain. If you want Tachyon to only preload content from the same domain, you can add
data-tachyon-same-origin to the
<body> tag. Enabling this will also enable the Whitelist. That means you can choose to preload links outside of your website as needed using the
<body data-tachyon-same-origin> <a href="https://mywebsite.com/cart.php">This will load!</a> <a href="https://mywebsite.com/info.php">This one too!</a> <a href="https://some.otherwebsite.com">❌❌❌</a> <a href="https://shop.store.com" data-tachyon>This also loads!</a> </body>
The above example assumes your domain is
The web is extremely bloated. In a perfect world, we would all do our part to fix this- I personally try to build things as leanly as possible, but unfortunately wishful thinking does little to improve the state of affairs.
As a consultant, I’ve seen first-hand how this bloat negatively impacts the user experience and conversion rates of websites. As much as I wish it were true, I don’t have the time, resources, or bargaining power to have my clients completely re-engineer their websites. For this reason I created a script to function as a quick-and-easy yet adaptable patch for the bloat problem to simplify my job of delivering on growth goals for clients; Tachyon is the direct descendent of this script, adapted for general use.
As I have taken this concept and fleshed it out for public use, I have focused on simplicity in two areas:
- Tachyon should be simple to use by everyone.
I want to make it as easy as possible for anyone, regardless of their technical prowess, to use Tachyon; everything from how Tachyon’s features are implemented to how this website documents Tachyon’s usage should be as easy to utilize as possible.
- Tachyon’s codebase should be as simple as possible.
Many privacy and ad-blocking extensions disable the functionality that Tachyon relies on. Please keep this in mind as you test your site’s implementation of the script.
Single Page Applications
Tachyon does not work with single page applications/client-side routing. It shouldn’t break anything, but it won’t do anything either- this is because Tachyon relies on native preloading functionality, which doesn’t work with single page applications because client side routers hijack
Preloading content is not currently supported in Firefox- it is planned, though! As some consolation, none of the other alternatives to Tachyon work in Firefox either;
prefetch has been broken since it was introduced.
Prerendering is currently disabled by default on both desktop and mobile versions of Safari. It is unclear if this behavior will change in the future.
⚠ Tachyon is in active development.
Zuzana Padychova. (2017, April 7). How Page Load Time Affects Conversion Rates: 12 Case Studies. Hubspot.com. ↩︎
Jeffers, J. (2019, August 20). Site Speed is (Still) Impacting Your Conversion Rate. Portent. ↩︎
Breibon, A. (2018, June 27). How Does Page Speed Really Affect your Conversions? AB Tasty. ↩︎