AI Prompt for Frontend Load Speed

Speed up frontend loading with this AI prompt: Core Web Vitals triage, image and bundle fixes ranked by ROI, and CI-enforced performance budgets.

The prompt

Role: You are a web performance expert who optimizes for Core Web Vitals and real user experience.

Context: Stack: [STACK]. Measurements: [MEASUREMENTS: LCP/INP/CLS, bundle size, key assets].

Relevant code/config:
[CODE_OR_CONFIG]

Task: 1) Triage by Core Web Vitals impact: what is hurting LCP, INP, CLS most, in order. 2) Provide fixes ranked by ROI: image optimization (formats, sizing, lazy), bundle splitting and tree-shaking, render-blocking resources, font loading, caching headers. 3) Give concrete code/config changes for the top 3. 4) Define the performance BUDGET (bundle KB, LCP target) and how to enforce it in CI.

Format: Triage first, then the ROI-ranked fix list, then concrete changes for the top 3, then the budget + CI enforcement.

Ask the AI to prioritize the fixes into 'this sprint' versus 'next quarter' buckets with the expected metric lift for each. Performance roadmaps need sequencing, not just a list.

Constraints: Prioritize by measured impact, not by fashion. Every fix must move a specific metric — state which. No fix that degrades UX to game the metric.

Variables to fill in

Replace each [variable] in the prompt with your own details:

[STACK] [MEASUREMENTS] [CODE_OR_CONFIG]

Example input

STACK=React SPA, SYMPTOM=LCP 4.8s on 4G, largest=image hero 2MB, BUNDLE=1.2MB JS, TOOLS=Lighthouse report pasted

How to use this prompt

Paste the Lighthouse/WebPageTest numbers — the metrics prioritize the fixes. Name the biggest assets; they are usually the problem.

Tips for the best results

Images are the #1 win on most sites — check formats and sizes first.
Ask for the CI budget enforcement; performance regresses without guardrails.
Measure on real 4G throttling, not your office wifi.

Frequently asked questions

What matters most for load speed?

It triages by Core Web Vitals impact (LCP, INP, CLS) and gives the highest-ROI fixes first — images and bundles usually win.

What is the single biggest frontend win?

Usually images — format, sizing, and lazy loading. The prompt triages by measured impact, so your biggest win is identified, not assumed.

Related SlickCalcs tools

Scientific Calculator

More coding prompts

AI Prompt for REST-to-GraphQL

Convert REST to GraphQL with this AI prompt: client-driven schema design, N+1-safe resolvers with batching, and a reversible strangler migration plan.

AI Prompt for Structure Trade-offs

Compare data structures head-to-head with this AI prompt: trade-off matrix on your workload, cache and memory analysis, and a conditional winner.

AI Prompt for Sync-to-Async Conversion

Convert sync code to async with this AI prompt: correct async/await conversion, independent calls parallelized, and every semantic change flagged.

AI Prompt for SQL-to-ORM Conversion

Convert raw SQL to ORM code with this AI prompt: idiomatic queries for your ORM, N+1 risks flagged, and guidance on what should stay raw SQL.

AI Prompt for Storage Decisions

Decide where data lives with this AI prompt: database vs cache vs memory analysis on durability, latency, size, and operational cost trade-offs.

AI Prompt for Commits from Diffs

Generate commit messages from diffs with this AI prompt: intent inferred with confidence levels, conventional formatting, and smart split suggestions.