Change preload order to load fonts right after stylesheets

wille · Oct 16, 2024 · 4c99cd2 · 4c99cd2
1 parent f861bab
commit 4c99cd2
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/src/collector.ts b/src/collector.ts
@@ -78,15 +78,15 @@ export class ChunkCollector {
     }: {
         /**
          * Will include the entry <script module=""> and entry stylesheets tags.
-         * 
+         *
          * If you are using the default Vite settings and having vite transform your index.html
          * as build time, then the entry tags are already included in the template.
          */
-        includeEntry?: boolean,
+        includeEntry?: boolean;
 
         /**
          * Set the `async` attribute on the entry <script module=""> tag.
-         * 
+         *
          * This requires you to control template generation and add the <script module async> tag to the end of the <body>
          */
         asyncScript?: boolean;
@@ -95,7 +95,7 @@ export class ChunkCollector {
 
         return modules
             .filter((m) => includeEntry || !m.isEntry)
-            .map(m => createHtmlTag({ ...m, asyncScript }))
+            .map((m) => createHtmlTag({ ...m, asyncScript }))
             .filter((x) => x != null)
             .join('\n');
     }
@@ -293,7 +293,7 @@ function collectModules(
                 case 'woff':
                 case 'ttf':
                     as = 'font';
-                    mimeType = `font/${ext}`;                
+                    mimeType = `font/${ext}`;
                     if (preloadFonts) break;
                     else continue;
             }

diff --git a/src/utils.ts b/src/utils.ts
@@ -79,15 +79,16 @@ function linkPriority(module: Preload) {
     switch (module.rel) {
         // Stylesheets have the 'Highest' priority in Chrome
         case 'stylesheet':
-            return 4;
+            return 5;
         // <script> and <link rel=modulepreload> have the 'High' priority
         case 'module':
             return 3;
         case 'modulepreload':
             return 2;
         case 'preload':
+            // Load fonts just below stylesheets. If we don't, there is a higher risk of that the text will flash on the site
             if (module.as === 'font') {
-                return 1;
+                return 4;
             }
             return 0;
         default: