Selaimen suorituskykykehys: JavaScript-optimointistrategia globaaleille sovelluksille

Nykypäivän digitaalisessa maailmassa nopea ja responsiivinen verkkosovellus ei ole enää ylellisyyttä, vaan välttämättömyys. Käyttäjät ympäri maailmaa odottavat saumattomia kokemuksia, ja hitaat latausajat tai kankea suorituskyky voivat johtaa turhautumiseen, keskeytettyihin istuntoihin ja lopulta menetettyihin tuloihin. JavaScript, joka on modernin verkkokehityksen kulmakivi, on usein merkittävässä roolissa verkkosivuston kokonaissuorituskyvyn määrittämisessä. Tämä kattava opas tutkii vankkaa selaimen suorituskykykehystä, joka keskittyy JavaScriptin optimointiin, tarjoten strategioita, tekniikoita ja parhaita käytäntöjä suorituskykyisten globaalien sovellusten rakentamiseen.

Selaimen suorituskyvyn tärkeyden ymmärtäminen

Ennen kuin syvennymme tiettyihin optimointitekniikoihin, on tärkeää ymmärtää, miksi selaimen suorituskyky on niin kriittinen, erityisesti globaalille yleisölle suunnatuissa sovelluksissa.

• Käyttäjäkokemus (UX): Nopeat latausajat ja sujuva vuorovaikutus edistävät suoraan positiivista käyttäjäkokemusta. Responsiivinen sovellus tuntuu intuitiivisemmalta ja miellyttävämmältä käyttää, mikä johtaa lisääntyneeseen sitoutumiseen ja asiakastyytyväisyyteen.
• Hakukoneoptimointi (SEO): Googlen kaltaiset hakukoneet pitävät sivun nopeutta yhtenä sijoitustekijänä. Nopeampi verkkosivusto sijoittuu todennäköisemmin korkeammalle hakutuloksissa, mikä lisää orgaanista liikennettä.
• Konversioasteet: Tutkimukset ovat osoittaneet suoran yhteyden verkkosivuston nopeuden ja konversioasteiden välillä. Nopeampi verkkosivusto voi merkittävästi parantaa todennäköisyyttä, että käyttäjät suorittavat haluttuja toimintoja, kuten tekevät ostoksen tai täyttävät lomakkeen.
• Mobiilioptimointi: Mobiililaitteiden yleistyessä mobiilisuorituskyvyn optimointi on ensisijaisen tärkeää. Mobiilikäyttäjillä on usein hitaammat internetyhteydet ja rajoitetut dataliittymät, mikä tekee suorituskyvyn optimoinnista entistäkin tärkeämpää. Tämä on erityisen oleellista kehittyvillä markkinoilla, joilla mobiililaitteet ovat ensisijainen tai ainoa tapa käyttää internetiä. Esimerkiksi monissa Afrikan maissa mobiilidata on pääasiallinen tapa, jolla ihmiset käyttävät internetiä. Siksi raskas, optimoimaton JavaScript voi tehdä sovelluksesta käyttökelvottoman.
• Globaali saavutettavuus: Käyttäjät käyttävät sovellustasi eri paikoista, joissa on vaihtelevat verkkoyhteydet ja laiteominaisuudet. Optimointi takaa yhdenmukaisen ja suorituskykyisen kokemuksen sijainnista tai laitteesta riippumatta. Ajattele käyttäjiä alueilla, joilla on rajallinen kaistanleveys, kuten Etelä-Amerikan maaseudulla tai osissa Kaakkois-Aasiaa. Optimointi tekee sovelluksestasi saavutettavan laajemmalle yleisölle.

Selaimen suorituskykykehyksen luominen

A suorituskykykehys tarjoaa jäsennellyn lähestymistavan suorituskyvyn pullonkaulojen tunnistamiseen, käsittelyyn ja jatkuvaan seurantaan. Kattavan kehyksen keskeiset osat ovat:

1. Suorituskyvyn mittaaminen ja seuranta

Ensimmäinen askel on perustason määrittäminen ja suorituskykymittareiden jatkuva seuranta. Tämä sisältää keskeisten indikaattoreiden seuraamisen, kuten:

• Latausaika: Aika, joka kuluu sivun täydelliseen latautumiseen, mukaan lukien kaikki resurssit.
• First Contentful Paint (FCP): Aika, joka kuluu ensimmäisen sisältöelementin (esim. teksti, kuva) ilmestymiseen näytölle.
• Largest Contentful Paint (LCP): Aika, joka kuluu suurimman sisältöelementin näkyviin tulemiseen.
• Time to Interactive (TTI): Aika, joka kuluu sivun täysin interaktiiviseksi ja käyttäjän syötteisiin reagoivaksi tulemiseen.
• Total Blocking Time (TBT): Kokonaisaika, jolloin sivu on estetty vastaamasta käyttäjän syötteisiin.
• First Input Delay (FID): Aika, joka kuluu selaimen vastaamiseen ensimmäiseen käyttäjän vuorovaikutukseen (esim. painikkeen napsautus).

Työkalut suorituskyvyn mittaamiseen:

• Google PageSpeed Insights: Tarjoaa yksityiskohtaisia suorituskykyraportteja ja optimointisuosituksia.
• WebPageTest: Tarjoaa edistyneitä testausominaisuuksia, kuten erilaisten verkko-olosuhteiden ja laitetyyppien simulointia.
• Lighthouse: Avoimen lähdekoodin automaattinen työkalu verkkosivujen laadun parantamiseen. Se sisältää auditointeja suorituskyvylle, saavutettavuudelle, progressiivisille verkkosovelluksille, SEO:lle ja muulle.
• Chrome DevTools: Tarjoaa kattavat suorituskyvyn profilointityökalut, mukaan lukien kyvyn tunnistaa pullonkauloja JavaScriptin suorituksessa, renderöinnissä ja verkkopyynnöissä.
• New Relic, Datadog, Sentry: Nämä ovat kaupallisia APM (Application Performance Monitoring) -ratkaisuja, jotka tarjoavat syvällistä suorituskyvyn seurantaa ja virheiden jäljitystä. Niiden avulla voit seurata käyttäjäkokemuksen mittareita reaaliajassa ja tunnistaa suorituskyvyn heikkenemisiä.

Käytännön neuvo: Ota käyttöön järjestelmä näiden mittareiden jatkuvaan seurantaan kehitys- ja tuotantoympäristöissäsi. Aseta suorituskykybudjetit ja seuraa trendejä ajan myötä tunnistaaksesi heikkenemiset ja parannuskohteet.

2. Suorituskyvyn pullonkaulojen tunnistaminen

Kun sinulla on suorituskykydataa, seuraava askel on tunnistaa suorituskykyongelmien perimmäiset syyt. Yleisiä JavaScriptiin liittyviä pullonkauloja ovat:

• Suuret JavaScript-paketit: Liiallinen JavaScript-koodi voi merkittävästi pidentää latausaikoja.
• Tehoton koodi: Huonosti kirjoitettu tai optimoimaton JavaScript-koodi voi johtaa hitaaseen suoritukseen ja liialliseen muistinkäyttöön.
• Renderöinnin pullonkaulat: Toistuvat DOM-manipulaatiot ja monimutkainen renderöintilogiikka voivat vaikuttaa ruudunpäivitysnopeuteen ja aiheuttaa nykimistä.
• Verkkopyynnöt: Liialliset tai tehottomat verkkopyynnöt voivat hidastaa sivun latausaikoja.
• Kolmannen osapuolen skriptit: Kolmannen osapuolen skriptit (esim. analytiikka, mainonta) voivat usein aiheuttaa suorituskykyrasitusta.

Työkalut pullonkaulojen tunnistamiseen:

• Chrome DevTools Performance -välilehti: Käytä Chrome DevToolsien Performance-välilehteä sovelluksesi suorituskyvyn tallentamiseen ja analysointiin. Tunnista pitkäkestoiset tehtävät, renderöinnin pullonkaulat ja muistivuodot.
• Chrome DevTools Memory -välilehti: Käytä Memory-välilehteä muistinkäytön profilointiin ja muistivuotojen tunnistamiseen.
• Source Maps: Varmista, että lähdekoodikartat (source maps) ovat käytössä kehitysympäristössäsi, jotta voit helposti yhdistää minimoidun koodin takaisin alkuperäiseen lähdekoodiin virheenjäljitystä varten.

Esimerkki: Kuvittele globaali verkkokauppa-alusta. Jos käyttäjät Japanissa kokevat huomattavasti hitaampia latausaikoja kuin käyttäjät Pohjois-Amerikassa, pullonkaula voi liittyä sisällönjakeluverkon (CDN) asetuksiin, Pohjois-Amerikkaa lähempänä olevilta palvelimilta tarjoiltavien JavaScript-pakettien kokoon tai tehottomiin tietokantakyselyihin, jotka ovat hitaampia Japania palvelevissa datakeskuksissa.

3. JavaScript-optimointitekniikat

Kun pullonkaulat on tunnistettu, seuraava askel on ottaa käyttöön optimointitekniikoita JavaScriptin suorituskyvyn parantamiseksi.

A. Koodin jakaminen (Code Splitting)

Koodin jakaminen on prosessi, jossa JavaScript-koodi jaetaan pienempiin paketteihin, jotka voidaan ladata tarvittaessa. Tämä lyhentää alkuperäistä latausaikaa ja parantaa koettua suorituskykyä.

• Reittipohjainen jakaminen: Jaa koodi sovelluksesi eri reittien tai sivujen perusteella. Lataa vain nykyiselle reitille tarvittava JavaScript-koodi.
• Komponenttipohjainen jakaminen: Jaa koodi yksittäisten komponenttien tai moduulien perusteella. Lataa komponentit vain silloin, kun niitä tarvitaan.
• Toimittajakirjastojen jakaminen: Erota kolmannen osapuolen kirjastot (esim. React, Angular, Vue.js) erilliseen pakettiin. Tämä antaa selaimille mahdollisuuden tallentaa nämä kirjastot välimuistiin, mikä parantaa suorituskykyä seuraavilla vierailukerroilla.

Työkalut koodin jakamiseen:

• Webpack: Suosittu moduulipaketointityökalu, joka tukee koodin jakamista oletusarvoisesti.
• Parcel: Nollakonfiguraation paketointityökalu, joka suorittaa koodin jakamisen automaattisesti.
• Rollup: Moduulipaketointityökalu, joka soveltuu hyvin kirjastojen kehittämiseen ja tukee "tree shaking" -tekniikkaa.

Esimerkki: Globaalilla uutissivustolla voit jakaa koodin osioihin, kuten 'maailman uutiset', 'urheilu', 'liiketoiminta' ja 'teknologia'. Käyttäjä, joka vierailee vain 'urheilu'-osiossa, lataa vain kyseiseen osioon tarvittavan JavaScriptin, mikä vähentää muiden osioiden, joita hän ei tarvitse, alkuperäistä latausaikaa.

B. Puunravistelu (Tree Shaking)

Puunravistelu on prosessi, jossa käyttämätön koodi poistetaan JavaScript-paketeistasi. Tämä pienentää pakettien kokoa ja parantaa latausaikoja.

• ES-moduulit: Käytä ES-moduuleja (import ja export) mahdollistaaksesi puunravistelun. Moduulipaketointityökalut voivat analysoida koodisi ja tunnistaa käyttämättömät export-lausekkeet.
• Kuolleen koodin poisto: Poista kaikki koodi, jota ei koskaan suoriteta.

Työkalut puunravisteluun:

• Webpack: Webpack suorittaa puunravistelun automaattisesti käyttäessään ES-moduuleja.
• Rollup: Rollup on erityisen tehokas puunravistelussa sen suunnittelun ansiosta.

Käytännön neuvo: Määritä moduulipaketointityökalusi ottamaan käyttöön puunravistelu ja tarkista koodisi säännöllisesti tunnistaaksesi ja poistaaksesi käyttämättömän koodin.

C. Minimointi ja pakkaus

Minimointi ja pakkaus pienentävät JavaScript-tiedostojesi kokoa, mikä parantaa latausaikoja.

• Minimointi: Poista tyhjätilat, kommentit ja muut tarpeettomat merkit koodistasi.
• Pakkaus: Käytä pakkausalgoritmeja, kuten Gzip tai Brotli, pienentääksesi tiedostojesi kokoa siirron aikana.

Työkalut minimointiin ja pakkaukseen:

• UglifyJS: Suosittu JavaScript-minimointityökalu.
• Terser: Modernimpi JavaScript-minimointi- ja pakkaustyökalu.
• Gzip: Laajasti tuettu pakkausalgoritmi.
• Brotli: Gzipiä tehokkaampi pakkausalgoritmi.

Esimerkki: Useimmat CDN-verkot (Content Delivery Networks), kuten Cloudflare, Akamai tai AWS CloudFront, tarjoavat automaattisia minimointi- ja pakkausominaisuuksia. Ota nämä ominaisuudet käyttöön pienentääksesi JavaScript-tiedostojesi kokoa ilman manuaalista työtä.

D. Laiska lataus (Lazy Loading)

Laiska lataus lykkää ei-kriittisten resurssien lataamista, kunnes niitä tarvitaan. Tämä parantaa alkuperäistä latausaikaa ja koettua suorituskykyä.

• Kuvien laiska lataus: Lataa kuvat vasta, kun ne ovat näkyvissä näkymäalueella (viewport).
• Komponenttien laiska lataus: Lataa komponentit vasta, kun niitä tarvitaan.
• Skriptien laiska lataus: Lataa skriptit vasta, kun niitä vaaditaan.

Tekniikat laiskaan lataukseen:

• Intersection Observer API: Käytä Intersection Observer API:a havaitsemaan, milloin elementti on näkyvissä näkymäalueella.
• Dynaamiset tuonnit: Käytä dynaamisia tuonteja (import()) ladataksesi moduuleja tarvittaessa.

Käytännön neuvo: Ota käyttöön laiska lataus kuville, komponenteille ja skripteille, jotka eivät ole kriittisiä sivusi alkuperäiselle renderöinnille.

E. Renderöintisuorituskyvyn optimointi

Tehokas renderöinti on ratkaisevan tärkeää sujuvan ja responsiivisen käyttäjäkokemuksen kannalta.

• Vähennä DOM-manipulaatioita: Minimoi DOM-manipulaatioiden määrä, sillä ne voivat olla raskaita. Käytä tekniikoita, kuten eräpäivityksiä ja virtuaalista DOM:ia, optimoidaksesi DOM-päivityksiä.
• Vältä uudelleenasetteluja (reflow) ja uudelleenpiirtoja (repaint): Uudelleenasettelut ja uudelleenpiirrot tapahtuvat, kun selaimen on laskettava asettelu uudelleen tai piirrettävä näyttö uudelleen. Vältä näiden laukaisemista minimoimalla tyylimuutokset ja käyttämällä tekniikoita, kuten CSS-eristystä (containment).
• Optimoi CSS-valitsimet: Käytä tehokkaita CSS-valitsimia minimoidaksesi ajan, joka selaimelta kuluu tyylien sovittamiseen elementteihin.
• Käytä laitteistokiihdytystä: Hyödynnä laitteistokiihdytystä (esim. käyttämällä CSS-transformaatioita) siirtääksesi renderöintitehtäviä grafiikkasuorittimelle (GPU).

Esimerkki: Kun rakennat dataintensiivistä hallintapaneelisovellusta globaalille logistiikkayritykselle, vältä toistuvia DOM-päivityksiä. Käytä sen sijaan tekniikoita, kuten virtuaalista DOM:ia (käytössä Reactissa, Vue.js:ssä), päivittääksesi vain tarvittavat osat käyttöliittymästä, mikä minimoi uudelleenasettelut ja uudelleenpiirrot ja takaa sujuvamman käyttäjäkokemuksen myös suurilla datamäärillä.

F. Muistinhallinta

Tehokas muistinhallinta on olennaista muistivuotojen estämiseksi ja pitkäaikaisen suorituskyvyn varmistamiseksi.

• Vältä globaaleja muuttujia: Minimoi globaalien muuttujien käyttö, sillä ne voivat johtaa muistivuotoihin.
• Vapauta käyttämättömät oliot: Vapauta käyttämättömät oliot eksplisiittisesti asettamalla ne null-arvoon.
• Ole varovainen sulkeumien kanssa: Ole tietoinen sulkeumista (closures), sillä ne voivat tahattomasti pitää viittauksia olioihin muistissa.
• Käytä heikkoja viittauksia: Käytä heikkoja viittauksia (weak references) estääksesi olioiden roskienkeruun.

Työkalut muistin profilointiin:

• Chrome DevTools Memory -välilehti: Käytä Memory-välilehteä muistinkäytön profilointiin ja muistivuotojen tunnistamiseen.

Käytännön neuvo: Profiili sovelluksesi muistinkäyttöä säännöllisesti ja korjaa kaikki tunnistetut muistivuodot.

G. Oikean kehyksen valinta (tai ei kehystä lainkaan)

Sopivan kehyksen tai kirjaston valinta on ensiarvoisen tärkeää. Liiallinen luottamus raskaisiin kehyksiin voi aiheuttaa tarpeetonta kuormitusta. Harkitse seuraavia seikkoja:

• Kehyksen kuormitus: Arvioi eri kehysten pakettikoko ja suorituskykyominaisuudet. Kehykset, kuten React, Angular ja Vue.js, ovat tehokkaita, mutta niihin liittyy myös tietty määrä kuormitusta.
• Suorituskykytarpeet: Valitse kehys, joka vastaa suorituskykytarpeitasi. Jos suorituskyky on kriittistä, harkitse kevyen kehyksen käyttöä tai jopa sovelluksesi kirjoittamista ilman kehystä.
• Palvelinpuolen renderöinti (SSR): Harkitse palvelinpuolen renderöinnin (SSR) käyttöä parantaaksesi alkuperäistä latausaikaa ja SEO:ta. SSR tarkoittaa sovelluksesi renderöintiä palvelimella ja esirenderöidyn HTML:n lähettämistä asiakkaalle.
• Staattisen sivuston generointi (SSG): Sisältöpainotteisille verkkosivustoille harkitse staattisen sivuston generoinnin (SSG) käyttöä. SSG tarkoittaa HTML-sivujen generointia käännösvaiheessa, mikä voi merkittävästi parantaa latausaikoja.

Esimerkki: Paljon kuvia sisältävä verkkosivusto saattaa hyötyä kevyestä kehyksestä (tai ei kehyksestä lainkaan) ja keskittyä optimoituun kuvien toimitukseen CDN:n kautta. Monimutkainen yhden sivun sovellus (SPA) taas saattaa hyötyä Reactin tai Vue.js:n tarjoamasta rakenteesta ja työkaluista, mutta pakettikokojen ja renderöintisuorituskyvyn optimointiin on kiinnitettävä erityistä huomiota.

H. Sisällönjakeluverkon (CDN) käyttäminen

CDN-verkot jakavat verkkosivustosi resurssit useille palvelimille ympäri maailmaa. Tämä antaa käyttäjille mahdollisuuden ladata resursseja heitä lähimpänä olevalta palvelimelta, mikä vähentää viivettä ja parantaa latausaikoja. Erityisen tärkeää globaaleille yleisöille.

• Maailmanlaajuisesti jaetut palvelimet: Valitse CDN, jolla on palvelimia alueilla, joilla käyttäjäsi sijaitsevat.
• Välimuisti: Määritä CDN tallentamaan staattiset resurssit (esim. kuvat, JavaScript-tiedostot, CSS-tiedostot) välimuistiin.
• Pakkaus: Ota pakkaus käyttöön CDN:ssäsi pienentääksesi tiedostojesi kokoa.
• HTTP/2 tai HTTP/3: Varmista, että CDN-verkkosi tukee HTTP/2:ta tai HTTP/3:a, jotka tarjoavat suorituskykyparannuksia HTTP/1.1:een verrattuna.

Suositut CDN-tarjoajat:

• Cloudflare
• Akamai
• AWS CloudFront
• Google Cloud CDN
• Fastly

Käytännön neuvo: Ota käyttöön CDN jakaaksesi verkkosivustosi resurssit maailmanlaajuisesti ja määritä se tallentamaan staattiset resurssit välimuistiin ja ottamaan pakkauksen käyttöön.

4. Suorituskyvyn testaus ja seuranta

Optimointi on iteratiivinen prosessi. Testaa ja seuraa jatkuvasti sovelluksesi suorituskykyä tunnistaaksesi uusia pullonkauloja ja varmistaaksesi, että optimoinnit ovat tehokkaita.

• Automaattinen suorituskykytestaus: Ota käyttöön automaattiset suorituskykytestit, jotka ajetaan säännöllisesti suorituskyvyn heikkenemisten havaitsemiseksi.
• Todellisten käyttäjien seuranta (RUM): Käytä RUM:ia kerätäksesi suorituskykydataa todellisilta käyttäjiltä tuotannossa. Tämä tarjoaa arvokkaita näkemyksiä siitä, miten sovelluksesi toimii eri ympäristöissä ja verkko-olosuhteissa.
• Synteettinen seuranta: Käytä synteettistä seurantaa simuloidaksesi käyttäjän vuorovaikutusta ja mitataksesi suorituskykyä eri sijainneista.

Käytännön neuvo: Ota käyttöön kattava suorituskyvyn testaus- ja seurantastrategia varmistaaksesi, että sovelluksesi pysyy suorituskykyisenä ajan myötä.

Tapaustutkimukset: Globaalin sovelluksen optimointi

Tarkastellaan muutamaa tapaustutkimusta havainnollistamaan, miten näitä optimointitekniikoita voidaan soveltaa todellisissa tilanteissa.

Tapaustutkimus 1: Kaakkois-Aasiaan kohdennettu verkkokauppa-alusta

Kaakkois-Aasiaan kohdennettu verkkokauppa-alusta kärsii hitaista latausajoista ja korkeista poistumisprosenteista, erityisesti mobiililaitteilla. Suorituskykydataa analysoituaan tunnistetaan seuraavat ongelmat:

• Suuret JavaScript-paketit aiheuttavat hitaita alkuperäisiä latausaikoja.
• Optimoimattomat kuvat kuluttavat liikaa kaistanleveyttä.
• Kolmannen osapuolen analytiikkaskriptit lisäävät merkittävää kuormitusta.

Alusta toteuttaa seuraavat optimoinnit:

• Koodin jakaminen alkuperäisen JavaScript-paketin koon pienentämiseksi.
• Kuvien optimointi (pakkaus ja responsiiviset kuvat) kuvakokojen pienentämiseksi.
• Kuvien ja komponenttien laiska lataus.
• Kolmannen osapuolen skriptien asynkroninen lataus.
• CDN, jolla on palvelimia Kaakkois-Aasiassa.

Tuloksena alustan latausajat paranevat merkittävästi, poistumisprosentit pienenevät ja konversioasteet nousevat.

Tapaustutkimus 2: Globaalia yleisöä palveleva uutissivusto

Globaalia yleisöä palveleva uutissivusto haluaa parantaa SEO:taan ja käyttäjäkokemustaan. Sivuston suorituskykyä heikentävät:

• Hitaat alkuperäiset latausajat suuren JavaScript-paketin vuoksi.
• Heikko renderöintisuorituskyky vanhemmilla laitteilla.
• Staattisten resurssien välimuistin puute.

Sivusto toteuttaa seuraavat optimoinnit:

• Palvelinpuolen renderöinti (SSR) alkuperäisen latausajan ja SEO:n parantamiseksi.
• Koodin jakaminen asiakaspuolen JavaScript-paketin koon pienentämiseksi.
• Optimoidut CSS-valitsimet renderöintisuorituskyvyn parantamiseksi.
• CDN, jossa välimuisti on otettu käyttöön.

Sivuston hakukonesijoitukset paranevat merkittävästi, poistumisprosentit pienenevät ja käyttäjien sitoutuminen kasvaa.

Yhteenveto

JavaScript-suorituskyvyn optimointi on ratkaisevan tärkeää nopeiden ja responsiivisten verkkosovellusten rakentamisessa, jotka tarjoavat saumattoman käyttäjäkokemuksen erityisesti globaaleille yleisöille. Toteuttamalla vankan selaimen suorituskykykehyksen ja soveltamalla tässä oppaassa käsiteltyjä optimointitekniikoita voit parantaa merkittävästi sovelluksesi suorituskykyä, lisätä käyttäjätyytyväisyyttä ja saavuttaa liiketoimintatavoitteesi. Muista seurata jatkuvasti sovelluksesi suorituskykyä, tunnistaa uusia pullonkauloja ja mukauttaa optimointistrategioitasi tarpeen mukaan. Keskeinen opetus on, että suorituskyvyn optimointia ei pidä nähdä kertaluonteisena tehtävänä, vaan jatkuvana prosessina, joka on integroitu osaksi kehitystyönkulkua.

Harkitsemalla huolellisesti globaalin käyttäjäkunnan asettamia ainutlaatuisia haasteita ja mahdollisuuksia voit rakentaa verkkosovelluksia, jotka eivät ole ainoastaan nopeita ja responsiivisia, vaan myös saavutettavia ja sitouttavia käyttäjille ympäri maailmaa.