Tiistaina 4.5.2021

Nopeasti latautuvat verkkosivut ovat tätä päivää – Latausnopeuden optimointi käytännössä

Mitä asioita pitää ottaa huomioon, että WordPress-sivuista saa nopeasti latautuvat? Katso seitsemän vinkkiämme!

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

Olemme kirjoittaneet Google Pagespeedistä kerran jos toisenkin, mutta varsinainen käytäntö latausnopeuksien optimoinnista on jäänyt hieman paitsioon. Jouheasti toimivat kotisivut ovat myös iso osa saavutettavuutta, joten se on yksi asioista joihin olemme halunneet panostaa täysillä alusta asti. Tässä kirjoituksessa paneudutaan seikkoihin, jotka vaikuttavat miten WordPressillä toteutetuista verkkosivuista saa mahdollisimman nopeasti latautuvat.

1. Tee WordPress-teemasta mahdollisimman kevyt

Nykyaikana valitettavasti rakennetaan paljon WordPress-sivustoja valmiiden kaupallisten WordPress-teemojen päälle. Valmiita teemoja löytyy WordPressin omasta teemakirjastosta tuhansia ilmaiseksi, mutta niiden lisäksi niitä tehdään maksullisina ”pro”-versioina myös esimerkiksi Envato Marketin Themeforestiin. Usein kuvitellaan että maksullinen on parempi, mutta Themeforest-teemojen ongelmana on usein että ne eivät mene WordPressin laatustandardien läpi, joten ne voivat olla laadullisesti ihan mitä tahansa.

Samaan hengenvetoon mainittakoon, että WordPressin virallisen laatutarkastuksen osana kuuluva Theme Check on noin kerran vuodessa päivittyvä ja auttamatta jäljessä sekin. Teemakehitys on siis usein ”villi länsi”, jossa koodari voi tehdä lähes mitä huvittaa.

Kun verkkosivut rakennetaan tällaisen ylipainoisen teeman päälle (engl. bloat, ”turha koodi” joka lisää tiedostokokoja), se vaikuttaa auttamatta latausnopeuteen. Kuvitellaan että pelkkä tyylitiedoston koko on useita megoja ja näitä tiedostoja saattaa teema viljellä useampiakin – toisin sanoen lataat megatolkulla tavaraa koneellesi vierailemalla verkkosivuilla, pelkästään sitä varten että saat sivun näkyviin. Tärkeää kaistaa tuhlataan mm. ihmeellisiin vieritysefekteihin tai animaatioihin.

Paras tapa rakentaa WordPress-teema on käyttää superkevyttä pohjaa, jota kutsutaan alalla startteriksi. Duden oma avoimen lähdekoodin ”tuotekehitys” on synnyttänyt avoimessa jakelussa olevan Air-lightin, joka sisältää käytännössä vain välttämättömät tyylilliset ja JS-toiminnalliset asiat kuten lomakkeet, napit, tekstialueet, valikon ja saavutettavuusasiat. Pohjateemamme lähtökoko on alle 20 kilotavua, eli se on todella nopea. Kun tältä pohjalta räätälöi asiakkaalle uniikit verkkosivut, ei mikään voi mennä pahasti pieleen.

2. Käytä vain hyviä WordPress-lisäosia ja hyviä käytäntöjä taustatekniikassa

On ihan totta että WordPress-lisäosat hidastavat aina hieman sivustoa, sillä ne tuovat lisää toiminnallisuuksia käyttöön. Osa lisäosista lataa dynaamisesti jotain jostakin tai toiminnallisuutta vaaditaan jonkun verkkosivun kohdan pyörittämistä varten. Huonot lisäosat kuitenkin toimivat pienissäkin toiminnallisuuksissa hitaammin, sillä huono on hidasta. Nämä tällaiset lisäosat saattavat tehdä suoria ja turhia tietokantakutsuja sen sijaan että ne välimuistittaisivat kutsut esimerkiksi puolen tunnin välein tai antaisivat siihen edes mahdollisuuden.

Jos toiminnallisuus on pieni, se kannattaa tehdä itse suoraan teemaan tai toteuttaa hyvien käytäntöjen mukainen lisäosa itse. Harmillisen usein tämän sijasta asennetaan hirviömäinen lisäosa hidastamaan sivustoa ja tuomaan turhia toiminnallisuuksia mukaan. Hyvänä esimerkkinä näistä ovat mm. kaikenlaiset lomake-, kalenteri- ja varauslisäosat, jotka harvoin ovat hyvin koodattuja.

3. Suunnittele ja koodaa hyvin niin että koodi painaa mahdollisimman vähän

Kun asiat on suunniteltu hyvin jo ennen kuin on kirjoitettu riviäkään koodia, voidaan varmistua siitä että kaikki sujuu myös koodipuolella hyvin, eikä verkkosivut sisällä mitään turhaa. Luova johtajamme Kari kirjoittelikin viimeksi ansiokkaasti miten meillä Dudella verkkosivuja oikein suunnitellaan.

Koodipuolella nyrkkisäännöt ammattitermein ovat: DRY (Don’t Repeat Yourself), KISS (Keep it simple stupid). DRY edesauttaa bloattivapaata tapaa tuottaa koodia (= ei tehdä turhaa koodia). Se tarkoittaa käytännössä sitä, että käytämme esimerkiksi muuttuvia ja kierrätettäviä komponentteja niin paljon kuin mahdollista niin taustatekniikan kuin tyylittelynkin puolella. Jos jokin väri esimerkiksi vaihtuu, vaihdamme sen koodissa vain yhteen kohtaan, jolloin se päivittyy automaattisesti joka paikkaan ulkoasussa. Jos jokin toiminnallisuus muuttuu, voimme muokata sitä yhdestä paikkaa ilman että tarvitsee käydä kaikkia mahdollisia alasivuja läpi. Tämä on ehdottoman tärkeä modernin työnkulun osa.

Hyvien tapojen lisäksi käytämme paljon virheenkorjaustyökaluja, joita sanotaan linttereiksi. PHP_CodeSniffer kertoo jos taustakoodissa on paranneltavaa, stylelint ilmoittaa jos CSS-tyylittelyssä on joku vinksallaan ja eslint kertoo JavaScript-puolen häiriöistä. Näiden lisäksi stylelint-lisäosat kiinnittävät huomiota muunmuassa saavutettavuuteen, se esimerkiksi ilmoittaa heti, jos leiskaan on suunniteltu liian pieniä fonttikokoja tai asioita on piilotettu tarpeettomasti näkyvistä. Doiuse varmistaa onko selaintukea saatavilla uusille asioille. Nämä kaikki yhdessä varmistavat että koodi on laadukasta, suorituskykyistä ja nopeaa.

4. Hommaa hyvä palvelin

Verkkosivut ja palvelin kulkevat käsi kädessä. Vaikka sivut olisivat kuinka kevyet, nopeat ja hyvin koodatut, jos ne ladataan nuhapumpulla kunnon myllyn sijaan voit olla varma että odottelet etusivun aukeamista puoli ikuisuutta. Kirjoitimme WordPress-optimoidun palvelimen tärkeydestä jo vuonna 2018 aiheella Älä hanki mitä tahansa webhotellia WordPress-sivuillesi ja kirjoituksen asiat pitävät edelleen paikkaansa. Meidän palvelimista ja ylläpidosta voi lukea ajan tasalla pidettyä tietoa myös handbookistamme.

Palvelimelta on tärkeää löytyä web-palvelinkomponenttien (ns. LEMP: nginx, php-fpm, mariadb) lisäksi tietoturvaa ja erityisesti suorituskykyä parantavia asioita kuten erilliset PHP-poolit, välimuistitustekniikoita (Redis, staattinen nginx cache, jne.) ja Google PageSpeed-moduuli. Googlen kehittämä ngx-pagespeed osaa hoitaa lennosta mm. kuvien pakkaamisen ja muuttamisen webp muotoon, koodin yhdistelyn ja optimoinnin, kuvien laiskan latauksen jne. Kaikki ominaisuudet voit lukea dokumentaatiosta.

Pilvipalvelin kuten Google Cloud tai Amazon AWS ovat suorituskykyisiä vaihtoehtoja, mutta rautapalvelimesta saa myös todella tehokkaan. Henkeen ja vereen rautaihmisenä ja vapaana tiedostojärjestelmäsieluna en lähde ”pilvi vs. oma” -väittelyyn mukaan tässä kohtaa 🙂.

5. Pidä huolta sisällöstä ja optimoi kuvat

Kuvat ovat usein verkkosivujen isoin painolasti. Erityisesti helppokäyttöisille WordPress-sivustoille lisätään kuvia suomatta oikeastaan ajatusta kuvan kokoon tai resoluutioon. Kuvat saatetaan lätkäistä blogaukseen tai infosivulle suoraan kamerasta, jolloin ne ovat monen megan kokoisia. WordPress ei oletuksena optimoi kuvia mitenkään, mutta meidän ylläpidossa optimointia koittaa hoitaa sivustoillemme leivottu Imagify ja ngx-pagespeed, mutta automaattioptimoinnit saitin puolella eivät takaa täydellistä keveyttä.

Ennen kuvien lisäämistä kannattaa pitää huolta että ne ovat järkevän kokoisia tiedostokooltaan (mielellään 50-500kb jos suinkin mahdollista), mielellään resoluutioltaan alle 2000px leveitä, sopivasti rajattuja ja jpg-muodossa. PNG-kuvat ovat raskaita ja niitä tulisi käyttää vain silloin kun on pakko (läpinäkyvät taustat).

Ulkoiset kutsut hidastavat sivustoa. Suomeksi tämä tarkoittaa sitä, että kaikki YouTube-videot, Twitter-upotukset, iframet ja muut vastaavat ovat lisäkutsuja ulkopuolelta. Katso ettei näitä ole samalla sivulla liikaa.

Dudella tapana on projektin yhteydessä optimoida SVG-vektorigrafiikat SVGO:lla, kuvat ImageOptimilla tai OptImagella. Näin tulee varmistettua kuvien oikea pakkaussuhde ja keveys ennen kuin verkkosivut menevät liveksi. Muun sisällön suorituskykyyn kuten mahdollisiin käytettyihin videoihin, fontteihin ja upotuksiin kiinnitetään huomiota jo suunnitteluvaiheessa.

6. Pakkaa kaikki resurssit tuotantoon

Koodarin tehtävä on devausvaiheen päätyttyä hoitaa koodi tuotantokelpoiseksi. Tämä tarkoittaa sitä, että koodi puristetaan pieneen tilaan ja yhdistetään automatiikan avulla. Prosessimme yhtenä osana on Gulp-tehtävät, jotka pyöräyttävät koodista joka tallennuskerralla tuotantokelpoiset versiot talteen.

JavaScript-puolella käytössä on terser, joka puristaa ES6-JavaScriptin pienimpään mahdolliseen tilaan rutistamalla funktioiden ja muuttujien nimet yksikirjaimisiksi ja poistamalla kaikki välit koodista niin että se menee yhdelle riville ja vie mahdollisimman vähän tilaa. Lopuksi terser yhdistää kaiken koodin yhdeksi tiedostoksi.

CSS-puolella käytössä on clean-css joka tekee vastaavan tyylitiedostoille.

Pakkauksen viimeistelyt hoitavat palvelinkomponenteista aiemmin mainittu Google PageSpeed-moduuli sekä WordPressin Autoptimize ja tapauskohtaisesti Cache Enabler tai WP Super Cache.

7. Välimuistita harvoin päivittyvä sisältö

Timi kävi puhumassa WordCamp Turussa aiheesta ”Harvoin päivittyvän tiedon välimuistitus” ansiokkaasti vuonna 2018. Luennolla käytiin läpi WordPressin transientteja sekä Redis ja verrattiin hieman latausnopeuksia palvelinten välillä. Aiemmin mainitut WP-lisäosat ovat hyvä kirsikka kakun päälle välimuistituksissa, mutta pelkällä koodarin omilla toimilla koodin suhteen saa jo paljon aikaiseksi.

Loppusanat

Kun koodarina tunnet koodisi, koodaat hyvin ja suorituskykyistä koodia, pidät tiedostokoot pienenä, pääset pitkälle. Tähän yhtälöön kun lisätään tehokas ja optimoitu palvelin ja välimuistitus, voit olla varma että kaikki latautuu silmänräpäyksessä.

Kiinnostaako nopeasti toimivat verkkosivut? Voit tsekata esim. miten nopeasti seuraavat toteuttamamme sivustot latautuvat:

Lisää referenssejä löytyy referenssiosiostamme. Jos vakuutuit näistä, ota ihmeessä yhteyttä! Tehdään sivuistanne supernopeat! ⚡️