From e78a702187cb3981caa96e796320c1087b2f123e Mon Sep 17 00:00:00 2001 From: Lars Francke Date: Thu, 13 Aug 2026 23:13:45 +0200 Subject: [PATCH] perf: Give the navbar and footer logos explicit dimensions Neither logo carried width/height, so nothing reserved space for them before they loaded. In the navbar that collapsed the flex row and pushed the article down when the image arrived: mobile Lighthouse against production attributed 0.3085 of the getting-started page's 0.303 CLS to exactly this element, and that was the whole gap between Perf 85 and the 95 target on content pages. Adding the attributes alone is not enough, and both extra CSS changes here are load-bearing: - width: auto, because width/height attributes are presentational hints that set a real width, not just an aspect-ratio hint. The rule sets height:22px and never width, so the attribute's 199px would win over auto and draw the logo 199x22 instead of 145.92x22 -- stretched by a third. - margin-right instead of padding-right for the gap, because aspect-ratio sizes the box named by box-sizing, which is border-box here, so padding would be counted inside the ratio and squash the image by exactly that much. Measured over CDP against the built stylesheet: content box 145.92x22 and -0.01% distortion, identical to what production renders today. With the image request blocked the box is still 145.92x22, so the space is genuinely reserved before the image arrives rather than merely ending up the right size afterwards. The footer logo has no CSS sizing at all, so 150x26 is its intrinsic size and the attributes change nothing there. Co-Authored-By: Claude --- ui/src/css/header.css | 14 +++++++++++++- ui/src/partials/footer-content.hbs | 2 +- ui/src/partials/header.hbs | 2 +- 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/ui/src/css/header.css b/ui/src/css/header.css index c148c0f30..795b0c037 100644 --- a/ui/src/css/header.css +++ b/ui/src/css/header.css @@ -43,11 +43,23 @@ body { word-wrap: normal; } +/* The img carries width/height attributes so its space is reserved before it + * loads. Two consequences to keep in mind when touching this rule: + * + * width: auto is required, not redundant. Those attributes are presentational + * hints that set a real width, so without it the logo renders at its full 199px + * against a 22px height and stretches by a third. Setting it hands sizing back + * to the aspect ratio the attributes imply. + * + * The gap is a margin, not padding, because aspect-ratio sizes the box named by + * box-sizing -- border-box here -- so padding would count inside the ratio and + * squash the image by exactly that much. */ .navbar-brand .navbar-item:first-child img { height: 22px; + width: auto; display: inline-block; margin-top: -4px; - padding-right: 20px; + margin-right: 20px; } .navbar-brand .navbar-item.documentation-link { diff --git a/ui/src/partials/footer-content.hbs b/ui/src/partials/footer-content.hbs index 16eb15640..b25259f7f 100644 --- a/ui/src/partials/footer-content.hbs +++ b/ui/src/partials/footer-content.hbs @@ -4,7 +4,7 @@
- +

your data, your platform

diff --git a/ui/src/partials/header.hbs b/ui/src/partials/header.hbs index e8e839345..6517126a6 100644 --- a/ui/src/partials/header.hbs +++ b/ui/src/partials/header.hbs @@ -2,7 +2,7 @@