[fix] load CSS before JS preloads

sveltejs · Dec 29, 2021 · d138efe · d138efe
1 parent 43b0f5a
commit d138efe
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/.changeset/perfect-frogs-decide.md b/.changeset/perfect-frogs-decide.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+[fix] load CSS before JS preloads
diff --git a/packages/kit/src/runtime/server/page/render.js b/packages/kit/src/runtime/server/page/render.js
@@ -100,8 +100,11 @@ export async function render_response({
 			? `<style amp-custom>${Array.from(styles).concat(rendered.css.code).join('\n')}</style>`
 			: ''
 		: [
-				...Array.from(js).map((dep) => `<link rel="modulepreload" href="${options.prefix}${dep}">`),
-				...Array.from(css).map((dep) => `<link rel="stylesheet" href="${options.prefix}${dep}">`)
+				// From https://web.dev/priority-hints/:
+				// Generally, preloads will load in the order the parser gets to them for anything above "Medium" priority
+				// Thus, we should list CSS first
+				...Array.from(css).map((dep) => `<link rel="stylesheet" href="${options.prefix}${dep}">`),
+				...Array.from(js).map((dep) => `<link rel="modulepreload" href="${options.prefix}${dep}">`)
 		  ].join('\n\t\t');
 
 	/** @type {string} */