Tu formulario de contacto tarda 8 segundos en cargar porque incluye una enorme librería de validación, varios plugins de JavaScript y un script de analítica. Cuando el formulario está listo, la mitad de tus visitantes ya se ha ido con tu competencia.
El rendimiento de los formularios importa. Un formulario lento parece roto. Uno rápido parece ágil. Este artículo explica cómo optimizar los tiempos de carga y la velocidad de entrada de los formularios.
¿Qué afecta al rendimiento de un formulario?
El rendimiento de un formulario tiene dos partes: el tiempo de carga (cuánto tarda en aparecer) y la velocidad de interacción (lo ágil que se siente al escribir o hacer clic).
El tiempo de carga depende de las librerías de JavaScript (una librería de validación grande añade 50kb de código, y los plugins de validación, las librerías de autocompletado y los selectores de fecha suman peso), del tamaño de los archivos CSS (los CSS grandes bloquean el renderizado, porque la página espera a descargar y analizar el CSS antes de poder mostrarse) y de los scripts de terceros (analítica, píxeles de seguimiento, anuncios y widgets de chat añaden peticiones). La velocidad de interacción depende del tiempo de ejecución de JavaScript (si la validación se ejecuta en cada pulsación de tecla, el navegador tiene que analizar y ejecutar código por cada carácter escrito, lo que puede causar retardo), del layout thrashing (cambiar el DOM y leer dimensiones una y otra vez obliga al navegador a recalcular el diseño, que es costoso) y del tamaño del formulario (un formulario de 50 campos se muestra más lento que uno de 5).
Cómo reducir el tamaño del JavaScript del formulario
JavaScript es el mayor lastre de rendimiento. Una sola librería de validación puede pesar 40kb. Una librería de selector de fecha puede pesar 20kb. Un autocompletado puede pesar 15kb.
Primera opción: usa la validación de HTML en lugar de JavaScript. Los campos de formulario de HTML5 tienen validación integrada. type="email" comprueba el formato del email. required comprueba si hay valores vacíos. pattern valida con una expresión regular. Esto funciona en todos los navegadores modernos y no requiere nada de JavaScript.
Segunda opción: programa tu propia validación simple en lugar de usar una librería. 50 líneas de validación en JavaScript puro pesan menos que una librería de 40kb.
La tercera opción es cargar las librerías de validación de forma diferida, solo después de que el usuario intente enviar. La mayoría de los envíos ocurre justo después de cargar la página, así que para entonces el usuario ya está escribiendo. Carga la validación en segundo plano cuando la página ya es interactiva con window.addEventListener('load', () => { const script = document.createElement('script'); script.src = '/validation-library.js'; document.body.appendChild(script); });.
CSS crítico para formularios
Incluye el CSS crítico dentro de la página para que el formulario se vea de inmediato. El CSS crítico es el estilo mínimo necesario para que el formulario aparezca, como <style> input { display: block; width: 100%; padding: 0.75rem; font-size: 16px; } button { padding: 0.75rem 1.5rem; background: blue; color: white; } </style>. Así el formulario se muestra de inmediato mientras el resto del CSS carga de forma asíncrona con <link rel="stylesheet" href="/styles.css" media="print" onload="this.media='all'">, que carga la hoja de estilos sin bloquear el renderizado de la página.
Aplazar los scripts no críticos
Mueve la analítica, los píxeles de seguimiento y otros scripts no críticos al final de la página o aplázalos. Usa <script async src="/analytics.js"></script>, donde async carga el script en paralelo con la página y no bloquea el renderizado. También puedes usar <script defer src="/analytics.js"></script>, donde defer carga el script después del contenido de la página, así el formulario está disponible antes de que cargue la analítica.
Optimizar la respuesta de los campos al escribir
Si la validación con JavaScript se ejecuta en cada pulsación de tecla, el formulario parece lento. Aplica debounce a la validación para que solo se ejecute cuando el usuario deje de escribir un momento con let debounceTimer; input.addEventListener('input', (e) => { clearTimeout(debounceTimer); debounceTimer = setTimeout(() => { validate(e.target); }, 300); });. La validación se ejecuta 300ms después de que el usuario deja de escribir, así el formulario se siente ágil mientras escribe y la validación ocurre en segundo plano.
Reducir el número de campos
Más campos = formulario más lento. Un formulario de 50 campos tiene más elementos DOM, más CSS que calcular y más JavaScript que ejecutar.
Pregúntate: ¿de verdad necesito este campo? Si la respuesta es "quizá" o "estaría bien", quítalo. Los formularios más cortos cargan más rápido y convierten mejor.
Carga diferida de mejoras del formulario
No todos los campos necesitan un selector de fecha sofisticado o un autocompletado al cargar la página. Carga estas mejoras solo cuando el usuario las necesite con <input type="date" id="date-field"> y if (!supportDate()) { loadDatePickerLibrary(); }. Así, los navegadores que admiten el campo de fecha nativo no descargan una librería extra.
Métricas de rendimiento de formularios
Usa performance.mark() para medir métricas propias del formulario, como performance.mark('form-_blocked_-start'); performance.mark('form-_blocked_-end'); performance.measure('form-_blocked_', 'form-_blocked_-start', 'form-_blocked_-end'); const timing = performance.getEntriesByName('form-_blocked_')[0]; console.log('Form rendered in ' + timing.duration + 'ms');. Mide también el retardo al escribir con performance.measure() para saber cuánto tarda la validación en cada pulsación.
Cómo probar el rendimiento de un formulario
Usa Chrome DevTools para medir el tiempo de carga del formulario y su respuesta al escribir. Abre la pestaña Performance. Graba una sesión en la que cargues la página e interactúes con el formulario. Busca tareas largas que bloqueen la interacción. Busca layout thrashing (recálculos rápidos y repetidos).
Prueba en redes lentas con limitación de velocidad (Chrome DevTools > Network > slow 3G). Un formulario que parece rápido en tu ordenador puede parecer lento para alguien con un móvil y mala conexión.
Cómo optimiza WEMASY el rendimiento de los formularios
Los formularios de WEMASY están hechos para la velocidad. Poco JavaScript. Mejora progresiva. Carga diferida de las mejoras. Renderizado en el servidor cuando es posible. Los formularios cargan en menos de 1 segundo incluso en redes lentas.
Mira las funciones de rendimiento en tu plan de WEMASY.