Oppaat ja tutoriaalit 8 min lukuaika

TTFB-optimointi vuonna 2026: Käytännön opas palvelimen vastausajan pienentämiseen

Time to First Byte (TTFB) on Core Web Vitalsin hiljainen perustus – jokainen palvelimella menetetty millisekunti viivästyttää LCP:tä ja FCP:tä. Tässä oppaassa konkreettiset tekniikat (CDN-edge, HTTP/3, streaming SSR, indeksointi, Redis), joilla TTFB saadaan vuonna 2026 alle 200 ms.

Editorial Team

Tervetuloa Web Perf Clinicin Core Web Vitals -sarjan neljänteen osaan. Olemme käyneet läpi INP-, LCP- ja CLS-optimoinnin – ja nyt on vuorossa se mittari, joka edeltää niitä kaikkia: Time to First Byte (TTFB). Vaikkei TTFB itse ole virallinen Core Web Vital, se on niiden hiljainen perustus. Jokainen palvelimella tuhlattu millisekunti viivästyttää LCP:tä ja FCP:tä yksi yhteen, eikä mikään frontend-temppu pelasta sivua, jos ensimmäinen tavu saapuu sekunnin myöhässä.

Olen viettänyt liian monta iltaa tuijottaen DevToolsin Waterfall-näkymää ja miettien, miksi täydellisesti optimoitu React-bundle silti tuntuu hitaalta. Vastaus on yleensä tämä: TTFB on jo polttanut budjetin ennen kuin yksikään pikseli on edes ehtinyt näytölle. Niinpä – mennään asiaan.

Tässä oppaassa käymme läpi vuoden 2026 parhaat käytännöt: mistä TTFB oikeasti koostuu, miten se mitataan luotettavasti, ja konkreettiset toimenpiteet (CDN-edge-välimuistista HTTP/3:een, streaming SSR:ään ja tietokannan indeksointiin), joilla TTFB saadaan kuriin tuotantokuormassa.

Mitä TTFB tarkalleen mittaa?

TTFB on aika millisekunteina sen välillä, kun selain lähettää HTTP-pyynnön ja saa vastauksen ensimmäisen tavun. Mittari ei ole pelkkä "palvelimen vastausaika" – se sisältää koko verkkoketjun:

  • Uudelleenohjaukset – jokainen 301/302 lisää täyden round-tripin.
  • DNS-haku – domainin nimen muunto IP-osoitteeksi.
  • TCP-kättely – kolmivaiheinen yhteyden avaus.
  • TLS-neuvottelu – salatun yhteyden luominen (HTTPS).
  • Pyynnön lähetys – HTTP-otsakkeiden ja rungon siirto palvelimelle.
  • Palvelimen käsittelyaika – sovelluskoodi, tietokantakyselyt, mahdollinen sivun renderöinti.
  • Vastauksen ensimmäinen tavu verkossa – paluulatenssi.

Tämä on tärkeää siksi, että moni "virittää TTFB:tä" pelkkää sovelluspuolta hierten ja unohtaa yhden ikävän tosiasian: käyttäjä Aasiassa kärsii valon nopeuden rajoittamasta latenssista riippumatta siitä, kuinka nopea PHP-koodi pyörii Helsingin konesalissa. Fysiikkaa ei voi optimoida pois.

TTFB-rajat vuonna 2026

Google ja kenttädata (CrUX) käyttävät seuraavia raja-arvoja:

  • Hyvä: ≤ 800 ms (75. persentiili)
  • Parannettavaa: 800–1800 ms
  • Heikko: > 1800 ms

Lighthouse on tiukempi. Se käyttää Reduce initial server response time -auditissa 600 ms:n kynnystä, koska se sulkee pois DNS:n ja uudelleenohjaukset. Vuoden 2026 kultainen standardi on kuitenkin alle 200 ms, ja se on saavutettavissa edge-välimuistilla globaalisti. Tämä ei ole enää kilpailullinen etu vaan käytännön perustaso, jota teknisten SEO-tarkastusten odotetaan vaativan.

Miten mittaat TTFB:n oikein

1. Chrome DevTools (lab-data)

Avaa Network-välilehti, lataa sivu uudelleen, klikkaa pääasiakirjaa (HTML-dokumenttia) ja avaa Timing-välilehti. Etsi rivi "Waiting for server response" – tämä on palvelimen käsittelyaika, mutta koko TTFB löytyy sivun alaosan summasta, joka sisältää myös DNS:n, kättelyt ja siirron.

2. Lighthouse / PageSpeed Insights

Suorita Lighthouse-auditti ja katso "Reduce initial server response time" -kohta. Pieni muistutus: tämä on lab-mittaus. Yksi ajo, yksi sijainti, yksi yhteys – ei edusta todellisia käyttäjiä.

3. Kenttädata: web-vitals-kirjasto

Tämä on ainoa luotettava lähde tuotantopäätöksiin. Asenna Googlen virallinen kirjasto:

npm install web-vitals

Ja kerää TTFB todellisilta käyttäjiltä:

import { onTTFB } from 'web-vitals';

onTTFB((metric) => {
  // Lähetä mittari analytiikkaan
  navigator.sendBeacon('/analytics/ttfb', JSON.stringify({
    value: metric.value,
    rating: metric.rating, // 'good' | 'needs-improvement' | 'poor'
    navigationType: metric.navigationType,
    url: location.pathname,
  }));
});

4. Resource Timing API

Kun haluat tietää tarkalleen, mihin aika kuluu, käytä selaimen sisäänrakennettua API:a:

const [nav] = performance.getEntriesByType('navigation');
console.log({
  redirect:    nav.redirectEnd       - nav.redirectStart,
  dns:         nav.domainLookupEnd   - nav.domainLookupStart,
  tcp:         nav.connectEnd        - nav.connectStart,
  tls:         nav.connectEnd        - nav.secureConnectionStart,
  request:     nav.responseStart     - nav.requestStart,
  ttfb:        nav.responseStart     - nav.startTime,
});

Tämä paljastaa heti, missä vaiheessa aikaa kuluu. Ilman sitä TTFB-optimointi on suoraan sanottuna arvauspeliä.

Strategia 1: CDN-edge-välimuisti – suurin yksittäinen voitto

Jos TTFB on yli 500 ms eikä CDN:ää ole käytössä, kaikki muut optimoinnit ovat toissijaisia. CDN siirtää vastauksen palvelimelle, joka on fyysisesti lähellä käyttäjää – ja tämä yksin pudottaa eurooppalaisen origin-palvelimen 1500 ms:n TTFB:n Singaporessa alle 100 millisekuntiin, jos sivu on välimuistissa. Olen nähnyt asiakaskohteen, jossa pelkkä Cloudflaren päälle laittaminen tippautti p75-TTFB:n 1.4 sekunnista 180 millisekuntiin yhdessä yössä. Ei mitään koodimuutoksia.

Cloudflare Cache Rules -esimerkki

Aseta HTML-sivut välimuistiin reunalla 5 minuutin ajaksi, mutta salli stale-while-revalidate, jotta käyttäjät eivät koskaan odota uudelleenvalidointia:

Cache-Control: public, max-age=0, s-maxage=300, stale-while-revalidate=86400

Selitys:

  • max-age=0 – selain ei välimuistita.
  • s-maxage=300 – CDN-edge välimuistittaa 5 minuuttia.
  • stale-while-revalidate=86400 – seuraavat 24 tuntia edge palauttaa "vanhan" vastauksen välittömästi ja päivittää taustalla.

Edge-funktiot dynaamiseen logiikkaan

Personointi, A/B-testit ja autentikointi voi siirtää edge-tasolle Cloudflare Workers- tai Vercel Edge Functions -ympäristöön. Tässä esimerkki maan perusteella tehdystä uudelleenohjauksesta ilman origin-hakua:

export default {
  async fetch(request) {
    const country = request.cf?.country ?? 'US';
    const url = new URL(request.url);

    if (url.pathname === '/' && country === 'FI') {
      return Response.redirect(new URL('/fi/', url), 302);
    }

    // Välimuistitettu reuna-haku
    return fetch(request, { cf: { cacheEverything: true, cacheTtl: 300 } });
  }
};

Edge-funktio pyörii alle 50 ms:n latenssilla 300+ kaupungissa – origin-palvelimelle ei mennä lainkaan.

Strategia 2: HTTP/3 ja TLS 1.3

HTTP/3 käyttää UDP-pohjaista QUIC-protokollaa, joka eliminoi TCP:n head-of-line-blocking-ongelman ja yhdistää kättelyn ja TLS-neuvottelun yhteen round-trippiin. TLS 1.3 puolestaan vähentää neuvottelun yhdestä kahteen RTT:hen ja tukee 0-RTT-resumptionia. Mobiiliyhteyksillä (joissa RTT on usein 100+ ms) ero näkyy heti.

Nginx 1.25+ tukee HTTP/3:a natiivisti:

server {
    listen 443 ssl;
    listen 443 quic reuseport;
    http2 on;
    http3 on;

    ssl_protocols TLSv1.3;
    ssl_early_data on;

    add_header Alt-Svc 'h3=":443"; ma=86400';
    # ... muut asetukset
}

Tarkista yhteys curl 8.x:llä:

curl --http3 -I https://example.fi/

Strategia 3: Streaming SSR

Perinteinen SSR odottaa, että koko sivu renderöidään palvelimella ennen kuin yhtään tavua lähetetään. Streaming SSR taas aloittaa lähettämisen heti, kun <head> ja yläosa ovat valmiita – selain alkaa ladata CSS:ää ja kuvia samalla, kun palvelin yhä rakentaa loppuosaa.

Next.js 15:n App Routerissa tämä saavutetaan <Suspense>-rajoilla:

import { Suspense } from 'react';

export default function Page() {
  return (
    <>
      <Header />
      <Suspense fallback={<ProductSkeleton />}>
        <ProductList /> {/* hidas tietokantakysely */}
      </Suspense>
      <Suspense fallback={<ReviewsSkeleton />}>
        <Reviews /> {/* toinen hidas haku */}
      </Suspense>
      <Footer />
    </>
  );
}

Selain saa otsikon ja headerin alle 100 millisekunnissa, vaikka tuotelista valmistuisi vasta 800 ms:ssa. TTFB pienenee dramaattisesti, koska se mitataan ensimmäisestä tavusta – ei viimeisestä.

Strategia 4: Tietokantakyselyiden optimointi

Yli 50 % palvelimen vastausajasta menee tyypillisesti tietokantaan. Kolme suurinta syyllistä:

1. Puuttuvat indeksit

Aja EXPLAIN-analyysi hitaille kyselyille:

EXPLAIN ANALYZE
SELECT * FROM articles
WHERE language_id = 25 AND status = 'Published'
ORDER BY published_at DESC LIMIT 20;

Jos näet Seq Scan ison taulun yli, lisää komposiitti-indeksi:

CREATE INDEX idx_articles_lang_status_date
ON articles (language_id, status, published_at DESC);

2. N+1-kyselyt

Tämä on yleisin TTFB-tappaja ORM-pohjaisissa sovelluksissa. Sen sijaan, että haet 20 artikkelia ja tämän jälkeen 20 erillistä kyselyä kategorioille, käytä JOINia tai eager loading -strategiaa:

// Huono: 21 kyselyä
const articles = await db.article.findMany({ take: 20 });
for (const a of articles) {
  a.category = await db.category.findUnique({ where: { id: a.categoryId } });
}

// Hyvä: 1 kysely
const articles = await db.article.findMany({
  take: 20,
  include: { category: true, tags: true },
});

3. Redis-objektivälimuisti

Kalliit aggregointikyselyt (esim. "suosituimmat artikkelit") kannattaa muistitallentaa. Tässä esimerkki Node.js:llä:

import { createClient } from 'redis';
const redis = createClient();

async function getPopularArticles() {
  const cached = await redis.get('popular:articles');
  if (cached) return JSON.parse(cached);

  const fresh = await db.$queryRaw`
    SELECT id, title, slug FROM articles
    WHERE status = 'Published'
    ORDER BY view_count DESC LIMIT 10
  `;

  await redis.setEx('popular:articles', 300, JSON.stringify(fresh));
  return fresh;
}

Sadan millisekunnin tietokantakysely muuttuu 2 millisekunnin Redis-hauksi. Hyvin pieni vaiva, hyvin iso voitto.

Strategia 5: Eliminoi uudelleenohjausketjut

Jokainen 301/302 lisää täyden DNS + TCP + TLS + HTTP-roundin. Yleisiä syyllisiä:

  • http://example.fi → https://example.fi → https://www.example.fi → https://www.example.fi/fi/
  • Vanhentuneet /old-url → /new-url -ketjut, jotka kulkevat usean hypyn kautta.

Tarkista käyrä komennolla:

curl -sILo /dev/null -w "%{num_redirects} hyppyä, kokonaisaika %{time_total}s\n" https://example.fi

Konsolidoi ketjut suoriksi 1-hyppyisiksi ja siirrä uudelleenohjaukset CDN-tasolle, jotta origin ei osallistu lainkaan.

Strategia 6: DNS, preconnect ja varhaiset vihjeet

Käytä <link rel="preconnect">-vihjeitä kriittisille kolmansien osapuolten domaineille (fonttipalvelu, analytiikka, kuva-CDN). Tämä avaa TCP+TLS-yhteyden ennen kuin selain edes löytää resurssin HTML:stä.

<link rel="preconnect" href="https://cdn.example.fi" crossorigin>
<link rel="dns-prefetch" href="https://analytics.example.fi">

Vuonna 2026 myös HTTP 103 Early Hints -tila on laajalti tuettu (Chrome, Edge, Cloudflare, Fastly). Palvelin voi lähettää resurssivihjeitä jo ennen kuin täysi HTML on valmis:

HTTP/1.1 103 Early Hints
Link: </css/critical.css>; rel=preload; as=style
Link: </fonts/inter.woff2>; rel=preload; as=font; crossorigin

HTTP/1.1 200 OK
Content-Type: text/html
...

Käytännössä tämä siirtää CSS:n ja fontin lataamisen alkamaan jo TTFB-ikkunan aikana. Itse mittari ei muutu, mutta LCP paranee tyypillisesti 100–300 ms – mikä on aika usein juuri se ero hyvän ja huonon arvion välillä.

TTFB-vianmäärityksen päätöspuu

  1. Mittaa kenttädata web-vitals-kirjastolla. Onko TTFB > 800 ms 75. persentiilissä?
  2. Erottele vaiheet Resource Timing API:lla. Mikä vaihe vie ajan?
    • DNS > 100 ms → vaihda DNS-tarjoaja (Cloudflare 1.1.1.1, AWS Route 53).
    • TCP/TLS > 200 ms → ota HTTP/3 ja TLS 1.3 käyttöön, lisää CDN.
    • Server processing > 400 ms → tarkista tietokantakyselyt, lisää välimuisti.
    • Redirect > 0 ms → eliminoi uudelleenohjausketjut.
  3. Tarkista CDN-osumaprosentti. Hyvin viritetty CDN antaa 85–95 % cache hit -osuuden HTML-sivuille.
  4. Profiloi sovellus APM-työkalulla (Datadog, New Relic, Sentry Tracing) löytääksesi pullonkaulat.

Yhteenveto: TTFB-budjetti vuodelle 2026

VaiheTavoite
DNS< 30 ms
TCP + TLS< 100 ms (HTTP/3 + 0-RTT)
Palvelinkäsittely< 100 ms (välimuisti edge)
Vastauksen siirto< 50 ms
Yhteensä< 200 ms

Tämä on saavutettavissa staattiselle ja puolidynaamiselle sisällölle vuonna 2026 – ei pelkästään huipputeknisillä startup-sivustoilla, vaan myös WordPress- ja sähköisen kaupan alustoilla, kunhan yllä olevat strategiat yhdistetään järkevästi.

UKK – Usein kysyttyä TTFB-optimoinnista

Onko TTFB Core Web Vital?

Ei. TTFB on diagnostiikkamittari, joka ei vaikuta suoraan Googlen sijoituksiin. Se kuitenkin edeltää ja vaikuttaa LCP:hen ja FCP:hen, jotka taas ovat sijoittumisen kannalta merkittäviä. Hidas TTFB tekee hyvistä Core Web Vitals -arvoista käytännössä mahdottomia.

Mikä on hyvä TTFB-arvo vuonna 2026?

Googlen virallinen "hyvä" raja-arvo on ≤ 800 ms 75. persentiilissä, mutta käytännön kultainen standardi vuonna 2026 on < 200 ms. Lighthouse merkitsee yli 600 ms:n vastausajan epäonnistuneeksi auditiksi.

Miten TTFB eroaa palvelimen vastausajasta?

Palvelimen vastausaika mittaa vain sovelluksen käsittelyajan. TTFB sisältää lisäksi DNS:n, TCP-kättelyn, TLS-neuvottelun ja verkon round-tripin – eli koko ketjun pyynnön lähtemisestä ensimmäisen tavun saapumiseen.

Pienentääkö CDN aina TTFB:tä?

Lähes aina, kun CDN on oikein konfiguroitu. Väärin viritetty CDN voi tosin kasvattaa TTFB:tä, jos cache hit -osuus on alhainen ja jokainen pyyntö menee origin-palvelimelle ylimääräisen hypyn kautta. Tarkista välimuistin osumaprosentti CDN-paneelista – tavoittele yli 85 %.

Miksi TTFB on hidas vain ensimmäisellä latauksella?

Toistuvilla käynneillä selain hyödyntää DNS-välimuistia, TCP-yhteyden uudelleenkäyttöä ja TLS-istuntojen jatkamista (session resumption). Lisäksi back/forward-cache (bfcache) palauttaa sivun käytännössä 0 ms:ssa. Mittaa TTFB siis aina ensimmäiseltä latauksesta saadaksesi luotettavia arvoja.

Mitä seuraavaksi?

TTFB:n viritys luo perustan, jonka päälle muut Core Web Vitals -optimoinnit rakentuvat. Lue sarjamme aiemmat osat LCP-optimoinnista, CLS-optimoinnista ja INP-optimoinnista saadaksesi kokonaiskuvan vuoden 2026 web-suorituskyvystä. Yhdessä nämä neljä mittaria muodostavat luotettavan kompassin sivustosi nopeudelle – ja, kun perusta on kunnossa, kaikki muu alkaa yhtäkkiä tuntua paljon helpommalta.

Tietoa Kirjoittajasta Editorial Team

Our team of expert writers and editors.

Aiheeseen Liittyvät Artikkelit