25 |
26 |
27 | Tachyon is a byte-sized script that improves the user experience of your website by making navigation between pages significantly quicker.
28 |
29 | **To test if Tachyon would've helped,**
31 | No!Yes!
32 | *(Saved )*Remove
34 | cursor!
35 |
36 | On average, Tachyon could benefit your site with:
37 |
38 |
51 |
52 | And just when you thought it couldn't get any better...
53 |
54 |
55 |
56 | 🤪 **Full support for mobile browsers**
57 |
58 | 🤓 **Developed by an industry leading growth hacker**
59 |
60 | 🤩 **Completely set up in one minute or less on any website**
61 |
62 |
63 |
64 |
65 | Tachyon cleverly loads pages in advance to improve the speed of your website, resulting in a better user experience and potentially even significantly more conversions. [^5] [^6] [^7] [^8] [^9]
66 |
67 | In the above demo, the time "saved" refers to time that would have been wasted watching the next page load without Tachyon.
68 |
69 | ## Using Tachyon
70 |
71 | ``
72 |
73 |
74 |
77 |
78 |
79 | Deploying Tachyon to your site is extremely easy.
80 | For most people the steps will look like this:
81 |
82 | 1. Copy the `';
5 |
6 | function sleep(ms) {
7 | return new Promise(resolve => setTimeout(resolve, ms));
8 | }
9 |
10 | function toClipboard() {
11 | navigator.clipboard.writeText(codeBlock.innerText);
12 | copier.innerHTML = "Copied!";
13 | sleep(1000).then(() => {
14 | copier.innerHTML = "Click me to copy!";
15 | })
16 | }
17 |
18 | copyButton.addEventListener("click", toClipboard)
19 |
--------------------------------------------------------------------------------
/docs/content/cms/google-tag-manager.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Adding Tachyon to Google Tag Manager"
3 | draft: false
4 | ---
5 |
6 |
7 |
8 |
9 |
10 |
11 | [← Home](/#using-tachyon)
12 |
13 |
14 |
15 |
16 |
19 |
20 |
21 | Google Tag Manager is one of the best ways to add Tachyon to your website. It's easy to use and allows you to add Tachyon to any website, even if you don't have access to the code.
22 |
23 | 1. Copy the `
10 |
11 | [← Home](/#using-tachyon)
12 |
13 |
14 |
15 |
16 |
19 |
20 |
21 | Shopify makes it easy to add Tachyon.
22 |
23 | 1. Copy the `
10 |
11 | [← Home](/#using-tachyon)
12 |
13 |
14 |
15 |
16 |
19 |
20 |
21 | Squarespace makes it very easy to add Tachyon.
22 |
23 | 1. Copy the `
10 |
11 | [← Home](/#using-tachyon)
12 |
13 |
14 |
15 |
16 |
19 |
20 |
21 | Webflow makes it very easy to add Tachyon.
22 |
23 | 1. Copy the `
10 |
11 | [← Home](/#using-tachyon)
12 |
13 |
14 |
15 |
16 |
19 |
20 |
21 | Wix makes it very easy to add Tachyon.
22 |
23 | 1. Copy the `';
5 |
6 | function sleep(ms) {
7 | return new Promise(resolve => setTimeout(resolve, ms));
8 | }
9 |
10 | function toClipboard() {
11 | navigator.clipboard.writeText(codeBlock.innerText);
12 | copier.innerHTML = "Copied!";
13 | sleep(1000).then(() => {
14 | copier.innerHTML = "Click me to copy!";
15 | })
16 | }
17 |
18 | copyButton.addEventListener("click", toClipboard)
19 |
--------------------------------------------------------------------------------
/docs/public/cms/google-tag-manager/index.html:
--------------------------------------------------------------------------------
1 | Adding Tachyon to Google Tag Manager
Google Tag Manager is one of the best ways to add Tachyon to your website. It’s easy to use and allows you to add Tachyon to any website, even if you don’t have access to the code.
Copy the <script> tags above
Go to Google Tag Manager
Click “Tags” and then “New”
Click “Tag Configuration” and select “Custom HTML”
Paste the <script> tags you copied into the Tag Configuration “HTML” field
Click on the “Triggering” section below “Tag Configuration”
Select the “All Pages” option from the “Choose a trigger” menu
Click save, and set the tag name to “Tachyon”
Enjoy your faster website!
--------------------------------------------------------------------------------
/docs/public/cms/index.html:
--------------------------------------------------------------------------------
1 | Cms
--------------------------------------------------------------------------------
/docs/public/cms/index.xml:
--------------------------------------------------------------------------------
1 | Cms on Tachonhttps://fasterthanlight.net/cms/Recent content in Cms on TachonHugo -- gohugo.ioen-usAdding Tachyon to Google Tag Managerhttps://fasterthanlight.net/cms/google-tag-manager/Mon, 01 Jan 0001 00:00:00 +0000https://fasterthanlight.net/cms/google-tag-manager/← Home
2 | Click me to copy!
3 | Google Tag Manager is one of the best ways to add Tachyon to your website. It’s easy to use and allows you to add Tachyon to any website, even if you don’t have access to the code.
4 | Copy the <script> tags above Go to Google Tag Manager Click “Tags” and then “New” Click “Tag Configuration” and select “Custom HTML” Paste the <script> tags you copied into the Tag Configuration “HTML” field Click on the “Triggering” section below “Tag Configuration” Select the “All Pages” option from the “Choose a trigger” menu Click save, and set the tag name to “Tachyon” Enjoy your faster website!Adding Tachyon to Shopifyhttps://fasterthanlight.net/cms/shopify/Mon, 01 Jan 0001 00:00:00 +0000https://fasterthanlight.net/cms/shopify/← Home
5 | Click me to copy!
6 | Shopify makes it easy to add Tachyon.
7 | Copy the <script> tags above Login to your Shopify store Navigate to the “Online Store” section Click on Themes and then on the “Customize” button. Click on the 3 dots next to the name of the theme in the top left corner In the dropdown menu, click “Edit code” Click on the theme.liquid file in the file navigator on the left Look for a line that reads <head> at the top of the file Paste the <script> tags you copied on the line just below the line that reads <head> Click “Save” in the top right corner Enjoy your faster storefront!Adding Tachyon to Squarespacehttps://fasterthanlight.net/cms/squarespace/Mon, 01 Jan 0001 00:00:00 +0000https://fasterthanlight.net/cms/squarespace/
8 | ← Home
9 | Click me to copy!
10 | Squarespace makes it very easy to add Tachyon.
11 | Copy the <script> tags above In the Squarespace home menu, click on “Settings” Click on “Advanced” Click on “Code Injection” Paste the <script> tags you copied into the “Header” field Click save Voila! Enjoy your faster website!Adding Tachyon to Webflowhttps://fasterthanlight.net/cms/webflow/Mon, 01 Jan 0001 00:00:00 +0000https://fasterthanlight.net/cms/webflow/← Home
12 | Click me to copy!
13 | Webflow makes it very easy to add Tachyon.
14 | Copy the <script> tags above Login to your Webflow designer Select Project settings from the top left nav menu Select “Custom Code” from the horizontal nav bar Paste the <script> tags you copied into the Head Code textbox Click save changes Publish the changes to your site Et voila! Your Webflow site will have never felt so fast!Adding Tachyon to Wixhttps://fasterthanlight.net/cms/wix/Mon, 01 Jan 0001 00:00:00 +0000https://fasterthanlight.net/cms/wix/← Home
15 | Click me to copy!
16 | Wix makes it very easy to add Tachyon.
17 | Copy the <script> tags above Login to your Wix dashboard Hover over the site where you want to add Tachyon and click on “Select & Edit site" Click on “Settings” on the left menu Click on “Advanced” and then “Custom code” Click on “Add Custom code” Paste the <script> tags you copied earlier into the “Paste the code snippet here” field Set the “Name” field to “Tachyon” In the “Add Code to Pages,” select “All Pages” Set the “Place code in” field to “Head” Click on “Code Type” on top of the “Add Custom Code” Window, choose the appropriate type Click on “Apply” Congratulations!Adding Tachyon to WordPresshttps://fasterthanlight.net/cms/wordpress/Mon, 01 Jan 0001 00:00:00 +0000https://fasterthanlight.net/cms/wordpress/← Home
18 | Adding Tachyon to WordPress is easier than ever. Just follow these steps:
19 | Download the Tachyon plugin for WordPress Log into your WordPress admin panel In the menu, click on “Plugins” then “Add New” In the top left corner, click on “Upload Plugin” Upload the tachyon.zip file you downloaded earlier Tachyon will install and you will be redirected Click on “Activate Plugin” Voila! Your WordPress site will feel faster than ever!
--------------------------------------------------------------------------------
/docs/public/cms/self-hosting/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 | Self Hosting Tachyon
12 |
13 |
14 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
38 |
39 |
40 |
41 |
44 |
45 |
46 |
47 |
48 |
49 |
52 |
53 |
54 |
55 |
56 |
Self-hosting Tachyon is easy. Grab the latest release from the GitHub repository (it’s recommended you use tachyon.min.js) and upload it to your server. Link the script somewhere in your HTML with <script src="..." type="module" defer> and you’re good to go!
68 |
⚠ Please keep in mind that your <script> tag must includetype="module" and defer
Tachyon uses browsers’ built in features to markedly improve the speed of your website, resulting in a better user experience and potentially even significantly more conversions. 45678
To test if Tachyon would’ve helped,
5 | No!Yes!
6 | (Saved )Remove
7 | cursor!
In the above demo, “saved” refers to additional time that would have been spent loading the page without Tachyon.
Tachyon leverages features built into browsers through vanilla javascript; it generates <link rel="prefetch" 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 downloading the page the user is about to visit before they actually click on the link. This means that when the user clicks on the link, the page is already downloaded and ready to be displayed. This results in a significantly faster page load time.
Tachyon works on mobile devices as well by checking for a tap event instead of a hover event.
Tachyon’s is free-and-open-source software (source available on GitHub), licensed under the MIT License.
Technical Details
Security
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 exclusively published from one machine behind a wireguard bastion; 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, this website and the GitHub repository, are hosted by GitHub.
Default Behavior
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 rel="prefetch" 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 rel="prefetch" 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.
These prefetch requests are given extremely low priority; they will not interfere with the speed of other requests.
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 other similar projects.
Put simply, Tachyon improves a website’s speed significantly more than instant.page, uses significantly less bandwidth, and is 4.08x smaller.
Tachyon is simpler, more flexible, and better thought at its core out than any other alternative. It’s the best option in virtually all use cases where something like instant.page or quicklink could be used.
For one, Tachyon implements the prefetching behavior in a way that is significantly more efficient and less intrusive than other projects- it only preloads pages that are likely to be clicked, and it stops prefetching pages when the user’s cursor leaves the link. This means that Tachyon will not waste bandwidth on pages that the user may not click on, and it will not add nearly as large of a load to your server as alternatives.
Alternatives include a ridiculous amount of code for the extremely simple core functionality that prefetching scripts offer. Tachyon is built with simplicity at its core, and it allows everyone to reap the massive benefits in performance, extensibility, maintainability, security, and ease of use.
It’s not like Tachyon offers less features than other projects, either- it’s just that Tachyon’s features are implemented in a way that is more efficient from a code perspective than other projects. It supports mobile with no configuration, implements whitelisting, blacklisting, custom timing, and same origin restriction in a way that is much more efficient than other projects, and it makes these features arguably easier to use. If you need some hyper-specific feature, Tachyon may not be the best option for you- for everyone else, Tachyon is undoubtedly the best option.
Tachyon’s Philosophy
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 the addiction of the web to bloat has only continued growing. 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 patch for the bloat problem to simplify my job of delivering on growth goals for clients; Tachyon is my attempt to fix not the bloat problem, but the key symptom of the bloat problem: slow websites.
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.
10 | 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.
11 | Simplicity is baked into Tachyon’s design. Any person with a basic understanding of JavaScript should be able to understand Tachyon’s codebase in a matter of minutes. This simplicity serves multiple functions: it makes Tachyon highly performant, easy to use, easy to maintain and extend by both myself and other developers, and it makes Tachyon extremely easy to audit and verify that it is safe to use on your website.
Frequently Asked Questions
Tachyon gets some fair questions from time to time, mostly due to misunderstanding Tachyon’s purpose and functionality.
“Won’t this encourage people to continue building bloated websites?”
In general, the developers currently working on any given website aren’t really responsible for the majority of the bloat simply due to the fact that they likely didn’t build it or just have better things to work on. Technical debt is an inevitable product of any piece of software’s history, and the developers working on it are often just trying to keep the site running. I built Tachyon first-and-foremost for myself; my job as a consultant is to help a client get the most out what they have as quickly as possible without burdening their internal teams, and Tachyon is a tool that helps me do that. It’s not a magic bullet that will fix all of their problems, but it’s a tool that can help them get more out of their existing website without spending precious time trying to undo years of spaghetti code or migrate to some slick new technology.
If you’re building a new website, you should absolutely be building it as leanly as possible. If you’re working on an existing website, you should absolutely be working to reduce its bloat. When neither of those are viable, i.e. a lot of the time, Tachyon is here for you.
“Isn’t prefetching content like this a privacy risk for end-users?”
Prefetching doesn’t expose an end user to code execution (including tracking), as code isn’t even downloaded until the user navigates to the page. The only risk is that the user’s browser will download content that they don’t end up using, but this is a risk that is inherent to the web and is not unique to Tachyon. In the exceptionally rare case that a user’s threat model includes third-parties linked to by websites they use, it’s their own responsibility to modify their browser for privacy; they will usually have already disabled prefetching in their browser whether they know it or not because many privacy extensions and privacy focused browsers do this by default.
Advanced Configuration
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 data-tachyon-* attributes.
Custom Timing
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 will look like <body data-tachyon-timer="100">
Same-Origin Only
By default, Tachyon will prefetch content from any domain. If you want Tachyon to only prefetch content from the same domain, you can add data-tachyon-same-origin to the <body> tag. A full implementation of this would look like <body data-tachyon-same-origin>.
Blacklist
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 data-tachyon attribute.
In the following example the first <a> tag will be ignored by Tachyon and will not be prefetched, but the second <a> tag will be prefetched as it does not have the data-tachyon attribute and is therefore not on the blacklist.
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 data-tachyon attribute.
In the following example the second <a> tag will be ignored by Tachyon and will not be prefetched, but the first <a> tag will be prefetched as it has the data-tachyon attribute and is therefore on the whitelist.
<a href="https://example.com">Not on the list! Won't prefetch!</a>
</body>
Known Issues
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 prefetching functionality, which doesn’t work with single page applications because client side routers hijack <a> tags.
Firefox Support
Prefetching is supported but incorrectly implemented in Firefox- it will only work as intended if the prefetched page is fully downloaded and cached. This is a known issue (and has been for years) that will likely be fixed in a future release of Firefox; the issue had its severity updated as recently as October 2022.
Safari Support
Prefetching is currently disabled by default on both desktop and mobile versions of Safari. It is unclear if this behavior will change in the future.
--------------------------------------------------------------------------------
/docs/public/index.xml:
--------------------------------------------------------------------------------
1 | Tachyon on Tachonhttps://fasterthanlight.net/Recent content in Tachyon on TachonHugo -- gohugo.ioen-usMon, 07 Nov 2022 14:15:24 -0500Adding Tachyon to Google Tag Managerhttps://fasterthanlight.net/cms/google-tag-manager/Mon, 01 Jan 0001 00:00:00 +0000https://fasterthanlight.net/cms/google-tag-manager/← Home
2 | Click me to copy!
3 | Google Tag Manager is one of the best ways to add Tachyon to your website. It’s easy to use and allows you to add Tachyon to any website, even if you don’t have access to the code.
4 | Copy the <script> tags above Go to Google Tag Manager Click “Tags” and then “New” Click “Tag Configuration” and select “Custom HTML” Paste the <script> tags you copied into the Tag Configuration “HTML” field Click on the “Triggering” section below “Tag Configuration” Select the “All Pages” option from the “Choose a trigger” menu Click save, and set the tag name to “Tachyon” Enjoy your faster website!Adding Tachyon to Shopifyhttps://fasterthanlight.net/cms/shopify/Mon, 01 Jan 0001 00:00:00 +0000https://fasterthanlight.net/cms/shopify/← Home
5 | Click me to copy!
6 | Shopify makes it easy to add Tachyon.
7 | Copy the <script> tags above Login to your Shopify store Navigate to the “Online Store” section Click on Themes and then on the “Customize” button. Click on the 3 dots next to the name of the theme in the top left corner In the dropdown menu, click “Edit code” Click on the theme.liquid file in the file navigator on the left Look for a line that reads <head> at the top of the file Paste the <script> tags you copied on the line just below the line that reads <head> Click “Save” in the top right corner Enjoy your faster storefront!Adding Tachyon to Squarespacehttps://fasterthanlight.net/cms/squarespace/Mon, 01 Jan 0001 00:00:00 +0000https://fasterthanlight.net/cms/squarespace/
8 | ← Home
9 | Click me to copy!
10 | Squarespace makes it very easy to add Tachyon.
11 | Copy the <script> tags above In the Squarespace home menu, click on “Settings” Click on “Advanced” Click on “Code Injection” Paste the <script> tags you copied into the “Header” field Click save Voila! Enjoy your faster website!Adding Tachyon to Webflowhttps://fasterthanlight.net/cms/webflow/Mon, 01 Jan 0001 00:00:00 +0000https://fasterthanlight.net/cms/webflow/← Home
12 | Click me to copy!
13 | Webflow makes it very easy to add Tachyon.
14 | Copy the <script> tags above Login to your Webflow designer Select Project settings from the top left nav menu Select “Custom Code” from the horizontal nav bar Paste the <script> tags you copied into the Head Code textbox Click save changes Publish the changes to your site Et voila! Your Webflow site will have never felt so fast!Adding Tachyon to Wixhttps://fasterthanlight.net/cms/wix/Mon, 01 Jan 0001 00:00:00 +0000https://fasterthanlight.net/cms/wix/← Home
15 | Click me to copy!
16 | Wix makes it very easy to add Tachyon.
17 | Copy the <script> tags above Login to your Wix dashboard Hover over the site where you want to add Tachyon and click on “Select & Edit site" Click on “Settings” on the left menu Click on “Advanced” and then “Custom code” Click on “Add Custom code” Paste the <script> tags you copied earlier into the “Paste the code snippet here” field Set the “Name” field to “Tachyon” In the “Add Code to Pages,” select “All Pages” Set the “Place code in” field to “Head” Click on “Code Type” on top of the “Add Custom Code” Window, choose the appropriate type Click on “Apply” Congratulations!Adding Tachyon to WordPresshttps://fasterthanlight.net/cms/wordpress/Mon, 01 Jan 0001 00:00:00 +0000https://fasterthanlight.net/cms/wordpress/← Home
18 | Adding Tachyon to WordPress is easier than ever. Just follow these steps:
19 | Download the Tachyon plugin for WordPress Log into your WordPress admin panel In the menu, click on “Plugins” then “Add New” In the top left corner, click on “Upload Plugin” Upload the tachyon.zip file you downloaded earlier Tachyon will install and you will be redirected Click on “Activate Plugin” Voila! Your WordPress site will feel faster than ever!
--------------------------------------------------------------------------------
/docs/public/required.js:
--------------------------------------------------------------------------------
1 | window.addEventListener('load', function () {
2 | const yesSpan = document.getElementById("yes");
3 | const noSpan = document.getElementById("no");
4 | const resultSpan = document.getElementById("result");
5 | const timeSpan = document.getElementById("timeSpan");
6 | const errorSpan = document.getElementById("error");
7 | const clickMe = document.getElementById("clickMe");
8 |
9 | let startDate
10 | let startLast
11 | let endDate
12 | let count
13 |
14 | function startTimer() {
15 | startDate = new Date().getTime();
16 | count = 0
17 | return
18 | }
19 |
20 | function endTimer() {
21 | endDate = new Date().getTime();
22 | startLast = startDate
23 | if ((startLast == startDate) & (count > 0)) {
24 | errorSpan.classList.remove("hidden");
25 | noSpan.classList.add("hidden")
26 | yesSpan.classList.add("hidden");
27 | timeSpan.classList.add("hidden");
28 | resultSpan.classList.add("hidden");
29 | return
30 | } else {
31 | count++
32 | var time = endDate - startDate;
33 | resultSpan.classList.remove("hidden");
34 | timeSpan.classList.remove("hidden");
35 | timeSpan.innerText = (time - 50).toString() + "ms";
36 | if (time < 50) {
37 | noSpan.classList.remove("hidden");
38 | } else {
39 | yesSpan.classList.remove("hidden");
40 | }
41 |
42 | }
43 | return
44 | }
45 |
46 | function removeText() {
47 | noSpan.classList.add("hidden")
48 | yesSpan.classList.add("hidden");
49 | timeSpan.classList.add("hidden");
50 | resultSpan.classList.add("hidden");
51 | errorSpan.classList.add("hidden");
52 | timeSpan.innerText = "";
53 | }
54 |
55 | clickMe.addEventListener("mouseover", startTimer);
56 | clickMe.addEventListener("mouseout", removeText);
57 | clickMe.addEventListener("touchstart", startTimer);
58 | clickMe.addEventListener("touchend", removeText);
59 | clickMe.addEventListener("click", endTimer);
60 |
61 | function sleep(ms) {
62 | return new Promise(resolve => setTimeout(resolve, ms));
63 | }
64 |
65 | var codep = document.getElementById("copyText");
66 | var copier = document.getElementById("copier");
67 | copier.addEventListener("click", toClipboard);
68 |
69 | function toClipboard() {
70 | navigator.clipboard.writeText(codep.innerText);
71 | copier.innerHTML = "Copied!";
72 | sleep(1000).then(() => {
73 | copier.innerHTML = "Click me to copy!";
74 | });
75 |
76 | }});
77 |
78 |
--------------------------------------------------------------------------------
/docs/public/sitemap.xml:
--------------------------------------------------------------------------------
1 | https://fasterthanlight.net/2022-11-07T14:15:24-05:00https://fasterthanlight.net/cms/google-tag-manager/https://fasterthanlight.net/cms/shopify/https://fasterthanlight.net/cms/squarespace/https://fasterthanlight.net/cms/webflow/https://fasterthanlight.net/cms/wix/https://fasterthanlight.net/cms/wordpress/https://fasterthanlight.net/categories/https://fasterthanlight.net/cms/https://fasterthanlight.net/tags/
--------------------------------------------------------------------------------
/docs/public/tachyon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/docs/public/tachyonDemo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cowtoolz/tachyon/31f680519c2aace7f19aeb37e7e45eadb9ac746e/docs/public/tachyonDemo.gif
--------------------------------------------------------------------------------
/docs/public/tags/index.html:
--------------------------------------------------------------------------------
1 | Tags
--------------------------------------------------------------------------------
/docs/public/tags/index.xml:
--------------------------------------------------------------------------------
1 | Tags on Tachonhttps://fasterthanlight.net/tags/Recent content in Tags on TachonHugo -- gohugo.ioen-us
--------------------------------------------------------------------------------
/docs/public/wave.css:
--------------------------------------------------------------------------------
1 | #clickMe {
2 | --bg-size: 400%;
3 | --color-one: #ff2400;
4 | --color-two: #e81d1d;
5 | --color-three: #e8891d;
6 | --color-four: #b2e81d;
7 | --color-five: #1de83f;
8 | --color-six: #1ddde8;
9 | --color-seven: #2b1de8;
10 | --color-eight: #6900f3;
11 | --color-nine: #dd00f3;
12 | background: linear-gradient(100deg,
13 | var(--color-one),
14 | var(--color-two),
15 | var(--color-three),
16 | var(--color-four),
17 | var(--color-five),
18 | var(--color-six),
19 | var(--color-seven),
20 | var(--color-eight),
21 | var(--color-nine),
22 | var(--color-one)) 0 / var(--bg-size) 100%;
23 | color: transparent;
24 | background-clip: text;
25 | -webkit-background-clip: text;
26 | animation: move-bg 8s infinite linear;
27 | }
28 |
29 | @keyframes move-bg {
30 | to {
31 | background-position: var(--bg-size) 0;
32 | }
33 | }
34 |
35 | html {
36 | font-family: "Pretendard Std";
37 | }
38 |
39 | .prose :where(code):not(:where([class~="not-prose"] *))::after {
40 | content: "";
41 | }
42 |
43 | .prose :where(code):not(:where([class~="not-prose"] *))::before {
44 | content: "";
45 | }
--------------------------------------------------------------------------------
/docs/tachyonDemo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cowtoolz/tachyon/31f680519c2aace7f19aeb37e7e45eadb9ac746e/docs/tachyonDemo.gif
--------------------------------------------------------------------------------
/docs/themes/digitalgarden/.gitignore:
--------------------------------------------------------------------------------
1 | /.idea
2 | /node_modules
3 | /exampleSite/public
4 | /exampleSite/resources/_gen
5 | /exampleSite/hugo_stats.json
6 | .DS_Store
7 | static/main.css
8 |
--------------------------------------------------------------------------------
/docs/themes/digitalgarden/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2021 Varun A P
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
6 | this software and associated documentation files (the "Software"), to deal in
7 | the Software without restriction, including without limitation the rights to
8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 |
--------------------------------------------------------------------------------
/docs/themes/digitalgarden/archetypes/default.md:
--------------------------------------------------------------------------------
1 | +++
2 | +++
3 |
--------------------------------------------------------------------------------
/docs/themes/digitalgarden/assets/css/tailwind.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | body {
6 | @apply text-slate-900 dark:bg-slate-900 dark:text-slate-50 dark:selection:bg-slate-600;
7 | }
8 |
9 | * {
10 | scrollbar-width: thin;
11 | scrollbar-color: theme("colors.slate.400") theme("colors.slate.200");
12 | }
13 |
14 | *::-webkit-scrollbar {
15 | width: 8px;
16 | }
17 |
18 | *::-webkit-scrollbar-track {
19 | @apply bg-slate-200;
20 | }
21 | *::-webkit-scrollbar-thumb {
22 | @apply bg-slate-400;
23 | border-radius: 6px;
24 | }
25 |
26 | html.dark *::-webkit-scrollbar-track {
27 | @apply bg-slate-600;
28 | }
29 | html.dark *::-webkit-scrollbar-thumb {
30 | @apply bg-slate-400;
31 | }
32 |
33 | html.dark * {
34 | scrollbar-color: theme("colors.slate.400") theme("colors.slate.600");
35 | }
36 |
--------------------------------------------------------------------------------
/docs/themes/digitalgarden/layouts/404.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cowtoolz/tachyon/31f680519c2aace7f19aeb37e7e45eadb9ac746e/docs/themes/digitalgarden/layouts/404.html
--------------------------------------------------------------------------------
/docs/themes/digitalgarden/layouts/_default/_markup/render-link.html:
--------------------------------------------------------------------------------
1 | {{ .Text }}
--------------------------------------------------------------------------------
/docs/themes/digitalgarden/layouts/_default/baseof.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{- partial "head.html" . -}}
4 |
5 |
6 |
24 |
25 |
26 | 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.
27 |
28 | **Documentation for Tachyon lives at [fasterthanlight.net](https://fasterthanlight.net)**
29 |
30 | Quick Links:
31 | - [Website](https://fasterthanlight.net) (Start here)
32 | - [NPM package](https://www.npmjs.com/package/tachyonjs)
33 | - [Package source](https://github.com/weebney/tachyon/tree/main/tachyon)
34 | - [Why Tachyon exists](https://fasterthanlight.net/#the-why-the-how)
35 |
36 | Easy Setup Instructions:
37 | - [Google Tag Manager](https://fasterthanlight.net/cms/google-tag-manager) ⭐
38 | - [Shopify](https://fasterthanlight.net/cms/shopify)
39 | - [Squarespace](https://fasterthanlight.net/cms/squarespace)
40 | - [Webflow](https://fasterthanlight.net/cms/webflow)
41 | - [Wix](https://fasterthanlight.net/cms/wix)
42 | - [WordPress](https://fasterthanlight.net/cms/wordpress)
43 |
44 |
45 |
46 |
47 |
Tachyon
48 |
Instant.Page
49 |
Quicklink
50 |
Turbolinks
51 |
52 |
53 |
Size
54 |
738 b
55 |
3.14 kb (4.3x larger)
56 |
60.1 kb (83x larger)
57 |
111 kb (153x larger)
58 |
59 |
60 |
Bandwidth Overhead
61 |
Lowest
62 |
Low
63 |
Highest
64 |
High
65 |
66 |
67 |
Prerendering (Fastest Loads)
68 |
✅
69 |
❌
70 |
✅
71 |
❌
72 |
73 |
74 |
75 |
No Addl. Code Required
76 |
✅
77 |
✅
78 |
❌
79 |
❌
80 |
81 |
82 |
Works on ALL links
83 |
✅
84 |
❌
85 |
❌
86 |
❌
87 |
88 |
89 |
Whitelist & Blacklist
90 |
✅
91 |
❌
92 |
❌
93 |
❌
94 |
95 |
96 |
97 | ## Using Tachyon
98 |
99 | Using Tachyon is unbelieveably easy; it's super tiny, so you can just inline it. All you have to do is copy the `` tags below and put them somewhere on your site.
100 |
101 | ```html
102 |
103 | ```
104 |
105 | Et voila! Your website is now faster than light!
106 |
107 | If you look on the website, there are also easy install instructions for [Google Tag Manager](https://fasterthanlight.net/#easy-setup-instructions), [Shopify](https://fasterthanlight.net/#easy-setup-instructions), [WordPress](https://fasterthanlight.net/#easy-setup-instructions), and more.
108 |
109 | Tachyon is also available via npm as `tachyonjs`.
110 |
111 | ```sh
112 | npm i tachyonjs
113 | ```
114 |
115 | You can also get Tachyon from any Javascript CDN—[unpkg](https://unpkg.com/browse/tachyonjs@2.0.1/) is recommended, though!
116 |
117 | ```html
118 |
119 | ```
120 |
121 | ### Configuration
122 |
123 | Tachyon implements the following using `data-tachyon-*` attributes:
124 |
125 | - [Custom Timing](https://fasterthanlight.net/#custom-timing)
126 | - [Whitelist](https://fasterthanlight.net/#whitelist)
127 | - [Blacklist](https://fasterthanlight.net/#blacklist)
128 | - [Same-Origin Only](https://fasterthanlight.net/#same-origin-only) *(Breaking changes in 2.0.0)*
129 |
130 | ## Issues
131 |
132 | Tachyon subscribes to the following philosophy:
133 |
134 | - If this project is not helping you, then there is a bug
135 | - If you are having a bad time using this project, then there is a bug
136 | - If the documentation is confusing, then the documentation is buggy
137 | - If there is a bug in this project, then we can work together to fix it.
138 |
139 | There is a [list of known issues](https://fasterthanlight.net/#known-issues) on the website—if anything else comes up, though, please do [open an issue](https://github.com/weebney/tachyon/issues/) in the [issue tracker](https://github.com/weebney/tachyon/issues/).
140 |
141 | ## Cheers To
142 |
143 | - [You](https://en.wikipedia.org/wiki/You_(Time_Person_of_the_Year)) (the reader) for your support, contribution, and time; I'm glad this project has been beneficial to you
144 | - [Alexandre Dieulot](https://dieulot.fr/), creator of [instant.page](https://instant.page/) which undoubtedly paved the way for Tachyon
145 | - [frontendfoc.us](https://frontendfoc.us/) for the completely unexpected [positive press](https://frontendfoc.us/issues/582) while this project was still in its infancy
146 |
147 | 
148 |
--------------------------------------------------------------------------------
/tachyon/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright 2023 weebney
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4 |
5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6 |
7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--------------------------------------------------------------------------------
/tachyon/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "tachyonjs",
3 | "version": "2.0.1",
4 | "description": "Make your site faster than light in <1 minute; instant page loads in 738 bytes.",
5 | "main": "tachyon.js",
6 | "scripts": {
7 | "minify": "uglifyjs -c -m --module --verbose tachyon.js > tachyon.min.js",
8 | "test": "cp tachyon.js test/ && http-server test/ && rm test/tachyon.js"
9 | },
10 | "repository": {
11 | "type": "git",
12 | "url": "git+https://github.com/weebney/tachyon.git"
13 | },
14 | "keywords": [
15 | "blazingly-fast",
16 | "performance",
17 | "prefetch",
18 | "predictive",
19 | "lightweight",
20 | "blazingly-fast"
21 | ],
22 | "files": [
23 | "tachyon.min.js",
24 | "tachyon.js",
25 | "test/*"
26 | ],
27 | "author": "weebney",
28 | "license": "MIT",
29 | "bugs": {
30 | "url": "https://github.com/weebney/tachyon/issues"
31 | },
32 | "homepage": "https://fasterthanlight.net",
33 | "devDependencies": {
34 | "http-server": "^14.1.1",
35 | "uglify-js": "^3.17.3"
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/tachyon/readme.md:
--------------------------------------------------------------------------------
1 | # Tachyon
2 | ## Make your site faster than light in <1 minute; instant page loads in 738 bytes.
3 |
4 | **For documentation related to Tachyon, please reference the [website](https://fasterthanlight.net/) and [github repository](https://github.com/weebney/tachyon).**
--------------------------------------------------------------------------------
/tachyon/tachyon.js:
--------------------------------------------------------------------------------
1 | // tachyon.js 2.0.1 - @weebney - MIT License
2 | const bodyDataValues = document.body.dataset;
3 | const whitelistEnabled = 'tachyonWhitelist' in bodyDataValues;
4 | const sameOriginOnly = 'tachyonSameOrigin' in bodyDataValues;
5 | const timerDuration = bodyDataValues.tachyonTimer || 50;
6 | let lastTouchedAnchor = null;
7 |
8 | function toggleLinkTag() {
9 | lastTouchedAnchor = lastTouchedAnchor ? null : this;
10 | const linkTagId = 'tachyon';
11 | const linkTag = document.getElementById(linkTagId);
12 | if (linkTag) {
13 | linkTag.remove();
14 | } else {
15 | setTimeout(() => {
16 | if (lastTouchedAnchor === this) {
17 | const newLinkElement = document.createElement('link');
18 | newLinkElement.id = linkTagId;
19 | newLinkElement.href = this.href;
20 | newLinkElement.rel = 'prerender';
21 | document.head.appendChild(newLinkElement);
22 | }
23 | }, timerDuration);
24 | }
25 | }
26 |
27 | function initializeListeners(node) {
28 | if (node.dataset) {
29 | const listed = 'tachyon' in node.dataset;
30 | if ((node.tagName === 'A' && node.href) && (listed === whitelistEnabled || sameOriginOnly)
31 | && (!sameOriginOnly || (listed || (node.origin === window.location.origin)))) {
32 | ['mouseover', 'mouseout', 'touchstart', 'touchend'].forEach((eventName) => node.addEventListener(eventName, toggleLinkTag, { passive: true }));
33 | }
34 | }
35 | }
36 |
37 | const mutationObserver = new MutationObserver((mutationRecordArray) => mutationRecordArray
38 | .forEach((record) => record.addedNodes.forEach(initializeListeners)));
39 |
40 | mutationObserver.observe(document.body, { childList: true, subtree: true });
41 |
42 | document.querySelectorAll('a').forEach(initializeListeners);
43 |
--------------------------------------------------------------------------------
/tachyon/tachyon.min.js:
--------------------------------------------------------------------------------
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);
2 |
--------------------------------------------------------------------------------
/tachyon/test/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Nothing Enabled
9 |
10 |
11 |
12 |
13 |
9 |
10 | # Tachyon
11 |
12 |
13 |
14 |
15 | [English](../readme.md) · [简体中文](./readme.zh-CN.md) · [繁體中文](./readme.zh-TW.md) · [한국어](./readme.ko.md)
16 |
17 |
18 |
19 | 
6 |
7 | # Tachyon
8 |
9 |
10 |
11 |
12 | [English](readme.md) · [简体中文](localized/readme.zh-CN.md) · [繁體中文](localized/readme.zh-TW.md) · [한국어](localized/readme.ko.md)
13 |
14 |
15 |
16 |
17 | [](https://npmjs.com/package/tachyonjs)
18 | [](https://bundlephobia.com/result?p=tachyonjs)
19 | [](https://github.com/weebney/tachyon/commits/main)
20 |
21 |