Skip to content

Core Web Vitals: bundle render-blocking CSS + lazy-load below-fold images #79

@rubenvdlinde

Description

@rubenvdlinde

Part of #75 (SEO epic).

What

Bundle the brand's render-blocking CSS files (hex-rain.css, logo-memory.css, canal-footer.css, kade-cyclist.css) into a single stylesheet, lazy-load the partner-logo strip on conduction.nl, and preload the primary brand font. SEO audit measurement.

Why

Audit found 5 render-blocking stylesheets in <head> on every Conduction site. Each adds to LCP and TBT, both Google ranking signals post the March 2026 core update. Real-world LCP on www.conduction.nl is borderline acceptable; a small intervention bumps every site over the "good" threshold (LCP < 2.5s, INP < 200ms, CLS < 0.1 at p75).

Where the work lives

Most of it is in @conduction/docusaurus-preset. The four lib/*.css files are shipped from the preset's static/lib/ directory and inlined via headTags or theme client modules.

Approach

  1. Audit which lib/*.css files are needed above-the-fold (probably just canal-footer.css is below-fold).
  2. Combine the above-fold subset into a single bundled brand.css (preset already exports this).
  3. Mark below-fold ones with media="print" onload="this.media='all'" so the browser fetches them async without blocking render.
  4. Preload one critical font face via <link rel="preload" as="font" crossorigin>.
  5. Add loading="lazy" to partner-logo strip + below-fold images on conduction.nl.

Verification

  • PageSpeed Insights LCP / INP / CLS scores at p75 on www.conduction.nl + sample fleet sites.
  • Lighthouse "Eliminate render-blocking resources" goes from "potential savings 600ms" to <100ms.
  • Build artifact size doesn't regress (bundle = ~same total size as the 4 separate files, just one HTTP roundtrip instead of 4).

Acceptance

  • PageSpeed Insights field data shows LCP < 2.5s at p75 on www.conduction.nl
  • No regression on the existing render path (canal-footer animation still works)
  • Ships as preset minor bump; fleet sweep adopts via lockfile bump

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions