International Journal of Science and Research (IJSR)

ISSN: 2319-7064
SJIF (2020): 7.803

Performance Analysis of Single Page Applications

Mounika Kothapalli
Software Engineer II at Microsoft
Email: moni.kothapalli[at]gmail.com

Abstract: Single Page Applications (SPAs) have been widely adopted as they offer seamless, responsive, and interactive
user experience. This paper explores different performance optimization techniques along with details of advanced
performance metrics that are needed for the evolving SPAs. It discusses the optimization strategies like code splitting, lazy
loading, caching, and efficient state management along with server - side rendering. It also discusses real time examples of
enterprise applications that benefitted from adopting performance first strategies. It concludes by stressing the importance
of user - centric performance which strikes balance between performance optimization and application functionalities.

Keywords: Single Page Applications (SPAs), performance analysis, performance optimization, performance metrics, case studies

1. Introduction times and the experience is also not fluid. However, in SPAs
each user action only dynamically loads specific content
In Single Page Applications (SPAs) when the browser requested which results in faster load times and consist of
requests for client application, the web server responds with different components as shown in Fig.1.
a single HTML page typically an index. html. The content
updates dynamically as the user interacts with the application
without the need to reload the entire page [1]. This allows a
seamless and fluid user experience, similar to native
applications which is achieved through leveraging JavaScript
(JS) frameworks and libraries.

The concept emerged in the early 2000s, with the introduction

of JS frameworks such as Backbone. js and AngularJS. As
there is a demand for responsive, intuitive, and user - friendly
web applications the SPAs became popular. Moreover, with
the flexibility offered by other JS libraries such as React and
Vue. js also helped to adopt these applications in real time.

User satisfaction and engagement is critical for any Figure 1: Architecture of a Single Page Application (SPA).
application to succeed. This emphasized the importance of
performance in SPAs. In competitive market conditions The key characteristics that keep SPAs apart are the more
where faster load times, smooth navigations are critical a responsive and interactive user experience, as the application
superior user experience helps achieving the business can update content without the need for entire page reload [3].
objectives [2]. They also offer offline capabilities which allow users to
continue interactive with the application even with slow or no
Research Background internet connectivity. They rely heavily on JS frameworks (e.
This paper aims to provide a comprehensive analysis of SPAs g., Angular, React and Vue) to render content on the client
performance in various aspects. The objectives are to: side which reduces the round trips to server. SPAs offer
• Explore the performance metrics which play key role. advantages like quick rendering of updates without the need
• Look into different performance optimization techniques for server round trips. This is similar to native mobile
and best practices for SPAs. application experience.
• Evaluate performance monitoring and discuss available
tools for analysis. However, there are some challenges in terms of initial load
• Different case studies and real - world examples of SPA time which could be little slower compared to traditional web
performance optimization. applications as the entire app and its dependencies needs to
load [4]. The search engine optimization could be a challenge
With these objectives the paper tries to provide different as SPAs rely on JavaScript to render content. The search
insights and recommendations for developers and enterprises engines may find it hard to index content that are dynamically
that plan to build and optimize SPAs. loaded which impacts the search findings of the pages.

2. Literature Review 1) Performance Metrics for SPAs

Understanding the key metrics as shown in Fig.2 of
performance would help in measuring and optimizing the
The traditional web applications consist of multi - page model
in which a new user interaction results in full page reload Single Page Applications. These would give deep
from the server. Hence, there is slowness in the response
Volume 11 Issue 1, January 2022
www.ijsr.net
Licensed Under Creative Commons Attribution CC BY
Paper ID: SR24529184457 DOI: https://dx.doi.org/10.21275/SR24529184457 1631
 International Journal of Science and Research (IJSR)
ISSN: 2319-7064
SJIF (2020): 7.803
understanding of the application’s behavior and give insights a) Code Splitting and Lazy Loading
into areas that need improvement. Code splitting involves dividing the entire code into smaller
chunks that can be loaded on demand instead of all at once.
And Lazy Loading further enhances this by delaying the
loading of non - essential resources until they are requested
for. These techniques primarily enhance the initial load time
making the application responsive [7].

b) Caching and Offline Support

Caching allows storage of assets and data locally to lower the
Figure 2: Performance metrics in a SPA number of network requests. Service workers allow caching
resources and handle offline requests. These speeds up the
a) Page load time load times and offers offline functionality. With caching and
Page load time gives the duration from user request to fallback mechanisms SPAs improve reliability and
complete rendering of the page. It is critical as it decides user performance [8].
engagement with the application. This metric shows how
quickly user can start interacting with the application [5].

b) Time to Interactive (TTI)

This measures how long it takes for the page to be fully
interactive and be responsive to user input. In other words,
the main thread is free of long tasks and the user can interact
with the page without delays [6].

c) First Contentful Paint (FCP)

First Contentful Paint measures the time taken by first piece
of the content to render from the DOM [6]. This helps in
understanding how quickly users can see visual feedback
from their actions on the application.

d) First Meaningful Paint (FMP)

This measures the duration for the primary content of the
page to be visible and useful to the user. It also means the Figure 3: Performance optimization techniques.
time taken for the most meaningful elements to be displayed.
c) State Management
e) Frames Pers Second (FPS) Libraries like Redux and MobX help manage the state of
This metric gives the smoothness and fluidity of a SPA’s application which would allow predictable state and avoid
animations and interactions. The higher the FPS the smoother event spaghetti [9]. This also allows reducing redundant re -
the animations and a more responsive user interface. A renders and thereby improving performance and reducing
consistent FPS indicates seamless and smooth user memory overhead.
experience [5].
d) Server - Side Rendering (SSR) and Pre - Rendering
f) Memory Usage These techniques offer improved performance and SEO. SSR
This is another critical metric which helps identify how the is a technique where rendering of the initial HTML is on the
memory resources are being used by JavaScript heavy server and is sent to the client which reduces the first
applications. This also helps identify memory leaks, meaningful paint. Pre - rendering generates static HTML for
excessive garbage collection and other performance specific routes at build time and improves the rendering time.
bottlenecks [6].
e) Minimize DOM manipulations and Repaints
g) Network Requests and Payload Excessive DOM manipulations lead to slow performance and
Network requests and payload size are important to consider increases rendering times. Using virtual DOM libraries like
when optimizing SPA performance. Reducing the number React and avoiding direct DOM changes would improve
and size of network requests can significantly reduce the rendering speed [9].
application’s load time and improve performance.
f) Virtualized. Lists and Infinite Scrolling
2) Performance optimization techniques for SPAs For scenarios with large lists of data implementing virtualized
There are various techniques as shown in Fig.3 to optimize lists and infinite scrolling greatly enhance performance. User
the performance of Single Page Applications. These can view only the content in the viewport so virtualized lists
techniques improve the initial load time, responsiveness and aim to render items that can be seen in the viewport which
efficiently utilize system resources. improves the rendering time. Infinite scrolling dynamically
loads additional content as the user scrolls providing a
seamless experience [10].

Volume 11 Issue 1, January 2022

www.ijsr.net
Licensed Under Creative Commons Attribution CC BY
Paper ID: SR24529184457 DOI: https://dx.doi.org/10.21275/SR24529184457 1632
 International Journal of Science and Research (IJSR)
ISSN: 2319-7064
SJIF (2020): 7.803
3) Performance monitoring and analysis tools Other examples include Gmail and Trello which
Different performance monitoring tools offer valuable implemented service workers, lazy loading to significantly
insights into the application’s behavior, performance improve user experience.
bottlenecks and help make informed decisions to optimize b) Lessons learned and best practices
them. Tools such as Chrome DevTools and Firefox Large enterprise applications such as Google, Facebook,
Developer Tools are essential for monitoring and analyzing Flipkart, and Airbnb have described the best practices they
SPA performance [11]. They offer network monitoring, implemented for their SPAs. Lessons include the
performance profiling and memory analysis. In addition, implementing efficient caching strategies, prioritizing user
developers can measure resource load times, JavaScript centric performance metrics, continuous monitoring, and
execution times and DOM rendering. iterative improvements. In addition, server - side rendering,
state management, lazy loading and code splitting are vital.

4. Future Trends and Challenges

a) Emerging Technologies
Technologies are emerging at rapid pace and with the
advancements in JavaScript frameworks it has significant
impact on SPA performance. HTTP/3 has better performance
over HTTP/2 in terms of latency and data transfer. The newer
JS frameworks also enhancing performance making it easier
for developers to focus simply on development.

Lighthouse is an open - source tool developed by Google that b) Challenges in Performance Measurement
allows to audit the application performance. It also Measure SPA performance is a complex task as it holds lot of
recommends steps to improve performance and offers metrics dynamic content. Traditional metrics alone are not enough
(FCP, TTI etc), accessibility, SEO and other best practices instead advanced metrics like Time to interactive (TTI) and
[12]. Total Blocking Time (TBT) need to be used. In addition,
considering different devices and network speeds adds
WebPageTest is another powerful tool for assessing the SPA complexity. The developers need to use a combination of
performance. It lets the developers test their applications tools and techniques to identify and address the performance
based off different locations in the world using different bottlenecks [16].
network conditions. It provides detailed performance metrics.
Such as page load times, time to interactive. It also provides c) Balancing performance with user experience and
visual comparison tools and the ability to generate functionality
performance reports over time [13]. The main challenge is offering high peformance without
compromising the funcrtionality. Whiele performance is
In production environment developers can leverage New critical it should not be at the cost of user experience and
Relic and AppDynamics to gain real - time insights into SPA functionality. Developers need to prioritize the user - centric
performance. These are especially useful to do real user performance improvements that enhance usability without
monitoring and infrastructure monitoring. compromising the features and capabilities of the application
[17].
3. Case Studies and Real - World Examples
5. Conclusion
a) Real - world examples
Looking into different example apps which achieved a) Recap of key discussions
significant performance improvement gives valuable insights This paper discussed the performance metrics and
for developers to adopt these techniques. First example is highlighted the importance of optimization in SPAs. Key
Twitter Lite which implemented code splitting, lazy loading findings such as code splitting, lazy loading, state
and is a progressive web application (PWA) version of management and caching are discussed. The usage of tools
twitter. This reduced the initial page load time by 50% and an such as Chrome DevTools, lighthouse was also emphasized
increase of 65% increase in pages per session [14]. as critical for analysis and optimization.

Another example is Flipkart, which is India’s largest e - Given the dynamic nature of web applications and the
commerce platform that adopted a performance focused evolution of JavaScript frameworks there is a need for
approach in their SPA. It leveraged techniques like server - continuous improvements and iterative optimization through
side rendering, code splitting and efficient state management audits by leveraging the tools and technologies
with redux. Through these techniques it improves Time to
interactive (TTI) by 30% and saw a 40% reduction in bounce b) Recommendations to developers
rates [15]. For developers starting off with SPAs it is recommended to
adopt performance first mindset for the entire development
lifecycle. Key recommendations include utilize techniques
such as code splitting, lazy loading, and server - side
rendering to enhance performance. Use tools like Chrome
Volume 11 Issue 1, January 2022
www.ijsr.net
Licensed Under Creative Commons Attribution CC BY
Paper ID: SR24529184457 DOI: https://dx.doi.org/10.21275/SR24529184457 1633
 International Journal of Science and Research (IJSR)
ISSN: 2319-7064
SJIF (2020): 7.803
DevTools, Lighthous and other performance monitoring [12] Lighthouse, Google Developers. Accessed: Jun.7,
services to optimize performance. Most importantly, 2020. [Online]. Available: https: //developers. google.
prioritize user - centric performance optimization thereby not com/web/tools/lighthouse
compromising the user experience. Finally staying updated [13] WebPageTest Documentation. Accessed: Jun.7, 2020.
with emerging technologies would offer significant benefits. [Online]. Available: https: //docs. webpagetest. org/
[14] A. Osmani, "A Tinder Progressive Web App
References Performance Case Study, " Medium, Nov.28, 2017.
[Online]. Available: https: //medium.
[1] M. S. Mikowski and J. C. Powell, Single page web com/[at]addyosmani/a - tinder - progressive - web - app
applications: JavaScript end - to - end. Manning - performance - case - study - 78919d98ece0
Publications, 2013. [15] A. Raghavan, "How We Built Flipkart Lite: A
[2] R. Kohavi and R. Longbotham, "Online controlled Progressive Web App, " Flipkart Engineering Blog,
experiments and A/B testing, " Encyclopedia of May 21, 2018. [Online]. Available: https: //tech.
Machine Learning and Data Mining, vol.7, no.8, pp.922 flipkart. com/how - we - built - flipkart - lite - a -
- 929, 2017. progressive - web - app - 49170ca8e071
[3] J. Gregory and R. Nayak, "Single Page Applications: [16] S. Chaudhary, H. Somani, and S. Mukherjea,
The Future of Web Development, " in Proc. "Performance Testing of Single Page Applications:
International Conference on Advances in Computing, Challenges and Solutions, " in Proc. IEEE International
Communications and Informatics (ICACCI), 2018, Conference on Software Testing, Verification and
pp.2137 - 2141, doi: 10.1109/ICACCI.2018.8554467. Validation Workshops (ICSTW), 2019, pp.110 - 115,
[4] U. Wickramarachchi and A. Priyanga, "A comparative doi: 10.1109/ICSTW.2019.00037.
analysis of single page application frameworks, " in [17] J. Rzepka and K. Benedyczak, "Performance and User
Proc. IEEE International Conference on Industrial and Experience Analysis of Single Page Application
Information Systems (ICIIS), 2018, pp.437 - 442, doi: Frameworks, " in Proc. International Conference on
10.1109/ICIINFS.2018.8721413. Computer Networks, 2019, pp.178 - 191, doi:
[5] A. Arvind and P. S. Banu, "A Study on Single Page 10.1007/978 - 3 - 030 - 21952 - 9_14.
Application Frameworks, " in Proc.3rd International
Conference on Computing Methodologies and
Communication (ICCMC), 2019, pp.1116 - 1119, doi:
10.1109/ICCMC.2019.8819692.
[6] A. Ahmad, M. Azam, and M. Naeem, "Performance
Evaluation of Progressive Web Apps and Single Page
Applications, " in Proc.22nd International Multitopic
Conference (INMIC), 2019, pp.1 - 6, doi:
10.1109/INMIC48123.2019.9022759.
[7] T. Chadha and R. Narang, "Performance Optimization
of Single Page Application Using Progressive Web App
and Webpack, " in Proc.4th International Conference on
Internet of Things: Smart Innovation and Usages (IoT -
SIU), 2019, pp.1 - 6, doi: 10.1109/IoT -
SIU.2019.8777650.
[8] L. Zhu, H. Jiang, and Z. Zhu, "Research on the
Application of Service Workers in Web Application, "
in Proc. IEEE 3rd Advanced Information Management,
Communicates, Electronic and Automation Control
Conference (IMCEC), 2019, pp.1451 - 1455, doi:
10.1109/IMCEC46724.2019.8983852.
[9] A. Fedosejev, React 16 Tooling. Packt Publishing,
2017.
[10] J. M. Chung, S. H. Kim, and J. H. Kim, "Performance
optimization of single - page applications through the
use of in - memory cache and client - side rendering, "
in Proc. International Conference on Information and
Communication Technology Convergence (ICTC),
2018, pp.371 - 373, doi: 10.1109/ICTC.2018.8539687.
[11] J. Dugan and M. Panar, "Mastering Browser Developer
Tools, " in Proc. Graz University of Technology, 2017,
pp.1 - 8. [Online]. Available: https:
//www.researchgate. net/profile/Markus -
Panar/publication/319101021_Mastering_Browser_De
veloper_Tools/links/59e5b1e9a6fdcc1b1d96e8c4/Mast
ering - Browser - Developer - Tools. pdf

Volume 11 Issue 1, January 2022

www.ijsr.net
Licensed Under Creative Commons Attribution CC BY
Paper ID: SR24529184457 DOI: https://dx.doi.org/10.21275/SR24529184457 1634
 International Journal of Science and Research (IJSR)
ISSN: 2319-7064
SJIF (2020): 7.803

Volume 11 Issue 1, January 2022

www.ijsr.net
Licensed Under Creative Commons Attribution CC BY

Paper ID: SR24529184457 DOI: https://dx.doi.org/10.21275/SR24529184457 1635