Measuring latency from the client side using Chrome DevTools and N|Solid

Almost every modern web browser includes a powerful suite of developer tools. In our previous blog-post we covered __How to Measure Node.js server response time with N|Solid__, read more ???? HERE.

The developer tools have a lot of capabilities, from inspecting the current HTML-CSS and Javascript code to inspecting the current ongoing network communication client-server.

To open the devtools and analyze the network, you can go to:

“More Tools” > “Developer Tools” > “Network”

Being on the devtools screen now, you can visit your Fastify API(or express) http://localhost:3000 after you get an HTTP response, you will see the request itself, the HTTP status code, the response size, and the response time.

GIF 1 – devtools.gif

An explanation for the time measured by the Chrome DevTools, HERE.

Let’s measure the Client-Side Latency.

Remove the delay timer logic on your application and restart the Node.js process.

import Fastify from “fastify”;

const fastify = Fastify({
logger: true,
});

// Declare the root route and delay the response randomly
fastify.get(“/”, async function (request, reply) {
return { delayTime: 0 };
});

// Run the server!
fastify.listen({ port: 3000 }, function (err, address) {
if (err) {
fastify.log.error(err);
process.exit(1);
}
});

NOTE: Discover another useful code snippet in our ‘Measure Node.js server response time with N|Solid’ article! This time, learn how to simulate server-side latency to further test your application’s performance. Check it out: ???? HERE

After this, you will get the fastest response times of ~1 ms, I was able to execute 139k requests in 10 secs using autocannon.

npx autocannon localhost:3000

The main point here is to see how it behaves when we have a poor internet connection on the client side and the best possible performance on the server side; for this, we can simulate high latency and slow internet connections on the client side, using Chrome devtools which has this option out of the box.

Simulate Client-Side latency

In the Chrome Devtools:

Go to the “Network Conditions” option > Select the option “Network Throttling” > Set it to __“Slow 3G”__.

If you request your browser to the URL http://localhost:3000/, you’ll see a long response time, in our case, __~2 seconds__.

This response time doesn’t mean the server takes that long to process the request and return an answer that was the amount of time that the answer took to transfer over the network till it arrived at the client side.

If you check your Fastify logs of the N|Solid metrics, you’ll see the server only took ~1 ms to return.

Check your logs with N|Solid
HERE

In our case, the response time was 0.3 ms

“responseTime”:0.3490520715713501

Can I improve/help the client-side latency?

Well, it is possible to improve the user experience on client-side devices with high latency when you use a Content Delivery Network to cache content on edge locations geographically near to users’ devices; even implementing some simple compression mechanism will improve the load times on users’ devices with high latency.

Look at this Jonas, our Principal OSS Engineer, blog-post and see ???????? __How to create a fast SSR application__.

Connect with NodeSource

If you have any questions, please contact us at [email protected] or through this form.

To get the best out of Node.js and experience the benefits of its integrated features, including OpenTelemetry support, SBOM integration, and machine learning capabilities. Sign up for a free trial and see how N|Solid can help you achieve your development and operations goals. #KnowyourNode

Experience the Benefits of N|Solid’s Integrated Features
Sign up for a Free Trial Today

NODE.JS Retro 2022

Node.js was the top technology used by professional developers in 2022

Stack Overflow’s annual Developer Survey confirmed our experience; Node.js continues to grow its use across the globe due to its scalability and performance as well as its ability to integrate seamlessly with a wide range of technologies and databases make it an ideal technology for businesses of all sizes.

The Node.js open-source project, a cross-platform JavaScript run-time environment built on Chrome’s V8 JavaScript engine, allows developers to use JavaScript to create web applications and serve data quickly, securely, and reliably. That’s why professional developers have adopted it broadly; it helps them in many web-development tasks like API development, streaming, and web and mobile applications as it is fully compatible with existing JavaScript libraries (the Top Language according to Github’s Octoverse Report, it can be used to create highly scalable and dynamic web or mobile applications.

Img 1: Stackoverflow 2022 survey

NodeJS on an Enterprise Level

Node.js excels at simplifying the development process for enterprises. It requires less code to execute tasks, allowing developers to focus on creating high-quality code rather than endless lines of coding. By utilizing asynchronous I/O and non-blocking event-driven input/output makes it lightweight and efficient for building real-time applications.

Img: Node.js Org Use Survey

Node.js is designed to handle high amounts of requests quickly and efficiently. Its architecture is based on a single-threaded, event-driven model that makes it very efficient at handling concurrent requests. This event-driven design allows Node to handle requests without the need for multiple threads. This makes Node.js applications highly scalable, as multiple requests can be served without additional resources or server hardware.

Additionally, Node.js supports streaming and event-based programming, which allows developers to build asynchronous applications. Asynchronous programming will enable applications to respond quickly to multiple requests without waiting for each request to finish before responding.

Therefore the performance of Node.js applications depends mainly on how well they are coded and optimized. Careful planning and optimizing the application code are essential to achieve high performance. Additionally, Node.js applications benefit from caching, clustering, and other optimization techniques. These techniques can help improve the performance and scalability of Node.js applications.

The number one request we get at NodeSource is to help developers and organizations improve the performance of their Node.js applications. It’s a key reason we built our product N|Solid, to provide the visibility and insights to help identify and resolve issues fast without adding overhead like other APMs (NodeSource Benchmark Tool). And why we offer Professional Services from our Node Experts to go a step further with Performance Audits and Training and Node.js Support.

Optimization techniques in Node.js

In our experience, the most common optimization techniques in Node.js are caching, minification, bundling, optimizing database queries, code splitting, using async functions, and using the Node.js cluster module. Here is a quick overview of each.:

Caching

Caching in Node.js helps improve performance by storing data in memory to be accessed quickly when needed. This helps reduce the time it takes to retrieve data from the server and helps reduce the number of requests needed to be made to the server. Caching also allows data to be stored more efficiently, which is helpful for applications with large amounts of data.

Minification

In Node.js reduces the size of code files and other resources by removing unnecessary characters, such as spaces, new lines, and comments, without altering the code’s functionality. Minifying code can help to enhance the performance of your Node.js applications by reducing download time and improving browser rendering speed.

Bundling

Is the process of combining multiple files or resources into one bundle, which typically has a smaller file size than when all files are separate. Bundling can reduce network latency as fewer requests are needed to retrieve data. It also helps improve application performance as the browser can cache a single large file instead of multiple small ones.

Optimizing database queries

In Node.js involves utilizing techniques such as indexing, query optimization, and caching to ensure that database queries are more efficient and run more quickly. Proper indexing can contribute to faster query times. In contrast, query optimization can reduce the time needed to process a query by ensuring that only the data required is requested from the database.

Code splitting

Is a technique to reduce the amount of code sent to the client when a web page is requested. Code splitting efficiently divides code into smaller bundles and only sends the necessary code to the user when needed. This helps improve web application performance, as the user only needs to download the relevant code for the requested page.

Async functions

In Node.js allow code to be run asynchronously, meaning that the code is not executed sequentially. Instead, asynchronous operations can be executed in parallel and execute operations concurrently. This allows the code to execute faster and in a more efficient way. Additionally, asynchronous functions provide better error-handling capabilities and allow greater control over the flow.

Use of the Node.js Cluster Module

The Node.js cluster module allows you to create a group of child processes (workers) that all share the same server port, making it easy to scale your application across multiple CPU cores. It also provides a powerful way to handle requests in a distributed manner and makes it easier to manage and monitor the performance of your application. The cluster also provides an API for sending messages between workers, allowing them to coordinate their activities.

In addition to these optimization techniques in Node.js, it is important to consider the best development practices in Node.js.

The best development practices in Node.js.for 2023

Img: https://xkcd.com/292/

The list includes, but is not less:

Utilizing the latest version of Node.js and ensuring it is regularly updated. For your production binaries, we recommend using our distribution packages (best maintained, documented, and most used production binaries -NodeSource Node.js Binary Distributions

Implementing modern patterns and techniques such as asynchronous programming and proper error handling.

Leveraging dependency management to reduce code complexity and ensure packages are up-to-date.

Adopting modular development practices to create easily reused and scaled components across projects.

Investing in automated testing to ensure quality and stability in the codebase.

Use security libraries to prevent common vulnerabilities and protect against data breaches.

Optimizing memory and resource usage to keep operating costs low.

And to comply with one or several of these good practices, it is essential to use an APM.

Using an Application Performance Monitoring (APM)

Using an Application Performance Monitoring (APM) tool to monitor your Node.js application lets you gain insights into application performance and identify issues quickly. Some popular APM tools for Node.js include New Relic, AppDynamics, Datadog and N|Solid. Each tool offers performance monitoring, error tracking, and real-time analytics features.

Note: Last year, we released for the community an open-source tool to compare the main APMs in Node.js; we invite you to contribute or use it in your work.

Selecting the right APM for Node.js will depend on the specific needs of your project. However (yes, we are biased 🙂), we believe N|Solid is the best APM for Node.js is the best APM for Node.js; because it provides developers with deeper insights and key integrations and adds security features no other APM can.

Conclusion:

Node.js is quickly becoming a popular choice for enterprise-level applications. With its lightweight architecture, scalability, and flexibility,
Node.js is an ideal language for businesses that need applications that can handle high traffic and complex data.
Node.js allows organizations to develop highly-customizable web applications that are secure, reliable, and perform well at scale.
Node.js also has a vibrant open-source community, allowing developers to easily find and use existing libraries and frameworks.

Are you creating a Node.js application?

Follow these simple steps:

Start by selecting a framework. Node.js has many available frameworks, such as Fastify, Hapi, or Koa. Choose the one that best fits the needs of your application.

Set up a package.json file to better manage your project’s dependencies.
Create a folder structure to organize the components of your application.
Structure your code into separate files as your application grows.
Write automated tests for your application.
Implement error handling for any unexpected issues.
Validate user input before handing it off to your application.
Utilize caching to improve performance.
Consider deploying
Use an APM and follow our diagnostic blog-post series (Remember that for Node.js, N|Solid is the recommended option 😉 ).

Good programming could help create a project exactly how you want. In NodeJS, there are so many open-source projects to take inspiration from.

— Wait for our list of projects and technologies in Node.js to keep an eye on in 2023 —

With services from a NodeJS expert company such as NodeSource, you could make the most of the technology’s robust features to achieve your web development goals. We will be happy to support you in your node.js journey!

Here are our channels to follow us and continue the conversation:
Twitter
LinkedIn
Github.
As always, the best place to contact us is via our website or [email protected].

About N|Solid

N|Solid is an augmented version of Node.js that includes additional features such as security, performance monitoring, and enhanced debugging tools. It’s an excellent option for projects that require robust debugging and performance capabilities.