22nds
9/2/2017 - 10:02 AM

Boost perceived performance

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>
-->