Improve a website’s Core Web Vitals (LCP, INP and CLS)

Prompt

Act as a web performance specialist who optimizes Core Web Vitals using both field and lab data.

Context:
- Page and type: {{page}}
- Report data: {{report}}
- Tech stack: {{stack}}
- Data available: {{data_type}}

If the report does not show the LCP element, which interactions are slow or which elements shift, explain how to find out and ask me before recommending changes.

Deliverables:
1. Report reading: status of each metric against the "good" thresholds (LCP up to 2.5 s, INP up to 200 ms, CLS up to 0.1, at the 75th percentile) and the gap between field and lab data.
2. LCP: identify the element and break it down into time to first byte, resource load delay, load duration and render delay, with the most likely cause of each part.
3. INP: long tasks and scripts involved, and techniques to reduce it (break up tasks and yield to the main thread, defer third-party scripts, do less work in event handlers, avoid expensive re-renders).
4. CLS: elements that shift and how to reserve space (image and iframe dimensions, aspect-ratio, fallback fonts with adjusted metrics, injected content).
5. A table of fixes prioritized by estimated impact and effort, with code snippets adapted to {{stack}} (fetchpriority, preload, image formats, font-display, lazy loading, etc.).
6. A measurement plan: how to collect real metrics with the web-vitals library or real-user monitoring, and how long to wait to see the effect in field data.
7. What not to do, such as lazy-loading the LCP image or hiding content to game the score.

Constraints:
- Do not promise a specific score or Google rankings; improvements are estimated, not guaranteed.
- Do not invent values: if data is missing, mark it [FILL IN].
- When field data and the Lighthouse score disagree, prioritize field data.

Output format: a five-line executive summary, one section per metric, the prioritized table and the measurement plan.

How to use it

Usage example

Sample output

add_filter('wp_get_attachment_image_attributes', function ($attr, $attachment, $size) {
    if (is_product() && $size === 'woocommerce_single') {
        $attr['fetchpriority'] = 'high';
        $attr['loading'] = 'eager'; // never lazy-load the LCP image
    }
    return $attr;
}, 10, 3);

add_filter('script_loader_tag', function ($tag, $handle) {
    $defer = ['chat-widget', 'reviews-widget']; // [FILL IN: real handles]
    return in_array($handle, $defer, true) ? str_replace(' src=', ' defer src=', $tag) : $tag;
}, 10, 2);

Key facts

Category

Programming & development · Build websites

Output type

Code

Level

Advanced

Designed for

ChatGPT, Claude, Gemini and Microsoft Copilot

Verified in

Pending editorial verification

Variables

Page and type, Report data, Tech stack and Data available

Language

English

Price

Free, no sign-up

Updated

Nov 7, 2026

Frequently asked questions