uhhm/portal
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 41 Wiki Activity

Head preloads: latin font, wordmark, content-host preconnect

Browse Source 
Fonts hide behind the stylesheet - the browser parses CSS before it
finds them - so the latin Quicksand subset (every page's critical
path) is announced in the shell head; latin-ext/vietnamese stay
unicode-range-gated. The wordmark preloads from the resolved site
config, with a preconnect to its origin when it lives on the content
host (redoal.com's does), opening that TLS session early.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Y42TyF8Zu7NGRR2893vNcZ
This commit is contained in:
Bendik Aagaard Lynghaug
2026-09-02 11:48:11 +02:00
co-authored by Claude Fable 5
parent 9c22b52fda
commit b044780e61
2 changed files with 30 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Cargo.lock
Generated
+1 -1
View File
@@ -2948,7 +2948,7 @@ dependencies = [
[[package]] [[package]]
name = "portal" name = "portal"
version = "0.3.31" version = "0.3.32"
dependencies = [ dependencies = [
"anyhow", "anyhow",
"arc-swap", "arc-swap",
src/app.rs
+29
View File
@@ -40,6 +40,20 @@ pub fn shell(options: LeptosOptions) -> impl IntoView {
// once loaded via <link>/<img> on Safari/iOS. // once loaded via <link>/<img> on Safari/iOS.
<link rel="icon" media="(prefers-color-scheme: light)" href="/favicon-light.svg" type="image/svg+xml"/> <link rel="icon" media="(prefers-color-scheme: light)" href="/favicon-light.svg" type="image/svg+xml"/>
<link rel="icon" media="(prefers-color-scheme: dark)" href="/favicon-dark.svg" type="image/svg+xml"/> <link rel="icon" media="(prefers-color-scheme: dark)" href="/favicon-dark.svg" type="image/svg+xml"/>
// Fonts hide behind the stylesheet: the browser must
// fetch and parse CSS before it discovers them. The
// latin subset is on every page's critical path, so
// announce it up front; latin-ext and vietnamese stay
// unicode-range-gated and load only when script needs
// them - preloading those would tax everyone for a few.
// (Font preloads require crossorigin even same-origin.)
<link
rel="preload"
href="/fonts/quicksand-semibold-latin.woff2"
r#as="font"
type="font/woff2"
crossorigin="anonymous"
/>
// Server-side, so it can read hash.txt and link the // Server-side, so it can read hash.txt and link the
// content-hashed stylesheet (hash-files = true). // content-hashed stylesheet (hash-files = true).
<HashedStylesheet id="leptos" options=options.clone()/> <HashedStylesheet id="leptos" options=options.clone()/>
@@ -89,6 +103,19 @@ pub fn App() -> impl IntoView {
.and_then(|s| s.stylesheet) .and_then(|s| s.stylesheet)
.map(|p| format!("/site/{p}")) .map(|p| format!("/site/{p}"))
}); });
// The wordmark paints in the hero on first view; announcing it in
// the head starts the fetch during hydration instead of after. On
// redoal.com it lives on the content host, so a preconnect opens
// that TLS session while the preload is still queued.
let wordmark_href = Memo::new(move |_| {
site.get().and_then(|r| r.ok()).and_then(|s| s.wordmark)
});
let wordmark_origin = Memo::new(move |_| {
wordmark_href.get().and_then(|w| {
let rest = w.strip_prefix("https://")?;
Some(format!("https://{}", rest.split('/').next()?))
})
});
// A content-shipped favicon overrides the built-in one; injected // A content-shipped favicon overrides the built-in one; injected
// into the head after the static defaults, so it wins. // into the head after the static defaults, so it wins.
let favicon = Memo::new(move |_| { let favicon = Memo::new(move |_| {
@@ -100,6 +127,8 @@ pub fn App() -> impl IntoView {
view! { view! {
<Html attr:lang=move || lang.get()/> <Html attr:lang=move || lang.get()/>
{move || wordmark_origin.get().map(|href| view! { <Link rel="preconnect" href=href crossorigin="anonymous"/> })}
{move || wordmark_href.get().map(|href| view! { <Link rel="preload" as_="image" href=href/> })}
{move || custom_css.get().map(|href| view! { <Stylesheet id="site-custom" href=href/> })} {move || custom_css.get().map(|href| view! { <Stylesheet id="site-custom" href=href/> })}
{move || favicon.get().map(|href| view! { <Link rel="icon" href=href/> })} {move || favicon.get().map(|href| view! { <Link rel="icon" href=href/> })}
<Suspense fallback=|| ()> <Suspense fallback=|| ()>