Blogi

5 vinkkiä WordPress-sivuston nopeusoptimointiin

Tuomas Tolppi
11.4.2023

Yksi ammattitaidolla toteutetun verkkosivuston tärkeimmistä ominaisuuksista on sen nopea latautuminen. Latautumisnopeuteen vaikuttaa moni seikka aina palvelimen suorituskyvystä ja sijainnista varsinaisen sivuston nopeusoptimointiin.

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.