All Docs
FeaturesMaking Tax DigitalUpdated March 9, 2026

Blog: Fixing Above-Fold Logo Preloading on the Dashboard (PERF-23)

Fixing Above-Fold Logo Preloading on the Dashboard (PERF-23)

Release: v1.0.342 | Category: Performance

The Problem

Every dashboard page in the platform renders the sidebar logo (/agentos-logo-light.png) in the user's viewport immediately on load — it is an above-the-fold resource on every route under /dashboard.

Despite being one of the first visible elements, the logo was being served through a plain HTML <img> tag with no preload hint:

<!-- src/app/dashboard/layout.tsx (before fix) -->
<img src="/agentos-logo-light.png" alt="AgentOS" />

With this approach the browser's preload scanner cannot schedule the image fetch early. Instead, it must:

  1. Download and parse the HTML document.
  2. Download and parse any blocking CSS.
  3. Discover the <img> tag in the render tree.
  4. Only then begin fetching the logo.

This waterfall adds unnecessary latency to the very first thing users see, directly impacting perceived load time and Largest Contentful Paint (LCP) scores on all dashboard pages.

Why This Matters

Above-the-fold images are among the most impactful resources to preload. A <link rel="preload"> hint placed in the document <head> tells the browser to begin fetching the asset in parallel with other critical resources — before the render tree is even constructed.

For a logo that appears on every dashboard page, the cumulative effect on user experience is significant: every landlord and self-employed taxpayer who logs in to submit quarterly figures or review their HMRC submissions is affected on every page view.

The Fix

This finding is tracked as PERF-23 and will be fully resolved by PERF-02, which migrates the raw <img> tag to the Next.js <Image> component with the priority prop:

// src/app/dashboard/layout.tsx (after PERF-02)
import Image from 'next/image';

<Image
  src="/agentos-logo-light.png"
  alt="AgentOS"
  width={160}
  height={40}
  priority
/>

The priority prop does two things automatically:

  1. Injects a <link rel="preload"> tag into the document <head>, so the browser fetches the logo as early as possible.
  2. Disables lazy loading for this image, ensuring it is never deferred.

No manual preload link tags or custom resource hints are required — the framework handles it entirely.

What to Expect After PERF-02

  • Faster above-the-fold render on all /dashboard routes.
  • Improved Largest Contentful Paint (LCP) scores in Core Web Vitals.
  • No change to the visual appearance of the sidebar logo.

Affected File

FileChange
src/app/dashboard/layout.tsx<img> → <Image priority> (in PERF-02)

This post documents the PERF-23 performance control introduced in v1.0.342. The code change itself ships with PERF-02.