Why this matters
Proper font preloading prevents layout shifts and enables faster first paint without FOIT.
Preload render-blocking WOFF2 fonts using <link rel="preload" as="font" type="font/woff2" crossorigin> and define @font-face with "font-display: swap". Only preload fonts used above the fold.
Proper font preloading prevents layout shifts and enables faster first paint without FOIT.
Side-by-side examples engineers can pattern-match during review.
<link rel="preload" href="/fonts/brand.woff2"> / missing as/type/crossorigin /<link rel="preload" href="/fonts/brand.9c1a.woff2" as="font" type="font/woff2" crossorigin>
<style>@font-face{font-family:Brand;src:url(/fonts/brand.9c1a.woff2) format('woff2');font-display:swap}</style><link rel="preload" as="font" type="font/woff2" crossorigin><link rel="preload" href="/fonts/brand.woff2">From the same buckets as this rule.
All static JS/CSS/font/image files MUST use content-hashed filenames (e.g., app.9c1a7b.js) and be served with "Cache-Control: public, max-age=31536000, immutable". HTML and other non-fingerprinted documents MUST be served with "Cache-Control: no-cache" (or equivalent) to enable conditional revalidation.
Serve text-based assets (JS, CSS, JSON, SVG) with Brotli (br) when the client sends "Accept-Encoding: br" and fallback to gzip. Always set "Vary: Accept-Encoding" and do NOT compress already-compressed formats (e.g., .png, .jpg, .woff2).