TASK 4 - Reduce unused JavaScript - no.2

[essafaizall]

Suggestions to check & fix:

1. Reduce recorded events (skip canvas, limit scroll/input tracking)
2. Use rrweb-lite (rrweb-snapshot) instead of full rrweb
3. Lazy load rrweb when needed
4. Ensure defer is set

Follow this recommendation:

1. Configure rrweb to Capture Only Essential Events - If you don’t need full session replay, limit the data collection:

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
  },
});

Inspect and optimise this way:

• Disable recordCanvas (biggest performance saver)
• Exclude unnecessary elements with .no-replay class
• Reduce frequency of mouse, scroll & input tracking

2. Use rrweb-lite Instead of Full rrweb - If you don’t need full replay functionality, switch to rrweb-snapshot (lighter version). npm install rrweb-snapshot

Then, replace:
import { record } from 'rrweb';

with this:
import { snapshot } from 'rrweb-snapshot';
This removes event playback, keeping only snapshot functionality.

3. Instead of loading rrweb.js on every page, load it only when needed.
   For example: Lazy load it when user starts a session:

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

JavaScript is only loaded when required.

4. Defer rrweb Loading - Ensure rrweb.js does not block page rendering, like this:

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