---
title: "Page Speed Beyond Core Web Vitals"
slug: "page-speed"
category: "seo"
tags: ["seo", "performance", "ttfb", "fcp", "image-optimization", "font-loading"]
status: "stable"
last_updated: 2026-05-14
summary: "TTFB, FCP, image optimization, font-display swap, critical CSS, and JS deferral. The metrics and fixes Core Web Vitals does not cover."
related: ["[[seo/core-web-vitals]]", "[[seo/technical]]", "[[seo/image-seo]]", "[[seo/mobile-first]]", "[[frontend/html]]", "[[frontend/css]]", "[[seo/glossary]]", "[[seo/audit-checklist]]"]
---
## Overview
Core Web Vitals cover three metrics; page speed has at least six worth tracking. TTFB, FCP, image weight, font loading, and JS payload all decide whether a page hits its LCP and INP targets. The fixes are cheap on a new build and expensive on a legacy one; ship them at architecture time, not after a Lighthouse audit. For the end-to-end CWV optimization walkthrough, see [[howto/optimize-core-web-vitals]].
## Cut TTFB to under 600 milliseconds
Time to First Byte is server response time plus network latency. It is the floor under every other metric; a 1.5-second TTFB caps LCP at 2.5+ seconds before the browser does any work.
- Static-host whenever possible. GitHub Pages, Vercel, Netlify, and Cloudflare Pages serve from a CDN edge by default.
- For dynamic responses, cache HTML at the edge with `s-maxage` and `stale-while-revalidate`. A 60-second SWR window absorbs traffic spikes. See [[ops/cloudflare-cache-rules]] for the rule syntax.
- Use a CDN with at least 100 PoPs. [[ops/cloudflare]] gets TTFB under 100 ms for most international traffic.
- Database round-trips inside the request handler are the most common TTFB killer. Cache reads, batch queries, or move the page to static.
## Hit First Contentful Paint under 1.8 seconds
FCP is the first pixel of content rendered. It is a proxy for "is anything happening?" and decides whether users abandon the page.
- Inline critical CSS (the styles needed for above-the-fold content) directly in ``. 14 KB or less; anything larger blocks the first packet.
- Defer non-critical CSS with ``.
- Render the first paint server-side. A blank `
` waiting for client React makes FCP equal to JS parse time.
- Preconnect to the CDN and font origin: ``.
## Serve images in modern formats with lazy loading
Images dominate page weight on most sites. Modern formats cut bytes by 30 to 70 percent at the same visual quality.
- AVIF first, WebP second, JPEG as fallback. Use `` with `` and ``.
- Lazy-load every image below the fold with `loading="lazy"`. Native browser support is universal as of 2023.
- Eager-load the LCP image with `fetchpriority="high"` and a `` in ``.
- Specify `width` and `height` on every `` to reserve layout space; CLS depends on it. See [[seo/image-seo]] for the full image SEO checklist.
## Load fonts with `font-display: swap` and self-host
Web fonts block text rendering by default. The browser holds the first paint until the font arrives or a timeout fires.
```css
@font-face {
font-family: "Inter";
src: url("/fonts/inter-var.woff2") format("woff2-variations");
font-display: swap;
font-weight: 100 900;
}
```
- `font-display: swap` paints fallback text immediately, then swaps in the web font.
- Self-host fonts to avoid third-party DNS and TLS round-trips. Google Fonts via CSS adds 100 to 300 ms.
- Subset the font to Latin glyphs (or whatever the site needs). A full Inter variable font is 300 KB; a Latin subset is 60 KB.
- Use `size-adjust`, `ascent-override`, and `descent-override` in the fallback `@font-face` to prevent CLS on swap.
## Inline critical CSS and defer the rest
CSS is render-blocking by default. The browser parses the entire stylesheet before painting.
- Extract the above-the-fold CSS with Critical, Critters, or Next.js's built-in critical CSS plugin.
- Inline it in `