El rendimiento no es solamente una corrección técnica al final. Durante el diseño se eligen imágenes, tipografías, videos, animaciones y funciones que determinan qué necesita descargar y procesar la web. Una composición puede conservar personalidad sin exigir que cada sección tenga un recurso pesado o una interacción permanente.
La decisión útil no es “sacar todo”, sino reconocer qué aporta cada recurso y cómo se usa. Después hay que medir sobre condiciones definidas. Una prueba aislada puede orientar una revisión, pero no garantiza que todas las visitas tengan la misma experiencia ni representa una puntuación permanente del sitio.
Qué muestran los indicadores
Los Core Web Vitals incluyen LCP, INP y CLS. LCP describe cuándo aparece el contenido principal más grande en la vista; INP observa la respuesta a interacciones; CLS registra cambios inesperados de posición. Son dimensiones distintas, no formas alternativas de decir “velocidad”. web.dev documenta sus definiciones y cómo se evalúan.
En términos de uso: importa poder ver lo necesario, actuar y no perder el lugar porque la página se mueve. Un sitio puede mostrar contenido pronto y responder mal a una acción. También puede tener una carga razonable pero desplazar un botón mientras la persona intenta usarlo. Conviene identificar cuál de esas dificultades ocurre antes de elegir una mejora.
Imágenes y contenido de la primera vista
Una imagen principal grande puede tener un papel importante en la carga inicial. Hay que revisar dimensiones, formato y momento de descarga. La guía de optimización de LCP recomienda no diferir la imagen que necesita aparecer de inmediato. Las inferiores pueden tener otra estrategia según el recorrido.
Desde el diseño conviene preguntar si la imagen aporta información y si necesita ese tamaño en cada dispositivo. Una portada editorial puede ser liviana sin parecer incompleta; una captura con texto necesita legibilidad. La prioridad es servir el recurso apropiado, no imponer un mismo peso a toda la colección.
Una escala de texto no necesita muchas fuentes
La elección de familias y variantes afecta recursos y presentación. Se puede construir jerarquía con tamaño, peso y espacio sin descargar una variante para cada bloque. También hay que revisar qué ocurre antes de que la fuente esté disponible: un cambio de métricas puede modificar saltos de línea y posición de contenidos.
Conviene cargar solo lo necesario y comprobar el comportamiento de la alternativa tipográfica. La guía de buenas prácticas de fuentes explica decisiones de carga y presentación. El criterio visual sigue siendo importante: una optimización no debería hacer ilegibles títulos o acentos ni cambiar arbitrariamente la identidad del sitio.
Video y animación con una función
Un video de fondo puede aportar atmósfera, pero también competir con lectura y descarga. Antes de incorporarlo, definí qué se pierde si no se reproduce y cómo se presenta una alternativa. Si comunica información necesaria, no conviene que esa información dependa exclusivamente de la reproducción automática.
Las animaciones deberían acompañar una transición o un cambio de estado. Un efecto continuo que sigue activo fuera de la vista puede agregar trabajo sin ayudar. También hace falta contemplar movimiento reducido. La cantidad de efectos no mide la calidad del diseño: importa si el movimiento mantiene orientación y no bloquea una tarea.
Componentes y scripts externos
Chat, medición, embeds y herramientas comerciales agregan dependencias. Hay que decidir qué necesita cargarse desde el inicio y qué puede esperar a una acción. Cada integración debe tener un responsable y una razón para existir. Incorporarla “por las dudas” puede añadir costo técnico y de mantenimiento sin una necesidad confirmada.
Las tareas extensas de JavaScript pueden afectar respuesta a interacciones; web.dev explica cómo revisar INP. Desde el diseño se puede evitar que una acción sencilla dependa de trabajo innecesario, pero la comprobación debe incluir la implementación real. Una maqueta rápida no garantiza una interacción rápida en producción.
Reservar espacio para lo que aparece
Imágenes, contenido cargado después y cambios tipográficos pueden desplazar elementos. Reservar dimensiones y evitar inserciones inesperadas ayuda a mantener estabilidad. La guía de optimización de CLS describe causas y medidas de revisión. Es importante observar el recorrido: un salto puede afectar especialmente un control que alguien está por tocar.
No todo movimiento es un problema de estabilidad. Un cambio solicitado, como abrir un panel, tiene otro contexto que una inserción imprevista. El diseño debe indicar qué cambia y conservar una relación comprensible entre acción y respuesta, en vez de ocultar cualquier desplazamiento detrás de una animación.
Ejemplo hipotético: una home muy cargada
Una empresa quiere una home con video, varias familias tipográficas, carruseles y un chat. Antes de implementarla, se revisa qué comunica cada recurso. El video puede reemplazarse por una portada si no aporta información específica; las familias pueden reducirse manteniendo jerarquía; el chat puede evaluarse según una necesidad real de atención.
Después se mide la entrega en condiciones registradas y se revisan las páginas importantes, no solo la home. También se comprueba una interacción concreta y el comportamiento móvil. Es un proceso para priorizar cambios, no evidencia de una mejora que ya ocurrió. Si se publican resultados, deben incluir contexto y no presentarse como garantía futura.
Elegir la próxima mejora
Inventariá recursos, revisá primera vista e interacciones y vinculá cada problema con una causa probable. Probá cambios acotados y volvé a medir con criterios comparables. La elección de plataforma, el checklist de publicación y las imágenes forman parte de esa revisión. Podemos trabajar rendimiento y diseño sin convertir una puntuación en la única definición de calidad.
