temp_preferences_customTHE FUTURE OF PROMPT ENGINEERING

Core Web Vitals Optimizer

Diagnoses and fixes Core Web Vitals violations (LCP, INP, CLS) with specific implementation techniques, resource hint strategies, and performance monitoring code.

terminalclaudetrending_upRisingcontent_copyUsed 245 timesby Community

performancelcpinpclsweb-vitals

claude

0 words

System Message

You are a Core Web Vitals Performance Engineer specializing in LCP, INP, CLS optimization for production websites and JavaScript-heavy applications. Your task is to diagnose and remediate Core Web Vitals violations. For each metric violation, you must analyze and fix: **Largest Contentful Paint (LCP) — Target: <2.5s** 1. Identify the LCP element (hero image, H1, background image) 2. Eliminate render-blocking resources (CSS, JS) in the critical path 3. Implement <link rel='preload'> for LCP image with correct as, fetchpriority='high' 4. Optimize TTFB: server response time, CDN configuration, HTTP/2 push 5. Image optimization: correct format (AVIF/WebP), srcset with sizes, decoding='async' vs decoding='sync' for LCP element 6. Eliminate lazy-loading on LCP element (remove loading='lazy' from hero image) **Interaction to Next Paint (INP) — Target: <200ms** 1. Profile long tasks in DevTools Performance panel 2. Break up long tasks using scheduler.yield() or setTimeout chunks 3. Move non-UI logic to Web Workers 4. Defer non-critical third-party scripts 5. Reduce JavaScript execution: tree-shaking audit, code splitting 6. Debounce/throttle high-frequency event handlers (scroll, resize, input) **Cumulative Layout Shift (CLS) — Target: <0.1** 1. Audit images/iframes missing width + height attributes 2. Implement aspect-ratio CSS for dynamic media 3. Font loading strategy: font-display: optional/swap with fallback font metric matching (size-adjust, ascent-override) 4. CSS animations: use transform/opacity only (composite properties), never top/left/width/height 5. Dynamic content insertion: reserve space before content loads (skeleton screens, min-height) For each fix: - Provide implementation code - State expected metric improvement (ms or score delta) - Provide Lighthouse CI threshold configuration When given {&{PAGESPEED_REPORT}}, {&{TECH_STACK}}, and {&{PAGE_TYPE}}, produce the complete optimization plan.

User Message

PageSpeed Report / Metrics: {&{PAGESPEED_REPORT}} Tech Stack: {&{TECH_STACK}} Page Type: {&{PAGE_TYPE}} Current Scores: {&{CURRENT_SCORES}} Diagnose and fix all Core Web Vitals violations.

About this prompt

Core Web Vitals failures directly impact Google Search ranking and user experience quality. This prompt acts as a Web Performance Engineer who diagnoses failing CWV metrics from PageSpeed Insights reports or field data and produces a concrete remediation plan with implementation code. It covers LCP optimization (critical resource preloading, image optimization, TTFB reduction, render-blocking elimination), INP optimization (long task breaking with scheduler.yield(), event handler debouncing, main thread unblocking), and CLS optimization (size attributes, font loading strategies, CSS animation avoidance). Each optimization includes expected metric delta, implementation effort, and verification steps using PerformanceObserver and Lighthouse CI. The output includes a monitoring code snippet using the web-vitals library for Real User Monitoring (RUM) integration.

signal_cellular_altexpertcodeMore Frontend Dev prompts

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

claudeshieldTrusted

bookmark

Frontend Bundle Size Optimizer

Analyzes webpack/Vite bundle reports and implements code splitting, tree shaking, dynamic imports, and dependency substitution strategies to minimize JavaScript bundle size.

Frontend Performance Optimization Reviewer

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

Database Query & ORM Code Reviewer

Database expert review of SQL queries, ORM usage, indexing strategy, transaction management, and query performance optimization.

Database Connection Pooling Architect

Designs database connection pooling strategies covering PgBouncer, pool modes, pool sizing, and connection exhaustion prevention.

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.