Mikä tekee sivustosta hitaan, ja miten sitä mitataan?

Moduuli 6: Nopeus · Lukuaika: 9 minuuttia

Oppimistavoite: Tämän oppitunnin jälkeen osaat mitata, mihin aika kuluu, ja tunnistaa eron palvelimen hitauden ja selaimen hitauden välillä.

Keskeiset käsitteet: TTFB, Core Web Vitals (LCP, INP, CLS), laboratoriodata, kenttädata, PageSpeed Insights, verkkovälilehti, pakkaus, ulkoiset skriptit, webhotellipaketin rajat, 503

Ensin mittaus, sitten säätäminen

"Sivusto on hidas" voi johtua kymmenestä eri syystä. Jos ottaa ilman mittausta käyttöön samaan aikaan välimuistilisäosan, kuvanoptimointilisäosan ja isomman paketin, ei jälkeenpäin tiedä mikä auttoi, ja ylläpidettävää on kolme asiaa enemmän. Aloita siis aina kolmella kysymyksellä (samoilla kuin webhotellisi oppaassa):

Onko kaikki hidasta, vai pelkästään hallinta? Hidas hallinta nopean etusivun kanssa viittaa lisäosiin, jotka tekevät paljon hallinnassa, tai botteihin, jotka hyökkäävät kirjautumissivua vastaan.
Onko se hidasta aina, vai tiettyinä hetkinä? Jos hitautta esiintyy vain ruuhka-aikoina tai kun ajastettu tehtävä on käynnissä, paketti on saavuttamassa rajansa.
Onko hitaus kaikilla, vai vain sinulla? Kokeile puhelimella 4G:n tai 5G:n kautta, tai pyydä jotakuta toista kokeilemaan. Jos hitaus esiintyy vain sinulla, kyse on yhteydestäsi tai VPN:stäsi.

Kaksi puoliskoa: palvelin ja selain

Aika, jonka kävijä odottaa, koostuu kahdesta osasta (oppitunti 1.2):

Palvelin luo HTML:n: web-palvelin, PHP, lisäosat, tietokanta. Tämän näet lukuna TTFB (time to first byte), eli aikana ensimmäiseen tavuun vastauksessa. web.dev suosittelee nyrkkisääntönä, että useimpien sivustojen kannattaa tavoitella 0,8 sekunnin tai lyhyempää TTFB:tä.
Selain lukee tämän HTML:n ja hakee sen jälkeen kaiken mitä siinä on: tyylitiedostot, skriptit, fontit, kuvat, videot, mittauskoodit, chat-widgetit. Vasta kun tarpeeksi näistä on ladattu, kävijä näkee jotain.

Korkean TTFB:n korjaat palvelimen puolella: välimuisti (oppitunti 6.2), vähemmän tai kevyempiä lisäosia, uudempi PHP-versio, siivottu tietokanta (oppitunti 6.3) tai enemmän laskentatehoa. Matala TTFB mutta silti hidas sivu viittaa selaimen puolelle: liian suuret kuvat, liikaa skriptejä, ulkoiset osat.

Core Web Vitals

Google mittaa kävijöiden kokemusta kolmella luvulla, Core Web Vitals -mittareilla:

Mittari	Mitä se mittaa	Hyvä, jos
LCP (Largest Contentful Paint)	Kuinka nopeasti suurin sisältöosa (usein iso kuva tai otsikko) tulee näkyviin	2,5 sekuntia tai vähemmän
INP (Interaction to Next Paint)	Kuinka nopeasti sivu reagoi klikkaukseen, napautukseen tai näppäimistöön	200 millisekuntia tai vähemmän
CLS (Cumulative Layout Shift)	Kuinka paljon sivu hyppii latautumisen aikana	0,1 tai vähemmän

INP korvasi maaliskuussa 2024 vanhemman FID-mittarin. Google käyttää näitä lukuja muun muassa hakutulosten järjestämisessä, mutta tärkein syy niiden parantamiseen on yksinkertainen: kävijät poistuvat hitaalta tai hyppivältä sivulta.

Laboratoriodata ja kenttädata

Mittauksia on kahdenlaisia, ja ne antavat erilaisia lukuja:

Laboratoriodata: testi yhdellä hetkellä, yhdestä paikasta, simuloidulla puhelimella ja yhteydellä. Hyödyllinen vertailuun (ennen ja jälkeen muutoksen), mutta ei edusta todellista kävijää.
Kenttädata: mittauksia todellisilta kävijöiltä Chromella, viimeisiltä 28 päivältä. Tämä kuvaa sitä, mitä kävijät todella kokevat. Pienillä sivustoilla kävijöitä on usein liian vähän kenttädataa varten.

PageSpeed Insights (pagespeed.web.dev) näyttää molemmat: ylhäällä kenttädatan (jos sitä on), sen alla laboratoriotestin pisteineen ja konkreettisine neuvoineen. Älä tuijota sokeasti 0-100 pistettä. Katso osa-alueita: onko LCP huono, koska palvelin on hidas (TTFB), vai koska iso kuva on 3 Mt?

Testaa aina muutaman kerran (luvut vaihtelevat) ja testaa myös tavallinen sivu, ei pelkkää etusivua.

Itse tarkastelu selaimella

Selaimesi kehittäjätyökalut (F12) näyttävät, mitä todella tapahtuu:

Verkko-välilehti: päivitä sivu välimuisti pois käytöstä (rasti kohdassa "Poista välimuisti käytöstä"). Näet jokaisen ladattavan tiedoston, sen koon ja keston. Järjestä koon mukaan: suurimmat tiedostot ovat usein kuvia. Järjestä verkkotunnuksen mukaan: kuinka paljon tulee muilta osapuolilta (fontit, mittauskoodit, videot)?
Ensimmäinen pyyntö (itse HTML): klikkaa sitä, välilehti Timing. "Waiting for server response" on TTFB.
Otsakkeet tästä ensimmäisestä pyynnöstä: onko pakkausta käytössä (content-encoding: br tai gzip), ja tuliko sivu välimuistista (oppitunti 6.2)?

Tavalliset syylliset

Käytännössä WordPress-sivuston hitaus johtuu yleensä jostain näistä:

Ei sivuvälimuistia: jokainen sivu luodaan uudelleen joka käynnillä (oppitunti 6.2).
Liikaa tai raskaita lisäosia, varsinkin lisäosia jotka kutsuvat ulkoisia palveluita tai tekevät raskaita tietokantakyselyitä joka pyynnöllä (oppitunti 5.3).
Suuret kuvat: puhelimella otettu 5 Mt:n kuva etusivulla (oppitunti 4.4 ja 6.3).
Raskas teema tai sivunrakentaja, joka lataa paljon skriptejä ja tyylitiedostoja joka sivulla (oppitunti 5.1).
Ulkoiset osat: fontit, videot, chat-widgetit, mittauskoodit, sosiaalisen median painikkeet muilta osapuolilta. Jokainen on yhteys toiseen palvelimeen, joka voi olla hidas.
Vanha PHP-versio (oppitunti 8.4).
Sotkuinen tietokanta: tuhansia versioita, roskapostia, lisäosien lokitauluja (oppitunti 6.3).
Botit: hakukoneroomurit, tekoälyroomurit ja kirjautumisyritykset pitävät pakettiasi varattuna (oppitunti 7.3).
Paketti saavuttaa rajansa: liian vähän laskentatehoa (CPU), prosesseja tai muistia liikenteeseen nähden.

Pakettisi rajat

Jaetussa webhotellissa jokainen paketti saa kiinteän osan palvelimesta: laskentatehoa, muistia, levynopeutta ja tietyn määrän prosesseja yhtä aikaa. Jos sivustosi käyttää enemmän, sitä hidastetaan, tai kävijät saavat virheilmoituksen 503 (Service Unavailable, joillakin webhotelleilla "Resource Limit Is Reached"). DirectAdminissa CloudLinuxin kanssa näet tämän kohdasta Resource Usage (jossa näkyy "faults", jos sivustoasi on hidastettu), ja X-Ray:lla näet sivukohtaisesti, mikä lisäosa tai tietokantakysely vie aikaa. Muilla webhotelleilla on vastaavia näkymiä, joskus vain pyynnöstä.

Isompi paketti auttaa, jos sivustosi todella tarvitsee enemmän (vilkas verkkokauppa). Se ei korjaa huonosti rakennettua sivustoa: ongelma palaa myöhemmin takaisin. Etsi ensin syy.

Yhteenveto

Mittaa ensin: kaikki vai pelkkä hallinta, aina vai joskus, kaikki vai vain sinä.
TTFB on palvelimen puoli (tavoittele 0,8 sekuntia tai vähemmän); loput on sitä mitä selain lataa.
Core Web Vitals: LCP (2,5 s), INP (200 ms) ja CLS (0,1); INP korvasi FID:n vuonna 2024.
PageSpeed Insights näyttää kenttädatan ja laboratoriodatan; verkkovälilehti näyttää, mitä todella latautuu.
Suurin osa hitaudesta johtuu välimuistin puutteesta, raskaista lisäosista, suurista kuvista ja ulkoisista osista; isompi paketti on vasta viimeinen askel.

Tietovisa

Tehtävä

Tehtävä A6.1: Mittaa TTFB ja pakkaus. Syötä sivustosi osoite ja halutessasi yksi tavallinen sivu (esimerkiksi yhteydenottosivusi). Ohjelma hakee jokaisen sivun kolme kertaa ilman evästeitä ja antaa keskimmäisen TTFB-arvon, HTML:n koon, ja onko palvelin lähettänyt HTML:n pakattuna (content-encoding gzip tai br). Vertaa tulosta PageSpeed Insightsin testiin ja kirjaa ylös, mikä sinua kiinnostaa.

Lue lisää

Nämä artikkelit kuvaavat vaiheet WebOkén paneeleissa; muissa paneeleissa toiminta on vastaavaa.

Evästeet WebOkén sivustolla

Evästeasetukset

Välttämättömät

Markkinointi