O teu formulário de contacto demora 8 segundos a carregar porque inclui uma biblioteca de validação enorme, vários plugins de JavaScript e um script de estatísticas. Quando o formulário está pronto, metade dos teus visitantes já foi ter com a concorrência.
O desempenho do formulário importa. Um formulário lento parece estragado. Um formulário rápido parece reativo. Este artigo explica como otimizar o tempo de carregamento e a velocidade de escrita dos formulários.
O que afeta o desempenho de um formulário?
O desempenho de um formulário tem duas partes: o tempo de carregamento (quanto demora o formulário a aparecer) e a velocidade de interação (quão reativo parece quando escreves ou clicas).
O tempo de carregamento é afetado por bibliotecas de JavaScript (uma biblioteca grande de validação acrescenta 50kb de código, e plugins de validação, bibliotecas de preenchimento automático e seletores de datas acrescentam todos peso), pelo tamanho dos ficheiros CSS (ficheiros CSS grandes bloqueiam a apresentação enquanto a página espera que o CSS seja descarregado e processado antes de poder ser mostrada) e por scripts de terceiros (estatísticas, píxeis de acompanhamento, anúncios e widgets de chat acrescentam todos pedidos). A velocidade de interação é afetada pelo tempo de execução do JavaScript (se a validação corre a cada tecla, o navegador tem de analisar e executar código por cada caractere escrito, o que pode causar atrasos), pelo layout thrashing (alterar o DOM e ler dimensões repetidamente obriga o navegador a recalcular o layout, o que é caro) e pelo tamanho do formulário (um formulário com 50 campos é apresentado mais devagar do que um com 5 campos).
Reduzir o tamanho do JavaScript do formulário
O JavaScript é o maior peso no desempenho. Uma só biblioteca de validação pode ter 40kb. Uma biblioteca de seletor de datas pode ter 20kb. Um preenchimento automático pode ter 15kb.
Primeira opção: usa a validação HTML em vez de JavaScript. Os campos de formulário HTML5 têm validação integrada. type="email" verifica o formato do email. required verifica valores vazios. pattern valida contra uma expressão regular. Isto funciona em todos os navegadores modernos e não exige JavaScript nenhum.
Segunda opção: programa a tua própria validação simples em vez de usar uma biblioteca. 50 linhas de validação em JavaScript puro são mais leves do que uma biblioteca de 40kb.
A terceira opção é carregar as bibliotecas de validação de forma preguiçosa, só depois de o utilizador tentar submeter. A maioria das submissões acontece logo depois de a página carregar, por isso nessa altura o utilizador já está a escrever. Carrega a validação em segundo plano depois de a página estar interativa com window.addEventListener('load', () => { const script = document.createElement('script'); script.src = '/validation-library.js'; document.body.appendChild(script); });.
CSS crítico para formulários
Põe o CSS crítico em linha para que o formulário fique visível de imediato. O CSS crítico é o estilo mínimo necessário para o formulário aparecer, como <style> input { display: block; width: 100%; padding: 0.75rem; font-size: 16px; } button { padding: 0.75rem 1.5rem; background: blue; color: white; } </style>. Isto apresenta o formulário de imediato enquanto o resto do CSS carrega de forma assíncrona com <link rel="stylesheet" href="/styles.css" media="print" onload="this.media='all'">, que carrega a folha de estilos sem bloquear a apresentação da página.
Adiar scripts não críticos
Move as estatísticas, os píxeis de acompanhamento e outros scripts não críticos para o fim da página ou adia-os. Usa <script async src="/analytics.js"></script>, onde o async carrega o script em paralelo com a página e não bloqueia a apresentação. Em alternativa, usa <script defer src="/analytics.js"></script>, onde o defer carrega o script depois do conteúdo da página, para que o formulário esteja disponível antes de as estatísticas carregarem.
Otimizar a reatividade dos campos do formulário
Se a validação em JavaScript corre a cada tecla, o formulário parece lento. Aplica debounce à validação, executando-a só depois de o utilizador parar de escrever por um momento, com let debounceTimer; input.addEventListener('input', (e) => { clearTimeout(debounceTimer); debounceTimer = setTimeout(() => { validate(e.target); }, 300); });. A validação corre 300ms depois de o utilizador parar de escrever, por isso o formulário parece reativo enquanto escreve e a validação acontece em segundo plano.
Reduzir o número de campos
Mais campos = formulário mais lento. Um formulário com 50 campos tem mais elementos DOM, mais CSS para calcular, mais JavaScript para executar.
Pergunta-te: preciso mesmo deste campo? Se a resposta for "talvez" ou "era bom", remove-o. Os formulários mais curtos carregam mais depressa e convertem melhor.
Carregamento preguiçoso de melhorias do formulário
Nem todos os campos precisam de um seletor de datas sofisticado ou de preenchimento automático logo ao carregar a página. Carrega estas melhorias só quando o utilizador precisar delas com <input type="date" id="date-field"> e if (!supportDate()) { loadDatePickerLibrary(); }. Assim, os navegadores que suportam o campo de data nativo não descarregam uma biblioteca extra.
Métricas de desempenho do formulário
Usa performance.mark() para medir métricas específicas do formulário, 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');. Mede também o atraso na escrita com performance.measure() para acompanhar quanto demora a validação por tecla.
Testar o desempenho do formulário
Usa as Chrome DevTools para medir o tempo de carregamento do formulário e a reatividade dos campos. Abre o separador Performance. Grava uma sessão em que carregas a página e interages com o formulário. Procura tarefas longas que bloqueiam a interação. Procura layout thrashing (recálculos rápidos).
Testa em redes lentas com limitação (Chrome DevTools > Network > slow 3G). Um formulário que parece rápido no teu computador pode parecer lento para alguém no telemóvel com uma ligação instável.
Como a WEMASY otimiza o desempenho dos formulários
Os formulários da WEMASY são feitos para a velocidade. JavaScript mínimo. Melhoria progressiva. Carregamento preguiçoso das melhorias. Renderização no servidor sempre que possível. Os formulários carregam em menos de 1 segundo, mesmo em redes lentas.
Vê as funcionalidades de desempenho no teu plano WEMASY.