Verkkosivun selainpuolen suorituskyky
Nurmi, Simo (2017)
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2017123122632
https://urn.fi/URN:NBN:fi:amk-2017123122632
Tiivistelmä
Opinnäytetyössä pohditaan web-sivun selainpuolen suorituskyvyn tärkeyttä ja esitellään keinoja parantaa sitä. Opinnäytetyössä ei ollut toimeksiantajaa.
Verkkosivuston selainpuolen suorituskyky on erittäin tärkeää yritysten liiketoiminnan kannalta. Pienikin hidastuminen sivun latausnopeudessa voi laskea konversiota ja myyntiä. Sivuston täytyy olla nopea myös mobiililaitteilla, sillä valtaosa Internet-käyttäjistä käyttää älypuhelinta tai taulutietokonetta.
Selainpuolen suorituskykyä voi optimoida monilla tavoin, mutta suurin osa niistä liittyy jollain tavoin tiedostojen lataukseen tai HTML-dokumentin jäsentämisen ja suorittimen pääsäikeen vapauttamiseen. Dokumentin nopea jäsentäminen on tärkein asia latausajan parantamisessa. Kuormittamaton suoritin takaa sivun interaktiivisuuden.
Yksittäisiä optimointikohteita ovat esimerkiksi CSS-tyylit, JavaScript-ohjelmat, kuvat ja web-fontit. Kuhunkin liittyy omat haasteensa.
CSS-tyylitiedostot pysäyttävät HTML-dokumentin jäsentämisen, mutta sen voi ohittaa jakamalla tyylit kahteen osaan, ja lataamalla vähemmän tärkeät tyylit myöhemmin.
JavaScript-ohjelmissa on tärkeää olla lataamatta ylimääräistä koodia. Modernit tekniikat helpottavat ohjelmien suorituskyvyn optimointia.
Kuvien optimoinnissa tärkeintä on kuvatiedoston koon pienentäminen sekä oikean kuvatiedostoformaatin valinta. Kuvien lataamisessa tulisi käyttää lazyload-tekniikkaa.
Web-fontit ovat tiedostokooltaan suuria, eivätkä ne ole verkkosivun sisällön kannalta tärkeitä. Fontit voidaan ladata viivytetysti käyttämällä font-display-ominaisuutta, selaimen font loading-ohjelmointirajapintaa tai FontFaceObserver-lisäkettä.
Verkkosivuston selainpuolen suorituskyky on erittäin tärkeää yritysten liiketoiminnan kannalta. Pienikin hidastuminen sivun latausnopeudessa voi laskea konversiota ja myyntiä. Sivuston täytyy olla nopea myös mobiililaitteilla, sillä valtaosa Internet-käyttäjistä käyttää älypuhelinta tai taulutietokonetta.
Selainpuolen suorituskykyä voi optimoida monilla tavoin, mutta suurin osa niistä liittyy jollain tavoin tiedostojen lataukseen tai HTML-dokumentin jäsentämisen ja suorittimen pääsäikeen vapauttamiseen. Dokumentin nopea jäsentäminen on tärkein asia latausajan parantamisessa. Kuormittamaton suoritin takaa sivun interaktiivisuuden.
Yksittäisiä optimointikohteita ovat esimerkiksi CSS-tyylit, JavaScript-ohjelmat, kuvat ja web-fontit. Kuhunkin liittyy omat haasteensa.
CSS-tyylitiedostot pysäyttävät HTML-dokumentin jäsentämisen, mutta sen voi ohittaa jakamalla tyylit kahteen osaan, ja lataamalla vähemmän tärkeät tyylit myöhemmin.
JavaScript-ohjelmissa on tärkeää olla lataamatta ylimääräistä koodia. Modernit tekniikat helpottavat ohjelmien suorituskyvyn optimointia.
Kuvien optimoinnissa tärkeintä on kuvatiedoston koon pienentäminen sekä oikean kuvatiedostoformaatin valinta. Kuvien lataamisessa tulisi käyttää lazyload-tekniikkaa.
Web-fontit ovat tiedostokooltaan suuria, eivätkä ne ole verkkosivun sisällön kannalta tärkeitä. Fontit voidaan ladata viivytetysti käyttämällä font-display-ominaisuutta, selaimen font loading-ohjelmointirajapintaa tai FontFaceObserver-lisäkettä.