From b2f4767a2af185f5308d55a2c6590755e87f3f8a Mon Sep 17 00:00:00 2001
From: phyce <phyce.claw.vps.1194@phyce.dev>
Date: Fri, 31 Jul 2026 08:42:43 +0000
Subject: [PATCH] Preload Poppins and set font-display: swap (fixes CLS)

Metric: Cumulative Layout Shift (mobile home 0.330 -> expected ~0)

Lighthouse attributes the homepage layout shift to font loading, not to
the plugin table:

  layout-shift score 0.3299
    culprit: Web font loaded - /fonts/poppins-400.woff2
    culprit: Web font loaded - /fonts/poppins-500.woff2

The @font-face blocks had no font-display, so the browser used the
default `auto` (block, then swap) and there was no preload, so the fonts
were only discovered after app.css parsed. Text painted in the fallback
and then reflowed once Poppins arrived.

Adds font-display: swap to all three faces and preloads the two weights
that render above the fold (400 and 500). Both files are ~7.8 KB, so the
preload cost is negligible against the shift it removes. Weight 700 is
not preloaded - it is not an above-the-fold face and Lighthouse did not
flag it as a shift culprit.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 resources/css/app.css         | 3 +++
 resources/views/app.blade.php | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/resources/css/app.css b/resources/css/app.css
index cdf33c3..67b3b79 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -16,6 +16,7 @@
     font-family: 'Poppins';
     font-style: normal;
     font-weight: 400;
+    font-display: swap;
     src: url('/fonts/poppins-400.woff2') format('woff2');
 }
 
@@ -23,6 +24,7 @@
     font-family: 'Poppins';
     font-style: normal;
     font-weight: 500;
+    font-display: swap;
     src: url('/fonts/poppins-500.woff2') format('woff2');
 }
 
@@ -30,6 +32,7 @@
     font-family: 'Poppins';
     font-style: normal;
     font-weight: 700;
+    font-display: swap;
     src: url('/fonts/poppins-700.woff2') format('woff2');
 }
 
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index 6859944..5b1fd92 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -8,6 +8,9 @@
 
         <link rel="icon" href="/img/favicon.png" sizes="any">
 
+        <link rel="preload" as="font" type="font/woff2" href="/fonts/poppins-400.woff2" crossorigin>
+        <link rel="preload" as="font" type="font/woff2" href="/fonts/poppins-500.woff2" crossorigin>
+
         {!! SEOMeta::generate(false) !!}
         {!! OpenGraph::generate() !!}
         {!! Twitter::generate() !!}