Siirry suoraan sisältöön

Evästeasetukset

Valitse, mitä evästetyyppejä sallit. Voit muuttaa valintaasi milloin tahansa jokaisen sivun alareunassa olevasta kohdasta Evästeasetukset. Tietosuojaseloste

Välttämättömät

Aina käytössä

Tarvitaan sisäänkirjautumiseen, ostoskorin säilyttämiseen ja valintojesi muistamiseen. Nämä ovat aina käytössä.

Mitkä evästeet?
  • weboke_sessie, weboke_klant, weboke_remember: istuntosi ja sisäänkirjautuneena pysyminen
  • weboke_basket: ostoskorisi
  • wkBtwIncl: hintojen näyttäminen verollisina tai verottomina
  • wok_cookies: evästevalintasi, 12 kuukautta

Mittaa, mikä mainos johtaa käyntiin tai tilaukseen, jotta emme maksa mainoksista, joista ei ole hyötyä.

Mitkä evästeet?
  • Google Ads Google Tag Managerin kautta (_gcl_au, _gcl_aw), enintään 90 päivää
  • OpenAI Ads, mainokset ChatGPT-palvelussa
  • wok_aff: minkä kumppanin kautta tulit meille (kumppaniohjelma), 60 päivää

4,6

Maa ja kieli

Jokaisella maalla on oma sivustonsa, jossa on kyseisen maan hinnat ja ALV.

Näytä

Konepellin alla: webbipalvelin, PHP ja tietokanta

Moduuli 1: Miten WordPress toimii · Lukuaika: 8 minuuttia

Oppimistavoite: Tämän oppitunnin jälkeen osaat selittää vaihe vaiheelta, miten sivupyynnöstä tulee WordPressissä HTML-sivu ja missä kohtaa välimuisti lyhentää tätä polkua.

Keskeiset käsitteet: webbipalvelin (LiteSpeed, Apache, nginx), PHP, MariaDB/MySQL, kysely, index.php, sivupohjahierarkia (template hierarchy), dynaaminen vs. staattinen, TTFB

Staattinen ja dynaaminen sivu

Staattisella verkkosivustolla jokainen sivu on valmiina tiedostona palvelimella. Webbipalvelin hakee tiedoston ja lähettää sen. Tämä on nopeaa ja yksinkertaista, mutta jokainen muutos tarkoittaa uutta tiedostoa.

WordPress on dynaaminen: sivu syntyy vasta sillä hetkellä, kun joku pyytää sitä. Tiedostoa contact.html ei ole olemassa. Sen sijaan on tekstinpätkä tietokannassa, teema sivupohjineen ja kasa PHP-koodia, joka yhdistää nämä kaksi. Tämä tuo helppoutta (voit muokata tekstiä selaimessasi), mutta vaatii joka käynnillä laskentatyötä. Kun ymmärrät tämän laskentatyön, ymmärrät myöhemmin myös, miksi sivusto on hidas, miksi välimuisti vaikuttaa niin paljon ja miksi PHP-päivitys voi rikkoa jotain.

Sivupyynnön matka

Oletetaan, että kävijä avaa osoitteen https://example.com/contact/. Näin tapahtuu:

  1. DNS: selain hakee verkkotunnuksen example.com IP-osoitteen (katso DNS-kurssi). Se muodostaa suojatun yhteyden tähän osoitteeseen.
  2. Webbipalvelin: palvelimella pyörii webbipalvelin, esimerkiksi LiteSpeed, Apache tai nginx. Se ottaa pyynnön vastaan. Jos sillä nimellä on olemassa oikea tiedosto tai hakemisto (kuva, tyylitiedosto), se lähettää sen suoraan. Jos ei, pätee sääntö tiedostosta .htaccess (LiteSpeed ja Apache) tai nginx-konfiguraatiosta: "anna kaikki mitä ei ole olemassa tiedostolle index.php".
  3. PHP: index.php on PHP-tiedosto. Webbipalvelin antaa sen suoritettavaksi PHP:lle, ohjelmointikielelle, jolla WordPress on kirjoitettu. PHP lataa ensin tiedoston wp-config.php (asetukset, joissa on tietokannan tiedot), sitten muun WordPressin, sitten kaikki aktiiviset lisäosat ja aktiivisen teeman.
  4. Tietokanta: WordPress tarkistaa, mikä sisältö kuuluu osoitteeseen /contact/, ja esittää kysymyksiä tietokannalle (MariaDB tai MySQL): millä sivulla on tunniste (slug) contact, mitkä ovat sivuston asetukset, mikä valikko siihen kuuluu? Tällaista kysymystä kutsutaan kyselyksi. Yksinkertainen sivu vaatii jo kymmeniä kyselyitä; lisäosien kanssa niitä voi olla satoja.
  5. Teema: WordPress valitsee, mikä teeman sivupohja muotoilee sivun. Tämä tapahtuu sivupohjahierarkian (template hierarchy) mukaan: sivulle, jonka tunniste on contact, WordPress etsii ensin sivupohjaa page-contact, sitten page-<id> (sivun numero), sitten page, sitten singular ja lopulta index. Ensimmäinen olemassa oleva voittaa.
  6. HTML takaisin: lopputuloksena on HTML-sivu, jonka PHP antaa webbipalvelimelle ja webbipalvelin selaimelle.
  7. Selain lukee HTML:n ja hakee sen jälkeen vielä tyylitiedostot, skriptit, fontit ja kuvat. Ne ovat tavallisia tiedostoja, joten ne tulevat suoraan webbipalvelimelta (tai välimuistista).

Vaiheiden 2 ja 6 välissä on aika, jonka palvelin tarvitsee sivun luomiseen. Tämän näet TTFB-arvona (time to first byte): aika pyynnön ja vastauksen ensimmäisen tavun välillä. Hyvin rakennetulla sivustolla tämä on reilusti alle sekunnin. Moduulissa 6 mittaat tämän itse.

Miksi jokainen lisäosa vaikuttaa

Vaiheessa 3 ladataan kaikki aktiiviset lisäosat jokaisella pyynnöllä. Myös silloin kun kyseinen lisäosa ei tee tällä sivulla mitään. Kuvagalleria-lisäosa siis ladataan myös silloin, kun joku avaa yhteydenottosivusi. Jokainen lisäosa voi tehdä lisää kyselyitä, ladata lisää koodia ja lisätä sivulle lisää skriptejä.

Tämä selittää kaksi asiaa, jotka tulevat tällä kurssilla vastaan useammin:

  • Vähemmän lisäosia on yleensä nopeampaa. Ei siksi, että määrä itsessään ratkaisisi, vaan koska jokainen lisäosa voi tehdä työtä jokaisella pyynnöllä.
  • Yksi rikkinäinen lisäosa voi kaataa koko sivuston. Jos vaiheessa 3 menee jotain pieleen (esimerkiksi lisäosa, joka ei toimi uuden PHP-version kanssa), PHP ei koskaan pääse vaiheeseen 6. Kävijä näkee tyhjän sivun tai viestin "Tällä verkkosivustolla on kriittinen virhe" (oppitunti 5.4).

Mistä PHP ja tietokanta tulevat

PHP ja tietokanta pyörivät webhotellisi palvelimella. Valitset yleensä itse PHP-version hallintapaneelissa (DirectAdminissa tämä toiminto on nimeltään Select PHP version, katso oppitunti 8.4). Tietokannan luot asennuksen yhteydessä; asennusohjelma tekee sen usein puolestasi (oppitunti 2.2).

Muutama asia muistettavaksi:

  • PHP-versio: jokainen uusi PHP-versio on nopeampi ja turvallisempi, mutta vanha koodi voi kaatua siihen. wordpress.org suosittelee tällä hetkellä PHP 8.3:a tai uudempaa (tilanne marraskuussa 2026).
  • Tietokanta: wordpress.org suosittelee MariaDB 10.11:tä tai uudempaa, tai MySQL 8.0:aa tai uudempaa. MariaDB on MySQL:stä haarautunut versio; WordPressin kannalta ero ei merkitse mitään.
  • Tietokanta on yleensä samalla palvelimella (DB_HOST on silloin localhost). Suuremmassa webhotellissa se voi olla erillisellä palvelimella.

Välimuisti: polun lyhentäjä

Jos sata kävijää pyytää saman yhteydenottosivun, WordPress luo sen ilman välimuistia sata kertaa uudelleen. Joka kerta samat kyselyt, sama sivupohja, sama HTML. Sivuvälimuisti tallentaa HTML:n ensimmäisen kerran jälkeen. Seuraava kävijä saa tallennetun version: vaiheet 3 ja 6 jäävät pois.

Zonder cache:  browser > webserver > PHP > WordPress + plugins > database > thema > HTML
Met cache:     browser > webserver > opgeslagen HTML

Tämän takia välimuisti tuo suurimman nopeushyödyn (oppitunti 6.2). Se selittää myös yleisen hämmennyksen: "muokkasin tekstiä, mutta näen vanhan version." Silloin saat tallennetun version; kun tyhjennät välimuistin, näet uuden.

Kaikkea ei voi tarjoilla välimuistista. Kirjautunut ylläpitäjä, ostoskori tai kassasivu on jokaiselle kävijälle erilainen. Hyvä välimuistilisäosa ohittaa nämä.

Otsakkeet: mitä palvelin kertoo sinulle

Jokainen webbipalvelimen vastaus alkaa otsakkeilla (headers), ennen HTML:ää. Niitä ei näe sivulla, mutta kyllä selaimen kehittäjätyökaluissa (F12, välilehti Verkko, klikkaa ensimmäistä pyyntöä). Esimerkki:

HTTP/2 200
server: LiteSpeed
content-type: text/html; charset=UTF-8
link: <https://example.com/wp-json/>; rel="https://api.w.org/"
x-litespeed-cache: hit
  • server kertoo, mikä webbipalvelin vastaa.
  • link, jossa on wp-json, paljastaa, että kyseessä on WordPress.
  • x-litespeed-cache: hit tarkoittaa, että tämä sivu tuli LiteSpeed-välimuistista. Muut välimuistit käyttävät eri nimiä, kuten x-cache: HIT tai cf-cache-status: HIT Cloudflaren tapauksessa.

Näitä rivejä ei tarvitse osata ulkoa. Mutta jos osaat lukea niitä, löydät monta ongelmaa itse.

Yhteenveto

  • WordPress luo jokaisen sivun pyynnön hetkellä: webbipalvelin, PHP, lisäosat, tietokanta, teema, HTML.
  • Jokaisella pyynnöllä ladataan kaikki aktiiviset lisäosat; yksi rikkinäinen lisäosa voi pysäyttää koko sivuston.
  • Sivupohjahierarkia määrittää, mikä teeman sivupohja muotoilee sivun.
  • Sivuvälimuisti ohittaa laskentatyön tarjoamalla tallennettua HTML:ää. Kirjautuneet käyttäjät ja ostoskorit eivät kuulu tähän välimuistiin.
  • Vastauksen otsakkeet kertovat, mikä webbipalvelin vastaa ja tuliko sivu välimuistista.

Tietovisa

1. Kuka suorittaa WordPressin PHP-koodin?



2. Sivusto, jolla on 40 lisäosaa, on hidas myös sivuilla, joilla kyseiset lisäosat eivät näytä mitään. Mikä on paras selitys?



3. Mistä tyylitiedosto, kuten /wp-content/themes/thema/style.css, yleensä tulee?



4. Näet otsakkeissa rivin x-litespeed-cache: hit. Mitä se tarkoittaa?



5. Mitä sivupohjaa WordPress käyttää sivulle, jonka tunniste on contact, jos teemassa on vain page ja index?



Tehtävä

Tehtävä A1.2: Lue sivustosi otsakkeet. Avaa oma sivustosi (tai wordpress.org) selaimesi kehittäjätyökaluilla (F12, välilehti Verkko, päivitä sivu, klikkaa ensimmäistä pyyntöä). Merkitse muistiin, mikä webbipalvelin näkyy otsakkeessa server (tai "ei mikään", jos sitä ei ole) ja onko otsake, joka kertoo sivun tulleen välimuistista (mikä nimi ja mikä arvo). Ohjelma hakee saman sivun ja vertailee.

Tehtävä A1.2: Lue sivustosi otsakkeet




Sitä, mitä kirjoitat ja mitä löydämme, ei tallenneta. Selaimesi muistaa vastauksesi ja sen, oletko suorittanut tehtävän. Jos olet kirjautunut sisään, tallennamme kohtaan Omat kurssit vain sen, että tehtävä oli (lähes) oikein; voit poistaa sen myös sieltä.

Lue lisää

Nämä artikkelit kuvaavat vaiheet WebOkén paneeleissa; muissa paneeleissa ne toimivat samankaltaisesti.

Hetkinen…

Määritä verkkotunnuksesi

Määritä kullekin verkkotunnukselle nimipalvelimet, liitos webhotelliin ja se, kuka tulee omistajaksi.

Ladataan verkkotunnuksia…