Mejorar las Core Web Vitals de una web (LCP, INP y CLS)

Prompt

Actúa como especialista en rendimiento web que optimiza las Core Web Vitals con datos de campo y de laboratorio.

Contexto:
- Página y tipo: {{pagina}}
- Datos del informe: {{informe}}
- Stack técnico: {{stack}}
- Tipo de datos disponibles: {{tipo_datos}}

Si el informe no indica cuál es el elemento LCP, qué interacciones son lentas o qué elementos se desplazan, explícame cómo obtenerlo y pregúntamelo antes de recomendar cambios.

Entregables:
1. Lectura del informe: estado de cada métrica frente a los umbrales de «bueno» (LCP hasta 2,5 s, INP hasta 200 ms, CLS hasta 0,1, en el percentil 75) y diferencia entre datos de campo y de laboratorio.
2. LCP: identificación del elemento y desglose en tiempo hasta el primer byte, retraso de carga del recurso, duración de la carga y retraso de renderizado, con la causa más probable de cada parte.
3. INP: tareas largas y scripts implicados, y técnicas para reducirlo (dividir tareas y ceder el hilo principal, aplazar scripts de terceros, reducir el trabajo en los manejadores de eventos, evitar re-renders costosos).
4. CLS: elementos que se desplazan y cómo reservar espacio (dimensiones de imágenes e iframes, aspect-ratio, fuentes con métricas de respaldo ajustadas, contenido inyectado).
5. Tabla de correcciones priorizadas por impacto estimado y esfuerzo, con fragmentos de código adaptados a {{stack}} (fetchpriority, preload, formatos de imagen, font-display, carga diferida, etc.).
6. Plan de medición: cómo registrar las métricas reales con la librería web-vitals o con los datos de usuarios reales, y cuánto esperar para ver el efecto en los datos de campo.
7. Lo que no conviene hacer, como cargar en diferido la imagen LCP u ocultar contenido para mejorar la puntuación.

Restricciones:
- No prometas una puntuación concreta ni posiciones en Google; las mejoras se estiman, no se garantizan.
- No inventes valores: si falta un dato, márcalo con [COMPLETAR].
- Prioriza los datos de campo sobre la puntuación de Lighthouse cuando no coincidan.

Formato: resumen ejecutivo de cinco líneas, una sección por métrica, la tabla priorizada y el plan de medición.

Cómo usarlo

Ejemplo de uso

Resultado de ejemplo

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

add_filter('script_loader_tag', function ($tag, $handle) {
    $diferir = ['widget-chat', 'widget-resenas']; // [COMPLETAR: handles reales]
    return in_array($handle, $diferir, true) ? str_replace(' src=', ' defer src=', $tag) : $tag;
}, 10, 2);

Datos clave

Categoría

Programación y desarrollo · Crear páginas web

Tipo de resultado

Código

Nivel

Avanzado

Pensado para

ChatGPT, Claude, Gemini y Microsoft Copilot

Verificado en

Pendiente de verificación editorial

Variables

Página y tipo, Datos del informe, Stack técnico y Datos disponibles

Idioma

Español

Precio

Gratis, sin registro

Actualizado

07/11/2026

Preguntas frecuentes