When using graphical user interfaces (GUIs), the main problems that frustrates users are long response times and delays. These problems create a bad impression of the GUI, as well as of the company that created it.When providing a GUI to users it is important to provide intuition, ease of use and simplicity while still delivering good performance. However, some factors that play a major role regarding the performance aspect is outside the developers’ hands, namely the client’s internet connection and hardware. Since every client has a different combination of internet connection and hardware, it can be a hassle to satisfy everyone while still providing an intuitive and responsive GUI.The aim of this study is to find a way to monitor performance of a web GUI, where performance comprises response times and render times, and in doing so, enable the improvement of response times and render times by collecting data that can be analyzed.A framework that monitors the performance of a web GUI was developed as a proof of concept. The framework collects relevant data regarding performance of the web GUI and stores the data in a database. The stored data can then be manually analyzed by developers to find weak points in the system regarding performance. This is achieved without interfering with the GUI or impacting the user experience negatively. / När man använder grafiska gränssnitt upplevs lång responstid och fördröjning som de främsta problemen. Dessa problem är frustrerande och ger användare en negativ syn på både det grafiska gränssnittet och företaget som skapat det.Det är viktigt att grafiska gränssnitt är intuitiva, lättanvända och lättfattliga samtidigt som de levererar hög prestanda. Det finns faktorer som påverkar dessa egenskaper som är utanför programmerarnas händer, t.ex. användarens internetuppkoppling och hårdvara. Eftersom varje användare har olika kombinationer av internetuppkoppling och hårdvara är det svårt att tillfredsställa alla och samtidigt tillhandahålla ett intuitivt och responsivt gränssnitt.Målet med denna studie är att hitta ett sätt att övervaka prestandan av ett grafiskt gränssnitt där begreppet prestanda omfattar responsiviteten och hastigheten av den grafiska renderingen, och genom detta möjliggöra förbättring av responstider och renderingstider.Ett ramverk som övervakar prestandan av ett grafiskt gränssnitt utvecklades. Ramverket samlar in relevant prestandamässig data om det grafiska gränssnittet och sparar datan i en databas. Datan som sparats kan sedan bli manuellt analyserad av utvecklare för att hitta svagheter i systemets prestanda. Detta uppnås utan att störa det grafiska gränssnittet och utan att ha någon negativ påverkan på användarupplevelsen.

Under de senaste decennierna har webben utvecklats allt mer, och är idag en stor del av människors vardag. Det finns idag över 1,8 miljarder webbplatser i bruk, och över 97% av dessaanvänder sig av JavaScript som programmeringsspråk för klientsidan. Människans koncentrationsförmåga har också minskat genom åren, och det ställs idag allt högre krav på snabba responstider på webben. Användarupplevelsen är också väldigt viktig för att en webbplats ska lyckas med sitt ändamål. Vi har i vår studie valt att undersöka och jämföra prestandan i JavaScript-ramverken Svelte och Vue, där vi ville studera eventuella prestandaskillnader med särskild fokus på responstider. Vi ville även undersöka om eventuella prestandaskillnader kunde upplevas av användarna vid olika typer av manipulationer av DOMen, såsom exempelvis tillägg och borttagning av HTML-elementet <div> i både större och mindre skala, och således påverka användarupplevelsen. Vi utvecklade två stycken single-page-applikationer som använder sig utav JavaScript, där den ena använder sig av Vue och den andra utav Svelte som frontend-ramverk, för att sedan utföra prestandatester på bägge webbplatserna. Därefter lät vi en grupp användare testa webbplatserna för att sedan svara på en enkät, där enkätfrågorna fokuserade på hur de upplevde prestandan ochom de kunde märka någon skillnad mellan applikationerna. Datainsamlingen för att kunna besvara de andra parametrarna för ramverken som denna studieämnade att undersöka, som går under användbarhet, skedde genom att skicka ut en enkät där vi lät både professionella frontend-utvecklare samt utvecklare på hobbynivå med erfarenhet av både Svelte och Vue besvara ett antal frågor om användbarhet. Slutsatsen av studien mynnar ut i att prestandaskillnader mellan ramverken i våra single-page-applikationer existerar, och kan i vissa fall också märkas av användarna. Om utvecklarna själva får bestämma vilket ramverk de föredrar väljer de professionella utvecklarna att arbeta med Vue och hobbyutvecklarna Svelte. För den officiella dokumentationen tenderade båda respondentgrupperna att föredra Vue över Svelte.