Skip to content

Load luna.css non-render-blocking on the homepage - #58

Merged
oddharsh merged 1 commit into
mainfrom
perf/defer-luna-homepage
Jul 22, 2026
Merged

oddharsh merged 1 commit into
mainfrom
perf/defer-luna-homepage

Conversation

@oddharsh

Copy link
Copy Markdown
Owner

The homepage's visible window is fully styled by the inline <style> block. luna.css only dresses the JS-injected .axp-* desktop shell that nav.js builds after defer. So render-blocking first paint on luna.css's 16.3KB brotli buys nothing on the homepage.

Change

  • Swap the render-blocking <link rel="stylesheet"> for a media="print" onload="this.media='all'" applier.
  • Keep the high-priority preload up top (so the flip resolves from cache) and add a <noscript> fallback for JS-off.
  • The applying link stays in place, so luna's cascade slot (after the inline block) is unchanged.

Verified

  • renderBlockingStatus flips from blocking to non-blocking on both source and the minified .build/ output.
  • Single fetch (preload + print link dedupe).
  • Renders identically (title bar, frame, full shell), no FOUC, no console errors.
  • Build passes all luna.css tripwires (CSP style-src, blink-fix, geometry); minifier preserves the onload handler and <noscript>.

Scope / caveat

  • Homepage only. Worker-rendered pages keep the blocking link by design (their inline critical set is geometry-only, so deferring there would flash a bare window).
  • The win is real-world cold visits on slow links; on fast connections it's a wash. No downside either way.

🤖 Generated with Claude Code

The homepage's visible window is fully styled by the inline <style> block;
luna.css only dresses the JS-injected .axp-* desktop shell that nav.js builds
after defer. So blocking first paint on luna.css's 16KB brotli buys nothing.

Swap the render-blocking <link> for a media="print" onload="this.media='all'"
applier, keeping the high-priority preload up top and a <noscript> fallback for
JS-off. The link stays in place so luna's cascade slot (after the inline block)
is unchanged. Verified renderBlockingStatus flips to non-blocking on both source
and the minified .build output, single fetch, no FOUC.

Worker-rendered pages keep the blocking link by design (their inline critical
set is geometry-only).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@github-actions

Copy link
Copy Markdown
Contributor

Understanding-first review

This is a prompt, not a score or merge gate. Before approving, reconstruct the change:

  • My model: What do I think this PR does?
  • Mechanism: What path or invariant makes that behavior true?
  • Falsifier: What would prove my model wrong?
  • Evidence: What test, trace, dry-run, or live check did I inspect?
  • Residual uncertainty: What remains unproven?

For docs and dependency changes, a compact answer is enough. For behavior or production changes, include the causal path and one concrete counterexample. The author’s claim card belongs in the PR description; this prompt is for the reviewer’s independent reconstruction.

See UNDERSTANDING-REVIEW.md.

@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Updated (UTC)
✅ Deployment successful!
View logs
aadhar-sh ac40667 Jul 22 2026, 02:04 AM

@oddharsh
oddharsh merged commit 91a30c8 into main Jul 22, 2026
4 checks passed
@oddharsh
oddharsh deleted the perf/defer-luna-homepage branch July 22, 2026 02:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant