updating to load css files with rel=preload rather than stylesheet to…

… prevent render blocking
toastnz · Mar 13, 2024 · 5a740cd · 5a740cd
1 parent 4c72879
commit 5a740cd
Showing 1 changed file with 13 additions and 3 deletions.
diff --git a/src/View/Enhanced_Backend.php b/src/View/Enhanced_Backend.php
@@ -107,10 +107,12 @@ public function includeInHTML($content)
 
         // CSS file links
         foreach ($this->getCSS() as $file => $params) {
+            $path = $this->pathForFile($file);
             $htmlAttributes = [
-                'rel' => 'stylesheet',
-                'type' => 'text/css',
-                'href' => $this->pathForFile($file),
+                'rel' => 'preload',
+                'as' => 'style',
+                'href' => $path,
+                'onload' => "this.onload=null;this.rel='stylesheet'"
             ];
             if (!empty($params['media'])) {
                 $htmlAttributes['media'] = $params['media'];
@@ -123,6 +125,14 @@ public function includeInHTML($content)
             }
             $requirements .= HTML::createTag('link', $htmlAttributes);
             $requirements .= "\n";
+
+            // Add a noscript fallback
+            $fallbackAttributes = [
+                'rel' => 'stylesheet',
+                'href' => $path,
+            ];
+            $requirements .= '<noscript>' . HTML::createTag('link', $fallbackAttributes) . '</noscript>';
+            $requirements .= "\n";
         }
 
         // Literal custom CSS content