Boost perceived performance
<!--
SOURCE
https://medium.freecodecamp.org/high-performance-apps-multiplexing-debouncing-system-fonts-and-other-tricks-37c6fd3d7b2d
-->
<!-- rel="preload" -->
<link rel="preload" href="script.js" as="script" />
<link rel="preload" href="fontfamily.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="styles.css" as="style" />
<!-- Use Operating System-specific fonts -->
body {
font-family: -apple-system,
system-ui,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
"Helvetica Neue",
Arial,
sans-serif;
}
<!--
async and defer
Async will download your script during the HTML parsing. It will run it asynchronously
(if possible) — regardless of where it’s declared.
Defer will also download your script during the HTML parsing, though it will only attempt
to run your script after the parser is finished. Also, declaring multiple deferred scripts
guarantees that they will be executed in declaration order.
-->
<script async src="./my-async-script.js"></script>
<script defer src="./my-deferred-script.js"></script>
<!--
data:uri and <svg>
-->