Nettisivujen tekniikka

Nettisivujen nopeuttaminen oikeassa järjestyksessä

Hidas sivusto karkottaa kävijät ennen kuin he näkevät sisältöäsi, ja sivuston nopeus vaikuttaa myös hakusijoituksiin. Hyvä uutinen: suurin osa hitaudesta johtuu muutamasta isosta asiasta, jotka voit korjata itse ilman koodaamista.

Nettisivujen nopeuttamisen tehokkaimmat keinot ovat kuvien tiedostokokojen optimointi, välimuistin käyttöönotto, turhien lisäosien ja raskaan teeman karsiminen sekä laadukas webhotelli ja ajantasainen PHP-versio. Aloita mittaamalla sivuston nykytila Google PageSpeed Insightsilla ja korjaa suurimmat ongelmat ensin. Useimmilla pienillä sivustoilla suurin yksittäinen hidastaja on ylisuuret kuvat.

Tällä ohjeella käyt kotisivujen nopeuttamisen läpi tärkeysjärjestyksessä, mittaus edellä. Ohjeet on kirjoitettu WordPress-sivustolle, mutta periaatteet pätevät mille tahansa sivustolle.

Tarvitset

  • pääkäyttäjän oikeudet WordPress-sivustoosi (lisäosien asennus)
  • noin tunnin aikaa perusasioiden kuntoon laittamiseen

Mittaa ensin, arvaile vasta sitten

Nettisivujen nopeuttaminen kannattaa aloittaa mittaamisesta, ei työkalujen asentelusta. Muuten saatat käyttää illan säätämiseen, joka ei tunnu kävijälle mitenkään.

  1. Mene osoitteeseen pagespeed.web.dev (Google PageSpeed Insights).
  2. Syötä sivusi osoite ja napsauta Analysoi.
  3. Testaa etusivun lisäksi ainakin yksi sisältösivu, esimerkiksi tärkein palvelusivusi. Eri sivut voivat olla eri tavalla hitaita.
  4. Katso ensin Mobiili-välilehti. Valtaosa kävijöistä tulee puhelimella, ja mobiilitulos on lähes aina huonompi kuin työpöytätulos.

Raportissa on kaksi eri asiaa, jotka menevät helposti sekaisin:

  • Kenttädata (raportin yläosa, “Selvitä, mitä todelliset käyttäjäsi kokevat”) perustuu oikeiden Chrome-käyttäjien mittauksiin viimeisten 28 päivän ajalta. Tämä on se, mikä ratkaisee. Pienellä suomalaisella sivustolla kenttädataa ei aina ole, koska kävijöitä on liian vähän.
  • Lab-data ja pistemäärä 0–100 on yhden simuloidun testilatauksen tulos. Se on hyvä vianetsintätyökalu, mutta pistemäärä ei ole sama asia kuin todellinen nopeus. Sivusto voi tuntua nopealta 75 pisteellä ja hitaalta 95 pisteellä.

Halutessasi voit varmistaa tuloksen toisella mittarilla, esimerkiksi GTmetrixillä. Yksi työkalu kuitenkin riittää: tärkeämpää on mitata aina samalla työkalulla, jotta tulokset ovat vertailukelpoisia.

Core Web Vitals selkokielellä

Google tiivistää käyttökokemuksen kolmeen mittariin, joita kutsutaan nimellä Core Web Vitals. Ne ovat myös yksi Googlen hakusijoitusten signaaleista, joskin sisällön laatu painaa hakutuloksissa selvästi enemmän.

  • LCP (Largest Contentful Paint): kuinka nopeasti sivun suurin sisältöelementti, yleensä pääkuva tai otsikko, tulee näkyviin. Hyvä tulos on alle 2,5 sekuntia.
  • INP (Interaction to Next Paint): kuinka nopeasti sivu reagoi, kun kävijä napsauttaa tai näpäyttää jotain. Hyvä tulos on alle 200 millisekuntia. INP korvasi aiemman FID-mittarin vuonna 2024, joten vanhemmat ohjeet puhuvat vielä FID:stä.
  • CLS (Cumulative Layout Shift): kuinka paljon sivun elementit hyppivät latauksen aikana. Hyvä tulos on alle 0,1. Tunnistat ongelman siitä, että yrität napsauttaa linkkiä ja sisältö siirtyy sormen alta.

Kirjoita nykyiset tuloksesi muistiin ennen kuin muutat mitään. Muuten et tiedä, auttoivatko korjaukset.

1. Laita kuvat kuntoon

Ylisuuret kuvat ovat pienten sivustojen yleisin hidastaja, ja siksi ne kannattaa korjata ensin. Kun kamerasta tullut 5 megatavun kuva ladataan sivulle sellaisenaan, mikään välimuistilisäosa ei pelasta tilannetta.

Kolme asiaa riittää pitkälle:

  1. Skaalaa kuvat oikeaan kokoon ennen latausta. Sisältöalueen kuvalle riittää yleensä 1200–1600 pikselin leveys.
  2. Pakkaa kuvat ja käytä moderneja WebP- tai AVIF-muotoja, jotka WordPress nykyään tukee suoraan. Optimointilisäosa (esimerkiksi Imagify tai Smush) hoitaa tämän automaattisesti jatkossa ladattaville kuville.
  3. Älä asenna erillistä lazy load -lisäosaa. WordPress on lykännyt ruudun ulkopuolisten kuvien latausta automaattisesti versiosta 5.5 (2020) lähtien. Vanhoissa ohjeissa suositellut lazy load -lisäosat ovat nykyään turha kerros lisää.

Koko kuvaprosessi on käyty vaihe vaiheelta läpi oppaassa kuvien tiedostokokojen optimointi.

2. Ota välimuisti käyttöön

Välimuisti (cache) tarkoittaa, että sivusta tallennetaan valmiiksi rakennettu kopio. Normaalisti WordPress kokoaa jokaisen sivun tietokannasta jokaiselle kävijälle erikseen, mikä on hidasta. Välimuistista sama sivu lähtee kävijälle murto-osassa ajasta.

Tarkista ensin webhotellisi hallintapaneelista tai ohjeista, onko palvelintason välimuisti jo päällä. Monet WordPress-webhotellit hoitavat tämän valmiiksi, jolloin erillinen välimuistilisäosa voi olla tarpeeton tai jopa haitata.

Jos välimuistia ei ole, asenna yksi (ja vain yksi) välimuistilisäosa:

  • LiteSpeed Cache on ilmainen ja ominaisuuksiltaan kattavin, mutta sen sivuvälimuisti toimii vain LiteSpeed-palvelimilla. Moni suomalainen webhotelli käyttää LiteSpeediä, joten tarkista asia omastasi. Jos palvelin on LiteSpeed, tämä on selvä valinta.
  • WP Super Cache (Automatticin oma, ilmainen) on yksinkertainen ja toimii kaikilla palvelimilla. Hyvä perusvalinta, kun haluat vain sivuvälimuistin päälle ilman säätämistä.
  • W3 Total Cache (ilmainen) on tehokas mutta raskas konfiguroitava, ja sopii lähinnä tekniselle käyttäjälle.
  • WP Rocket on maksullinen (59 $/vuosi yhdelle sivustolle, ei ilmaisversiota). Se tekee järkevät asetukset automaattisesti ja niputtaa samaan pakettiin myös CSS- ja JavaScript-optimoinnit. Rahanarvoinen, jos et halua opetella asetuksia, mutta et tarvitse sitä päästäksesi hyvään tulokseen.

Asennuksen jälkeen avaa sivustosi yksityisessä selausikkunassa ja tarkista, että kaikki toimii: valikot, lomakkeet ja mahdollinen ostoskori. Välimuistin yleisin ongelma on, että se tarjoilee vanhentunutta sisältöä, joten tyhjennä välimuisti aina isompien muutosten jälkeen.

3. Karsi teeman ja lisäosien kuorma

Jokainen lisäosa ja raskas teema lisää ladattavaa koodia ja palvelimen työtä. Tämä näkyy erityisesti INP-mittarissa: sivu voi näyttää latautuneelta mutta reagoi tahmeasti.

  • Käy lisäosalista läpi ja poista kaikki, mitä et oikeasti käytä. Pelkkä käytöstä poisto ei riitä siistiin lopputulokseen, poista turhat kokonaan.
  • Kokeile PageSpeed Insightsin lab-raportin kohtia Reduce unused JavaScript ja Render-blocking requests: niistä näet, mitkä lisäosat tai upotukset kuormittavat eniten. Tyypillisiä syyllisiä ovat sivunrakentajat, sosiaalisen median syötteet, chat-työkalut ja videoupotukset.
  • CSS- ja JavaScript-tiedostojen minimointi (turhien merkkien ja välilyöntien poisto) löytyy useimpien välimuistilisäosien asetuksista ja on yleensä turvallinen laittaa päälle. Tiedostojen yhdistely ja lataamisen viivästys sen sijaan rikkovat helposti jotain, joten testaa ne erikseen.
  • Jos teemasi on vuosia vanha ja raskas, harkitse vaihtoa kevyeen teemaan (esimerkiksi GeneratePress tai Astra) seuraavan isomman uudistuksen yhteydessä. Teeman vaihto on iso operaatio, joten sitä ei kannata tehdä pelkän pistemäärän takia.

Muista myös, että nopeus on osa mobiilikäytettävyyttä: hidas sivu on puhelimella vielä tuskaisempi kuin koneella. Aiheesta lisää oppaassa mobiiliystävälliset sivut.

4. Tarkista webhotelli ja PHP-versio

Halvimmillaan jaettu webhotelli on kuin ruuhkabussi: sivustosi jakaa palvelimen kymmenien muiden kanssa, ja mikään lisäosa ei korjaa hidasta palvelinta. Jos LCP on huono vaikka kuvat ja välimuisti ovat kunnossa, katse kääntyy palvelimeen.

  • Päivitä PHP-versio webhotellin hallintapaneelista uusimpaan tuettuun versioon. Uudet PHP 8 -versiot ovat selvästi vanhoja nopeampia, ja päivitys on yleensä parin napsautuksen juttu. Ota varmuuskopio ennen päivitystä.
  • Varmista, että palvelin tukee vähintään HTTP/2-protokollaa. HTTP/2 lataa sivun monet tiedostot rinnakkain samaa yhteyttä pitkin, mikä nopeuttaa erityisesti WordPress-sivuja, jotka lataavat kymmeniä tiedostoja. Lähes kaikki ajantasaiset webhotellit tukevat sitä HTTPS-yhteyden kanssa; version näet selaimen kehittäjätyökalujen verkkovälilehdeltä tai kysymällä webhotellin tuesta.
  • Jos palvelin on jatkuvasti hidas, kysy webhotellilta vaihtoehtoja tai kilpailuta. Suomalaisille kävijöille palvelimen kannattaa sijaita Suomessa tai muualla Euroopassa.

Sisällönjakeluverkkoa eli CDN:ää tarjotaan usein nopeutuskeinona. Se auttaa lähinnä silloin, kun kävijöitä tulee useilta mantereilta. Pienelle suomalaiselle sivustolle Suomessa sijaitseva palvelin ajaa saman asian yksinkertaisemmin, joten CDN ei kuulu ensimmäisiin korjauksiin.

Milloin kannattaa lopettaa

Nopeusoptimoinnissa tulee raja, jonka jälkeen tunnit eivät enää tuota mitään. Realistinen tavoite useimmille sivustoille: Core Web Vitals -mittarit vihreällä kenttädatassa ja sivu, joka avautuu puhelimella parissa sekunnissa.

Pistemäärän nostaminen 85:stä 100:aan ei tunnu kävijästä juuri miltään, ja viimeiset pisteet vaativat usein teknisiä kikkoja, jotka rikkovat jotain muuta. Sisällön parantaminen tai sivuston SEO-tarkistus tuottaa siinä vaiheessa varmemmin tulosta kuin viimeisten millisekuntien metsästys.

Kertakorjauksen jälkeen riittää kevyt rutiini: aja nopeustesti aina, kun otat käyttöön uuden lisäosan tai teet isomman sivustouudistuksen. Hitaus harvoin iskee kerralla, se hiipii sivustolle lisäys kerrallaan.

Yleiset virheet

  • Optimoidaan pistemäärää, ei nopeutta. Lab-pisteet heittelevät testikerrasta toiseen. Seuraa kenttädataa ja omaa kokemustasi puhelimella, älä yksittäistä pistelukua.
  • Kaksi välimuistilisäosaa päällekkäin. Kaksi välimuistia ei ole kaksi kertaa nopeampi, vaan resepti outoihin virheisiin. Käytä yhtä.
  • CSS- ja JavaScript-tiedostojen yhdistely ja viivästys laitetaan päälle testaamatta. Nämä asetukset voivat rikkoa sivuston toimintoja huomaamatta. Ota ne käyttöön yksi kerrallaan ja testaa sivusto jokaisen muutoksen jälkeen.
  • Sivustoa ei testata muutosten jälkeen. Aja PageSpeed Insights uudelleen ja klikkaile sivusto läpi jokaisen ison muutoksen jälkeen. Ilman vertailua et tiedä, mikä auttoi ja mikä hajotti.
  • Syy on kuvissa, mutta korjataan kaikkea muuta. Aloita aina kuvista. Se on tylsä vastaus, mutta useimmiten se oikea.

Linkit