playbooks

home / skills / openclaw / skills / lazy-load-suggester

lazy-load-suggester skill

/skills/lxgicstudios/lazy-load-suggester

This skill helps identify which components should be lazy loaded to shrink bundles and speed up initial load times.

npx playbooks add skill openclaw/skills --skill lazy-load-suggester

Review the files below or copy the command above to add this skill to your agents.

Files (8)
SKILL.md
1.9 KB
---
name: lazy-load-suggester
description: Identify components that should be lazy loaded. Use when optimizing bundle size.
---

# Lazy Load Suggester

Not everything needs to load on first paint. This tool analyzes your components and tells you which ones should be lazy loaded for better performance.

**One command. Zero config. Just works.**

## Quick Start

```bash
npx ai-lazy-load ./src/
```

## What It Does

- Analyzes your component usage patterns
- Identifies heavy components that load upfront
- Suggests lazy loading candidates
- Provides code examples for implementation

## Usage Examples

```bash
# Analyze all components
npx ai-lazy-load ./src/

# Focus on specific directory
npx ai-lazy-load ./src/components/

# Include pages
npx ai-lazy-load ./src/pages/
```

## Best Practices

- **Lazy load routes** - users don't need all pages at once
- **Heavy components** - modals, charts, editors
- **Below the fold** - content users scroll to
- **Keep critical path small** - load what's visible first

## When to Use This

- Initial bundle is too large
- Time to interactive is slow
- Adding code splitting to existing app
- Optimizing specific user flows

## Part of the LXGIC Dev Toolkit

This is one of 110+ free developer tools built by LXGIC Studios. No paywalls, no sign-ups, no API keys on free tiers. Just tools that work.

**Find more:**
- GitHub: https://github.com/LXGIC-Studios
- Twitter: https://x.com/lxgicstudios
- Substack: https://lxgicstudios.substack.com
- Website: https://lxgic.dev

## Requirements

No install needed. Just run with npx. Node.js 18+ recommended. Needs OPENAI_API_KEY environment variable.

```bash
npx ai-lazy-load --help
```

## How It Works

Scans your components to understand import relationships and component sizes. The AI identifies components that aren't needed immediately and would benefit from lazy loading.

## License

MIT. Free forever. Use it however you want.

Overview

This skill scans a codebase and recommends UI components and routes that should be lazy loaded to reduce initial bundle size and improve time-to-interactive. It runs with a single command and requires no configuration, giving actionable suggestions and code snippets to implement lazy loading quickly. Designed for frontend projects where reducing upfront payloads yields measurable performance gains.

How this skill works

The tool analyzes import graphs, component sizes, and usage patterns to find components that load on first paint but are not immediately needed. It flags heavy or below-the-fold components, routes, and rare-use features, then generates specific lazy-loading suggestions and example code. It can target directories, pages, or the entire src tree and provides human-friendly rationale for each recommendation.

When to use it

  • When your initial bundle size is larger than desired
  • If time-to-interactive or first contentful paint is slow
  • Before introducing code splitting or after adding new heavy components
  • When preparing a performance audit or optimizing user flows
  • When you want quick, no-config suggestions across a project

Best practices

  • Lazy load entire routes and non-critical pages to keep the critical path small
  • Defer heavy components like charts, editors, and large third-party widgets
  • Lazy load below-the-fold content that users don’t see on first paint
  • Provide fallbacks or skeletons to avoid layout shifts during lazy loading
  • Measure impact with bundle analysis and real-user metrics after changes

Example use cases

  • Scan ./src/ to get a prioritized list of lazy-loading candidates for a React app
  • Focus analysis on ./src/components/ to find heavy UI pieces like modals and editors
  • Target ./src/pages/ to convert synchronous page imports to route-based code splitting
  • Quickly prepare suggestions before a major performance refactor or release
  • Identify rarely used features that can be deferred until user interaction

FAQ

Does it require configuration?

No configuration is required; run the CLI against a directory and it analyzes imports and sizes automatically.

What runtimes are supported?

It is built for Node.js environments (Node 18+ recommended) and targets typical frontend projects using ES imports or frameworks like React.