html-size-optimizer

Trim framework state scripts, event attributes, and redundant responsive markup from HTML.

13|2|Updated Feb 24, 2026

Search Tags:#performance #html #optimization #responsive #web-performance #bundle-size

Ready to run

npx skills add https://github.com/decocms/storefront-skills --skill html-size-optimizer

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: html-size-optimizer
Source: https://github.com/decocms/storefront-skills/tree/main/.claude-performance/skills/html-size-optimizer
Command: npx skills add https://github.com/decocms/storefront-skills --skill html-size-optimizer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Shrink first-byte HTML by trimming framework state scripts (Fresh/Next), removing unnecessary data attributes, reducing bloated JSON-LD blocks, and eliminating duplicate or unused responsive markup, so pages load faster and perform better on storefronts.

Core Features & Use Cases

State/script trimming: Remove unused framework state scripts from initial HTML to reduce payload size.
Event/data cleanup: Strip data-event attributes and redundant JSON structures that bloat the HTML.
Structured data optimization: Keep only essential and valid JSON-LD blocks to minimize payload while preserving necessary semantics.
Use Case: When optimizing product and category pages, the skill helps improve First Contentful Paint (FCP) and Time to Interactive (TTI) by serving smaller HTML.

Quick Start

Run the html-size-optimizer against your storefront HTML to shrink the first-byte size and improve performance.

Frequently Asked Questions about html-size-optimizer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I reduce HTML payload size for faster storefront page loads?▼

Reduce HTML payload size by trimming framework state scripts, event attributes, and redundant responsive markup. This optimization shrinks first-byte HTML to improve First Contentful Paint and Time to Interactive on product and marketing pages.

Why does my initial HTML render time and CLS score suffer on SSR pages?▼

Initial HTML render time and CLS suffer when bloated JSON-LD blocks, unused data attributes, and framework state scripts bloat the first-byte payload. Trimming these nonessential elements while preserving lazy-loading correctness resolves the performance bottleneck.

How do I remove unused framework state scripts from Next or Fresh HTML?▼

Remove unused framework state scripts from Next or Fresh HTML by stripping nonessential markup and data-event attributes. This state and script trimming reduces payload size while maintaining necessary functionality for optional scripts.

Does HTML optimization work for both SSR and CSR setups?▼

HTML optimization works for both SSR and CSR setups across storefront product and marketing pages. It safely removes nonessential markup to preserve functionality while satisfying requirements for optional scripts and lazy-loading correctness.

What is the best way to optimize JSON-LD structured data for web performance?▼

The best way to optimize JSON-LD structured data for web performance is keeping only essential and valid blocks. This structured data optimization minimizes payload while preserving necessary semantics for faster initial render times.

When should I avoid removing responsive markup during HTML optimization?▼

You should avoid removing responsive markup during HTML optimization if it is actively used for rendering. The process targets duplicate or unused responsive markup to shrink first-byte size safely without breaking layout or functionality.