Are you also ignoring Frontend performance testing ?

While load testing a website we usually focus on tool that helps to test APIs, servers or backend systems and to very extents it is useful and can bring forth information that can help to find bottleneck issue and fine tune your back-end. But that’s not all to it.  As end user interact with your application through browser , the frontend implementation can affect the performance of the app greatly as well. Most of the time we ignore the impact of frontend on performance  of application and that can result in some unexpected issue when faced with increased traffic in production. To be prepared we need to identify performance issue in frontend as well.

And for that there are a few tools that can help us.

Apache JMeter:

Type: Open-source
Description: Apache JMeter is a widely used open-source tool for load and performance testing. It allows you to simulate heavy user loads on server-side components. But it can also be utilized to simulate user behaviour on the frontend by recording and replaying HTTP requests. While it can not help in frontend performance testing of  modern framework like ReactJS and AngularJS, as they are single page application and have heavy processing done in client side. It can still help with application that are using server side rendering.
While the reports of Jmeter is not that intuitive as the modern tools , but its flexibility still enables testers to create complex test scenarios and have many type of sampler and result matrices that allow us identify performance bottlenecks.

Lighthouse:

Type: Open-source
Description: Developed by Google as an open-source tool integrated into Chrome DevTools, Lighthouse is a powerful resource for analyzing webpage performance. It evaluates various aspects such as website speed, accessibility features, and adherence to SEO best practices. By running audits on web pages based on predefined standards or customized settings, Lighthouse produces detailed reports with actionable recommendations designed to optimize frontend performance.

Sitespeed.io:

Type: Open-source
Description: Sitespeed.io is you r go to command-line tool designed for comprehensive web performance analysis. It is a total solution suite built upon multiple open source tools like Browsertime, The Coach. It also have plugin architecture that let you use popular tools like Lighthouse and Chrometrace.
It provides detailed reports covering various aspects such as:
– asset sizes (CSS/JS/images),
– response time distribution graphs based on connection speeds (2G/3G/4G),
– third-party content analysis (CDNs/analytics/plugins), and more.
Additionally, Sitespeed.io supports integration with other tools like Graphite or InfluxDB for advanced data visualization.

K6 Browser Module:

Type: Open-source
Description: Primarily known as an open-source load testing tool built using Go programming language; K6 also offers a feature called “K6 browser” that allows scripting of user interactions on the frontend using JavaScript syntax similar to other popular test frameworks like Selenium WebDriver or Puppeteer. And Provide you with key matrics like Google’s Core Web Vitals for frontend performance testing.
And the most intuitive  point is that you can also do hybrid performance testing that enables you to create thousands of user traffic with API load testing and at the same you can simulate a few users with K6 browser , all within same script. That allow testers to test FE behaviour at very high load with low spec system as well.

WebPageTest:

Type: Freemium (offers both free and paid options)
Description: WebPageTest is an inclusive online platform that allows users to conduct thorough webpage performance tests on a global scale. With support for both real browsers and emulated devices, it delivers essential insights into vital metrics such as page load times. Furthermore, WebPageTest showcases informative visuals including waterfall charts that present the order in which resources load on the webpage. Users can also benefit from a filmstrip view feature, illustrating each step of the page-loading process. With actionable suggestions and video capture functionality, WebPageTest facilitates optimization efforts for exceptional user experiences.
All the scans and checks are available in free version but a pro version provide you with features like API access and Experiments that can help you to make part of CI/CD pipeline and implements suggestions easily.

GTmetrix:

Type: Freemium (offers both free and paid options)
Description: GTmetrix is also a web-based tool that generates detailed reports on frontend performance testing. It measures various aspects such as page load time, fully loaded time, requests made, total page size. It provides recommendations for optimizing performance. Which includes techniques like image optimization, caching improvements, enabling compression, leveraging browser caching headers, and more. GTmetrix also offers historical reporting to track changes in performance over time.
Same as WebPageTest its paid plan will allow you to have many extra features. Like longer historical data, better monitoring and more test locations.