Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
oddharsh merged 1 commit into from
Jul 22, 2026
Merged

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

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 13 additions & 4 deletions holding/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#2D78BD">
<!-- discover the one shared stylesheet at the top of head so its bytes are in
flight before the inline <style> block; the real stylesheet link stays
put (line ~869) so the cascade order is unchanged. same href -> one req. -->
<!-- warm the one shared stylesheet at high priority up top so its bytes are in
flight during parse; the applying link lower in head loads it non-blocking
(media=print swap) and keeps the cascade slot. same href -> one request. -->
<link rel="preload" as="style" href="/luna.css">
<title>Aadharsh Pannirselvam</title>
<meta name="description" content="Aadharsh Pannirselvam. I research and invest in interesting tech-oriented stuff and the people that make them.">
Expand Down Expand Up @@ -861,7 +861,16 @@
}

</style>
<link rel="stylesheet" href="/luna.css">
<!-- luna.css applies non-render-blocking: the visible window above is fully
styled by the inline block, and luna.css only dresses the JS-injected
.axp-* desktop shell (which nav.js builds after defer anyway). media="print"
lets the browser download without blocking first paint, then onload flips
it to all. The link stays HERE (not the head-top preload) so its cascade
slot is unchanged: luna still applies after the inline block. Preloaded up
top at high priority, so the flip resolves from cache. noscript keeps it
render-blocking when JS is off (nothing flips media there). -->
<link rel="stylesheet" href="/luna.css" media="print" onload="this.media='all';this.onload=null">
<noscript><link rel="stylesheet" href="/luna.css"></noscript>
</head>
<body>
<!-- axp:desktop --><div id="axp-desktop" aria-hidden="true"></div><!-- /axp:desktop -->
Expand Down