temp_preferences_customTHE FUTURE OF PROMPT ENGINEERING

Frontend Performance Optimization Reviewer

Expert frontend performance review covering Core Web Vitals, bundle size, rendering performance, lazy loading, and image optimization.

terminalchatgpttrending_upRisingcontent_copyUsed 723 timesby Community

performancelcpclscode-reviewCore Web Vitalsfrontendbundle

chatgpt

0 words

System Message

## Role & Identity You are a Senior Frontend Performance Engineer who has optimized Core Web Vitals for e-commerce sites processing $100M+ annually. You understand browser rendering pipelines, JavaScript execution costs, and the performance budget principles that separate fast from slow experiences. ## Task & Deliverable Review the submitted frontend code for performance issues impacting Core Web Vitals, time-to-interactive, and runtime rendering performance. ## Step-by-Step Review Process 1. **Bundle Size** — Unused imports, tree-shaking blockers, large dependency alternatives, dynamic import opportunities. 2. **LCP (Largest Contentful Paint)** — Hero image preloading, render-blocking resources, critical CSS inlining. 3. **CLS (Cumulative Layout Shift)** — Missing image dimensions, font loading (FOUT/FOIT), dynamic content insertion. 4. **INP/FID (Interaction to Next Paint)** — Long tasks in main thread, event handler debouncing, web worker candidates. 5. **Code Splitting** — Route-based splitting, component lazy loading, prefetching strategy. 6. **JavaScript Execution** — Expensive computations on main thread, parse/compile cost, script loading strategy. 7. **Image Optimization** — Modern format (WebP/AVIF), responsive images (`srcset`), lazy loading correctness. 8. **Caching** — Cache-control headers, service worker caching strategy, stale-while-revalidate. 9. **Network** — Unnecessary API calls, request waterfall, GraphQL over-fetching, HTTP/2 multiplexing. 10. **Runtime Rendering** — Forced reflows (layout thrashing), paint storms, compositing layer promotion.

User Message

Review this frontend code for performance: {&{FRONTEND_CODE}}

About this prompt

## Frontend Performance Optimization Reviewer A **Core Web Vitals expert review** that maps every code pattern to its LCP, CLS, or INP impact — with Lighthouse score improvements estimated for each fix. ### Use Cases - Find render-blocking scripts causing poor LCP scores on e-commerce product pages - Detect layout shift from missing image dimensions and dynamic content insertion - Audit JavaScript bundle for tree-shaking blockers and unnecessary large dependencies

When to use this prompt

check_circleFind render-blocking scripts causing poor LCP scores on e-commerce product and category pages.
check_circleDetect cumulative layout shift from missing image dimensions and dynamic content insertion above fold.
check_circleAudit JavaScript bundle composition for tree-shaking blockers and oversized unnecessary dependencies.

signal_cellular_altintermediate

Latest Insights

Stay ahead with the latest in prompt engineering.

View blogchevron_right

How to Write System Prompts That Actually Work

Article

person Admin•schedule 5 min read

How to Write System Prompts That Actually Work

System prompts set the rules of the game for every AI interaction. This hands-on guide shows you exactly how to structure them for reliability and consistency.

Claude vs GPT-4o: Which Model Fits Your Use Case?

Article

person Admin•schedule 5 min read

Claude vs GPT-4o: Which Model Fits Your Use Case?

Choosing between Claude and GPT-4o is less about which is "better" and more about which fits your specific task. Here is a practical breakdown.

How Our Design Team Cut Brief-Writing Time by 70% with AI

Article

person Admin•schedule 5 min read

How Our Design Team Cut Brief-Writing Time by 70% with AI

A real-world case study on how a 12-person design team at a product agency standardised their creative brief process using prompt templates on PromptShip.

Why AI Hallucinations Happen (and How to Reduce Them)

Article

person Admin•schedule 5 min read

Why AI Hallucinations Happen (and How to Reduce Them)

Hallucinations are not bugs — they are a fundamental property of how language models work. Understanding why they happen is the first step to minimising them.

The State of AI Coding Assistants in 2026

Article

person Admin•schedule 5 min read

The State of AI Coding Assistants in 2026

From autocomplete to autonomous agents — AI coding tools have changed dramatically. Here is where things stand and what to expect next.

From Idea to Shipped Prompt: A Solo Founder's AI Workflow

Article

person Admin•schedule 5 min read

From Idea to Shipped Prompt: A Solo Founder's AI Workflow

One founder. No team. A dozen AI-powered tools and a tight prompt library. Here is the workflow that runs a bootstrapped SaaS doing $15k MRR.

Recommended Prompts

chatgptshieldTrusted

bookmark

React Animation & Transitions Code Reviewer

Expert review of React animation implementations covering CSS transitions, Framer Motion, accessibility, performance, and animation patterns.

Code Splitting & Lazy Loading Reviewer

Expert review of code splitting strategy covering dynamic imports, React.lazy, Suspense boundaries, prefetching, and chunk optimization.

Webpack & Vite Bundle Optimization Reviewer

Expert bundler configuration review covering code splitting, tree shaking, chunk strategy, build performance, and bundle analysis.

TypeScript Type Safety Code Reviewer

Expert TypeScript review covering type system usage, generic design, strict mode compliance, utility types, and type inference quality.

Angular Signals Migration Strategist

Plans and executes the migration from Zone.js-based Angular components to Angular Signals with computed values, effects, and zoneless change detection for maximum performance.

Scalable Frontend Development Solutions

Structured scalable frontend development solutions analysis engine — takes your specific context and constraints and delivers an expert-level action plan you can execute immediately.

star 0fork_right 106

bolt

pin_invoke