github/oneuptime
1
1
Fork 0
mirror of https://github.com/OneUptime/oneuptime.git synced 2026-04-06 00:32:12 +02:00
Code Issues 193 Packages Projects Releases Wiki Activity

feat: preload Tailwind CSS and Google Fonts to improve loading performance and reduce layout shifts

Browse Source
This commit is contained in:
Nawaz Dhandala
2026-02-19 18:04:49 +00:00
parent 3a0d85174f
commit ab83172d60
12 changed files with 120 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
APIReference/views/partials/head.ejs
View File

@@ -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>

4
Accounts/views/index.ejs
View File

@@ -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>

4
AdminDashboard/views/index.ejs
View File

@@ -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>

4
App/FeatureSet/Identity/Views/Partials/Head.ejs
View File

@@ -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 -->

4
Common/Server/Views/Partials/Head.ejs
View File

@@ -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 -->

12
Dashboard/views/index.ejs
View File

@@ -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>

1
Docs/Views/Partials/Head.ejs
View File

@@ -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 = {

2
Home/Views/footer.ejs
View File

@@ -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.

63
Home/Views/head-basic.ejs
View File

@@ -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){ %>

56
Home/Views/logo-roll.ejs
View File

@@ -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>

2
Home/Views/nav.ejs
View File

@@ -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">

4
StatusPage/views/index.ejs
View File

@@ -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>