Tekijä: Heikki Kujala

Web-sivuston suunnittelussa pitää kiinnittää moneen asiaan asiaan huomioita, jotta latausaika olisi paras mahdollinen.

• Sisällön suunnittelu
• Responsiivisen web-suunnittelun alustan valitseminen
• Julkaisujärjestelmä ja laajennukset
• Sivupohja
• Edistyneiden optimointitekniikoiden käyttäminen
• Palvelin
• Nopeuden mittaaminen

Sisällön suunnittelu

• Sisällön suunnittelu on kriittistä latausaikojenkin kannalta, kannattaa panostaa.
• Mitä suurempi sisältösivun koko megatavuinen kuvineen jne., sitä pidempään lataaminen kestää.
• Alan suositusten mukaan etusivun pitäisi olla mahdollisimman kevyt, mutta siitä huolimatta jotkut haluavat kaiken mahdollisen sisällön kuten slideshow.

Responsiivisen web –suunnittelun alustan valitseminen

• Responsiivisen web –suunnittelun alustan valitsemiseen pitää kiinnittää huomioita, että alusta sisältäisi ne komponentit, jota tarvitaan.
  • Yleinen ongelma on sillisalaatti: alustan kuten Bootstrap omat komponentit ei riitä, jota täydennetään 3. osapuolen komponentilla, jolla on oma css- ja js-tiedosto. Lopputuloksena pahimmillaan yli 30 kpl css- ja js-tiedostoa kun kumpaakin pitäisi olla 1 kpl.
  • Periaatteessa alustan ja 3 osapuolen komponentin aiheuttamaa ongelmaa voi teoriassa yrittää korjata julkaisujärjestelmän css- ja js-tiedostojen pakkaamis ja yhdistämistoiminnolla, mutta käytännössä ei usein onnistu esim. yhteensopivuusongelmien vuoksi. Tällöin esimerkiksi käyttöliittymän jokin toiminto ei enää toimi.
• YOOthemen kehittämä UIkit sisältää käytännössä katsoen kaikki mahdolliset komponentit, joten se on turvallinen valinta.

Julkaisujärjestelmät latausaikojen paralta

• Staattisten web-sivustojen generaattorit kuten Hugo tai Jekyll ovat parhaita, koska sisältö on valmiina optimaalisessa muodossa eli html-tiedostoina.
• Toiseksi parhaita ovat tiedostopohjaiset julkaisujärjestelmät kuten Grav.
• Huonoimpia ovat tietokantoja käyttävät julkaisujärjestelmät kuten Drupal, Joomla tai WordPress.
  • Latausaikojen kannalta tyypillisesti pahin pullonkaula julkaisujärjestelmissä on tietokantayhteys, jonka takia kannattaa hyödyntää julkaisujärjestelmän välimuistia (dataa ei tarvitse hakea tietokannasta).

Julkaisujärjestelmän laajennukset

• Julkaisujärjestelmän laajennusten valitsemiseen kannattaa kiinnittää huomioita, koska se tietoturvan lisäksi vaikuttaa latausaikoihin.
• Valitettavasti usein käyttöliittymäelementin sisältävä laajennuksella on omat erilliset css – ja js-tiedostot.

Julkaisujärjestelmän sivupohjan koodi

• Sivupohjan koodi vaikuttaa latausaikoihin sekä käyttöliittymän että toiminnallisuuden kautta.
  • Kuten laajennuksissa, myöskin sivupohjan pitäisi sisältää mahdollisimman monta css- ja js-tiedostoja.
  • Toiminallisuuden näkökulmasta ns. page builder, jotka toimivat vedä & rahaa –periaatteella eivät ole niin hyviä kuin puhtaat sivupohjien alustat
• Joomlalle on helppoa ohjelmoida sivupohja tyhjästä, ei tarvitse käyttää page builderiä.
• WordPressin sivupohja kannattaa tehdä esimerkiksi WordPressin kehittävän Automattic-yrityksen Underscorella, joka generoi pelkän sivupohjan rungon. Ei ole siis sidottu mihinkään responsiivisen web –suunnittelun alustaan.
• Graville on helppoa tehdä sivupohja tyhjästä, kirjoittamalla käskyn bin/plugin devtools new-theme

Edistyneiden optimointitekniikoiden käyttäminen

• Kuvien lazy loading
• Webp-kuvaformaatti
• Asynkroninen css
• Web-fonttien integroiminen sivupohjaan

Kuvien lazy loading

• Kuvien lazy loading on JavaScriptillä toteutettu tekniikka, joka estää ei-kriittisen sivun resurssien eli kuvan latamaamisen.
• Toisin kuin normaalisti, kuvien lazy loading käytettäessä kuva ladataan vasta tarpeellisella hetkellä eli käytännössä kun sen pitäisi näkyä näytöllä.
• Kun kuva on näytön ulkopuolella, se on ei-kriittinen resurssi.
• Responsiivisen web-suunnittelun alustan Uikit uusimmassa versiossa 3 on sisäänrakennettuna kuvien lazy loading.

Webp-kuvaformaatti

• WebP on bittikarttakuvien tiedostomuoto, jossa voidaan käyttää häviöllistä ja häviötöntä pakkausta.
• WebP pakkaa kuvat pienempään tilaan kuin jpg- ja png-kuvaformaatit.
• Webp syntyi vuonna 2010 Googlen VP8-videoformaatin sivutuotteena ja julkaistiin avoimena formaattina vuonna 2010.
• Alkuun web-selaimista vain Googlen Chrome ja Opera tukivat WebP, mutta tuki on laajentanut Firefoxiin ja Microsoftin Edgeen.

Asynkroninen css

• Normaali tapa linkittää css-tyylitiedosto voi hidastaa sivun lataamista.
• Ladattaessa tyylitiedostoja, jotka eivät ole kriittisiä sivun alkuperäiselle renderöinnille, tämä estävä käyttäytyminen on epätoivottavaa.
• Ratkaisu on asynkroninen css, jossa html sisään laitetaan tärkeimmät tyylimuotoilut kuten sivun yläosan ja varsinainen css-tiedosto ladataan asynkronisesti.

Web-fonttien integroiminen sivupohjaan

• Normaalisti Googlen web-fontteja käytetään viittamaan css:llä Googlen palvelimeen, joka hidastaa sivun lataamista.
• Google-webfonts-helper -palvelun web-fontit voi ladata omaan työasemaan ja sen jälkeen integroida julkaisujärjestelmän sivupohjaan.

Palvelin

• Palvelimen tyyppejä
• Minkä tyyppinen web-hostaus kannattaa valita?
• Palvelinohjelmistot: Apache vs Nginx
• Gzip vs Brotli
• CDN (Content Delivery Network)

Palvelimen eli web-hostauksen tyyppi, laitteisto ja ohjelmisto vaikuttavat latausaikoihin.

Palvelimen tyyppejä

• Dedikoitu eli yksittäinen palvelin
• Virtuaalipalvelin eli pilven tai yksittäisen palvelimen resursseista tietty osa on varattu on tietylle käyttäjälle.
• Pilvi / klusteroitu tarkoittaa käytännössä sitä, että tietty määrä fyysisiä palvelimia kytketään yhteen, jolloin tehokkaampi kokonaisuus, joka on samalla vikasietoinen.
• Web-hotellissa tarkoittaa sitä, että yksittäiselle käyttäjälle on varattu tietyn määrän resursseja. Perinteisesti esim. levytila ja siirtokapasiteettia, mutta nykyään jotkin palveluntarjoajat prosessoritehoakin.

Minkä tyyppinen web-hostaus kannattaa valita?

Vaikka dedikoidussa palvelimessa käyttäjä saa kaiken tehon, siinä on vakava riski: laiterikko. Jos tulee laiterikko, sivustolle tulee vähintään käyttökatko. Perinteisessä web-hotellin riski on liikaa käyttäjiä suhteessa resursseihin. Esimerkiksi sivusto X toimii hitaasti, koska samalla palvelemilla sijaitseva sivusto Y on voimaakkaan kuormituksen alaisena. Moderneissa web-hotelleissa, joissa on varattu käyttäjälle tietty määrä prosessoritehoa ainoa negatiivinen asia verrattuna virtuaalipalvelimeen on tyytyminen asennettuihin ohjelmistoihin. Eli esimerkiksi PHP-ohjelmointikielestä on versio x tuettu, vaikka tarvittaisiin uudempi, ei voida mitään. Riippumatta minkä tyyppiseen palvelimeen päädytään, kannattaa valita massamuistiksi ssd, joka on paljon nopeampi kuin perinteinen kovalevy.

Hinnoittelu on yksi asia, mikä helpottaa päätöksen takia web-hostauksen järjestämisestä. Yksittäisen web-hotellin voi saada 100 eurolla vuodeksi tai halvemmalla. Virtuaalipalvelimet maksavat vähintään 20 € kuukaudessa. Valintaa voi miettiä kriittisyydellä liiketoiminalle: jos kyseessä on verkkokauppa, voi olla järkevää maksaa taatusta nopeudesta. Normaalissa web-sivusto ei ole niin kriittinen, jolloin web-hotelli voi olla sopiva.

Palvelinohjelmistot: Apache vs Nginx

Apache

Hyvät puolet

• Runsaasti moduuleita
• Sopii paremmin web-hotelleihin kuin Nginx
• Suosituin palvelinohjelmisto
• Mahdollisuus käyttää .htaccess-tiedostoa

Huonot puolet

• Kuluttaa enemmän keskusmuistia voimakkaassa kuormituksessa
• Tekee uuden prosessin jokaiselle pyynnölle, jonka takia on vähemmän tehokas kuin LiteSpeed tai Nginx.

LiteSpeed

LiteSpeed:stä on olemassa kaksi versiota: ilmainen avoimen lähdekoodin OpenLiteSpeed ja maksullinen LSWS Enterprise. OpenLiteSpeed soveltuu virtuaaliservereihin ja LSWS Enterprise web-hotelleihin.

Hyvät puolet

• Erinomainen suorituskyky, parempi kuin Apachella tai Nginx:llä
• OpenLiteSpeed tukee osittain Apachen rewrite (uudelleenohjaus) -sääntöjä, LSWS Enterprise tukee täysin
• Mahdollisuus käyttää .htaccess-tiedostoa
• OpenLiteSpeed on ilmainen
• Virallinen WordPressin välimuistilaajennus, joka on ilmainen

Huonot puolet

• Web-hotelleihin soveltuva versio LSWS Enterprise on maksullinen.

Nginx

Hyvät puolet

• Kevyempi, vaatii vähemmän resursseja / keskusmuistia
• Pystyy käsittelemään 10 000 saman aikaista yhteyttä pienemmällä muistilla.
• Parempi staattisessa sisällössä
• Parempi skaalautuvuus
• Suositellaan virtuaaliservereille

Huonot puolet

• Vähemmän moduuleita
• Vähemmän yhteisön tukea

Palvelinohjelmiston valinta

• Valinta palvelinohjelmiston välillä voidaan tehdä palvelimen tyypin perusteella
  • Web-hotelleihin soveltuu Apache ja SWS Enterprise
  • Virtuaaliservereihin soveltuu OpenLiteSpeed ja Nginx
• LiteSpeed soveltuu WordPress-sivustoihin erinomaisesti virallisen WordPressin laajennuksen ansiosta.

Gzip vs Brotli

• Gzip on pakkausalgoritmi, jolla pakataaan tiedostot pienemmäksi nopeaan siirtoon tietoverkoissa sekä on lisäksi tiedostoformaatti.
• Brotli pakkausalgoritmi, jonka on kehittänyt Google.
• Gzip vs Brotli
  • JavaScript-tiedostot Brotlilla pakattuna ovat 14% pienempiä kuin Gzipillä.
  • HTML-tiedostot ovat Brotlinilla pakattuna 21% pienemmät kuin Gzipillä.
  • CSS-tiedostot ovat Brotlinilla pakattuna 17% pienemmät kuin Gzipillä.

CDN (Content Delivery Network)

• CDN koostuu joukosta palvelimia ympäri maailmaa useissa datakeskuksissa, jotka säilyttävät tiedostoja (JavaScript, CSS ja kuvia) välimuistissaan ja jakavat ne käyttäjälle lähimmästä mahdollisesta pisteestä.
• CDN vähentää varsinaisen web-serverin kuormitusta.
• Tunnettuja CDN:iä ovat mm. Amazonin CloudFront ja CloudFlare.
• Jos web-sivuston palvelin Suomessa ja suurin osa sivuston kävijöistä suomalaisia, käytännössä ei tarvita CDN:ää.

Nopeuden mittaaminen

• Google PageSpeed Insights
  • Antaa pistetä 0 – 100 sekä pc että kännykän näkökulmasta
• Google TestMySite
  • Kertoo kuinka monta sekuntia kestää sivuston lataus kännykällä 3g yhteydellä.

YOOthemen responsiivisen suunnittelun alustasta UIkitistä on tulossa uusi versio 3. Tällä hetkellä YOOtheme on julkaissut RC (release candidate ) 9, julkaisuehdotus, eli lähiaikoina on tulossa täysin valmis UIkit 3.