diff --git a/APIReference/views/partials/head.ejs b/APIReference/views/partials/head.ejs
index 1743b6c1b5..d1aa0b12b1 100644
--- a/APIReference/views/partials/head.ejs
+++ b/APIReference/views/partials/head.ejs
@@ -20,6 +20,7 @@
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/javascript.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/typescript.min.js"></script>
 
+   <link rel="preload" href="https://cdn.tailwindcss.com" as="script">
    <script src="https://cdn.tailwindcss.com"></script>
 
    <script>
diff --git a/Accounts/views/index.ejs b/Accounts/views/index.ejs
index 7afd3e0ca5..426587aaff 100644
--- a/Accounts/views/index.ejs
+++ b/Accounts/views/index.ejs
@@ -42,10 +42,11 @@
 
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" as="style">
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
     <style>
       * {
-      font-family: Inter;
+      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
       }
 
 
@@ -75,6 +76,7 @@
           width: auto;
       }
       </style>
+    <link rel="preload" href="/accounts/assets/js/tailwind-3.4.5.js" as="script">
     <script src="/accounts/assets/js/tailwind-3.4.5.js"></script>
 
   <title>OneUptime Accounts</title>
diff --git a/AdminDashboard/views/index.ejs b/AdminDashboard/views/index.ejs
index 8739bba88e..a9ada0b092 100644
--- a/AdminDashboard/views/index.ejs
+++ b/AdminDashboard/views/index.ejs
@@ -34,10 +34,11 @@
     <meta name="theme-color" content="#121212">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" as="style">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
     <style>
       * {
-      font-family: Inter;
+      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
       }
 
 
@@ -67,6 +68,7 @@
           width: auto;
       }
       </style>
+    <link rel="preload" href="/admin/assets/js/tailwind-3.4.5.js" as="script">
     <script src="/admin/assets/js/tailwind-3.4.5.js"></script>
     
     <script src="/admin/env.js"></script>
diff --git a/App/FeatureSet/Identity/Views/Partials/Head.ejs b/App/FeatureSet/Identity/Views/Partials/Head.ejs
index 22d34d55d5..a3baba9ef8 100644
--- a/App/FeatureSet/Identity/Views/Partials/Head.ejs
+++ b/App/FeatureSet/Identity/Views/Partials/Head.ejs
@@ -1,10 +1,11 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" as="style">
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
     rel="stylesheet">
 <style>
     * {
-        font-family: Inter;
+        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     }
 
 
@@ -34,6 +35,7 @@
         width: auto;
     }
 </style>
+<link rel="preload" href="https://cdn.tailwindcss.com" as="script">
 <script src="https://cdn.tailwindcss.com"></script>
 
 <!-- Google Tag Manager -->
diff --git a/Common/Server/Views/Partials/Head.ejs b/Common/Server/Views/Partials/Head.ejs
index 22d34d55d5..a3baba9ef8 100644
--- a/Common/Server/Views/Partials/Head.ejs
+++ b/Common/Server/Views/Partials/Head.ejs
@@ -1,10 +1,11 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" as="style">
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
     rel="stylesheet">
 <style>
     * {
-        font-family: Inter;
+        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     }
 
 
@@ -34,6 +35,7 @@
         width: auto;
     }
 </style>
+<link rel="preload" href="https://cdn.tailwindcss.com" as="script">
 <script src="https://cdn.tailwindcss.com"></script>
 
 <!-- Google Tag Manager -->
diff --git a/Dashboard/views/index.ejs b/Dashboard/views/index.ejs
index 425978f5b9..4c97b0ef14 100644
--- a/Dashboard/views/index.ejs
+++ b/Dashboard/views/index.ejs
@@ -125,7 +125,7 @@
 
   <style>
     * {
-      font-family: Inter;
+      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     }
 
 
@@ -169,6 +169,16 @@
     }
   </style>
 
+  <!-- Preload Tailwind to reduce FOUC/CLS -->
+  <link rel="preload" href="/dashboard/assets/js/tailwind-3.4.5.js" as="script">
+
+  <!-- Critical CSS to prevent layout shift before Tailwind loads -->
+  <style>
+    .h-full { height: 100%; }
+    .bg-gray-50 { background-color: #f9fafb; }
+    #root { min-height: 100vh; }
+  </style>
+
   <script src="/dashboard/assets/js/tailwind-3.4.5.js"></script>
 
   <script src="/dashboard/env.js"></script>
diff --git a/Docs/Views/Partials/Head.ejs b/Docs/Views/Partials/Head.ejs
index 047cf0a4ed..204da9592d 100644
--- a/Docs/Views/Partials/Head.ejs
+++ b/Docs/Views/Partials/Head.ejs
@@ -12,6 +12,7 @@
 <meta name="keywords" content="OneUptime, documentation, monitoring, observability, alerts, incidents, status page, open source">
 <link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16">
 <meta name="next-size-adjust">
+<link rel="preload" href="https://cdn.tailwindcss.com" as="script">
 <script src="https://cdn.tailwindcss.com"></script>
 <script>
     tailwind.config = {
diff --git a/Home/Views/footer.ejs b/Home/Views/footer.ejs
index baecb6bb90..714c89b891 100644
--- a/Home/Views/footer.ejs
+++ b/Home/Views/footer.ejs
@@ -43,7 +43,7 @@
         <!-- Brand Section -->
         <div class="space-y-6">
           <a href="/" class="inline-block">
-            <img class="h-8 w-auto" src="/img/4-gray.svg" alt="OneUptime">
+            <img class="h-8 w-auto" src="/img/4-gray.svg" alt="OneUptime" width="140" height="32" loading="lazy">
           </a>
           <p class="text-sm text-gray-600 leading-relaxed max-w-xs">
             The complete open-source observability platform. Monitor, debug, and improve your entire stack in one place.
diff --git a/Home/Views/head-basic.ejs b/Home/Views/head-basic.ejs
index 6bde1278a4..d67a52d8ff 100644
--- a/Home/Views/head-basic.ejs
+++ b/Home/Views/head-basic.ejs
@@ -3,11 +3,14 @@
 <!-- Preconnect to external image/avatar domains to reduce layout shift & latency -->
 <link rel="preconnect" href="https://avatars.githubusercontent.com" crossorigin>
 <link rel="dns-prefetch" href="//avatars.githubusercontent.com">
+<!-- Preload Tailwind CDN to reduce FOUC/CLS -->
+<link rel="preload" href="https://cdn.tailwindcss.com" as="script">
+<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" as="style">
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
     rel="stylesheet">
 <style>
     * {
-        font-family: Inter;
+        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     }
 
 
@@ -64,6 +67,64 @@
         border-color: #4b5563;
     }
 </style>
+<!-- Critical CSS to prevent layout shift before Tailwind loads -->
+<style>
+    /* Critical layout styles to prevent CLS - these match Tailwind utility classes */
+    .bg-white { background-color: #fff; }
+    .relative { position: relative; }
+    .flex { display: flex; }
+    .hidden { display: none; }
+    .items-center { align-items: center; }
+    .justify-between { justify-content: space-between; }
+    .justify-start { justify-content: flex-start; }
+    .justify-center { justify-content: center; }
+    .text-center { text-align: center; }
+    .mx-auto { margin-left: auto; margin-right: auto; }
+    .max-w-7xl { max-width: 80rem; }
+    .max-w-3xl { max-width: 48rem; }
+    .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
+    .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
+    .py-12 { padding-top: 3rem; padding-bottom: 3rem; }
+    .py-24 { padding-top: 6rem; padding-bottom: 6rem; }
+    .border-b-2 { border-bottom-width: 2px; border-bottom-style: solid; }
+    .border-gray-100 { border-color: #f3f4f6; }
+    .overflow-hidden { overflow: hidden; }
+    .w-auto { width: auto; }
+    .h-8 { height: 2rem; }
+    .h-10 { height: 2.5rem; }
+    .space-x-10 > :not([hidden]) ~ :not([hidden]) { margin-left: 2.5rem; }
+    .inline-flex { display: inline-flex; }
+    .grid { display: grid; }
+    .gap-4 { gap: 1rem; }
+    .gap-5 { gap: 1.25rem; }
+    .isolate { isolation: isolate; }
+    .fixed { position: fixed; }
+    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
+    @media (min-width: 640px) {
+        .sm\:h-10 { height: 2.5rem; }
+        .sm\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }
+        .sm\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+        .sm\:gap-5 { gap: 1.25rem; }
+    }
+    @media (min-width: 768px) {
+        .md\:hidden { display: none; }
+        .md\:flex { display: flex; }
+        .md\:justify-start { justify-content: flex-start; }
+        .md\:space-x-10 > :not([hidden]) ~ :not([hidden]) { margin-left: 2.5rem; }
+    }
+    @media (min-width: 1024px) {
+        .lg\:w-0 { width: 0; }
+        .lg\:flex-1 { flex: 1 1 0%; }
+        .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
+        .lg\:py-40 { padding-top: 10rem; padding-bottom: 10rem; }
+    }
+    .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .auto-rows-fr { grid-auto-rows: minmax(0, 1fr); }
+    /* Reserve space for logo-roll section to prevent CLS */
+    .marquee-container { overflow: hidden; min-height: 60px; }
+    .logo-item { min-width: 160px; height: 60px; }
+    .logo-item img { max-height: 36px; max-width: 140px; }
+</style>
 <script src="https://cdn.tailwindcss.com"></script>
 
 <% if(typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false){ %> 
diff --git a/Home/Views/logo-roll.ejs b/Home/Views/logo-roll.ejs
index 7f61d008ae..211c8aeba5 100644
--- a/Home/Views/logo-roll.ejs
+++ b/Home/Views/logo-roll.ejs
@@ -60,90 +60,90 @@
       <div class="logo-marquee">
         <!-- First set of logos -->
         <div class="logo-item">
-          <img src="/img/mistral-ai-full.png" alt="Mistral AI">
+          <img src="/img/mistral-ai-full.png" alt="Mistral AI" width="140" height="36" loading="lazy" decoding="async">
         </div>
         <div class="logo-item">
-          <img src="/img/securonix-blue.svg" alt="Securonix">
+          <img src="/img/securonix-blue.svg" alt="Securonix" width="140" height="36" loading="lazy" decoding="async">
         </div>
         <div class="logo-item">
-          <img src="/img/aareon.svg" alt="Aareon">
+          <img src="/img/aareon.svg" alt="Aareon" width="140" height="36" loading="lazy" decoding="async">
         </div>
         <div class="logo-item">
-          <img src="/img/viewsonic.svg" alt="ViewSonic">
+          <img src="/img/viewsonic.svg" alt="ViewSonic" width="140" height="36" loading="lazy" decoding="async">
         </div>
         <div class="logo-item">
-          <img src="/img/syniti.png" alt="Syniti" style="transform: translateY(4px);">
+          <img src="/img/syniti.png" alt="Syniti" width="140" height="36" loading="lazy" decoding="async" style="transform: translateY(4px);">
         </div>
         <div class="logo-item">
-          <img src="/img/skillable-logo.svg" alt="Skillable" style="max-height: 46px; transform: translateY(-8px);">
+          <img src="/img/skillable-logo.svg" alt="Skillable" width="140" height="46" loading="lazy" decoding="async" style="max-height: 46px; transform: translateY(-8px);">
         </div>
         <div class="logo-item">
-          <img src="/img/nt-ware.png" alt="NT-ware" style="max-height: 26px;">
+          <img src="/img/nt-ware.png" alt="NT-ware" width="140" height="26" loading="lazy" decoding="async" style="max-height: 26px;">
         </div>
         <div class="logo-item">
-          <img src="/img/sodexo.svg" alt="Sodexo" style="max-height: 40px; transform: translateY(-4px);">
+          <img src="/img/sodexo.svg" alt="Sodexo" width="140" height="40" loading="lazy" decoding="async" style="max-height: 40px; transform: translateY(-4px);">
         </div>
         <div class="logo-item">
-          <img src="/img/avolve.webp" alt="Avolve Software" style="transform: translateY(-4px);">
+          <img src="/img/avolve.webp" alt="Avolve Software" width="140" height="36" loading="lazy" decoding="async" style="transform: translateY(-4px);">
         </div>
         <div class="logo-item">
-          <img src="/img/Dotdash_Meredith.svg" alt="Dotdash Meredith">
+          <img src="/img/Dotdash_Meredith.svg" alt="Dotdash Meredith" width="140" height="36" loading="lazy" decoding="async">
         </div>
         <div class="logo-item">
-          <img src="/img/trustify.svg" alt="Trustify" style="max-height: 46px;">
+          <img src="/img/trustify.svg" alt="Trustify" width="140" height="46" loading="lazy" decoding="async" style="max-height: 46px;">
         </div>
         <div class="logo-item">
-          <img src="/img/bowie.svg" alt="Bowie" style="max-height: 66px; transform: translateY(-8px);">
+          <img src="/img/bowie.svg" alt="Bowie" width="140" height="66" loading="lazy" decoding="async" style="max-height: 66px; transform: translateY(-8px);">
         </div>
         <div class="logo-item">
-          <img src="/img/talkwalker.svg" alt="Talkwalker" style="max-height: 56px;">
+          <img src="/img/talkwalker.svg" alt="Talkwalker" width="140" height="56" loading="lazy" decoding="async" style="max-height: 56px;">
         </div>
         <div class="logo-item">
-          <img src="/img/cscs.svg" alt="CSCS">
+          <img src="/img/cscs.svg" alt="CSCS" width="140" height="36" loading="lazy" decoding="async">
         </div>
 
         <!-- Duplicate set for seamless loop -->
         <div class="logo-item">
-          <img src="/img/mistral-ai-full.png" alt="Mistral AI">
+          <img src="/img/mistral-ai-full.png" alt="Mistral AI" width="140" height="36" loading="lazy" decoding="async">
         </div>
         <div class="logo-item">
-          <img src="/img/securonix-blue.svg" alt="Securonix">
+          <img src="/img/securonix-blue.svg" alt="Securonix" width="140" height="36" loading="lazy" decoding="async">
         </div>
         <div class="logo-item">
-          <img src="/img/aareon.svg" alt="Aareon">
+          <img src="/img/aareon.svg" alt="Aareon" width="140" height="36" loading="lazy" decoding="async">
         </div>
         <div class="logo-item">
-          <img src="/img/viewsonic.svg" alt="ViewSonic">
+          <img src="/img/viewsonic.svg" alt="ViewSonic" width="140" height="36" loading="lazy" decoding="async">
         </div>
         <div class="logo-item">
-          <img src="/img/syniti.png" alt="Syniti" style="transform: translateY(4px);">
+          <img src="/img/syniti.png" alt="Syniti" width="140" height="36" loading="lazy" decoding="async" style="transform: translateY(4px);">
         </div>
         <div class="logo-item">
-          <img src="/img/skillable-logo.svg" alt="Skillable" style="max-height: 46px; transform: translateY(-8px);">
+          <img src="/img/skillable-logo.svg" alt="Skillable" width="140" height="46" loading="lazy" decoding="async" style="max-height: 46px; transform: translateY(-8px);">
         </div>
         <div class="logo-item">
-          <img src="/img/nt-ware.png" alt="NT-ware" style="max-height: 26px;">
+          <img src="/img/nt-ware.png" alt="NT-ware" width="140" height="26" loading="lazy" decoding="async" style="max-height: 26px;">
         </div>
         <div class="logo-item">
-          <img src="/img/sodexo.svg" alt="Sodexo" style="max-height: 40px; transform: translateY(-4px);">
+          <img src="/img/sodexo.svg" alt="Sodexo" width="140" height="40" loading="lazy" decoding="async" style="max-height: 40px; transform: translateY(-4px);">
         </div>
         <div class="logo-item">
-          <img src="/img/avolve.webp" alt="Avolve Software" style="transform: translateY(-4px);">
+          <img src="/img/avolve.webp" alt="Avolve Software" width="140" height="36" loading="lazy" decoding="async" style="transform: translateY(-4px);">
         </div>
         <div class="logo-item">
-          <img src="/img/Dotdash_Meredith.svg" alt="Dotdash Meredith">
+          <img src="/img/Dotdash_Meredith.svg" alt="Dotdash Meredith" width="140" height="36" loading="lazy" decoding="async">
         </div>
         <div class="logo-item">
-          <img src="/img/trustify.svg" alt="Trustify" style="max-height: 46px;">
+          <img src="/img/trustify.svg" alt="Trustify" width="140" height="46" loading="lazy" decoding="async" style="max-height: 46px;">
         </div>
         <div class="logo-item">
-          <img src="/img/bowie.svg" alt="Bowie" style="max-height: 66px; transform: translateY(-8px);">
+          <img src="/img/bowie.svg" alt="Bowie" width="140" height="66" loading="lazy" decoding="async" style="max-height: 66px; transform: translateY(-8px);">
         </div>
         <div class="logo-item">
-          <img src="/img/talkwalker.svg" alt="Talkwalker" style="max-height: 56px;">
+          <img src="/img/talkwalker.svg" alt="Talkwalker" width="140" height="56" loading="lazy" decoding="async" style="max-height: 56px;">
         </div>
         <div class="logo-item">
-          <img src="/img/cscs.svg" alt="CSCS">
+          <img src="/img/cscs.svg" alt="CSCS" width="140" height="36" loading="lazy" decoding="async">
         </div>
       </div>
     </div>
diff --git a/Home/Views/nav.ejs b/Home/Views/nav.ejs
index 0a2c78f066..39a660ad49 100644
--- a/Home/Views/nav.ejs
+++ b/Home/Views/nav.ejs
@@ -8,7 +8,7 @@
       <div class="flex justify-start lg:w-0 lg:flex-1">
         <a href="/">
           <span class="sr-only">OneUptime</span>
-          <img class="h-8 w-auto sm:h-10" src="/img/3-transparent.svg" alt="OneUptime logo">
+          <img class="h-8 w-auto sm:h-10" src="/img/3-transparent.svg" alt="OneUptime logo" width="140" height="40" fetchpriority="high">
         </a>
       </div>
       <div class="-my-2 -mr-2 md:hidden">
diff --git a/StatusPage/views/index.ejs b/StatusPage/views/index.ejs
index da48d650ce..515bacc92f 100644
--- a/StatusPage/views/index.ejs
+++ b/StatusPage/views/index.ejs
@@ -14,10 +14,11 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="icon" type="image/png" href="<%= typeof faviconUrl !== 'undefined' ? faviconUrl : '/status-page/assets/images/favicon.png' %>">
+    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" as="style">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
     <style>
       * {
-      font-family: Inter;
+      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
       }
 
 
@@ -47,6 +48,7 @@
           width: auto;
       }
       </style>
+    <link rel="preload" href="/status-page/assets/js/tailwind-3.4.5.js" as="script">
     <script src="/status-page/assets/js/tailwind-3.4.5.js"></script>
     <title><%= typeof title !== 'undefined' ? title : 'Status Page' %></title>