explainx.ai
Performanceprompt onlyIntermediate

Frontend Speed Optimizer

Automatically improves frontend page speed by iteratively analyzing Lighthouse reports and applying targeted optimizations. This loop runs until your target Lighthouse performance score is achieved.

← all loops
performancelighthousefrontendoptimizationspeedseoux

Goal

Improve page speed to reach target Lighthouse score

How to Run

Provide the URL to optimize and target Lighthouse score. The agent will run checks, identify bottlenecks, and apply fixes iteratively.

  1. 01

    Initiate Optimization Session

    Start by providing the target URL and desired Lighthouse performance score (e.g., 90).

  2. 02

    Review Changes

    After each iteration, review the applied changes and Lighthouse results to ensure improvements and no regressions.

  3. 03

    Adjust Strategy if Needed

    If the target isn't met after 10 iterations, consider manual intervention or extending the loop with adjusted priorities.

Workflow Steps

  1. 01

    Run Lighthouse Audit

    Execute Lighthouse on the target URL to generate current performance metrics and identify bottlenecks.

  2. 02

    Analyze Audit Report

    Parse Lighthouse output to extract prioritized opportunities (e.g., unused JS, unoptimized images, render-blocking resources).

  3. 03

    Implement High-Impact Fixes

    Apply one or more top-priority optimizations such as code splitting, lazy loading, or asset compression.

  4. 04

    Verify Improvements

    Re-run Lighthouse to measure impact. Continue loop if target score not yet achieved.

Kickoff Prompt

Start the "Frontend Speed Optimizer" loop.

Goal: Improve page speed to reach target Lighthouse score
Max iterations: 10
Between iterations run: lighthouse
Exit when: Lighthouse target reached


I want to optimize the frontend performance of my website. Please run Lighthouse on the provided URL and target a final performance score of 90. Identify the top 3 opportunities from the initial audit and implement them. After each change, re-run Lighthouse to verify progress. Stop once the target score is reached or after 10 attempts.

Self-pace this loop. After each iteration, run `lighthouse` and evaluate the output, and only continue if the exit condition is not met (Lighthouse target reached). Stop when the exit condition passes or 10 iterations are reached. Give a short status update each pass.

Guardrails

hardcoded
  • ·Preserve core user functionality and visual design integrity throughout optimizations.
  • ·Prioritize Lighthouse-recommended high-impact fixes (e.g., image optimization, JS minification).
  • ·Avoid breaking changes—always test in staging before deploying.
  • ·Do not exceed 10 optimization iterations unless explicitly extended.
  • ·Focus only on frontend assets and code; backend optimizations are out of scope.

Flow Diagram

rendering…

Related loops — Performance

Performance

Bundle Size Reducer

Iteratively reduces JavaScript bundle size by analyzing dependencies, identifying large modules, and applying targeted optimizations until a specified size target is met.

Performance

Slow Endpoint Hunter

This loop identifies and optimizes slow API endpoints by continuously benchmarking, analyzing performance bottlenecks, and applying targeted improvements until response times meet predefined budgets.

Performance

Database Latency Reducer

An automated loop designed to systematically identify and resolve database performance bottlenecks to reduce query response times. This agent analyzes execution plans, optimizes slow queries, and applies indexing strategies while maintaining data integrity and safety.