1Convierta todos los scripts no críticos a asíncronos/diferidos para eliminar los recursos que bloquean el procesamiento
2Agregue carga = "lazy" a las imágenes de la mitad inferior de la página para mejorar la carga inicial de la página.
3Convierta imágenes a formato WebP o AVIF para reducir el tamaño del archivo entre un 30 y un 50 %.
4Utilice los atributos srcset y tamaños en las imágenes para ofrecer imágenes del tamaño adecuado por dispositivo
5Agregue ancho y alto explícitos a todas las imágenes para evitar el cambio de diseño acumulativo (CLS)
6Agregue <link rel="preconnect"> para dominios críticos de terceros para reducir el tiempo de búsqueda de DNS
7Precargue recursos críticos (fuentes, imágenes destacadas) con <link rel="preload">
8Agregar visualización de fuentes: cambie a declaraciones de fuentes web para mostrar texto alternativo mientras se cargan las fuentes
9Establezca encabezados de Cache-Control con la edad máxima adecuada para aprovechar el almacenamiento en caché del navegador
10Extraiga estilos en línea en archivos CSS externos para mejorar el almacenamiento en caché y el mantenimiento
11Mover scripts en línea a archivos externos con atributos de aplazamiento
12Reduzca la carga útil de CSS con PurgeCSS, estilos no utilizados que sacuden los árboles y líneas de CSS críticas. Apunte a <200 KB de CSS total
13Reduzca JavaScript con división de código, agitación de árboles y carga diferida. Objetivo <500 KB JS total para un rendimiento óptimo
14Reduzca los enlaces por página para mejorar el rendimiento del análisis DOM y reducir el uso de memoria
15Actualice a HTTP/2 o HTTP/3 para una carga paralela de recursos y compresión de encabezados más rápida
16Utilice una red de entrega de contenido (CDN) como Cloudflare, CloudFront o Fastly para reducir la latencia global
17Agregue sugerencias de preconexión, captación previa y carga previa para fuentes y recursos críticos de terceros
18Reduzca el CSS que bloquea el procesamiento incorporando CSS crítico, utilizando consultas de medios en hojas de estilo no críticas y cargando CSS no crítico de forma asincrónica.
19Reduzca el tamaño del paquete CSS con PurgeCSS/tree-shaking. Apunte a <200 KB de CSS total
20Reduzca el paquete JS con división de código, agitación de árboles e importaciones dinámicas. Objetivo <500 KB JS inicial
21Revise scripts en línea/externos de gran tamaño que puedan bloquear el hilo principal. Utilice trabajadores web o divídalos en fragmentos asíncronos más pequeños
22Problema crítico de LCP: precargue la imagen de LCP con fetchpriority="high", CSS crítico en línea, reduzca el tiempo de respuesta del servidor, elimine los scripts que bloquean el procesamiento
23Reduzca CLS: establezca dimensiones de imagen, precargue fuentes web, reserve espacio para anuncios y contenido dinámico
24Mejore INP: divida tareas largas de JavaScript, utilice trabajadores web para cálculos pesados, evite los controladores de entrada
25Actualice los análisis: agregue Google Tag Manager para una implementación flexible de etiquetas y configure eventos personalizados (envíos de formularios, clics en CTA, profundidad de desplazamiento)
26Reduzca el número de nodos DOM a menos de ~1500 simplificando el marcado y paginando listas largas (mejor práctica de Lighthouse) [Impacto: Medio | Esfuerzo: Medio]
27Minimice JavaScript para reducir el tiempo de análisis y transferencia [Impacto: Bajo | Esfuerzo: Bajo]
28Establezca un encabezado Cache-Control con una edad máxima adecuada (e inmutable para activos versionados) para habilitar el almacenamiento en caché del navegador [Impacto: Medio | Esfuerzo: Bajo]
29Agregue atributos de ancho y alto (o relación de aspecto CSS) a cada imagen para reservar espacio y evitar cambios en el diseño [Impacto: Medio | Esfuerzo: Bajo]
30Rendimiento: no se detectó ninguna API de reglas de especulación. Agregue <script type="speculationrules"> para prerenderizar/precargar las próximas navegaciones probables para transiciones de página casi instantáneas.
31Rendimiento (LCP): ninguna imagen declara fetchpriority="high". Marque la imagen principal de LCP con fetchpriority="high" para que el navegador le dé prioridad durante la carga inicial.
32Rendimiento: solo 0/22 imágenes configuradas decodificación="async". Agregue decoding="async" a imágenes no críticas para mantener la decodificación de imágenes fuera del hilo principal.
33Rendimiento: los módulos ES se utilizan sin precarga de módulo. Agregue <link rel="modulepreload"> para módulos críticos para eliminar la latencia en cascada en los gráficos del módulo.