Otimização extrema de Web Vitals, Target ES2022 e Hardening de Produção

No desenvolvimento web moderno, a diferença entre uma experiência instantânea e a perda de um usuário é medida em milissegundos e kilobytes redundantes. Na jornada de hoje, realizamos uma auditoria profunda de Core Web Vitals no ¡Qué Nivel, Maribel! (nossa plataforma de ticketing e CRM), expandimos ferramentas de eventos compartilháveis para o El Gato Colectivo e fortalecemos a infraestrutura de produção.

O Desafio Técnico: Polyfills Desnecessários e Bloqueio de Renderização

Ao analisar diagnósticos do Chrome DevTools no quenivelmaribel.com, identificamos dois grandes obstáculos que impactavam o LCP e a thread principal:

1. JavaScript Legado em Excesso (~14 KiB): O bundle continuava incluindo polyfills para recursos nativos como Array.prototype.at, Array.prototype.flat, Object.fromEntries e Object.hasOwn.
2. Atraso na Descoberta do LCP: O elemento visual principal do hero sofria atrasos devido a preloads concorrentes e carregamento antecipado de formulários complexos.

// next.config.js - Configuração para target ES2022
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  compiler: {
    removeConsole: process.env.NODE_ENV === 'production',
  },
  webpack: (config) => {
    config.target = ['web', 'es2022'];
    return config;
  },
};

module.exports = nextConfig;

Com o ajuste do target para es2022 e o carregamento dinâmico do formulário de registro, reduzimos as tarefas longas da thread principal de 13 para apenas 5.

// Priorização de imagem LCP e import dinâmico do formulário
import dynamic from 'next/dynamic';
import Image from 'next/image';

const DynamicRegistrationForm = dynamic(
  () => import('@/components/forms/RegistrationForm'),
  { ssr: false }
);

export default function HeroSection() {
  return (
    <section className="relative overflow-hidden">
      <Image
        src="/assets/01-logos/logo_principal_blanco_rojo_rgba.png"
        alt="¡Qué Nivel, Maribel!"
        width={700}
        height={350}
        priority
        fetchPriority="high"
        loading="eager"
        sizes="(max-width: 640px) 360px, (max-width: 768px) 520px, 700px"
        className="w-full h-auto object-contain drop-shadow-2xl"
      />
      <DynamicRegistrationForm />
    </section>
  );
}

Engenharia de Produção: Caddy HTTP/3, Firewall UFW e Backups no Telegram

Um frontend rápido precisa de infraestrutura sólida. Administramos nossos próprios servidores Linux VPS com padrões rigorosos de segurança:

• Proxy Reverso Caddy com HTTP/3: Protocolo QUIC e TLS 1.3 automático garantem tempo de resposta ultra-rápido mesmo em redes móveis instáveis.
• Defesa Perimetral com UFW e Fail2ban: Política padrão DROP, liberando estritamente as portas 22, 80 e 443, com bloqueio contínuo contra ataques de força bruta.
• Backups Criptografados para o Telegram: Rotinas automatizadas geram dumps compactados e criptografados dos bancos de dados, replicando-os em canais privados seguros como cofre externo.

Refinamento Visual e Experiência

Remover recursos desnecessários que causavam Cumulative Layout Shift (CLS), alinhar a direção dos elementos gráficos para conduzir a atenção ao centro da página e integrar calendários do Google consolidam uma entrega técnica limpa e orientada a conversão.

Quer fortalecer o desempenho e a segurança dos seus sistemas? Conheça mais em andresmorales.com.co.