Perjantaina, 13.9.2019

Kärsitkö hitaasti latautuvista verkkosivuista? Korjaa nämä asiat ja vältät sudenkuopat

Nettimaailman isoin riesa on hitaat sivustot. Mikään ei ole rasittavampaa kun etsiä tietoa tai hoitaa päivittäisiä askareita netissä ja odotella sekuntitolkulla sivun latautumista. Vaikka aika ei olisikaan rahaa, se on ainoa ehtyvä resurssi, joka meillä on.

Mikä sitten sivustoja hidastaa, muu kuin etanavauhdilla kulkeva mobiililaajakaistasi, eli hidas nettiyhteytesi? Nyt saat tietää aiheesta kaiken.

Tämä kirjoitus saattaa sisältää vanhentunutta tietoa, sillä se on julkaistu yli 3 vuotta sitten.

Nettimaailman isoin riesa on hitaat sivustot. Mikään ei ole rasittavampaa kun etsiä tietoa tai hoitaa päivittäisiä askareita netissä ja odotella sekuntitolkulla sivun latautumista. Vaikka aika ei olisikaan rahaa, se on ainoa ehtyvä resurssi, joka meillä on.

Mikä sitten sivustoja hidastaa, muu kuin etanavauhdilla kulkeva mobiililaajakaistasi, eli hidas nettiyhteytesi? Nyt saat tietää aiheesta kaiken.

Huono palvelin

Olemme aiemminkin kirjoittaneet palvelimen merkityksest√§ mm. kirjoituksissa √Ąl√§ hanki mit√§ tahansa webhotellia WordPress-sivuillesi ja Palvelimen merkitys WordPress-sivustoille. Sill√§ on v√§li√§ laittaako sivustonsa py√∂rim√§√§n muutama dollari vuodessa maksavaan webhotelliin vai kiinte√§st√§ dedikoidusta rautapalvelimesta vipuvoimaa saavalle ammattimaiselle WordPress-optimoidulle palvelimelle. Erot n√§kyv√§t suoraan sivuston latausnopeuksissa.

Huono palvelin lataa sivuston käyttämät tiedostot hitaammin ja aiheuttaa pahimmillaan isoakin pullonkaulaa, erityisesti silloin kun sivustolla on ruuhkaa tai se on muutenkin koodattu huonosti. Varmista siis, että WordPress-sivustollasi on hyvä, WordPressille optimoitu palvelin, mielellään ylläpitopalvelulla siten, että se ei ole jaetulla palvelimella tuhansien muiden, ellei jopa miljoonien sivustojen kanssa.

Palvelinten eli kansakielell√§ ns. ”sivutilan” lyhyt oppim√§√§r√§: Palvelimia on monenlaisia. N√§ist√§ yleisimm√§t ovat ns. ”webhotelleja”, joissa kaista ja tila jaetaan muiden kanssa, jolloin hinta saadaan poljettua asiakkaalle mahdollisimman edulliseksi, mutta my√∂s laatu k√§rsii. Toiseksi yleisimpi√§ ovat yksitt√§iset virtuaalipalvelimet, jotka ovat kohtalaisen edullisia, mutta eiv√§t jaettuja muiden kanssa. Suosiota ovat nostattaneet pilvipalvelimet (Google App Engine, Amazon EC2, jne.), joissa taas sivut majailevat yl√∂sp√§in skaalautuvassa pilvess√§, miinuksena esimerkiksi huono p√§√§sy tiedostoj√§rjestelm√§√§n. Viimeisimp√§n√§, vaan ei v√§h√§isimp√§n√§ ovat vuokrapalvelimet, jotka on pilkottu omiin virtuaalipalvelimiin. T√§t√§ tapaa me k√§yt√§mme. Jos valitset palvelimesi itse, valitse tarkoin, √§l√§k√§ mene siit√§ miss√§ hinta on matalin.

Vanha sivusto ja tekninen velka

Kuten talo tai autokin kuluu ja rapistuu käytön myötä, varsinkin silloin kun sitä ei huolla koskaan. Valitettavasti koodikaan ei ole ikuista ja kärsii siitä, että ympärillä kaikki uudistuu ja kehittyy. Vanha koodi muuttuu ajan myötä hitaammaksi ja hitaammaksi ja hidastaa näin ollen myös sivustoa.

Vanha sivusto kannattaa suosiolla uudistaa, jos sen eteen ei ole tehnyt mitään yli kolmeen vuoteen. Jos taas kehitys on ollut jatkuvaa, koko setin uudistaminen ei välttämättä ole järkevää. Sivustosta voi myös uudistaa vain ongelmakohdat tai tilata vaikka pelkästään nopeuden optimoinnin. Nykyään voi tehdä esimerkiksi välimuistituksella paljon. Siitä päästäänkin seuraavaan.

Välimuistituksen puuttuminen

Välimuistilla tarkoitetaan sitä, että sivuston tiedot jäävät jonnekin talteen (välimuistiin) ja ne haetaan nopeammin jemmasta esiin sen sijaan että ladattaisiin aina uudestaan. Kaikki tietävät että uuden materiaalin netin läpi lataaminen on hitaampaa kuin esimerkiksi omalta koneelta tiedoston avaaminen suoraan.

Selain sisältää yksinkertaisen välimuistin. Tiedät sen esimerkiksi siitä, että jos sivustolle tehdään muutos, se ei näy ennen kuin painat sitä Päivitä-nappia vähän rivakammin. Klassikko tässä on meidän työssä se, että asiakas ei aina huomaa muutosta ja meille on tullut jo tavaksi sanoa, että muistathan sitten tyhjentää myös välimuistisi.

Selaimen lis√§ksi palvelimella ja sivustolla voi olla v√§limuistitustekniikoita. Lyhyesti t√§m√§ tarkoittaa sit√§, ett√§ paikallisen selaimesi lis√§ksi palvelin tallentaa ”jemmaan” tavaraa kevyemp√§√§n muotoon, josta se lataa tietoa lennosta nopeammin kuin alkuper√§inen raskaampi muoto. T√§llaisia tekniikoita ovat esimerkiksi Redis, Varnish, ngx-pagespeed.

Sivustolla voidaan myös käyttää erilaisia välimuistitustekniikoita, kuten esimerkiksi Transientit, jotka välimuistittavat tietokantakyselyt niin, että sivuston päivittyvää sisältöä haetaankin harvemmin, eikä joka latauskerralla. Sitten on WordPress-lisäosat, jotka voivat esimerkiksi pakata sivuston käyttämää koodia, kuvia ja resursseja tai tallentaa sivut HTML-muotoon ja tarjoilla puhdasta staattista sisältöä suoraan lataamatta alkuperäistä sivua ollenkaan.

Näiden yhteiskäyttö saattaa toisinaan aiheuttaa sisällön liian hidasta päivitystahtia tai sitä, että sivuston muutokset eivät kertakaikkiaan tule näkyviin. Joskus se on jopa toivottavaa, mutta useimmiten tarkoittaa sitä, että joko asiakkaan tai ylläpitäjän tai molempien on muistettava tyhjentää välimuisti niin sivuston-, palvelimen- kuin selaimenkin päästä. Usein näiden oikein tehty yhdistelmä parantaa latausnopeutta jopa kymmenkertaisen määrän.

Huonosti toteutettu tekniikka

Valitettavasti kaikki eivät koodaa sivustoja laadukkaasti. Huono koodi pahimmillaan tekee enemmän pyyntöjä palvelimelle kuin vastaava paremmin toteutettu koodi. Tämä tarkoittaa sitä, että pahimmillaan vaikkapa yksinkertainen uusimmat bloggaukset -lista lataa kaksikymmentä kertaa pidempään.

Voi myös olla, että sivuston tekijällä ei ole ollut sitä vähääkään osaamista, vaan WordPress-teema on ostettu tusinateemojen kaupasta parilla kymmenellä eurolla ja läjäytetty 30 kpl eri asioita hoitavia lisäosia sivustolle. Tällöin helpoista asioista saadaan mahdollisimman hitaita kun jonkun pikkutoiminnon aikaan saamiseksi ladataan muutama lisäosa. Pahimpia ovat mm. lisäosat, jotka pelkästään lisäävät sosiaalisen median jakonappeja (muutenkin turhia) sivustolle ja hidastavat saittia entisestään.

Tältä näyttää huonosti toteutettu WordPress-sivusto. Kuvassa 52 turhaa lisäosaa. Kuvan lähde: digiwp.com.

Someseinä

Vaikka niin hienoa onkin saada sosiaalisen median yhdistetty syöte, Juicer, Flow-Flow tai itse koodattu vastaava sivustolleen, some on oikeastaan pelkkiä kutsuja ulkoisille sivustoille, kuten Twitter, Facebook ja Instagram. Kuvat, linkit ja tiedostot latautuvat sieltä koneelle ilman välimuistia mikä tarkoittaa sitä että jokainen päivitys lataa ylimääräistä tauhkaa mukanaan ja näin ollen hidastaa sivustoa.

Someseiniä voi välimuistittaa, mutta yleensä vain silloin kun ne on koodattu räätälöidysti, eli monta eri palvelua yhdistävää seinää ei käytetä. Tällöin voidaan toteuttaa välimuistitettu somefeed, esimerkiksi pelkät Instagram-kuvat, jotka ladataan palvelimen välimuistiin sen sijaan että haettaisiin aina erikseen Instagramista.

Webfontit

Kyll√§, k√§ytt√§m√§si erikoinen fontti hidastaa sivustoa jonkin verran. Me tosin lataamme fontit paikallisesti palvelimelta, jolloin ne on my√∂s v√§limuistitettu. Monesti fontteja kuitenkin ladataan v√§√§rin jostain ulkopuolelta (esim. Typekit) tai javascriptin kautta, jolloin pahimmillaan fontit ”r√§ps√§ht√§v√§t” p√§√§lle vasta sivun lataamisen j√§lkeen (joka on toki parempi tapa kun eiv√§t est√§ sivuston lataamista silloin kun fontit muutenkin hidastaisivat).

Webfontit eivät ole ultimaattinen paha, mekin pidämme niistä. Nykyään saa myös font-display -määreellä ja muilla kikoilla nopeutettua tätä puolta. Parhaimmillaan optimoituina webfontit eivät enää vaikuta juurikaan latausnopeuksiin, erityisesti jos palvelin on tehokas.

WordPress

Tämä saattaa yllättää, mutta mikä tahansa dynaaminen CMS kuten WordPress vaikuttaa latausnopeuksiin aina. Jos kaikki sisältö olisi staattista HTML:ää (käytännössä tekstiä), sivusto myös latautuisi nopeammin. Testaapas esimerkiksi Portfolio-testisaittiani rolle.design, jossa ei ole yhtään toiminnallista koodia. Aikalailla välittömästi aukeaa jokainen sivu.

Aiemmin mainituilla v√§limuistitustekniikoilla saa kuitenkin aikaan sen, ett√§ osa tai kaikki WordPressin sis√§ll√∂st√§ ladataan HTML:n√§. WordPressill√§ on mahdollista tehd√§ t√§m√§n eteen vaikka mit√§, k√§ytt√§√§ vaikkapa ”Headlessi√§ WP:t√§”, jossa mahdollisimman paljon latautuu staattisena. T√§llaista tapaa avattu tarkemmin mm. Valun blogissa.

Vaan ei WordPress mikään hidas ole, ja onneksi WP:tä pystyy optimoimaan maailman tappiin asti. Se on kuitenkin pakko mainita tässä yhteydessä.

Analytiikat, pikselit ja seurantakoodit

Kyllä, Google Analytics, Tag Manager, Snoobi, Hubspot ja muut vastaavat hidastavat sivustoa, erityisesti silloin kun näitä on paljon käytössä. Jokainen seurantakoodi lataa dataa muualta kuin paikallisesti sivuston omalta palvelimelta.

Google Analyticsin sijaan voi käyttää esimerkiksi WP Statistics -lisäosaa, jolloin mitään ei lähetetä tai vastaanoteta Googlen palvelimen kautta. Pelkkä Google Analytics ei sinänsä hidasta sivua mitenkään roimasti, joten voit huoletta myös jatkaa sen käyttöä. On kuitenkin hyvä muistaa, että jos haluaa nopeudesta kaiken irti, jostain pitää aina luopua.

Upotukset ja videot

Jokainen YouTube/Vimeo-video on ylimääräinen kutsu ulkopuolelle ja näin ollen vaikuttaa sivuston latausnopeuteen. Upotukset on usein optimoitu toisaalta valmiiksi hyvin, eikä esimerkiksi videot vaikuta ennen kuin ne lähtevät pyörimään. YouTuben tai Vimeon kautta tulevat taustavideoelementit on myös hyvin optimoituja ja ehdottomasti parempi ratkaisu kuin videot omalla palvelimella, jotka saattavat olla useita kymmeniä megoja.

Isot kuvat

Ylivoimaisesti yleisin syy sivuston hitauteen ovat jättimäiset kuvat. Meidän asiakkaiden sivustoilla on oletuksena päällä Imagify, mutta se ei aina ratkaise ongelmaa, jos kuvat lataa alkuperäisessä 10mb tiedostokoossa tai 6000 kertaisessa pikselikoossa.

Nyrkkisääntö kuviin: Tarkista, että kuvat ovat järkevän kokoisia jo valmiiksi. Kuvia voi myös etukäteen optimoida esimerkiksi ImageOptimin kaltaisten työkalujen avulla.

Kommentointi (Disqus yms.)

Kommentointilootia ei nykyään enää hirveästi näy sivustolla, koska keskustelu käydään somessa. Mutta toisinaan WordPress.com tai Disqus -kommentointeja näkee. Nämä ovat kommentointialustoja, jotka tulevat ulkopuolelta ja näin ollen hidastavat sivustoa. Joskus kävijät saattavat myös linkata omia tiedostojaan kommentteihin, joka hidastaa koko sivua. Myös käyttäjien avatar-kuvat saattavat tulla gravatar.com-palvelun kautta eikä palvelimelta s