HTML resources content preloading

Markup

Write declarative fetch requests in your HTML <head>, specifying resources that your pages will need very soon after loading. Advantages: Prioritise resource loading more accurately, Cache future requests to the same resource, CSP can be applied to the resource https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content https://mdn.github.io/html-examples/link-rel-preload/fonts/ https://github.com/mdn/html-examples/tree/master/link-rel-preload/fonts https://github.com/mdn/html-examples/tree/master/link-rel-preload/media Only supported on: Chrome 50+, Opera 47+, Safari11+, Firefox 59+

1<!-- Before -->
2<link rel="stylesheet" href="styles/main.css">
3...
4
5<!-- Now -->
6<head>
7  <meta charset="utf-8">
8  <title>JS and CSS preload</title>
9  <link rel="preload" href="style.css" as="style">
10  <link rel="preload" href="main.js" as="script">
11  <link rel="stylesheet" href="style.css">
12</head>
13<body>
14  <h1>header</h1>
15  <script src="main.js"></script>
16</body>
17
18<!-- Preload for navigation / later / other pages -->
19<link rel="prefetch">
20
21<!-- Comprehensive list of supported content -->
22<link rel="preload" href="music.mp3" as="audio">
23<link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4"> <!-- MIME type used -->
24<link rel="preload" href="iframe_index.html" as="document">
25<link rel="preload" href="iframe_index.html" as="embed">
26<link rel="preload" href="data.json" as="fetch"> <!-- via fetch or XHR request-->
27<link rel="preload" href="font.ttf" as="font">
28<link rel="preload" href="fonts/cicle_fina-webfont.woff" as="font" type="font/woff" crossorigin="anonymous"> <!-- MIME type and CORS used -->
29<link rel="preload" href="img.jpg" as="image">
30<link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)"> <!-- media types or full-blown media queries = responsive preloading -->
31<link rel="preload" href="img.jpg" as="object"> <!-- used inside an  <embed> -->
32<link rel="preload" href="script.js" as="script">
33<link rel="preload" href="style.css" as="stylesheet">
34<link rel="preload" href="worker.js" as="worker"> . <!-- web worker or shared worker. -->
35
36<script>
37    var preloadLink = document.createElement("link");
38    preloadLink.href = "myscript.js";
39    preloadLink.rel = "preload";
40    preloadLink.as = "script";
41    document.head.appendChild(preloadLink);
42</script>
43
44<script>
45    var preloadedScript = document.createElement("script");
46    preloadedScript.src = "myscript.js";
47    document.body.appendChild(preloadedScript);
48</script>

Created on 1/12/2018