Migliorare i Core Web Vitals di un sito (LCP, INP e CLS)

Prompt

Agisci come specialista di prestazioni web che ottimizza i Core Web Vitals con dati sul campo e di laboratorio.

Contesto:
- Pagina e tipo: {{pagina}}
- Dati del report: {{report}}
- Stack tecnico: {{stack}}
- Dati disponibili: {{tipo_dati}}

Se il report non indica l'elemento LCP, quali interazioni sono lente o quali elementi si spostano, spiegami come ottenerlo e chiedimelo prima di consigliare modifiche.

Consegna:
1. Lettura del report: stato di ogni metrica rispetto alle soglie «buono» (LCP fino a 2,5 s, INP fino a 200 ms, CLS fino a 0,1, al 75° percentile) e differenza tra dati sul campo e di laboratorio.
2. LCP: identificazione dell'elemento e scomposizione in tempo al primo byte, ritardo di caricamento della risorsa, durata del caricamento e ritardo di rendering, con la causa più probabile di ciascuna parte.
3. INP: task lunghi e script coinvolti, e tecniche per ridurlo (spezzare i task e cedere il thread principale, rinviare gli script di terze parti, ridurre il lavoro nei gestori di eventi, evitare re-render costosi).
4. CLS: elementi che si spostano e come riservare lo spazio (dimensioni di immagini e iframe, aspect-ratio, font di riserva con metriche regolate, contenuti iniettati).
5. Una tabella di correzioni ordinate per impatto stimato e sforzo, con frammenti di codice adatti a {{stack}} (fetchpriority, preload, formati immagine, font-display, caricamento differito, ecc.).
6. Un piano di misurazione: come raccogliere le metriche reali con la libreria web-vitals o con il monitoraggio degli utenti reali, e quanto attendere per vedere l'effetto sui dati sul campo.
7. Cosa non fare, come caricare in differita l'immagine LCP o nascondere contenuti per gonfiare il punteggio.

Vincoli:
- Non promettere un punteggio preciso né posizioni su Google; i miglioramenti si stimano, non si garantiscono.
- Non inventare valori: se manca un dato, segnalo con [DA COMPLETARE].
- Quando dati sul campo e punteggio Lighthouse non coincidono, dai priorità ai dati sul campo.

Formato: sintesi di cinque righe, una sezione per metrica, la tabella delle priorità e il piano di misurazione.

Come usarlo

Esempio d'uso

Esempio di risultato

add_filter('wp_get_attachment_image_attributes', function ($attr, $attachment, $size) {
    if (is_product() && $size === 'woocommerce_single') {
        $attr['fetchpriority'] = 'high';
        $attr['loading'] = 'eager'; // mai lazy loading sull'immagine LCP
    }
    return $attr;
}, 10, 3);

add_filter('script_loader_tag', function ($tag, $handle) {
    $differire = ['widget-chat', 'widget-recensioni']; // [DA COMPLETARE: handle reali]
    return in_array($handle, $differire, true) ? str_replace(' src=', ' defer src=', $tag) : $tag;
}, 10, 2);

Dati chiave

Categoria

Programmazione e sviluppo · Creare siti web

Tipo di output

Codice

Livello

Avanzato

Pensato per

ChatGPT, Claude, Gemini e Microsoft Copilot

Verificato in

In attesa di verifica editoriale

Variabili

Pagina e tipo, Dati del report, Stack tecnico e Dati disponibili

Lingua

Italiano

Prezzo

Gratuito, senza registrazione

Aggiornato

07/11/2026

Domande frequenti