In modern web development, optimized performance and user experience are crucial to meet user expectations. This study explores how different data loading strategies affect the performance of Vue components when communicating with a Wagtail CMS. The objectives are to investigate and compare the performance between two different strategies for content loading in Vue components against Wagtail's standardized API: eager loading and lazy loading. By analyzing these strategies, the study intends to provide guidance for developers in choosing the optimal loading strategy based on usage context. Through the design science methodology, two implementations, eager and lazy loading, of the same functionality in Vue.js against Wagtail CMS are designed and evaluated. Systematic measurements of initial loading time, filtering time, number of network requests, and transferred data volume are performed under standardized test conditions. The results show that lazy loading provides 40.8% faster initial page loading, while eager loading offers approximately 400 times faster filtering response. After two user interactions, eager loading becomes 21.6% faster overall. In conclusion, the choice between eager loading and lazy loading should be based on the application's usage context. For applications where users perform few interactions per session, lazy loading is recommended, while eager loading is superior for applications with intensive user interaction.

I modern webbutveckling är optimerad prestanda och användarvänlighet avgörande för att möta användarnas förväntningar. Denna studie utforskar hur olika strategier för datainladdning påverkar prestandan i Vue-komponenter när de kommunicerar med ett Wagtail CMS. Syftet är att undersöka och jämföra prestandan mellan två olika strategier för innehållsladdning i Vue-komponenter mot Wagtails standardiserade API: eager loading och lazy loading. Genom att analysera dessa strategier ämnar studien ge vägledning för utvecklare i valet av optimal laddningsstrategi baserat på användningskontext. Genom design science-metodiken utformas och utvärderas två implementationer, eager och lazy loading, av samma funktionalitet i Vue.js mot Wagtail CMS. Systematiska mätningar av initial laddningstid, filtreringstid, antal nätverksanrop och överförd datamängd utförs under standardiserade testförhållanden. Resultaten visar att lazy loading ger 40,8% snabbare initial sidladdning, medan eager loading erbjuder cirka 400 gånger snabbare filtreringsrespons. Efter två användarinteraktioner blir eager loading 21,6% snabbare totalt. Slutsatsen är att valet mellan eager loading och lazy loading bör baseras på applikationens användningskontext. För applikationer där användare utför få interaktioner per session rekommenderas lazy loading, medan eager loading är överlägset för applikationer med intensiv användarinteraktion.