Oliver/ODOO4projects.com
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: inline critical CSS, defer GSAP, preconnect cdnjs, font-display swap

Browse Source 
- Inline all above-the-fold CSS (hero, server-banner, buttons, layout) as
  inline <style> in <head> to eliminate render-blocking style.css
- Load full style.css via media='print' onload pattern (async, non-blocking)
- Move GSAP from <head> to before </body> (right before script.js)
- Preconnect to cdnjs.cloudflare.com
- Override Font Awesome 6 font-display to 'swap' to prevent FOIT
This commit is contained in:
reef
2026-08-20 09:55:10 +00:00
parent 94b5e36d8e
commit 9a9319e3a3
1 changed files with 49 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+49 -2
View File
@@ -26,12 +26,58 @@
</script> </script>
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin />
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Marcellus&display=swap" /> <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Marcellus&display=swap" />
<link rel="preload" as="style" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" /> <link rel="preload" as="style" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Marcellus&display=swap" media="print" onload="this.media='all'" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Marcellus&display=swap" media="print" onload="this.media='all'" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" media="print" onload="this.media='all'" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" media="print" onload="this.media='all'" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script> <style>
<link rel="stylesheet" href="style.css" /> /* critical: Grand Hotel Business Lounge */
*{box-sizing:border-box}
body{margin:0;font-family:Inter,'Segoe UI',sans-serif;font-size:1rem;line-height:1.6;color:var(--ink);background:var(--cream)}
h1,h2,h3,h4{font-family:Marcellus,'Georgia',serif;font-weight:400;line-height:1.15;margin-top:0;margin-bottom:.5rem}
h1{font-size:clamp(2rem,5vw,3.6rem)}h2{font-size:clamp(1.6rem,3.2vw,2.4rem)}h3{font-size:clamp(1.1rem,2vw,1.4rem)}
p{margin-top:0;margin-bottom:1rem}a{color:var(--brass-deep);text-decoration:none}a:hover{color:var(--brass)}img{max-width:100%;height:auto;vertical-align:middle}
@font-face{font-family:'Font Awesome 6 Brands';font-display:swap}@font-face{font-family:'Font Awesome 6 Free';font-display:swap}
:root{--midnight:#0d1b2e;--midnight-2:#12233c;--midnight-3:#162a45;--brass:#c9a227;--brass-bright:#ddb84a;--brass-deep:#8a6f1f;--cream:#f4f0e8;--cream-2:#ece6da;--ivory:#faf7f1;--ink:#171c26;--ink-soft:rgba(23,28,38,.6);--ink-faint:rgba(23,28,38,.38);--line:rgba(23,28,38,.09);--line-brass:rgba(201,162,39,.25);--success:#1e7a46;--radius:.5rem;--radius-lg:1rem;--radius-pill:2rem;--shadow-rest:0 2px 8px rgba(13,27,46,.08);--shadow-hover:0 12px 30px rgba(13,27,46,.16);--shadow-brass:0 8px 20px rgba(201,162,39,.25)}
.container{width:86%;padding:0 1.25rem;margin:0 auto;max-width:1200px}
.btn{display:inline-block;padding:.7rem 2rem;font-family:Marcellus,Georgia,serif;font-size:.9rem;letter-spacing:.04em;text-transform:uppercase;border:1px solid transparent;border-radius:var(--radius);cursor:pointer;text-decoration:none;transition:all .25s}
.btn-brass{background:var(--brass);color:var(--midnight);border-color:var(--brass)}.btn-brass:hover{background:var(--brass-bright);border-color:var(--brass-bright);transform:translateY(-1px);box-shadow:var(--shadow-brass)}
.btn-outline{background:transparent;color:var(--cream);border-color:var(--line-brass)}.btn-outline:hover{border-color:var(--brass);color:var(--brass);background:rgba(201,162,39,.08)}
.btn-lg{padding:.85rem 2.5rem;font-size:1rem}
.hero{background:var(--midnight);padding:4rem 0 0;position:relative;overflow:hidden;min-height:85vh;display:flex;flex-direction:column}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--midnight) 50%,rgba(13,27,46,.4) 100%);opacity:.5;z-index:0}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}.hero-bg-slide{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:.25;filter:brightness(1.15)saturate(1.1)}
.hero .container{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:center}
.hero-kicker{font-family:Inter,sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--brass);margin-bottom:.75rem}
.hero h1{color:#fff;max-width:700px;margin-bottom:1rem;font-weight:400}.hero h1 span{color:var(--brass)}
.hero-sub{font-size:1.05rem;color:rgba(255,255,255,.7);max-width:560px;line-height:1.7;margin-bottom:1.5rem}
.hero-stats{display:flex;gap:1.5rem;margin-bottom:2rem;flex-wrap:wrap}.hero-stat{display:flex;align-items:center;gap:.4rem;color:rgba(255,255,255,.65);font-size:.85rem}.hero-stat i{color:var(--brass);font-size:.75rem}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2rem}
.server-banner{background:var(--midnight);padding:2rem 0 1.5rem;border-top:1px solid var(--line-brass);border-bottom:1px solid var(--line-brass);position:relative;overflow:hidden}
.server-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 50% 100%,rgba(201,162,39,.06) 0%,transparent 70%);pointer-events:none}
.server-banner-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;flex-wrap:wrap;gap:.5rem}
.server-banner-kicker{font-family:Marcellus,Georgia,serif;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brass)}
.server-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.75rem}
.server-card{background:rgba(255,255,255,.035);border:1px solid rgba(201,162,39,.12);border-radius:var(--radius);padding:1rem .75rem;text-align:center;transition:all .4s cubic-bezier(.16,1,.3,1);position:relative}
.server-card:hover{background:rgba(255,255,255,.06);border-color:rgba(201,162,39,.25)}
.server-card .server-city{font-family:Marcellus,Georgia,serif;font-size:1.05rem;color:#fff;margin-bottom:.15rem}
.server-card .server-region{font-family:Inter,sans-serif;font-size:.68rem;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.06em}
.server-card.server-best{background:rgba(201,162,39,.1);border-color:var(--brass);box-shadow:0 0 25px rgba(201,162,39,.15),inset 0 0 25px rgba(201,162,39,.04);transform:translateY(-3px)}
.server-card.server-best .server-city{color:var(--brass-bright)}
.hero-city-label{position:absolute;bottom:2rem;right:2rem;background:rgba(13,27,46,.88);border:1px solid var(--line-brass);border-radius:var(--radius);padding:.7rem 1.25rem;color:rgba(255,255,255,.8);font-family:Marcellus,Georgia,serif;font-size:.9rem;z-index:2;transform:translateX(150%);white-space:nowrap;backdrop-filter:blur(6px);pointer-events:none}
.hero-city-label strong{color:var(--brass-bright);font-weight:400}
.section-light{background:var(--cream);padding:3.5rem 0}.section-dark{background:var(--midnight);padding:3.5rem 0}.section-dark h2{color:#fff}
.section-kicker{font-family:Inter,sans-serif;font-size:.68rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--brass);margin-bottom:.5rem;text-align:center}
.section-title{text-align:center;margin-bottom:2rem;color:var(--ink)}.section-dark .section-title{color:#fff}
@media(max-width:992px){.server-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.hero{min-height:auto;padding:3rem 0 0}.hero-actions{flex-direction:column}.hero-actions .btn{width:100%;text-align:center}.hero-stats{gap:.75rem}.hero-city-label{bottom:1rem;right:1rem;font-size:.78rem;padding:.5rem .9rem}}
@media(max-width:576px){.server-grid{grid-template-columns:repeat(2,1fr)}.server-banner-header{flex-direction:column;align-items:flex-start}}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--brass);display:inline-block;animation:statusPulse 1.2s ease-in-out infinite}
@keyframes statusPulse{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
</style>
<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'" />
<noscript><link rel="stylesheet" href="style.css" /></noscript>
</head> </head>
<body> <body>
<!-- <!--
@@ -372,6 +418,7 @@
</div> </div>
</footer> </footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="script.js"></script> <script src="script.js"></script>
<script defer src="https://static.odoo4projects.com/agent-odoo4projects/agent.js"></script> <script defer src="https://static.odoo4projects.com/agent-odoo4projects/agent.js"></script>
</body> </body>