mirror of
https://github.com/OneUptime/oneuptime.git
synced 2026-04-06 00:32:12 +02:00
Merge pull request #2338 from OneUptime/claude/suspicious-elbakyan
fix: Improve Core Web Vitals (LCP and CLS)
This commit is contained in:
Simon Larsen
GitHub
@@ -4,7 +4,6 @@
|
||||
<link rel="preload" href="/docs/static/fonts/f1.woff2" as="font" crossorigin="" type="font/woff2">
|
||||
<link rel="preload" href="/docs/static/fonts/f2.woff2" as="font" crossorigin="" type="font/woff2">
|
||||
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
|
||||
<link rel="preconnect" href="https://cdn.tailwindcss.com" crossorigin>
|
||||
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
|
||||
<link rel="stylesheet" href="/docs/static/css/style.css" crossorigin data-precedence="next">
|
||||
<title>OneUptime Documentation</title>
|
||||
@@ -12,20 +11,6 @@
|
||||
<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 = {
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['var(--font-inter)', 'system-ui', 'sans-serif'],
|
||||
display: ['var(--font-lexend)', 'system-ui', 'sans-serif'],
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
/* Critical CSS to prevent CLS - reserve layout space before Tailwind loads */
|
||||
body { margin: 0; display: flex; min-height: 100vh; }
|
||||
|
||||
@@ -75,7 +75,7 @@
|
||||
|
||||
<!-- Syntax highlighting with highlight.js - using VS Code dark theme -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs2015.min.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js" defer></script>
|
||||
<script>
|
||||
// Lazy-load only the language packs actually used on this page
|
||||
(function(){
|
||||
|
||||
@@ -1,19 +1,33 @@
|
||||
<!-- Critical meta tags MUST be first (within first 1024 bytes) -->
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#000000" />
|
||||
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1E293B" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
||||
<!-- Resource hints - start fetching critical resources early -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<!-- 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">
|
||||
<!-- DNS prefetch for deferred analytics -->
|
||||
<link rel="dns-prefetch" href="//eu.posthog.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"
|
||||
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400..800&display=swap" as="style">
|
||||
|
||||
<!-- Google Fonts - only load weights actually used (400-800) -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400..800&display=swap"
|
||||
rel="stylesheet">
|
||||
|
||||
<!-- Font and form element styles -->
|
||||
<style>
|
||||
* {
|
||||
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
|
||||
background: transparent;
|
||||
bottom: 0;
|
||||
@@ -125,9 +139,11 @@
|
||||
.logo-item { min-width: 160px; height: 60px; }
|
||||
.logo-item img { max-height: 36px; max-width: 140px; }
|
||||
</style>
|
||||
|
||||
<!-- Tailwind CSS (render-critical) -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
|
||||
<% if(typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false){ %>
|
||||
<% if(typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false){ %>
|
||||
<!-- Google Tag Manager -->
|
||||
<script>(function (w, d, s, l, i) {
|
||||
w[l] = w[l] || []; w[l].push({
|
||||
@@ -146,23 +162,34 @@
|
||||
</script>
|
||||
<% } %>
|
||||
|
||||
|
||||
<style>
|
||||
.async-hide {
|
||||
opacity: 0 !important
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Deferred analytics - PostHog loads after page render to improve LCP -->
|
||||
<script>
|
||||
!function (t, e) { var o, n, p, r; e.__SV || (window.posthog = e, e._i = [], e.init = function (i, s, a) { function g(t, e) { var o = e.split("."); 2 == o.length && (t = t[o[0]], e = o[1]), t[e] = function () { t.push([e].concat(Array.prototype.slice.call(arguments, 0))) } } (p = t.createElement("script")).type = "text/javascript", p.async = !0, p.src = s.api_host + "/static/array.js", (r = t.getElementsByTagName("script")[0]).parentNode.insertBefore(p, r); var u = e; for (void 0 !== a ? u = e[a] = [] : a = "posthog", u.people = u.people || [], u.toString = function (t) { var e = "posthog"; return "posthog" !== a && (e += "." + a), t || (e += " (stub)"), e }, u.people.toString = function () { return u.toString(1) + ".people (stub)" }, o = "capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys".split(" "), n = 0; n < o.length; n++)g(u, o[n]); e._i.push([i, s, a]) }, e.__SV = 1) }(document, window.posthog || []);
|
||||
posthog.init('phc_lrbfSHsDc1YOhfbabPI8ncLCKz8eqeGdmu0O6IRKaz1', { api_host: 'https://eu.posthog.com', autocapture: false })
|
||||
// PostHog stub - capture calls are queued until the library loads
|
||||
window.posthog = window.posthog || [];
|
||||
window.posthog._i = [];
|
||||
window.posthog.init = window.posthog.init || function(){};
|
||||
window.posthog.capture = window.posthog.capture || function(){window.posthog.push(['capture'].concat(Array.prototype.slice.call(arguments, 0)));};
|
||||
|
||||
// Defer PostHog initialization until after page render
|
||||
(function() {
|
||||
function initPostHog() {
|
||||
!function (t, e) { var o, n, p, r; e.__SV || (window.posthog = e, e._i = [], e.init = function (i, s, a) { function g(t, e) { var o = e.split("."); 2 == o.length && (t = t[o[0]], e = o[1]), t[e] = function () { t.push([e].concat(Array.prototype.slice.call(arguments, 0))) } } (p = t.createElement("script")).type = "text/javascript", p.async = !0, p.src = s.api_host + "/static/array.js", (r = t.getElementsByTagName("script")[0]).parentNode.insertBefore(p, r); var u = e; for (void 0 !== a ? u = e[a] = [] : a = "posthog", u.people = u.people || [], u.toString = function (t) { var e = "posthog"; return "posthog" !== a && (e += "." + a), t || (e += " (stub)"), e }, u.people.toString = function () { return u.toString(1) + ".people (stub)" }, o = "capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys".split(" "), n = 0; n < o.length; n++)g(u, o[n]); e._i.push([i, s, a]) }, e.__SV = 1) }(document, window.posthog || []);
|
||||
posthog.init('phc_lrbfSHsDc1YOhfbabPI8ncLCKz8eqeGdmu0O6IRKaz1', { api_host: 'https://eu.posthog.com', autocapture: false });
|
||||
}
|
||||
|
||||
// Use requestIdleCallback to defer PostHog until browser is idle
|
||||
if ('requestIdleCallback' in window) {
|
||||
requestIdleCallback(initPostHog);
|
||||
} else {
|
||||
setTimeout(initPostHog, 1);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
//check if utm_source is present in the URL and save it to localstorage.
|
||||
|
||||
if (posthog) {
|
||||
// Track page view
|
||||
if (typeof posthog !== 'undefined' && posthog && posthog.capture) {
|
||||
posthog.capture('home/page_view', {
|
||||
'page': {
|
||||
'path': window.location.pathname,
|
||||
@@ -173,22 +200,22 @@
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// Track CTA clicks for conversion funnel analysis
|
||||
document.querySelectorAll('a[href="/accounts/register"], a[href="/enterprise/demo"], a[href*="register"], a[href*="demo"]').forEach(function(link) {
|
||||
link.addEventListener('click', function(e) {
|
||||
var href = this.getAttribute('href');
|
||||
var eventName = href.includes('register') ? 'cta_get_started' : 'cta_request_demo';
|
||||
|
||||
|
||||
// PostHog
|
||||
if (typeof posthog !== 'undefined' && posthog) {
|
||||
if (typeof posthog !== 'undefined' && posthog && posthog.capture) {
|
||||
posthog.capture('home/' + eventName, {
|
||||
'page': window.location.pathname,
|
||||
'href': href,
|
||||
'text': this.innerText.trim()
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// GA4 via dataLayer
|
||||
if (typeof dataLayer !== 'undefined') {
|
||||
dataLayer.push({
|
||||
@@ -217,7 +244,7 @@
|
||||
localStorage.setItem('utmContent', utm_content);
|
||||
localStorage.setItem('utmUrl', utm_url);
|
||||
|
||||
if (posthog) {
|
||||
if (typeof posthog !== 'undefined' && posthog && posthog.capture) {
|
||||
posthog.capture('home/utm_event', {
|
||||
utm_source: utm_source,
|
||||
utm_medium: utm_medium,
|
||||
@@ -231,13 +258,6 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#000000" />
|
||||
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1E293B" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
||||
<!-- PWA Meta Tags -->
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
||||
|
||||
Reference in New Issue
Block a user