Hakukoneoptimointi

Nopeat sivustot syövät hitaat hakutuloksissa

Oman median konsulttimme Tuomas Kokkonen vieraili huhtikuussa 2017 Brighton SEO -konferenssissa, jossa keskityttiin myös paljon sivuston nopeuksien parantamiseen, sillä asialla on merkitystä hakutuloksille.

Nettisivuston latausnopeudella on merkitystä paitsi käyttäjälle myös hakukoneille, sillä nopeasti latautuvat sivut nousevat hitaita korkeammalle hakutuloksissa ja keräävät siten enemmän orgaanista liikennettä. Entistä useampi käyttää myös nettiä mobiililla, ja kärsimättömyys hitaiden sivujen kanssa on huipussaan nimenomaan mobiilikäyttäjillä.

Useat tutkimukset ovat myös osoittaneet latausnopeuden vaikuttavan merkittävästä sivuston konversioprosenttiin*. Myös sosiaalisen median yhtiöt suosivat algoritmeissaan enemmän nopeita sivuja.

Sivuston nopeuden kehittämisellä voidaankin saavuttaa triplavoitto: enemmän liikennettä, tyytyväinen asiakas ja parempi konversioprosentti.

Miten kehittää sivuston latautumisnopeutta?

Sivuston nopeuden kehittämiseen on monta eri tietä. Jotkin näistä keskittyvät pelkästään usein hitaasti latautuvien mobiilisivujen optimointiin, jotkin asiakkaan seuraavan klikkauksen ennakointiin ja jotkin sivuston keventämiseen tiedostojen pakkaamisella sekä hyödyntämällä selaimen välimuistia. Seuraavassa esittelen muutamia tehokkaimpia tapoja latausnopeuden kehittämiseen.

AMP (Accelerated Mobile Pages)

Kirjoitin marraskuussa 2016 AMP:stä (Accelerated Mobile Pages) sekä siitä, kuinka sillä voidaan nopeuttaa sivujen latautumista mobiililaitteilla keventämällä sivuja. Nyt Google suosii yhä enemmän AMP-sivuja, sillä mobiilihakutuloksissa AMP-merkintää käyttävät sivut saavat etulyöntiaseman paitsi järjestyksessä, myös klikkausprosentissa, koska Google merkkaa nopeasti latautuvat AMP-sivut hakutuloksissa pienellä AMP-tagilla:

Forbes.comin sivu on AMP-merkattu ja Google haluaa kertoa käyttäjilleen sivun latautuvan nopeasti AMP tagilla

Forbes.comin sivu on AMP-merkattu ja Google haluaa kertoa käyttäjilleen sivun latautuvan nopeasti AMP tagilla

Samanlaista merkintää en ole vielä tavannut suomenkielisissä hakutuloksissa, mutta sen ilmestyminen myös Google.fin hakutuloksiin on vain ajan kysymys.

AMP-merkintä on välttämätön uutisjulkaisijoille, sillä niiden avulla Google osaa rakentaa uutiset karusellin. Suomalaista julkaisijoista esimerkiksi Yle käyttää AMP-merkkausta uutisissaan:

Haettaessa avainsanalla ”uutiset” Google nostaa julkaisijan tuoreimmat uutiset karuselliin, jolloin käyttäjä voi helposti selata tuoreimmat uutisotsikot.

Muille kuin uutisjulkaisijoille AMP-merkkaaminen ei ole täysin välttämätöntä, mutta sitä kannattaa harkita varsinkin verkkokauppojen, joiden mobiilisivut latautuvat hitaasti. AMP-merkkaamista voi esimerkiksi kokeilla tärkeimmillä laskeutumissivuilla ja selvittää millainen vaikutus sillä on konversioihin.

Prerender eli ennakointi

”Prerenderöinti” tarkoittaa todennäköisimmin klikatun linkin valmiiksi lataamista selaimen välimuistiin. Rel=prerender komenolla selain käsketään lataamaan jokin tietty sivu valmiiksi sen jälkeen kun nykyinen sivu on kokonaan latautunut. Esimerkiksi Google itse käyttää Prerender-tagia hakutuloksissaan merkkaamalla ensimmäisen hakutuloksen prerender-tagilla, jolloin se latautuu valmiiksi hakutulossivun latautumisen jälkeen.

Prerender on suhteellisen helppo implementoida, mutta sen ilmiselvä miinus on, että se toimii vain yhdelle sivulle kerrallaan. Toisaalta prerender-tekniikan käyttöön voidaan ohjelmoida itseoppiva työkalu, joka pyrkii ennakoimaan käyttäjän seuraavan klikin aiemman polun perusteella ja sitä mukaa lataamaan seuraavan sivun käyttäjälle valmiiksi.

Paras hyöty prerender-tekniikasta on verkkosivustoille, joilla on yksi selkeä hitaasti latautuva konversiosivu, jonka halutaan latautuvan nopeammin. Kuten AMP-tekniikassa, prerenderin tekniikkaankin hyvä lähtökohta on testata käytäntöä tärkeimmillä laskeutumissivuilla.

Välimuistin hyödyntäminen

Pidentämällä kotisivujen välimuistiin tallennettujen resurssien säilöntäaikaa voidaan jotkin tiedostot ladata suoraan välimuistista. Tämä on usein huomattavasti nopeampaa kuin se, että sivusto rakentaa jokaisen näkymän käyttäjän selaimen pyyntöjen perusteella. Välimuistin pidentäminen on myös suhteellisen helppoa, sillä liki kaikissa julkaisujärjestelmissä siihen löytyy omat lisäosansa.

Pidemmän välimuistin haittapuolena voi olla, että jotkin sivustoon tehdyt muutokset eivät välttämättä heti ilmesty loppukäyttäjille. Tämä voidaan korjata nollaamalla sivuston välimuisti aina suurempien ja varsinkin visuaalisten muutosten jälkeen.

Kuva- ja tyylitiedostojen optimointi

Verkkoliikenteestä 62 prosenttia on kuvatiedostoja ja yli puolet kaikista verkkosivuista sisältää yli 40 kuvaa/sivu**. Kuvat voivat myös vielä paljon tilaa ja sitä kautta hidastaa sivun latautumista varsinkin mobiililaitteilla. Kuvien skaalaaminen tai vähemmän tilaa vievien kuvaformaattien käyttäminen onkin yksi tehokkaimmista tavoista nopeutta sivujen latautumista.

Googlen oma kuvaformaatti WebP vie 30 prosenttia vähemmän tilaa kuin JPEG ja 80 prosenttia vähemmän kuin PNG-kuvatiedostot. WebP-kuvia tukevat tosin toistaiseksi vasta Chrome, Opera ja Android -selaimet, mutta kuvat voidaan ohjelmoida palvelmaan WebP-formaatissa näille selaimille ja jossain muussa formaatissaan mikäli kyseessä on jokin muu selain.

Kuvatiedostojen vaihtamiselle vaihtoehtona on myös kuvatiedostojen pakkaaminen, jolloin itse tiedostomuoto ei muutu, mutta kuvat vievät huomattavasti vähemmän tilaa palvelimella. Esimerkiksi Guetzli pakkaaminen pienentää noin reilun kolmanneksen JPEG-kuvatiedostojen kokoa. Brotli-pakkaaminen taas noin 20-25 prosenttia sekä toimii myös muilla kuin JPEG-kuvatiedostoilla.

Kuvien ohella yksi potentiaalisimmista ja helpoimmista tavoista nopeuttaa verkkosivujen latautumista on mukautettujen tyylitiedostojen käyttö. Mukautetun tyylitiedoston käytössä tyylitiedostot ladataan Googlen omasta ”fonttivarastosta” eikä ulkoisesta CSS-tiedostosta kuten yleensä. Tämä nopeuttaa varsinkin paljon tyylitiedostoja käyttävien verkkosivustojen latautumista.

http/2

Google on aiemmin kertonut suosivansa salattua https-yhteyttä käyttäviä sivustoja hakutuloksissa. Tämä sama suuntaus jatkuu, sillä Google Chrome alkaa näyttämään ”Not secure” -merkintää selaimessa tarkasteltaessa suojaamatonta http-sivua:

Google Chrome varoittaa salaamattomasta http-yhteydestä ”Not Secure” merkinnällä

Varoituksella voi olla vaikutusta käyttäjäkokemukseen, mutta täysin varmasti se vaikuttaa hakutulossijoitukseen. Lisäksi riskinä on, että Google implementoi varoituksen myös itse hakutulossivulle, jolloin se takuulla vaikuttaa myös klikkausprosenttiin.

Https:ään siirtymiseen on nyt myös toinen syy, sillä http:n kaivattu päivitys http/2 vaatii toimiakseen https:ää. Teknisten parannusten ansiosta http/2 taas on edeltäjäänsä http/1.1:stä huomattavasti nopeampi***. Tämä tarkoittaa selkeää eroa myös itse loppukäyttäjälle.

Jos verkkosivustosi ei vielä tue salattua https-yhteyttä, tulisi se päivittää sillä https tulosten etulyöntiasema hakutuloksissa kasvaa päivä päivältä. Onkin arvioitu että globaalista liki 80-90 prosenttia hakutuloksista on https-sivustoja vuoden 2017 loppuun mennessä****.

Mikäli taas sivustosi käyttää https:ää, mutta liikenteestä suurin osa on edelleen http versiossa, tulisi http sivut uudelleenohjata https:ään. Tämä antaa Googlelle vahvan signaalin https:än käytöstä sekä myös poistaa sivuston duplikaattiongelman (sama sisältö useammassa kuin yhdessä URL-osoitteessa).

Viimeiseksi mikäli sivustosi jo käyttää onnistuneesti https-yhteyttä, mutta ei vielä http/2:sta, tulisi myös http/2 implementoida, sillä se nopeuttaa tuntuvasti sivujen latautumista. http/2:sta ei myöskään ole mitään haittaa, sillä vaikka selain ei sitä vielä tukisikaan, palvellaan sivusto automaattisesti http/1.1 -versiossa.

Ota yhteyttä allekirjoittaneeseen tai muihin SEO-ammattilaisiimme mikäli haluat kuulla lisää verkkosivujen latausnopeuden kehittämisestä konversioiden lisäämiseksi.

Hakukoneoptimointiterveisin,

Tuomas Kokkonen
Owned Media Consultant

iProspect - Driving Business Performance

Lähteet:

* https://blog.kissmetrics.com/loading-time/ ja https://www.soasta.com/blog/mobile-web-performance-monitoring-conversion-rate/

**http://httparchive.org/interesting.php#bytesperpage

***https://www.tunetheweb.com/blog/http-versus-https-versus-http2/

****https://www.slideshare.net/bastiangrimm/three-site-speed-optimisation-tips-to-make-your-website-really-fast-brightonseo-2017