AgenticFor DevelopersMobile & Frontend Development

Frontend Performance Optimiser.

When a web app feels slow, Lighthouse scores are poor, or users are reporting sluggish interactions.

ChatGPT Β· Claude Β· GeminiΒ·AdvancedΒ·~1750 tokens
Curated by the AIPP team
Last updated 14 May 2026 Β· v3
frontend-performance-optimiser-4.md Β· 1750 words
You are a senior {{role}} brought in to help a developer or tech professional complete a {{use_case}} task.

# Context
- Pack: Developers & Tech Professionals
- Category: Mobile & Frontend Development
- Use case: Frontend Performance Optimiser
- Source task:
  - Diagnose and fix performance issues for a {{framework}} application. Symptoms: {{describe_slow_initial_load_janky_scroll_high_memory_usage_slow_i}}.
  - Step 1: identify the most likely causes using browser DevTools analysis (LCP, CLS, FID, JS bundle size, render blocking).
  - Step 2: for each cause, provide the fix with code.
  - Step 3: implement Core Web Vitals improvements (LCP, CLS, INP).
  - Step 4: set up performance monitoring and regressions alerts.
  - Step 5: prioritise by user-perceived impact.

# Goal
Cause diagnosis by DevTools metrics, fixes with code, Core Web Vitals improvements, monitoring setup, and user-impact prioritisation.

# Constraints
- Think like an expert advisor before writing the final output.
- Ask clarifying questions only if missing information would materially change the result.
- Avoid generic filler, vague advice, and unsupported claims.
- Make the output specific, practical, and ready to use.

# Output
Cause diagnosis by DevTools metrics, fixes with code, Core Web Vitals improvements, monitoring setup, and user-impact prioritisation.

The variables to fill in

PlaceholderWhat to put thereExample
{{role}}Rolefrontend performance engineer
{{use_case}}Your specific valuefrontend performance optimiser
{{framework}}FrameworkReact
{{describe_slow_initial_load_janky_scroll_high_memory_usage_slow_i}}Describe slow initial load janky scroll high memory usage slow islow initial load

How to customize this prompt

  1. Replace each {{double-curly}} with your real context.
  2. Adjust the constraints section to match your tone β€” formal, casual, blunt.
  3. If the engagement is recurring, change the duration line to mention milestones rather than days.
  4. Run it in your tool of choice. The output should be ready to paste with at most one small edit.

When to use

When a web app feels slow, Lighthouse scores are poor, or users are reporting sluggish interactions.

PRO TIP

Image optimisation alone typically improves LCP by 30–60% β€” compress, use modern formats (WebP/AVIF), and add loading='lazy' before optimising JavaScript.

Related prompts

Structured

Technical Problem Debugger

Debug this problem systematically. Identify the root cause, explain why it is happening, provide the fix, and explain how to prevent it in future.

Structured

System Design Advisor

Design the high-level architecture for this system. Cover components, data flow, scaling strategy, and key design decisions.

Structured

No-Code Tool Selector

Recommend the best no-code or low-code tool stack for the stated goal, with implementation guidance.

Structured

Data Analysis Prompt

Design the complete analysis approach for the stated question. Include the analytical method, the steps to execute it, and the format for presenting findings.

β˜… THIS PROMPT IS IN A PACK

The Developer Toolkit Pack

250 technical prompts for code review, documentation, architecture planning, debugging, test writing, API design, and career growth β€” built by developers for developers.

Browse more prompts β†’