What affects web application performance?
The most common reasons why web application load time might be lagging are:- Heavy JavaScript usage
- Large image sizes
- Not using browser cache
- Too many plugins and external libraries
- Slow network connection
- Older browsers
- Poor hosting plan
How to test web application performance?
Many different tools can be used for checking web application performance, but all of them are measuring mainly the same metrics. Alongside many different metrics, the most important are Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift. These metrics are also defined as Core Web Vitals by Google. For web application performance checking I prefer using PageSpeed Insights, which provides a nice report for mobile and desktop devices. The report includes a general score calculated by Lighthouse Scoring Calculator, results for different metrics, and suggestions for improvements. The metrics scores and the performance score are colored according to these ranges:- 0 to 49 (red): Poor.
- 50 to 89 (orange): Needs Improvement.
- 90 to 100 (green): Good.
Example
Let’s say that we have a web application created by using React and Next.js framework. PageSpeed Insights reports two main issues:- Reduce unused JavaScript.
- Minimize main-thread work.
Idea
Reducing unused JavaScript by splitting the main JavaScript file shared by all pages could be a good starting point, but can we go one step further? Do we need all that JavaScript during the initial load of the page? Why download the footer code if the user during the initial page load can’t see the footer? So, the idea is to load only JavaScript code relevant to the visible part of the page, and the rest will be loaded as the user scrolls down. This will reduce unused JavaScript and minimize main-thread work.Solution
There are five core parts of implementation:- A webpack plugin for changing module ids.
- Next.js plugin for marking lazy modules.
- Custom Next.js document.
- Next.js dynamic import.
- Component for lazy hydration (library or custom implementation based on Intersection Observer API).




