WordPress-sivuston optimointi — Lisää nopeutta

WordPress on oletusarvoisesti erittäin nopea julkaisualusta, mutta homma voi levitä käsille nopeasti monestakin eri syystä. Yksi suurimmista ongelmanaiheuttajista on laajennukset, joita WordPressille on saataville laaja valikoima. Laajennuksien avulla sisällön ja toimintojen lisääminen kotisivuille onnistuu käden käänteessä, mutta tällä on tietysti myös varjopuolensa. Huoleton laajennuksien lisääminen ja käyttö verkkosivuilla johtaa ennen pitkää myös sivuston latausnopeuksien ja renderöinnin hidastumiseen.

Asialla voi olla kauaskantoisia vaikutuksia, joten aihetta ei kannata ohittaa olankohautuksella. Sivunopeus on yksi Googlen monista SERP-sijoitukseen vaikuttavista tekijöistä, mutta nopeudella on myös epäsuoria vaikutuksia. Puutteellisen optimoinnin epäsuoria negatiivisia vaikutuksia ovat mm:

  • Menetetyt potentiaaliset asiakkaat
  • Välittömän poistumisprosentin kasvu
  • Pienentynyt konversioaste

Montako kertaa olet itse odotellut sivun latautumista ja valkoista ruutua katsellessasi siirtynyt turhautuneena takaisin hakukoneen tuloksiin valitaksesi seuraavan sopivan osuman. Aivan. Eikä kyse ole edes pitkistä odotusajoista. Kärsivällisyys on hyve, joka ei päde internetissä.

Monien tutkimuksien mukaan sivun latautumista odotellaan vain muutamia sekunteja, joten kallisarvoinen sisältö ei koskaan näe päivänvaloa, jos optimointi on heikolla tasolla tai jäänyt tekemättä kokonaan.

Odotukseen käytetyn ajan merkitys korostuu entisestään mobiilikäyttäjien myötä ja näin on myös Googlen kohdalla. Internetin mobiilikäyttö ohitti pöytäkoneet vuonna 2016 ja Googlen ”Mobile First”-indeksointi suo paremmat hakukonesijoitukset sivustoille, jotka ottavat mobiilikäyttäjien tarpeet huomioon.

Optimoinnin tärkeys korostuu erityisesti etusivulla, koska suurin osa saapuvasta liikenteestä kohdistuu tänne. Tämä ei tietenkään tarkoita sitä, että muiden sivujen optimoinnin voi unohtaa kokonaan.

Sivutoimisto.fi optimointi

Julkaisin 2019 helmikuun lopulla uuden version sivutoimisto.fi:stä. Optimoimaton versio tuotti aika karun tuloksen Googlen PageSpeed Insights-testissä. Tuloksen näet alta.

Google PageSpeed Insights tulokset

Kuten yllä olevasta grafiikasta näet, optimoinnilla voi saavuttaa suuria positiivisia vaikutuksia sivuston nopeuteen.

Alla muutamia poimintoja sivutoimisto.fi:n PageSpeed Insights-analyysistä. Oikean puoleisessa sarakkeessa näet optimointia edeltäneen tilanteen ja optimoinnin jälkeisen tilanteen. Ero on huima.

Ensimmäinen sisällön renderöinti2.8s → 1.9s
Nopeusindeksi3.9s → 1.9s
Interaktiivisuutta edeltävä aika8.7s → 2.1s
CPU:n ensimmäinen toimettomuusjakso8.2s → 2.1s
Arvioitu syöttöviive620ms → 10ms
TTFB900ms → 200ms

Käyn tässä artikkelissa läpi toimenpiteitä, joiden avulla sinäkin voit kohentaa sivustosi käyttökokemusta latausnopeuksia parantamalla. Testaa ensin sivustosi nykyinen nopeus Googlen työkalulla ja merkiste lukemat muistiin. Tämän jälkeen voit systemaattisesti yksitellen korjata sivustosi ongelmakohdat.

Voit testata muutoksen toimivuutta jokaisen kohdan jälkeen. Tällä tavalla saat paremman käsityksen kotisivuillasi toimivista ratkaisuista.

Kotisivujen optimointi — muistilista

WordPress-kotisivujen optimointi

Kotisivujen optimointiin kannattaa käyttää aikaa, koska sivuston nopeus vaikuttaa suuresti käyttökokemukseen.

Nopeuteen vaikuttavia tekijöitä on monia eikä alla esitetty listaus sisällä tietenkään kaikkia käytössä olevia optimointikeinoja. Listan avulla voit kuitenkin taklata suurimmat pullonkaulat ja vieläpä suhteellisen helposti.

Jotkin listalla esitetyistä toimenpiteistä ovat toisia huomattavasti tehokkaampia, mutta kaikilla on oma vaikutuksensa kokonaisuuteen. Pienistä puroista kasvaa kuitenkin aina se suuri joki, joten kannattaa käyttää aikaa hetki myös hienosäätöön.

1. Kuvien optimointi

Kuvien optimointi on yksi tärkeimmistä nopeuteen vaikuttavista tekijöistä. Vaikka jättäisit kaikki muut kohdat listalta toteuttamatta, tätä et voi ohittaa.

Kuvien optimointi tarkoittaa käytännössä kahta eri asiaa. Kuvan koon muuttaminen tarkoitusta vastaavaksi ja kuvan pakkaaminen sopivalla tekniikalla. Tee-se-itse-mies voi avata PhotoShopin tms. ja hoitaa asian itse, mutta tarjolla on myös WordPress-laajennuksia, joille kuvien optimointiin liittyvän taakan voi helposti ulkoistaa. Alla muutamia vaihtoehtoja:

2. Kuvien viivästetty lataamien (Lazy loading)

Kuvien lazy loading

Lazy loading voi parantaa sivuston nopeutta huomattavasti lataamalla kuvia vain tarpeen mukaan. Periaate on helppo ymmärtää esimerkin avulla.

Kävijä saapuu sivulle x. Kun sivu latautuu, sivun näkyvällä osalla olevat kuvat latautuvat välittömästi. Useimmiten tämä tarkoittaa tietysti sivun yläosassa olevia kuvia. Kun käyttäjä vierittää sivua alaspäin ja on saapumaisillaan seuraavan kuvan kohdalle, selain lähettää pyynnön palvelimelle ja lataa kuvan.

Lataamalla kuvia vain tarpeen vaatiessa voidaan sivun alustavaa latauskuormaa vähentää huomattavasti ja näin nopeuttaa latausaikaa. Toisaalta myös ylimääräinen kaistankäyttö vähenee, kun piiloon jäävää materiaalia ei ladata turhaan. Tämä kaistan käyttöön liittyvä säästö on tietysti relevantti vain siinä tapauksessa, että käyttäjä ei skrollaa ollenkaan sivua alaspäin vaan esimerkiksi klikkaa linkkiä heti sivun yläosassa ja siirtyy toiselle sivulle. Joka tapauksessa lazy loading on monella tapaa taloudellinen ja järkevä tapa optimoida sivua.

3. Poista käytöstä turhat/käyttämättömät pluginit

Kuten jo alussa mainitsinkin, pluginit voivat hidastaa sivustosi toimintaa merkittävästi. Useat laajennukset sisältävät monia eri toiminnallisuuksia ja asetuksia palvellakseen mahdollisimman laajasti erilaisia tarpeita. Yksittäinen käyttäjä kuitenkin useimmiten tarvitsee vain osaa toiminnoista ja silti ”kärsii” koko laajennuksen sisältämästä painolastista. Tästä syystä laajennuksia valittaessa kannattaa punnita saatua hyötyä ja mahdollista impaktia sivun toimintaan.

Olennaisinta on kuitenkin käydä läpi laajennukset ja poistaa käytöstä tarpeettomat. Vaikka aktiivinen laajennus ei olisikaan käytössä verkkosivuillasi, sen tarvitsemat resurssit ladataan sivuston mukana. Eliminoi siis kaikki turha painolasti.

4. GZIP-pakkaus

GZIP on sovellus (ja formaatti), jonka avulla tiedostoja voidaan pakata ja purkaa. Sen avulla voidaan pakata html-, css- ja JavaScript-tiedostojen kokoa. Latausaikoihin saatu hyöty voi olla parhaimmillaan merkittävä. Kaikki nykyaikaiset selaimet tukevat GZIP:iä.

5. Sivujen välimuistitus

Sivujen välimuistitus tarkoittaa sitä, että sivusta luodaan staattinen html-tiedosto, joka lähetetään selaimelle, kun kävijä saapuu sivulle. Välimuistin luominen vapauttaa palvelimen resursseja ja näin nopeuttaa WordPress-sivuston latausaikoja merkittävästi.

  • WP Super Cache: Helppo ottaa käyttöön. Sisältää kuitenkin myös asetuksia edistyneemmälle käyttäjälle.
  • W3 Total Cache: Tarjoaa parempaa suorituskykyä, mutta käyttöönotto on monimutkaista ja vaatii syvempää osaamista.

6. Eliminoi renderöinnin blokkaajat

Sivun käyttämät scriptit ja tyylitiedostot estävät tyypillisesti käyttäjää näkemästä sivua ennen kuin selain on ladannut ja käsitellyt ne kokonaisuudessaan. Useimmiten tämä on juuri se mitä halutaankin.

Monet tyylitiedostot ja scriptit ovat ehdollisia. Tämä tarkoittaa sitä, että niitä tarvitaan vain tietyissä tapauksissa tai niitä ei tarvita ATF-sisällön tulostamiseen näytölle. (ATF, Above-The-Fold, tarkoittaa sisältöä, joka näkyy sivulla ensisilmäyksellä). Parhaan mahdollisen käyttökokemuksen takaamiseksi tämän kaltaiset, tulostusta viivyttävät, tekijät kannattaa mahdollisuuksien mukaan eliminoida. Tässä kohtaa on hyvä korostaa, että kaikkia viivettä aiheuttavia tekijöitä voi olla mahdoton poistaa.

JavaScript-resurssien optimointi

JavaScript-resurssin aiheuttaman viiveen voi korjata lisäämällä defer– tai async-attribuutin script-tagiin.

  • async-attribuutti ohjeistaa selaimen aloittamaan skriptin lataamisen välittömästi hidastamatta HTML:n jäsentelyä. Resurssin latauduttua HTML:n jäsentely keskeytetään, jotta skriptin sisältö voidaan käsitellä.
  • defer-attribuutti ohjeistaa selainta viivästyttämään skriptin lataamista, kunnes HTML:n jäsentely on valmis.

Tyylien optimointi

Tyylien optimointi on parhaimmillaankin vähintäänkin työlästä. Muutamia keinoja kuitenkin on.

  • Käytä inline-tyylejä ATF-sisällön tulostamiseen.
  • Käytä link-elementin media-attribuuttia lataaksesi vain välttämättömät laitekohtaiset tyylit.

7. Ota käyttöön PHP 7.2

PHP 7

Kyllä. PHP versiolla on väliä erityisesti, jos palvelimesi käyttää vielä vuonna 2014 julkaistua PHP 5.6 versiota. PHP 7+ on jopa kolme kertaa nopeampi suorituskyvyltään, mutta myös turvallisuus on huomattavasti parempi.

Useat palveluntarjoajat mahdollistavat PHP version vaihtamisen oman hallintapanelinsa kautta. Tarkista siis, että käytössäsi on vähintään PHP 7.0.

8. Vaihda teemaa

Valmis-teemat voivat olla pahimmillaan oikeita resurssisyöppöjä. Jos omat taitosi eivät riitä teeman optimointiin suosittelen turvautumaan joko ammattilaisen apuun tai vaihtamaan teemaa.

9. Kommenttien optimointi

Kommenttien optimointi

Jos käytät sivustollasi kommentteja, käy läpi seuraavat seikat:

  • Lataa kommentit dynaamisesti. (luo painike => ”näytä kommentit”). Voit käyttää apuna esim. WordPressille löytyvää Lazy Load for Comments-laajennusta.
  • Poista kommentit, jotka ovat spammausta tai joiden sisältöarvo on nolla
  • Poista käytöstä Gravatar-kuvakkeet
  • Määritä Gravatar-kuvakkeen koko mahdollisimman pieneksi

10. JS- ja CSS-tiedostojen minifiointi

Skriptien ja tyylitiedostojen minifiointi lyhentää latausaikoja. Käytännössä minifiointi poistaa tiedostoista kaikki ”tarpeettomat” merkit joita ovat mm. turhat välilyönnit ja rivinvaihdot. Minifioitu tiedosto suorittaa täysin samat toimenpiteet kuin alkuperäinenkin, mutta ne painavat vähemmän ja näin ollen myös latautuvat nopeammin.

Tiedostojen minifiointi ei luultavasti tuo massiivista hyötyä kotisivujesi nopeuteen, mutta yhtenä optimointikeinona muiden joukossa tämäkin auttaa parantamaan käyttökokemusta.

Apuna voit käyttää vaikkapa yhtä seuraavista laajennuksista:

11. Plugin Organizer

Plugin Organizer on tehokas WordPress-laajennus pluginien hallintaan. Sen avulla voit:

  • Laajennuksien latausjärjestystä
  • Poistaa laajennuksen käytöstä tietyillä sivuilla

Kuvitellaan, että olet luonut yhteydenottosivulle lomakkeen käyttämällä Contact Form 7-laajennusta. Et siis voi poistaa laajennusta käytöstä kokonaan, mutta toisaalta laajennuksen aiheuttama ylimääräinen latauskuorma rasittaa aivan turhaan muita sivuja. Plugin Organizerin avulla voit kätevästi ottaa pluginin käyttöön vain yhteydenottosivulla.

12. Poista emojit käytöstä

WordPressistä löytyy oletuksena emoji-tuki. Tämä tarkoittaa sitä, että kaikki tekstuaalisesti esitetyt emojit muutetaan kuviksi. Alla muutama esimerkki:

emojit

Suurella todennäköisyydellä kotisivuillasi ei käytetä emojeita (tai et vain halua muuttaa niitä kuvamuotoon), joten toiminnon luoma pieni painolasti kotisivuillesi on turha. Voit poistaa emojit käytöstä manuaalisesti liittämällä alla olevan koodin teemahakemistossa sijaitsevan functions.php-tiedoston loppuun.

function disable_emoji_feature() {
	remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
	remove_action( 'wp_print_styles', 'print_emoji_styles' );
	remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
	remove_action( 'admin_print_styles', 'print_emoji_styles' );
	remove_filter( 'the_content_feed', 'wp_staticize_emoji');
	remove_filter( 'comment_text_rss', 'wp_staticize_emoji');
	remove_filter( 'embed_head', 'print_emoji_detection_script' );
	remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
	add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );

	if( (int) get_option('use_smilies') === 1 ) {
		update_option( 'use_smilies', 0 );
	}
}

function disable_emojis_tinymce( $plugins ) {
	if( is_array($plugins) ) {
		$plugins = array_diff( $plugins, array( 'wpemoji' ) );
	}
	return $plugins;
}

add_action('init', 'disable_emoji_feature');

Lähde: coralnodes.com

13. Tietokannan optimointi

Tietokanta
Tietokannan säännöllinen optimointi takaa paremman suorituskyvyn.

Tietokannan optimointi kannattaa suorittaa säännöllisesti. Optimoitu tietokanta selviytyy kyselyistä nopeammin ja näin myös sivustosi suorituskyky ja nopeus paranee.

Optimointiin on olemassa monia laajennuksia. Itselläni on käytössä WP-Optimize. WP-Optimize on helppokäyttöinen ja tehokas työkalu tietokantataulujen siivoukseen. Myös ajastetut toiminnot ovat mahdollisia.

Monien palveluntarjoajien hallintapanelit sisältävät myös tietokantojen optimointiin tarkoitetun työkalun, mutta WordPress-laajennuksen avulla hallinnan voi keskittää julkaisualustaan. Mielestäni tämä on toimivampi ja yksinkertaisempi vaihtoehto.

14. Vähennä HTTP-kutsujen määrää

Selain lähettää HTTP-kutsun palvelimelle aina, kun jokin tiedosto ladataan. Tämä tiedosto voi tapauksesta riippuen olla CSS-tyylitiedosto, kuva, video tai vaikkapa JavaScirpt-tiedosto. Käytännössä jokainen tiedosto muodostaa oman kutsunsa.

Lähetettyjen HTTP-kutsujen määrä korreloi suoraan sivustosi latausnopeuden kanssa, koska sivu tulostuu vasta kun kaikki tarvittavat resurssit on ladattu. Mitä siis voit tehdä?

  • Poista käytöstä käyttämättömät laajennukset. Mieti myös käytössä olevien laajennuksien olennaisuutta ja tärkeyttä sivustollesi.
  • Poista kuvat, jotka eivät tuo lisäarvoa kotisivuillesi.
  • Liitä yhteen ja minifioi scriptejä ja tyylitiedostoja mahdollisuuksien mukaan.
  • Vähennä käytettävien fonttien (ja leikkauksien) määrää.

15. Keep-Alive

Käytännön tasolla Keep-Alive on metodi, joka mahdollistaa HTTP-kutsujen käyttää samaa TCP-yhteyttä kommunikointiin. Hyvin suurella todennäköisyydellä Keep-Alive on oletuksena käytössä palvelimellasi, mutta asia kannattaa tarkistaa.

Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *