Optimizing JavaScript for Better Performance

Oct 13, 2025 by miodeya.com 15 views

Optimizing JavaScript for Better Performance

In the previous task, we discussed the importance of reducing unused JavaScript to improve the performance of our web application. In this task, we will dive deeper into the suggestions provided to optimize our JavaScript code and reduce unnecessary data collection.

Suggestions to Check & Fix

1. Reduce Recorded Events

One of the most effective ways to reduce unused JavaScript is to limit the data collection. If you don't need full session replay, you can configure rrweb to capture only essential events. This will significantly reduce the size of the recorded data and improve performance.

Configure rrweb to Capture Only Essential Events

If you don't need full session replay, limit the data collection by configuring rrweb as follows:

import { record } from 'rrweb';

record({
  recordCanvas: false, // Disable recording of canvas elements (reduces size)
  emit: (event) => {
    if (event.type === 4) return; // Skip large Mutation events (optional)
  },
  ignoreClass: 'no-replay', // Exclude elements with this class from being recorded
  sampling: {
    mousemove: 100, // Reduce mousemove event frequency
    scroll: 150, // Reduce scroll event frequency
    input: 'last', // Capture only the last input value instead of every keystroke
  },
});

2. Disable Unnecessary Elements

Another way to reduce unused JavaScript is to exclude unnecessary elements from being recorded. You can do this by adding a class no-replay to the elements you don't want to record.

Disable recordCanvas (Biggest Performance Saver)

Disabling recordCanvas is the biggest performance saver. You can do this by setting recordCanvas to false in the record function:

record({
  recordCanvas: false, // Disable recording of canvas elements (reduces size)
  // ...
});

3. Reduce Frequency of Mouse, Scroll & Input Tracking

You can also reduce the frequency of mouse, scroll, and input tracking by setting the sampling property in the record function. For example, you can reduce the frequency of mousemove events to 100ms, scroll events to 150ms, and input events to the last keystroke:

record({
  sampling: {
    mousemove: 100, // Reduce mousemove event frequency
    scroll: 150, // Reduce scroll event frequency
    input: 'last', // Capture only the last input value instead of every keystroke
  },
});

4. Use rrweb-lite Instead of Full rrweb

If you don't need full replay functionality, you can switch to rrweb-snapshot (lighter version) instead of full rrweb. You can install rrweb-snapshot using npm:

npm install rrweb-snapshot

Then, replace the record function with the snapshot function:

import { snapshot } from 'rrweb-snapshot';

snapshot({
  // ...
});

This removes event playback, keeping only snapshot functionality.

5. Lazy Load rrweb

Instead of loading rrweb.js on every page, you can load it only when needed. For example, you can lazy load it when the user starts a session:

if (userWantsReplay) {
  import('rrweb').then(({ record }) => {
    record({ ignoreClass: 'no-replay' });
  });
}

JavaScript is only loaded when required.

6. Defer rrweb Loading

Finally, ensure that rrweb.js does not block page rendering by setting the defer attribute:

<script src="https://aw-fulfilment.co.uk/assets/rrweb-fc9e57ce.js" defer></script>

By following these suggestions, you can significantly reduce unused JavaScript and improve the performance of your web application.

Conclusion

Optimizing JavaScript for Better Performance

Q&A: Reducing Unused JavaScript

Q: Why is reducing unused JavaScript important?

A: Reducing unused JavaScript is important because it can significantly improve the performance of your web application. Unused JavaScript code can slow down your application, increase page load times, and even cause errors. By reducing unused JavaScript, you can improve the user experience and ensure that your application runs smoothly.

Q: What are some common causes of unused JavaScript?

A: Some common causes of unused JavaScript include:

Unused libraries and frameworks
Unnecessary code comments
Unused variables and functions
Unnecessary event listeners
Unused CSS styles

Q: How can I reduce unused JavaScript in my application?

A: To reduce unused JavaScript in your application, you can follow these steps:

Review your code and identify unused libraries and frameworks
Remove unnecessary code comments
Remove unused variables and functions
Remove unnecessary event listeners
Remove unused CSS styles

Q: What is rrweb and how can I use it to reduce unused JavaScript?

A: rrweb is a JavaScript library that allows you to record and replay user interactions on your web application. You can use rrweb to reduce unused JavaScript by configuring it to capture only essential events and disabling unnecessary elements.

Q: How can I configure rrweb to capture only essential events?

A: To configure rrweb to capture only essential events, you can use the record function and set the recordCanvas property to false. You can also set the sampling property to reduce the frequency of mouse, scroll, and input tracking.

Q: How can I disable unnecessary elements in rrweb?

A: To disable unnecessary elements in rrweb, you can add a class no-replay to the elements you don't want to record.

Q: What is rrweb-lite and how can I use it to reduce unused JavaScript?

A: rrweb-lite is a lighter version of rrweb that only captures snapshots of user interactions. You can use rrweb-lite to reduce unused JavaScript by installing it using npm and replacing the record function with the snapshot function.

Q: How can I lazy load rrweb to reduce unused JavaScript?

A: To lazy load rrweb, you can use the import function and load rrweb only when the user starts a session.

Q: How can I defer rrweb loading to reduce unused JavaScript?

A: To defer rrweb loading, you can set the defer attribute on the script tag that loads rrweb.

Conclusion

Reducing unused JavaScript is a crucial step in improving the performance of your web application. By following the suggestions provided in this article, you can significantly reduce the size of the recorded data and improve performance. Remember to always test and optimize your JavaScript code to ensure the best possible performance for your users.

Additional Resources

Task Checklist

Review code and identify unused libraries and frameworks
Remove unnecessary code comments
Remove unused variables and functions
Remove unnecessary event listeners
Remove unused CSS styles
Configure rrweb to capture only essential events
Disable unnecessary elements in rrweb
Use rrweb-lite instead of full rrweb
Lazy load rrweb
Defer rrweb loading