Käytettävyyden huomioiminen ja suorituskyvyn optimointi verkkosivustoa rakennettaessa

Abstract

Tämän opinnäytetyön tarkoituksena oli tehdä verkkosivustopohja Koodiviidakko Oy:lle ja selvittää, kuinka verkkosivuston rakentaja voi parantaa sivuston käytettävyyttä ja suorituskykyä. Verkkosivuston käytettävyyteen huomioitiin myös sen saavutettavuus, ja opinnäytetyössä huomioitava suorituskykyoptimointi keskittyy asiakaspuolella tehtäviin optimointeihin.

Tehdyssä sivustopohjassa hyödynnettiin opinnäytetyön teoriatiedossa olevia hyvän käytettävyyden ohjeita sekä suorituskykyoptimointitapoja. Sivustopohja on valmis ja käytettävä sivusto, jossa on oikean sisällön sijaan esimerkkitekstiä ja -kuvia. Sivustopohjasta saadaan asiakkaalle verkkosivusto kopioimalla se, vaihtamalla sinne oikeaa sisältöä ja tekemällä siihen asiakkaan haluamat tyylimuutokset.

Sivustopohjaa testattiin käytettävyyden ja suorituskyvyn osalta. Käytettävyystestaus tehtiin käyttämällä sivustoa ja sen toimintoja ainoastaan näppäimistöä käyttäen sekä NVDA-ruudunlukijaohjelman kanssa. Suorituskykytestauksissa käytettiin Google Chromen kehittäjätyökaluja, Googlen Lighthouse-palvelua sekä WebPagetest-sivulataustestiä.

The purpose of this thesis was to create a website template for Liana Technologies and explain the ways of how a website developer can improve the usability and performance of a website. The website’s accessibility was considered as a part of usability, and performance optimization methods in this thesis concentrate on the client-side optimizations.

Guidelines of good usability and methods of performance optimizations mentioned in the theory section of this thesis were utilised on the established website template. The website template is a complete and usable website which contains example text and images instead of real content. The website template can be used to create a client’s website by copying the website installation, switching website contents into real ones and by making the styles changes requested by the client.

The website template was tested in terms of usability and performance. Usability was tested by using the website and its functionalities with only a keyboard and by using a NVDA screen reader. Performance testing was made with Google Chrome’s developer tools, Google’s Lighthouse service and WebPagetest page speed test.