Skip to content
Get packs

DOM Size Performance Audit

Audits web pages for oversized or deeply nested HTML and recommends measured fixes

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

This skill gives an AI agent a checklist for finding why a web page feels slow because its HTML structure (the DOM) is too large or too deeply nested. When it applies, the agent checks total element count and nesting depth using Lighthouse or Chrome DevTools, confirms the real bottleneck before suggesting changes, and then recommends simplifying markup, removing unnecessary wrappers, or virtualizing long lists. It is a guidance document; it does not run tools itself.

Great for

  • Front-end developers investigating sluggish pages or janky scrolling
  • Teams running Lighthouse audits who want a concrete rule to apply to reports
  • Reviewers who need a clear explanation of why a large DOM hurts performance

Skip it if

  • Simple static sites or small pages where the DOM is already well under the thresholds, since the advice would add no value
  • Situations where the agent is asked to change code without measuring first, because the skill itself warns to verify the bottleneck before recommending changes

Try asking

  • “Audit this product listing page for DOM size and tell me if it is causing slow interactions.”
  • “Check how deep the nesting goes in my React table component and suggest where to flatten it.”
  • “Explain to my team why our dashboard with 5,000 rows feels slow and whether we need virtualization.”
  • “Run a Lighthouse-style review of the DOM on this landing page and list the wrapper elements we can remove.”
Step-by-step guide: how to use DOM Size Performance AuditInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    dom-size.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip dom-size.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip dom-size.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Ask the agent to measure first with Lighthouse or DevTools and share the numbers, so recommendations are based on your actual page.
  • Give the agent the framework or component code involved so it can point to exact files and wrappers to change.
  • Treat the thresholds (1,500 nodes, depth under 32) as rules of thumb and compare against your own field data.

What's inside

  • references/rule.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.