Address feedback from PageSpeed.

aalhour · aalhour · commit f22e220fcd0c · 2025-12-10T20:40:38.000+01:00
diff --git a/.cursorrules b/.cursorrules
@@ -100,6 +100,18 @@ excerpt: "ملخص قصير"
 9. Test mobile responsiveness
 10. Verify language toggle works
 
+### Performance (PageSpeed)
+11. Use WebP images with JPG/PNG fallbacks
+12. Add `loading="lazy"` to images below the fold
+13. Add `loading="eager"` and `fetchpriority="high"` to hero/LCP images
+14. Preload critical fonts with `<link rel="preload" as="font" crossorigin>`
+15. Add `font-display: swap` to all `@font-face` declarations
+16. Preload hero/LCP images on pages where they appear
+17. Use async CSS loading: `<link rel="preload" as="style" onload="this.rel='stylesheet'">`
+18. Inline critical above-the-fold CSS in `<head>`
+19. Specify `width` and `height` on images to prevent layout shift
+20. Run `make prod-build` before committing
+
 ---
 
 ## 🚫 NEVER
@@ -115,6 +127,17 @@ excerpt: "ملخص قصير"
 9. Merge without testing both languages
 10. Create cramped layouts — white space is design
 
+### Performance (PageSpeed)
+11. Serve unoptimized images (always use WebP, compress JPG/PNG)
+12. Use images larger than needed (resize to display size)
+13. Forget `loading="lazy"` on below-fold images
+14. Chain critical requests (HTML → CSS → Font) — preload instead
+15. Use render-blocking CSS without inlining critical styles
+16. Load fonts without `font-display: swap`
+17. Omit `width`/`height` on images (causes layout shift)
+18. Use external font CDNs — self-host fonts instead
+19. Ship unminified CSS (use `sass: style: compressed` in `_config.yml`)
+
 ---
 
 ## ✅ VERIFICATION (After Every Change)
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -28,17 +28,33 @@
   <!-- Theme Color -->
   <meta name="theme-color" content="#B34E36">
   
-  <!-- Fonts (self-hosted) -->
+  <!-- Preload critical fonts (breaks render-blocking chain) -->
   {%- if lang == 'ar' -%}
     <link rel="preload" href="{{ '/assets/fonts/Tajawal-Regular.woff2' | relative_url }}" as="font" type="font/woff2" crossorigin>
     <link rel="preload" href="{{ '/assets/fonts/Tajawal-Bold.woff2' | relative_url }}" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="{{ '/assets/fonts/Tajawal-ExtraBold.woff2' | relative_url }}" as="font" type="font/woff2" crossorigin>
   {%- else -%}
     <link rel="preload" href="{{ '/assets/fonts/DMSans-Regular.woff2' | relative_url }}" as="font" type="font/woff2" crossorigin>
     <link rel="preload" href="{{ '/assets/fonts/DMSans-Bold.woff2' | relative_url }}" as="font" type="font/woff2" crossorigin>
   {%- endif -%}
   
-  <!-- Styles -->
-  <link rel="stylesheet" href="{{ '/assets/css/styles.css' | relative_url }}">
+  <!-- Preload hero image (LCP element) -->
+  {%- if page.layout == 'home' or page.url == '/ar/' or page.url == '/en/' -%}
+    <link rel="preload" href="{{ '/assets/img/logo-512-hq.webp' | relative_url }}" as="image" type="image/webp" fetchpriority="high">
+  {%- endif -%}
+  
+  <!-- Critical inline CSS (prevents FOUC) -->
+  <style>
+    :root{--sand:#F4E6C4;--terracotta:#B34E36;--night:#152029;--ink:#21313B}
+    html,body{margin:0;padding:0;color:var(--ink);background:linear-gradient(180deg,#FFFDF6 0%,var(--sand) 100%);min-height:100vh}
+    html[dir="rtl"],html[dir="rtl"] body{font-family:'Tajawal',sans-serif;line-height:1.8}
+    html[dir="ltr"],html[dir="ltr"] body{font-family:'DM Sans',sans-serif;line-height:1.6}
+    .wrap{max-width:940px;margin:0 auto;padding:32px 20px 64px}
+  </style>
+  
+  <!-- Full styles (async load to avoid render blocking) -->
+  <link rel="preload" href="{{ '/assets/css/styles.css' | relative_url }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
+  <noscript><link rel="stylesheet" href="{{ '/assets/css/styles.css' | relative_url }}"></noscript>
   
   <!-- SEO -->
   {% seo %}
