workflows.fit
Back to exploration
EasyContributed by Community

LCP & Image Performance Optimizer

Automated Core Web Vitals audit. Analyzes LCP components, optimizes image formats, adds fetchpriority, and validates layouts.

PerformanceLCPImages
89 stars450 pulls

Orchestration Logic

Workflow Graph Visualizer
Generating visual workflow graph...

How to Use Today

1.Run Claude Code in the app directory and ask for a workflow that audits LCP only on the pages you specify.
2.Review the planned phases and make sure browser checks, image changes, and verification steps are explicit.
3.Save the finished run from /workflows; saved workflows become slash commands such as /lcp-optimizer.

Workflow Script Code

.claude/workflows/lcp-optimizer.js
// .claude/workflows/lcp-optimizer.js
import { orchestrator, agent } from 'claude';

export async function run(context) {
  // Step 1: Run lighthouse audit to find LCP elements
  const auditor = await agent.create({
    instructions: 'Analyze HTML to locate the Largest Contentful Paint element and measure current responsive sizing.'
  });
  const audit = await auditor.run();
  
  // Step 2: Implement optimizations
  const optimizer = await agent.create({
    instructions: `Optimize LCP: Set fetchpriority="high", convert target images to WebP, and add dimensions. Audit details: ${audit}`
  });
  await optimizer.run();
}

Saved Slash Command

Claude Code currently runs workflows from the interactive session. After a run is saved from /workflows, invoke it as a slash command.

$/lcp-optimizer
There is no current `claude workflow run` CLI command.

Specifications

Concurrency MaxRuntime bounded
Verification LoopsAdversarial Checks
Platform SupportClaude Code surfaces

Review Before Running

Treat community workflows as patterns. Review the raw script, planned phases, and allowed tools before approving a run in your own project.