mirror of
https://github.com/nexu-io/open-design.git
synced 2026-06-01 03:14:35 +07:00
7fc4362ba8
* perf(landing): edge-cache HTML and precise-load thumbnails Without `public/_headers` Cloudflare Pages serves every HTML with `cf-cache-status: DYNAMIC` so each request roundtrips to the Pages origin — observed TTFB 660–900ms from Seattle, worse from Asia. With `s-maxage=3600, stale-while-revalidate=86400` HTML stays cached at the edge between deploys (CF Pages auto-purges on every deploy so freshness is unchanged in practice), and `_astro/` hash bundles flip to `immutable` so the existing 4h+must-revalidate roundtrips go away. For thumbnails, native `loading="lazy"` is browser-decided — Chrome over-prefetches (1250–3000px), Safari fires near in-viewport. A new `<LazyImg>` Astro component and global IntersectionObserver (rootMargin 300px for images, 600px for videos) replaces all 10 site-wide `loading="lazy"` usages with precise control. Above-the-fold slots (first 4 rows, detail-page hero previews) opt into `eager` or `priority` to skip the IO roundtrip. Homepage hero LCP gets `<link rel="preload" imagesrcset>`, a 4-step `srcset` (768/1280/1920/2560) plus `fetchpriority="high"` so retina devices stop repainting from the 1024-only variant — was the P99 long tail. Verified: `pnpm guard` 6/6, `pnpm typecheck` 0 errors, `pnpm build` 865 pages 28s, generated `out/index.html` contains the preload link and 15 `data-precise-src` thumbnails, `out/plugins/index.html` has 95 precise-loaded thumbnails plus the IO script. * perf(landing): logo to webp + parallelize Google Fonts load Two HAR-validated wins on top of the edge-cache / precise-load commit: logo: 500x500 192KB PNG → 200x200 7.5KB WebP. Footer/header actually render at 36x36, so the source is 5x larger than necessary at the display size and ships RGBA PNG bytes for what reads as a flat graphic. WebP at q=85 keeps the gradient ring crisp at every DPR we care about. fonts: globals.css used `@import url(...)` for Google Fonts, which serialized HTML → CSS → fonts.googleapis.com/css2 → fonts.gstatic.com/ woff2. HAR measured 953ms for the fonts CSS plus 400–800ms per woff2 × 4 — close to 3s before text could render in the intended family, even with display=swap. Moving to `<link>` + `<link rel=preconnect>` in each page's <head> lets the fonts CSS fetch race the HTML body parse, and warms the TLS handshake to gstatic.com so woff2 requests don't pay DNS+TLS at request time. A shared `font-stylesheet.astro` keeps the four-family URL canonical across all five entry points (index, sub-page-layout, plugins/index, plugins/[slug], blog/index, blog/[slug]). og.astro already had this treatment.
31 lines
1.5 KiB
Text
31 lines
1.5 KiB
Text
---
|
||
/*
|
||
* Google Fonts stylesheet — single source of truth for the four families
|
||
* the site uses (Inter Tight, Inter, Playfair Display, JetBrains Mono).
|
||
*
|
||
* Why a component instead of `@import` in globals.css:
|
||
* Previously globals.css did `@import url('https://fonts.googleapis.com/css2?...')`.
|
||
* That gets the request fired only AFTER the browser parses the CSS file,
|
||
* serializing the chain:
|
||
*
|
||
* HTML → globals.css → fonts.googleapis.com/css2 → fonts.gstatic.com/woff2
|
||
*
|
||
* Live HAR from `127.0.0.1:17574/` measured 953ms for the fonts CSS plus
|
||
* 400–800ms per woff2 (4 of them) — ~3s end-to-end before text could
|
||
* render with the intended family, even with `display=swap`.
|
||
*
|
||
* Moving to `<link>` in the document head lets the browser kick off the
|
||
* fonts CSS request alongside the HTML body parse, and `preconnect` hints
|
||
* warm up TLS to fonts.gstatic.com so the woff2 fetches don't pay DNS+TLS.
|
||
*
|
||
* `display=swap` stays in the URL so paragraph copy can render in a
|
||
* system fallback while the woff2 is in flight — never blocks paint.
|
||
*/
|
||
---
|
||
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,500;0,600;1,400;1,500;1,600;1,700&family=JetBrains+Mono:wght@400;500&display=swap"
|
||
/>
|