- 1. Run in Parallel
- 2. Go Asynchronous
- 3. Use Caching
- 4. Use gzip Compression
- 5. Use Client Side Rendering When Possible
- 6. Don’t Store Too Much in Sessions
- 7. Optimize Your Queries
- 8. Use Standard V8 Functions
- 9. Use nginx in Front of Node
- 10. Minify and Concatenate JavaScript
- Conclusion
- Frequently Asked Questions on Enhancing Node.js Web App Performance
Node.js is already blazing fast thanks to its event driven and asynchronous nature. But, in the modern web just being fast is not enough. If you are planning to develop your next web app using Node.js you must take every possible step to make sure your app is faster than usual. This article presents 10 tips that are known to speed up your Node based web app tremendously. So, let’s see each of them one by one.
1. Run in Parallel
While building web apps, sometimes you will need to make multiple internal API calls to fetch various data. For instance, think about a user dashboard. While rendering the dashboard you may execute the following hypothetical calls:
- The user profile –
getUserProfile()
. - The recent activity –
getRecentActivity()
. - Subscriptions –
getSubscriptions()
. - Notifications –
getNotifications()
.
In order to retrieve these details you might create a separate middleware for each function and attach to the dashboard route. But the problem with this approach is that one function has to wait for the previous one to complete. The alternative option is to execute these calls in parallel.
As we all know Node.js is very efficient in running multiple functions in parallel due to its asynchronous nature. We should take advantage of this. As the functions I mentioned above don’t depend on each other we can run them in parallel. This will cut down the number of middlewares and improve the speed greatly.
To parallelize things we can use async.js, a Node module that helps tame asynchronous JavaScript. Here is a snippet that shows how different functions may run in parallel using async.js:
function runInParallel() {
async.parallel([
getUserProfile,
getRecentActivity,
getSubscriptions,
getNotifications
], function(err, results) {
//This callback runs when all the functions complete
});
}
If you want to learn more about async.js be sure to check out the project’s GitHub page.
2. Go Asynchronous
By design Node.js is single threaded. Because of this fact, synchronous code can potentially lock up the entire application. For example, most of the file system APIs have their synchronous counterparts. The following snippet shows how a file read operation can be done both synchronously and asynchronously:
// Asynchronous
fs.readFile('file.txt', function(err, buffer) {
var content = buffer.toString();
});
// Synchronous
var content = fs.readFileSync('file.txt').toString();
But if you perform long running and blocking operations, your main thread will be blocked until the operation finishes. This dramatically reduces the performance of your app. So, make sure you always use asynchronous APIs in your code, at least in performance critical sections. Also be careful while choosing third party modules. Even if you take every precaution to avoid synchronous code, an external library could make a synchronous call, affecting your app’s performance.
3. Use Caching
If you are fetching some data that doesn’t change frequently, you may cache it to improve performance. For example, take the following snippet which fetches the latest posts to display on a view:
var router = express.Router();
router.route('/latestPosts').get(function(req, res) {
Post.getLatest(function(err, posts) {
if (err) {
throw err;
}
res.render('posts', { posts: posts });
});
});
If you don’t publish blog posts too frequently, you can cache the posts
array and clear the cache after an interval. For example, we can use the redis
module to achieve this. For that you need to have Redis installed on your server. Then you can use a client called node_redis
to store key/value pairs. The following snippet shows how we can cache the posts:
var redis = require('redis'),
client = redis.createClient(null, null, { detect_buffers: true }),
router = express.Router();
router.route('/latestPosts').get(function(req,res){
client.get('posts', function (err, posts) {
if (posts) {
return res.render('posts', { posts: JSON.parse(posts) });
}
Post.getLatest(function(err, posts) {
if (err) {
throw err;
}
client.set('posts', JSON.stringify(posts));
res.render('posts', { posts: posts });
});
});
});
So, first we check if the posts exist in the Redis cache. If so, we deliver the posts
array from cache. Otherwise, we retrieve the content from the DB and then cache it. Also, after an interval we can clear the Redis cache so that new content can be fetched.
4. Use gzip Compression
Turning on gzip compression can hugely impact the performance of your webapp. When a gzip compatible browser requests for some resource, the server can compress the response before sending it to the browser. If you don’t use gzip for compressing your static resource it might take longer for the browser to fetch it.
In an Express app, you can use the built in express.static()
middleware to serve static content. Additionally, you can use the compression
middleware to compress and serve the static content. Here, is a snippet that shows how to do it:
var compression = require('compression');
app.use(compression()); //use compression
app.use(express.static(path.join(__dirname, 'public')));
5. Use Client Side Rendering When Possible
With the emergence of many powerful client side MVC/MVVM frameworks like AngularJS, Ember, Meteor, etc., it has become very easy to create single page apps. Basically, instead of rendering on the server side you will just expose APIs that send JSON responses to the client. On the client side you can use a framework to consume the JSON and display on the UI. Sending JSON from the server can save bandwidth and thus improve speed because you don’t send layout markup with each request. Rather you just send plain JSON which is then rendered on the client side.
Take a look at this tutorial of mine which describes how to expose RESTful APIs with Express 4. I also wrote another tutorial which shows how to interact with these APIs using AngularJS.
6. Don’t Store Too Much in Sessions
In a typical Express web app, the session data is by default stored in memory. When you store too much data in the session, it adds significant overhead to the server. So, either you can switch to some other type of storage to keep session data or try to minimize amount of data stored in session.
For example, when users log into your app you can just store their id
in the session instead of storing the entire object. Subsequently, on each request you can retrieve the object from the id
. You may also want to use MongoDB or Redis to store session data.
7. Optimize Your Queries
Suppose you have a blogging app which displays the latest posts on the home page. You might write something like this to fetch data using Mongoose:
Post.find().limit(10).exec(function(err, posts) {
//send posts to client
});
But the problem is that the find()
function in Mongoose fetches all the fields of an object and there might be several fields in the Post
object which are not required on the homepage. For instance, comments
is one such field which holds an array of comments for a particular post. As we are not showing the comments we may exclude it while fetching. This will definitely improve the speed. We can optimize the above query with something like this:
Post.find().limit(10).exclude('comments').exec(function(err, posts) {
//send posts to client
});
8. Use Standard V8 Functions
Different operations on collections such as map
, reduce
, and forEach
are not supported by all browsers. To overcome the browser compatibility issues we have been using some client side libraries on the front end. But with Node.js, you know exactly which operations are supported by Google’s V8 JavaScript engine. So, you can directly use these built in functions for manipulating collections on the server side.
9. Use nginx in Front of Node
Nginx is a tiny and lightweight web server that can be used to reduce the load on your Node.js server. Instead of serving static files from Node, you can configure nginx to serve static content. You can also set up nginx to compress the response using gzip so that the overall response size is small. So, if you are running a production app you might want to use nginx to improve the speed.
10. Minify and Concatenate JavaScript
Finally, your web app speed can be tremendously increased by minifying and concatenating multiple JS files into one. When the browser encounters a <script>
element the page rendering is blocked until the script is fetched and executed (unless async
attribute is set). For example, if your page includes five JavaScript files, the browser will make five separate HTTP requests to fetch those. The overall performance can be hugely improved by minifying and concatenating those five files into one. The same applies to CSS files as well. You can use a build tool like Grunt/Gulp to minify and concatenate your asset files.
Conclusion
These 10 tips can surely improve your web app speed. But, I know there is still room for more improvements and optimizations. Let us know in comments if you have any such performance improvement tips.
Thanks for reading!
Frequently Asked Questions on Enhancing Node.js Web App Performance
What are some effective ways to improve the performance of my Node.js web app?
There are several strategies you can employ to enhance the performance of your Node.js web app. Firstly, consider using the Cluster module, which allows you to create child processes that share server ports. This can significantly improve the performance of your app. Secondly, use gzip compression to reduce the size of the response body, thereby increasing the speed of your web app. Thirdly, consider using a reverse proxy like Nginx to serve static files, which can also boost your app’s performance.
How can I use the Cluster module to improve my Node.js web app’s performance?
The Cluster module in Node.js allows you to create child processes that all run simultaneously and share the same server port. By creating multiple instances of the Node.js server, you can handle more requests at the same time, thereby improving the performance of your web app. To use the Cluster module, you need to require it in your main server file and then use it to fork a new child process for each CPU core on your machine.
What is gzip compression and how can it enhance my web app’s performance?
Gzip is a software application used for file compression and decompression. When used in a web context, it can significantly reduce the size of the response body, resulting in faster data transfer between the server and the client. To use gzip compression in your Node.js app, you can use the compression middleware in your server file.
How can a reverse proxy like Nginx improve the performance of my Node.js web app?
A reverse proxy server like Nginx can significantly enhance the performance of your Node.js web app by serving static files. Static files are files that don’t change, like HTML, CSS, and JavaScript files. By serving these files through Nginx instead of Node.js, you can free up your Node.js server to handle other tasks, thereby improving its performance.
What are some other strategies I can use to improve the performance of my Node.js web app?
Apart from using the Cluster module, gzip compression, and a reverse proxy, there are several other strategies you can use to enhance the performance of your Node.js web app. These include using a CDN to deliver your static files, caching your data to reduce database queries, and using the PM2 process manager to keep your app running smoothly.
How can I use a CDN to improve the performance of my Node.js web app?
A Content Delivery Network (CDN) is a network of servers located around the world that deliver content to users based on their geographic location. By using a CDN to deliver your static files, you can reduce the latency experienced by users, thereby improving the performance of your web app.
How can caching improve the performance of my Node.js web app?
Caching is a technique used to store data in a temporary storage area, known as a cache, so that it can be retrieved more quickly in the future. By caching your data, you can reduce the number of database queries your app needs to make, thereby improving its performance.
What is the PM2 process manager and how can it enhance my web app’s performance?
PM2 is a production process manager for Node.js applications. It allows you to keep your app running continuously, even if it crashes or is restarted. By using PM2, you can ensure that your app is always available to users, thereby improving its performance.
How can I monitor the performance of my Node.js web app?
There are several tools you can use to monitor the performance of your Node.js web app. These include the Node.js Performance Hooks API, which allows you to measure the runtime of different parts of your app, and the Node.js Inspector, which allows you to debug your app and profile its performance.
What are some common performance issues in Node.js web apps and how can I avoid them?
Some common performance issues in Node.js web apps include blocking the event loop, excessive database queries, and memory leaks. To avoid these issues, you should always write non-blocking code, cache your data to reduce database queries, and use tools like the Node.js Inspector to detect and fix memory leaks.
Sandeep is the Co-Founder of Hashnode. He loves startups and web technologies.