Performance Guidelines - CreaRack Pro

Performance Guidelines - CreaRack Pro

Última actualización: 26-01-2026 Mejora conseguida: Lighthouse 88 → 92 (+4 puntos)

Este documento establece las buenas prácticas de rendimiento para el desarrollo frontend de CreaRack Pro.

1. Carga de Scripts

Regla General: Usar defer para scripts no críticos

<!-- CORRECTO: Script con defer -->
<script src="{% static 'js/konva.min.js' %}" defer></script>

<!-- INCORRECTO: Script bloqueante -->
<script src="{% static 'js/konva.min.js' %}"></script>

Scripts que DEBEN usar defer

Scripts que NO deben usar defer

• Scripts inline con lógica de inicialización crítica
• Scripts type="module" (ya son diferidos por defecto)

2. Carga de CSS

Regla: CSS no crítico debe cargarse de forma asíncrona

<!-- CORRECTO: CSS async con fallback -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

<!-- INCORRECTO: CSS bloqueante -->
<link rel="stylesheet" href="styles.css">

CSS que debe ser async

CSS que debe ser síncrono (crítico)

• base.css - Layout fundamental
• layout.css - Estructura de página
• components.css - Componentes visibles inmediatamente

3. Google Fonts

Regla: Siempre usar preconnect antes de cargar fuentes

<!-- CORRECTO: Preconnect antes de cargar -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">

<!-- INCORRECTO: Sin preconnect -->
<link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">

Ahorro estimado: ~50-100ms en conexión inicial

4. Propiedades CSS a Evitar

backdrop-filter: blur()

NUNCA usar en elementos que contengan inputs interactivos.

/* PROHIBIDO en modales con inputs */
.modal-overlay {
    backdrop-filter: blur(2px); /* CAUSA 1.5s de latencia en inputs */
}

/* CORRECTO */
.modal-overlay {
    background: rgba(0, 0, 0, 0.75); /* Usar opacidad en su lugar */
}

transition en inputs

Evitar transiciones en campos de formulario.

/* EVITAR */
input {
    transition: border-color 0.2s; /* Añade latencia perceptible */
}

/* MEJOR */
input {
    /* Sin transición - respuesta inmediata */
}

5. JavaScript - Debounce y Throttle

Auto-save debe usar debounce

// CORRECTO: Debounce antes de procesar
let autoSaveTimer = null;
const AUTO_SAVE_DEBOUNCE_MS = 500;

export function triggerAutoSave() {
    if (autoSaveTimer) clearTimeout(autoSaveTimer);
    autoSaveTimer = setTimeout(() => {
        saveRackState();
        autoSaveTimer = null;
    }, AUTO_SAVE_DEBOUNCE_MS);
}

// INCORRECTO: Guardar en cada cambio
export function triggerAutoSave() {
    saveRackState(); // Ejecuta en cada keystroke
}

Event listeners de actividad deben usar throttle

// CORRECTO: Throttle para eventos frecuentes
handleActivity() {
    const now = Date.now();
    if (now - this.lastActivity > this.throttleMs) {
        this.lastActivity = now;
        this.resetTimeout();
    }
}

// INCORRECTO: Procesar cada evento
handleActivity() {
    this.resetTimeout(); // Ejecuta en cada mousemove/keydown
}

6. Event Delegation

Usar delegación en lugar de listeners individuales

// CORRECTO: Un listener en el contenedor
const modalContent = modal.querySelector('.modal-content');
if (modalContent) {
    const stopProp = (e) => e.stopPropagation();
    ['keydown', 'keypress', 'keyup', 'input'].forEach(evtType => {
        modalContent.addEventListener(evtType, stopProp, true);
    });
}

// INCORRECTO: Listener en cada input
modal.querySelectorAll('input').forEach(input => {
    input.addEventListener('keydown', stopProp);
    input.addEventListener('keypress', stopProp);
    // ... repetido para cada evento
});

7. Checklist para Nuevos Templates

Al crear un nuevo template HTML:

• Scripts pesados (>50KB) tienen defer
• CSS no crítico usa carga async
• Google Fonts tienen preconnect
• No hay backdrop-filter: blur() en modales con inputs
• No hay transition en campos de formulario
• Auto-save usa debounce (mínimo 500ms)
• Event listeners usan delegación cuando sea posible

8. Métricas Objetivo (Lighthouse)

9. Historial de Optimizaciones

Sesión 26-01-2026

Problema: Latencia de 1.5s al escribir en modales + Score Lighthouse 88

Soluciones aplicadas:

1. Eliminado backdrop-filter: blur(2px) de .modal-overlay
2. Eliminado transition: border-color 0.2s de inputs
3. Añadido throttle a SessionTimeoutManager (5s)
4. Añadido debounce a triggerAutoSave() (500ms)
5. Event delegation en modales de ui_panels.js
6. defer en 10+ scripts (konva, xterm, socket.io, etc.)
7. CSS async para FontAwesome y xterm.css
8. Preconnect para Google Fonts

Resultado:

• Latencia de input: 1.5s → 0s
• Lighthouse: 88 → 92 (+4 puntos)
• FCP: 1344ms → ~700ms

Referencias

• Web.dev - Defer non-critical CSS
• MDN - Script defer attribute
• Lighthouse Performance Scoring

Véase también

• [[crearack-tech—frontend—design-guidelines]] — guidelines de diseño UI
• [[crearack-tech—frontend—centralized-services]] — servicios JS centralizados
• [[crearack-tech—frontend—design-system]] — design system de componentes
• [[crearack-tech—architecture—performance-optimization]] — optimización de rendimiento a nivel arquitectura
• [[crearack-tech—backend—autoplan-performance]] — performance de Auto-Plan