Nopeasti latautuvista sivuista hyötyy ennen kaikkea sivustolla vieraileva. Toisaalta myös hakukoneiden sanotaan käyttävän latautumisnopeutta yhtenä hakutulosten järjestykseen ja hakukonenäkyvyyteen vaikuttavana tekijänä.

Keräsin tähän artikkeliin muutamia vinkkejä WordPress-verkkosivuston nopeusoptimointiin. Tätä ei tietenkään tule pitää kaiken kattavana oppaana, vaan nimenomaan sekalaisia vinkkejä sisältävänä listauksena. Vinkit eivät myöskään ole tärkeysjärjestyksessä.

1. Lisäosien tiedostojen lataaminen

Turhien tiedostojen lataaminen on yksi merkittävä nopeusoptimointiin vaikuttava tekijä. WordPressin kohdalla erityisesti lisäosien omat CSS- ja JavaScript-tiedostot kannattaa ladata ainoastaan, kun niitä oikeasti tarvitaan.

Monilla lisäosilla on paha tapa ladata tiedostot riippumatta siitä käytetäänkö lisäosaa lainkaan kyseisellä sivulla. Esimerkiksi WooCommercen käyttämiä tiedostoja ei kannata ladata sivuilla, jotka eivät liity verkkokauppaan.

Suosittu lomakkeita hallinnoiva lisäosa Contact Form 7 lisää myöskin niin CSS- kuin JavaScript-tiedostonsa jokaiselle sivulle. Seuraavassa esimerkkinä koodinpätkä, jolla estetään Contact Form 7 -lisäosan tiedostojen tarpeeton lataaminen.

if ( ! is_singular() || ( is_singular() && ! has_shortcode( get_the_content(), 'contact-form-7' ) ) ) {
	wp_dequeue_script( 'contact-form-7' );
	wp_deregister_style( 'contact-form-7' );
}

Tällaiset pienet koodinpätkän kannattaa lisätä joko lapsiteemaan tai sivustokohtaiseen lisäosaan. Jos käytössä on kolmannen osapuolen teema, hyvä vaihtoehto on käyttää Code Snippets -lisäosaa.

2. Sivujen välimuistitus

Kun vierailija saapuu sivustolle, pyörii taustalla kenties raskaitakin toimenpiteitä ennen kuin sivu voidaan esittää selaimessa. Esimerkiksi toistuvat tietokantahaut ovat usein turhia, ja ne voisi tehdä kerran, jonka jälkeen tarjoillaan sama valmiiksi luotu sivu kaikille vierailijoille.

Muun muassa tähän tarpeeseen vastaa tiedostojen välimuistitus. Suosittuja WordPress-lisäosia välimuistitukseen ovat esimerkiksi WP Fastest Cache ja WP Super Cache.

Tärkeää on huomata, että esimerkiksi WooCommerce-verkkokaupan luomat sivut kannattaa jättää välimuistituksen ulkopuolelle. Esimerkiksi ostoskori on aina vierailijakohtainen ja saman välimuistiin tallennetun ostoskorin näyttäminen kaikille ei tietenkään ole järkevää.

Eri välimuistituslisäosissa on erilaisia asetuksia tiettyjen sivujen välimuistista poisjättämiselle. Parhaat WordPress-lisäosat tunnistavat esimerkiksi WooCommercen automaattisesti eivätkä tallenna ostoskoria, kassaa tai maksusivua välimuistiin.

Jos sivustolla on dynaamisia elementtejä, kuten ostoskorin sisällön kertova laskuri, on ne välimuistituslisäosaa käyttäessä päivitettävä JavaScriptin avulla.

3. Kuvien lataaminen ”laiskasti”

Lazy loading eli laiskasti lataaminen tarkoittaa sivuston elementtien lataamista vasta, kun ne ovat näkyvillä selaimessa.

Kuvissa laiska lataaminen voidaan määritellä img-tägin loading-attribuutilla seuraavasti:

<img src="https://tuomastolppi.com/kuva.webp" loading="lazy">

Nykyään lazyload-attribuuttia tukevat jo kaikki modernit selaimet. Näin ollen erilaisille JavaScript-virityksille ei ole enää tarvetta — ellei halua tukea vanhempia selaimia.

WordPressissä laiskasti lataaminen toimii kohtalaisen hyvin ilman lisätoimenpiteitä. WordPress osaa esimerkiksi tunnistaa artikkelin ensimmäisen kuvaelementin, ja jättää sen loading-attribuutin arvoksi ”eager” eli kuva ladataan heti sivun latautuessa. Lopuissa artikkelin kuvissa attribuutin arvona on puolestaan ”lazy”.

Kuvat voivat olla tiedostokooltaan hyvinkin suuria ja joskus niitä on jo yhdellä sivulla kymmeniä. Tästä syystä kuvien latautumisnopeuden optimointi on erityisen tärkeää.

4. Kuvatiedostojen pakkaaminen ja pienentäminen

Kuten edellisessä kohdassa mainittiin, voivat kuvatiedostot olla suuria ja näin merkittävästikin sivun latautumista hidastavia.

Laiskasti lataamisen lisäksi kuvatiedostot kannattaa pakata pienemmäksi ja tarjoilla käyttötarpeen mukaisesti sopivan kokoisina.

Pakkaaminen tarkoittaa kuvatiedoston optimointia niin, että tiedostokoko pienenee, mutta parhaimmillaan kuvan laatu pysyy käytännössä samana.

Kuvan mittojen pienentäminen puolestaan tarkoittaa kuvien tarjoilemista sopivassa koossa. Jos kuvaa käytetään pienessä elementissä sivustolla, siinä on turha käyttää tuhansia pikseleitä leveää kuvatiedostoa.

Tähänkin vaivaan apua saa WordPressin lisäosista. Kuvien optimointiin on saatavilla useita lisäosia, joista mainittakoon Smush, EWWW Image Optimizer ja Imagify.

5. Tavallisen JavaScriptin käyttö

Termillä tarkoitetaan niin sanotusti raakaa tai tavallista JavaScriptiä ilman erilaisten JavaScript-kirjastojen, kuten jQueryn tuomia toimintoja. Englanniksi käytetään termiä Vanilla JavaScript.

Ikävä kyllä useat WordPress-lisäosat lataavat jQueryn, jotta lisäosien JavaScript toimii suunnitellusti. Joka tapauksessa mielestäni kannattaa aina pyrkiä käyttämään tavallista JavaScriptiä ilman jQueryn tai muiden kohtuullisen raskaiden kirjastojen lataamista.

Pyörää ei kuitenkaan kannata keksiä uudelleen, ja runsaasti JavaScript-toiminnallisuuksia sisältävillä sivustoilla erilaisten kirjastojen käyttäminen on järkevää.

WordPressin nopeusoptimointi on perusteiltaan helppoa. Viimeisten millisekuntien viilaaminen voi toisaalta olla hankalaakin. Nopeusoptimointiin auttavat niin WordPressin sisäiset toiminnot kuin erilaiset lisäosat.

Nopeusoptimoinnissa merkitystä on myös palvelimella. Muun muassa palvelimen sijainti sekä palvelimella käytetty PHP-versio vaikuttavat osaltaan latautumisnopeuteen.

Aiemminkin on ollut jo tietoa siitä, että yllättävän moni käyttää Googlea siirtyessään johonkin jo ennestään tuttuun palveluun. Googlen hakukenttää käytetään siis tavallaan internet-selaimen osoitepalkin korvaajana.

Huomasinkin Googlen AdWords Keyword Toolilla tutkiessani, että hakujen kautta siirrytään nettisivuille ilmeisesti yllättävänkin paljon. Vai mistä kertoo se, että hakusanaa Facebook käytettiin Suomessa maaliskuussa yhteensä yli 9 miljoonaa kertaa? Toki kaikki eivät käytä hakusanaa siirtyessään Facebookiin, mutta väittäisin, että suurin osa näin tekee.

Muita mielenkiintoisia hakusanoja ovat muun muassa Iltalehti (3,3 milj. hakua maaliskuussa), Iltasanomat (2,7 milj.), YLE (550 000) ja HS (450 000). Osan näistäkin selittää varmasti normaali hakukäyttäytyminen, mutta yllättävän suuria määriä joka tapauksessa.

PS. Googlen Facebook-ryhmässä on yli 600 000 fania. Vastaavasti Facebook-hakusanalla löytyy Googlesta yli kaksi miljardia osumaa.

Tämä blogi on ensimmäinen kerta, kun asennan WordPressin suomenkielisenä. Tällöin tietenkin helpoin tapa saada blogi asennettua suomeksi on etsiä valmista suomennosta. Asiaa googlettamalla huomasin, että suomennoksia on tehty viime aikoina usealtakin taholta.

Tätä kirjoitettaessa uusin suomennos on Jyri Väätäisen WordPressin versioon 2.8 tekemä suomennos. Eilenhän WordPressistä ilmestyi uusi versio, 2.8.5, mutta suomennos luonnollisesti toimii uudenkin version kanssa. Suomennoksen asentamisen ei pitäisi tuottaa ongelmia vähänkään WordPressin kanssa tekemisissä olleille.

Suomennoksen asennus

1. Lataa käännöstiedosto Jyri Väätäisen Mediablogista.
2. Siirrä lataamasi fi.mo-tiedosto WordPressin wp-content/languages -hakemistoon. Huomaa, että joudut luomaan hakemiston, ellet ole jo aiemmin sitä tehnyt.
3. Avaa wp-config.php-tiedosto WordPressin juurihakemistosta.
4. Muokkaa rivi 67 define ('WPLANG', ''); muotoon define ('WPLANG', 'fi');.

Seuraavaksi siirrä languages kansio sisältöineen, sekä muokattu wp-config.php -tiedosto palvelimelle ja WordPress on nyt suomenkielinen. Kannattaa muistaa, että joissakin WordPress-teemoissa on suoraan template-tiedostoihin kirjoitettuja tekstejä, joita ei saa kielitiedostolla käännettyä. Tällöin joudut muokkaamaan template-tiedostoja suoraan.

Jyri Väätäisen suomennos perustuu Daniel Koskisen tekemään suomennokseen, joka puolestaan perustuu Mikko Vireniuksen tekemään suomennokseen. Kiitokset jokaiselle herralle WordPressin suomentamisesta!