Sivuston nopeus-checklist: 15 kohtaa ilman raskaita frameworkeja

Miksi nopeus on tärkeää?

• SEO: Google käyttää nopeutta ranking-tekijänä (Core Web Vitals)
• Konversio: Jokainen sekunti lisää poistumisia 10–20 %
• Käyttökokemus: Nopea sivu tuntuu ammattimaiselta
• Mobiili: Hitaat yhteydet korostavat nopeuden merkitystä

Core Web Vitals -tavoitteet

Mittari	Hyvä	Tarvitsee parannusta	Huono
LCP (Largest Contentful Paint)	<2,5s	2,5–4s	>4s
INP (Interaction to Next Paint)	<200ms	200–500ms	>500ms
CLS (Cumulative Layout Shift)	<0,1	0,1–0,25	>0,25

15 kohdan nopeus-checklist

Kuvat (suurin vaikutus)

• ☐ WebP-formaatti: 25–35 % pienempiä kuin JPEG/PNG
• ☐ Oikea koko: Älä lataa 2000px kuvaa 400px tilaan
• ☐ Srcset ja sizes: Eri koot eri laitteille
• ☐ Lazy loading: loading="lazy" kuviin jotka eivät näy heti
• ☐ Width ja height: Estää layout shiftin (CLS)

JavaScript

• ☐ Defer-attribuutti: <script defer> estää renderöinnin esto
• ☐ Poista turhat skriptit: Jokainen skripti hidastaa
• ☐ Ei inline-JS:ää: Ulkoinen tiedosto + caching
• ☐ Minifiointi: Poista välilyönnit ja kommentit

CSS

• ☐ Kriittinen CSS inline: Above-the-fold tyyli <style>-tagiin
• ☐ Ei-kriittinen CSS asynckronisesti: preload + onload
• ☐ Minifiointi: Pienemmät tiedostot = nopeampi lataus

Fontit

• ☐ Rajaa leikkaukset: Vain käyttämäsi painot (400, 700)
• ☐ Font-display: swap: Näytä fallback-fontti heti
• ☐ Preload tärkeimmät: <link rel="preload" as="font">

Palvelin ja cache

• ☐ GZIP/Brotli-pakkaus: 70–90 % pienempiä tiedostoja
• ☐ Cache-headerit: Staattiset resurssit välimuistiin pitkäksi aikaa
• ☐ CDN: Jos globaali yleisö, käytä Cloudflare tms.

Esimerkki: optimoitu kuva-elementti

<picture>
  <source srcset="kuva.webp" type="image/webp">
  <img 
    src="kuva.jpg" 
    alt="Kuvaava teksti" 
    width="800" 
    height="450"
    loading="lazy"
  >
</picture>

Esimerkki: optimoitu CSS-lataus

<!-- Kriittinen CSS inline -->
<style>.header{...} .hero{...}</style>

<!-- Loput asynkronisesti -->
<link rel="preload" href="styles.css" as="style" 
  onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

Mittaaminen

• PageSpeed Insights: pagespeed.web.dev – Googlen työkalu
• GTmetrix: Yksityiskohtainen analyysi ja waterfall
• Chrome DevTools: Lighthouse-auditointi (F12 → Lighthouse)
• WebPageTest: Testausta eri sijainneista ja laitteista

Yleiset virheet

1. Liian paljon kolmannen osapuolen skriptejä: Chat-widgetit, analytiikka, mainokset – jokainen hidastaa.
2. Optimoimattomat kuvat: 5 MB kuva etusivulla tappaa nopeuden.
3. Raskas framework: React/Vue pelkkään esittely sivustoon on overkill.
4. Ei cachea: Samat resurssit ladataan joka kerta uudelleen.
5. Liian monta fonttia: Yksi fontti, 2 painoa riittää useimpiin sivustoihin.

Usein kysytyt kysymykset

Paljonko nopeampi sivusto voi olla ilman frameworkia?

Merkittävästi. Tyypillinen React-sivusto: 300–500 KB JavaScript. Staattinen HTML/CSS: 50–100 KB. Ero on 3–10x latausajassa mobiililla.

Tarvitsenko CDN:ää?

Jos kävijäsi ovat pääasiassa Suomessa ja palvelimesi on Suomessa/Euroopassa, CDN ei ole pakollinen. Cloudflare on ilmainen ja helppo lisätä tarvittaessa.

Miten WordPress-sivun nopeuttaa?

Cache-plugin (WP Super Cache tai W3 Total Cache), kuvien optimointi (Smush, ShortPixel), turhat pluginit pois, kevyt teema. Pahimmillaan vaihto staattiseen sivustoon.

Lue myös

• B2B-etusivu joka myy
• SEO-pikakurssi 30 minuutissa
• URL-migraatio ja 301-ohjaukset
• Verkkosivut palveluna →