perf(frontend): load FontAwesome CDN/Kit non-blocking; add CDN tests

- FontAwesome CDN CSS now uses async preload+onload pattern instead of blocking <link rel="stylesheet">
- FontAwesome Kit JS now uses `defer` attribute to keep it off the critical path
- Update integration tests to assert the new async/defer tag formats

Author: imorland

framework/core/src/Frontend/FrontendServiceProvider.php

@@ -103,26 +103,20 @@ public function register(): void
                     if ($fontAwesome->useCdn()) {
                         $cdnUrl = $fontAwesome->cdnUrl();
                         if (! empty($cdnUrl)) {
-                            // Preload CDN CSS for better performance
-                            $document->preloads[] = [
-                                'href' => $cdnUrl,
-                                'as' => 'style',
-                                'crossorigin' => 'anonymous'
-                            ];
-                            // Add CDN CSS with crossorigin for better caching
-                            $document->head[] = '<link rel="stylesheet" href="'.e($cdnUrl).'" crossorigin="anonymous">';
+                            // Load asynchronously — FA icons are only rendered after JS boots the
+                            // SPA, so there is no FOUC risk from deferring this stylesheet.
+                            // The <noscript> fallback covers JS-disabled browsers.
+                            $escaped = e($cdnUrl);
+                            $document->head[] = '<link rel="preload" href="'.$escaped.'" as="style" crossorigin="anonymous" onload="this.onload=null;this.rel=\'stylesheet\'">'
+                                .'<noscript><link rel="stylesheet" href="'.$escaped.'" crossorigin="anonymous"></noscript>';
                         }
                     } elseif ($fontAwesome->useKit()) {
                         $kitUrl = $fontAwesome->kitUrl();
                         if (! empty($kitUrl)) {
-                            // Preload Kit JS for better performance
-                            $document->preloads[] = [
-                                'href' => $kitUrl,
-                                'as' => 'script',
-                                'crossorigin' => 'anonymous'
-                            ];
-                            // Add Kit JS with crossorigin for better caching
-                            $document->head[] = '<script src="'.e($kitUrl).'" crossorigin="anonymous"></script>';
+                            // Defer Kit JS — it has no dependencies and nothing depends on it
+                            // executing synchronously; defer keeps it out of the critical path
+                            // while preserving execution order relative to other deferred scripts.
+                            $document->head[] = '<script src="'.e($kitUrl).'" crossorigin="anonymous" defer></script>';
                         }
                     }
 

framework/core/tests/integration/frontend/FontAwesomeLoadingTest.php

@@ -66,11 +66,11 @@ public function fontawesome_cdn_loads_css_instead_of_local_fonts()
 
         $body = $response->getBody()->getContents();
 
-        // Should contain CDN CSS with crossorigin attribute
-        $this->assertStringContainsString('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" crossorigin="anonymous">', $body);
+        // Should load CDN CSS asynchronously (preload + onload swap)
+        $this->assertStringContainsString('<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" as="style" crossorigin="anonymous" onload="this.onload=null;this.rel=\'stylesheet\'">', $body);
 
-        // Should contain preload for CDN CSS
-        $this->assertStringContainsString('<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" as="style" crossorigin="anonymous">', $body);
+        // Should include noscript fallback
+        $this->assertStringContainsString('<noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" crossorigin="anonymous"></noscript>', $body);
 
         // Should not contain local font preloads
         $this->assertStringNotContainsString('fa-solid-900.woff2', $body);
@@ -89,11 +89,8 @@ public function fontawesome_kit_loads_js_instead_of_local_fonts()
 
         $body = $response->getBody()->getContents();
 
-        // Should contain Kit JS with crossorigin attribute
-        $this->assertStringContainsString('<script src="https://kit.fontawesome.com/abc123xyz.js" crossorigin="anonymous"></script>', $body);
-
-        // Should contain preload for Kit JS
-        $this->assertStringContainsString('<link rel="preload" href="https://kit.fontawesome.com/abc123xyz.js" as="script" crossorigin="anonymous">', $body);
+        // Should load Kit JS deferred (not blocking)
+        $this->assertStringContainsString('<script src="https://kit.fontawesome.com/abc123xyz.js" crossorigin="anonymous" defer></script>', $body);
 
         // Should not contain local font preloads
         $this->assertStringNotContainsString('fa-solid-900.woff2', $body);
@@ -164,11 +161,11 @@ public function config_override_takes_precedence_over_database_settings()
 
         $body = $response->getBody()->getContents();
 
-        // Should use config CDN URL with crossorigin attribute, not local fonts
-        $this->assertStringContainsString('<link rel="stylesheet" href="https://config.example.com/fontawesome.css" crossorigin="anonymous">', $body);
+        // Should load config CDN CSS asynchronously (preload + onload swap)
+        $this->assertStringContainsString('<link rel="preload" href="https://config.example.com/fontawesome.css" as="style" crossorigin="anonymous" onload="this.onload=null;this.rel=\'stylesheet\'">', $body);
 
-        // Should contain preload for config CDN CSS
-        $this->assertStringContainsString('<link rel="preload" href="https://config.example.com/fontawesome.css" as="style" crossorigin="anonymous">', $body);
+        // Should include noscript fallback
+        $this->assertStringContainsString('<noscript><link rel="stylesheet" href="https://config.example.com/fontawesome.css" crossorigin="anonymous"></noscript>', $body);
 
         // Should not contain local font preloads
         $this->assertStringNotContainsString('fa-solid-900.woff2', $body);
@@ -194,11 +191,8 @@ public function config_kit_override_takes_precedence_over_database_cdn()
 
         $body = $response->getBody()->getContents();
 
-        // Should use config Kit URL with crossorigin attribute
-        $this->assertStringContainsString('<script src="https://kit.fontawesome.com/config123.js" crossorigin="anonymous"></script>', $body);
-
-        // Should contain preload for config Kit JS
-        $this->assertStringContainsString('<link rel="preload" href="https://kit.fontawesome.com/config123.js" as="script" crossorigin="anonymous">', $body);
+        // Should use config Kit URL with crossorigin attribute, deferred
+        $this->assertStringContainsString('<script src="https://kit.fontawesome.com/config123.js" crossorigin="anonymous" defer></script>', $body);
 
         // Should not contain database CDN URL
         $this->assertStringNotContainsString('database.example.com', $body);