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

Nguyen Tran Chau Giang — Mon, 10 Nov 2025 14:49:44 +0000

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

Here’s what I did:

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.
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.
For static content such as iframes, images, and SVGs, I enabled lazy loading.
Whenever possible, I use the WebP format for images.
Handle loading embedded iframes, images, audio, ... only when necessary - for example, only when an accordion item is expanded or a tab becomes active.
Avoid loading third-party scripts or unnecessary external content.
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.

Day 01 - 100 days of CSS battle

Nguyen Tran Chau Giang — Tue, 07 Oct 2025 10:05:00 +0000

Play the challenge

My solution

100% match, 118 characters

<p><style>*{background:var(--m,#588A95);*{width:140;height:140;margin:20%auto;--m:#222;*{--m:#fff;transform:skew(45deg

Explanation:

Make sure you understand the CSSBattle environment
The ungolfed version looks like this:

<style>
* {
  background: var(--m, #588A95);
  * {
    width: 140px;
    height: 140px;
    margin: 20% auto;
    --m: #222;
    * {
      --m: #fff;
      transform: skew(45deg);
    }
  }
}
</style>
<p></p>

Syntax Overview

The syntax:

* {
  * {
    * {
    }
  }
}

is called CSS nesting

Understanding Nested CSS Example

In this case, it is the same as:

html {}
body {}
p {}

Instead of writing:

html {
  background-color: var(--m, #588A95);
}

body {
  width: 140px;
  height: 140px;
  margin: 20% auto;
  background-color: var(--m, #222);
}

Since they share the same background-color property, we can do something like:

html {
  background-color: var(--m, #588A95);
  body {
    width: 140px;
    height: 140px;
    margin: 20% auto;
    --m: #222;
  }
}

Here, the body element inherits the background-color from html, but it can also define its own background color value (#222).

Step-by-Step Breakdown

1. First Level

* { 
  background-color: var(--m, #588A95);
}

The * selector here matches the html, body and p element.
This styles the html, body, and pelements with a background color set to the variable --m, or #588A95 if --m is not defined.

2. Second Level

* {
  width: 140px;
  height: 140px;
  margin: 20% auto;
  --m: #222;
}

At this level:

The * selector here matches the body and p element.
The width and height of body and p are set to 140px.
The elements are centered horizontally with margin: 20% auto.
The variable --m is now defined as #222, which will be used as the background color for these elements.

3. Third Level

* { 
  --m: #fff;
  transform: skew(45deg);
}

Finally:

The * selector here matches the p element.

The --m variable is updated to #fff, so the p element now has a white background.

The element is also transformed with a 45-degree skew.

✅ Summary:
This nested structure allows each level of the cascade (html → body → p) to inherit and override the CSS variable --m, resulting in a layered color change and transformation effect.

Top 10 solutions (maximum 110 characters):

1. Ilya Streltsyn

<style>*{background:#588A95;color:#222;outline:solid 75q;margin:37.5%50%;*{color:fff;transform:skew(45deg

2. emohdaziz

<stYle>&{background:#222;border:138Q solid#588a95;scale:1 3.5;*{background:#fff;margin:0;transform:skew(74deg

3. Mister Magoo

<p><style>*{background:var(--b,#588A95)}&>*{margin:80 130;--b:#222}p{--b:#fff;height:140;transform:skew(45deg

4. Seth Kuhn

<style>&{border:138q solid#588A95;background:#222;margin:-50 0;*{background:#fff;margin:0;transform:skew(45deg

5. Ludvig

<STYLE>&{background:#222;margin:-50 0;border:138q solid#588A95;*{background:#FFF;margin:0;transform:skew(45deg

6. H_Bliertz

<p><stylE>&{margin:142 192;*{background:#588A95;outline:solid 75q;color:#222;*{color:#FFF;transform:skew(45deg

7. Martijn

<style>&{background:#222;border:138q solid#588A95;margin:-50 0;*{background:#fff;margin:0;transform:skew(45deg

8. David Eguiluz

<style>&{background:#222;border:138q solid#588a95;margin:-50 0;*{background:#fff;margin:0;transform:skew(45deg

9. Kieron

<style>&{margin:-58-8;background:#222;border:46vh solid#588a95;*{margin:0;background:#fff;transform:skew(45deg

10. Sascha Adams

<stYle>&{background:#222;border:138q solid#588A95;margin:-50 0;*{margin:0;background:#fff;transform:skew(45deg

Find all ip addresses in a project

Nguyen Tran Chau Giang — Thu, 17 Sep 2020 05:28:55 +0000

When doing a task about migration server for a project, my first thing to do is find what these external API endpoint (usually it comes with ip address like

10.10.0.1
123.123.123.123

To find all ip address in a project we can use grep command from root project directory:

 grep -r -oE "([0-9]{1,3}\.){3}[0-9]{1,3}" .

You can also exclude directory when using grep, example:

 grep -r --exclude-dir=node_modules -oE "([0-9]{1,3}\.){3}[0-9]{1,3}" .

Forem: Nguyen Tran Chau Giang