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!

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! âšĄïž

Lue myös nÀmÀ

Hakukoneoptimointi – Googlen etusivulle viikossa SEO-työkalun avulla

TiedÀtkö millÀ hakusanoilla sivustosi löytyy? TiedÀtkö miten paljon nÀillÀ hakusanoilla sivuille pÀÀtyy vÀkeÀ?

Ovatko hyvÀt verkkosivut myynnin tae? NÀin luet tarjousta ja ostat hyvÀt verkkosivut

Tarjous verkkosivuista sisÀltÀÀ usein teknistÀ jargonia, joka on kuitenkin vÀlttÀmÀtöntÀ ominaisuuksien listaamisen ja vakuuttavuuden kannalta. Kuinka lukea tarjousta, onko alustalla vÀliÀ ja saako verkkosivuilla lisÀÀ myyntiÀ aikaan?

Kotisivut yritykselle kannattaa tilata digitoimistolta

Kotisivut yritykselle ilmaiseksi, laadukkaasti ja nopeasti ovat mahdoton utopia. MiksihÀn nÀin?