html-size-optimizer

name	html-size-optimizer
description	Shrink first-byte HTML and embedded payloads: trim framework state scripts (Fresh/Next), event data attributes, JSON-LD bloat, and duplicate responsive markup so the client receives less markup and JSON.

1. JSON data for the framework

Many frameworks inject large JSON payloads into the HTML, for example:

<script id="__FRSH_STATE_">{}</script>
<script id="__NEXT_DATA__" type="application/json" crossorigin="">{}</script>

What to do: Reduce JavaScript sent to the client. Pass only the props that client components need.

---

2. JSON data for events

Sites sometimes store event-related data in the HTML:

<div data-event="%7B%7D"></div>

What to do: Send only the data that will actually be used.

---

3. JSON for SEO structured data

<script type="application/ld+json">{
  "@context": "https://schema.org",
  "@graph": []
}</script>

What to do: Include only the structured data that is valid and used; avoid large or redundant objects.

---

4. Hidden elements for responsiveness

Sites sometimes hide whole blocks per breakpoint, doubling (or more) the HTML:

<header class="hidden md:block">a lot of HTML</header>
<header class="block md:hidden">a lot of HTML</header>

What to do: Serve only the HTML needed for the requesting device (e.g. split or choose on the server).