How I Reduced My Site’s Browser Memory Usage by 67% (450 MB 150 MB)

I have successfully reduced the browser memory usage for my simple tutorial site from 450 MB to 150 MB.

Here’s what I did:

1. Since I’m using Next.js, I worked with AI to separate which components run on the server and which run on the client. The development server showed incredible improvement, dropping from 1.5 GB to around 200 MB, and in production from 450 MB to 150 MB.

2. svgo.dev is like a Swiss army knife. I use a lot of SVGs on my site, and this tool helped reduce their size, which improved loading speed and saved bandwidth.

3. For static content such as iframes, images, and SVGs, I enabled lazy loading.

4. Whenever possible, I use the WebP format for images.

5. Handle loading embedded iframes, images, audio, ... only when necessary - for example, only when an accordion item is expanded or a tab becomes active.

6. Avoid loading third-party scripts or unnecessary external content.

7. Cloudflare has become one of my best friends about caching and hosting. It costs me $0 to run my site with around 50+ daily users.

---