This article was written by Anel Kalajevac, Technical Lead at HTEC GroupWhen we talk about web applications, everything comes down to performance. Except for the user experience, web application performance has an impact on bounce rates, conversion rates, and ranking in organic search. In other words, slow web applications will hurt your brand and cost you money. There are many reasons why a web application may load slowly and many different approaches to improve performance. I’m going to show you how to improve the performance of Next.js-based applications by using the code splitting technique and lazy hydration. But first, let’s see what affects web application performance.
What affects web application performance?
The most common reasons why web application load time might be lagging are:
Large image sizes
Not using browser cache
Too many plugins and external libraries
Slow network connection
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.
Now, when we know how to test web application performance, let’s see how it can be improved.
Let’s say that we have a web application created by using React and Next.js framework. PageSpeed Insights reports two main issues:
Minimize main-thread work.
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).
Hiya! I am Nebojša, in-house writer at HTEC. I am constantly fascinated by the people and the technology around me, and I love bringing their stories out to the surface. Also, you are awesome and I wish you a glorious day!
The technical storage or access is strictly necessary for the legitimate purpose of enabling the use of a specific service explicitly requested by the subscriber or user, or for the sole purpose of carrying out the transmission of a communication over an electronic communications network.
The technical storage or access is necessary for the legitimate purpose of storing preferences that are not requested by the subscriber or user.
The technical storage or access that is used exclusively for statistical purposes.The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.
The technical storage or access is required to create user profiles to send advertising, or to track the user on a website or across several websites for similar marketing purposes.