Skip to content

Instantly share code, notes, and snippets.

@felixhaeberle
Created May 31, 2020 23:08
Show Gist options
  • Save felixhaeberle/58da05200312b7a0cba52f3929f3067c to your computer and use it in GitHub Desktop.
Save felixhaeberle/58da05200312b7a0cba52f3929f3067c to your computer and use it in GitHub Desktop.
<!--
- 1. Preemptively warm up the fonts’ origin.
-
- 2. Initiate a high-priority, asynchronous fetch for the CSS file. Works in
- most modern browsers.
-
- 3. Initiate a low-priority, asynchronous fetch that gets applied to the page
- only after it’s arrived. Works in all browsers with JavaScript enabled.
-
- 4. In the unlikely event that a visitor has intentionally disabled
- JavaScript, fall back to the original method. The good news is that,
- although this is a render-blocking request, it can still make use of the
- preconnect which makes it marginally faster than the default.
-->
<!-- [1] -->
<link rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin />
<!-- [2] -->
<link rel="preload"
as="style"
href="$CSS&display=swap" />
<!-- [3] -->
<link rel="stylesheet"
href="$CSS&display=swap"
media="print" onload="this.media='all'" />
<!-- [4] -->
<noscript>
<link rel="stylesheet"
href="$CSS&display=swap" />
</noscript>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment