Optimización extrema de Web Vitals, Target ES2022 y Hardening de Producción

En el desarrollo web moderno, la delgada línea entre una aplicación rápida y una experiencia frustrante se mide en milisegundos y bytes innecesarios transportados por la red. Durante la jornada de hoy en el estudio, abordamos auditorías profundas de Core Web Vitals en ¡Qué Nivel, Maribel! (nuestra plataforma de ticketing y CRM), la integración de flujos de eventos para El Gato Colectivo y la consolidación de nuestro pipeline de seguridad en infraestructura VPS.

El Reto Técnico: Polyfills Fantasma y Render-Blocking en Mobile

Al auditar el rendimiento con Chrome DevTools y Lighthouse en quenivelmaribel.com, detectamos dos cuellos de botella severos que estaban penalizando el LCP (Largest Contentful Paint) y el TBT (Total Blocking Time):

1. Legacy JavaScript Payload (~14 KiB desperdiciados): Next.js continuaba emitiendo polyfills para APIs estándar de ECMAScript modernas como Array.prototype.at, Array.prototype.flat, Object.fromEntries y Object.hasOwn.
2. Render-blocking y Resource Discovery en LCP: La imagen principal del hero competía con precargas no prioritarias y stylesheets en la ruta crítica, mientras que el formulario de registro (RegistrationForm) consumía tiempo de hilo principal antes de ser necesario.

// next.config.js - Configuración de compilación ES2022 para eliminar polyfills legados
/** @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;

Al ajustar la directiva de compilación a es2022 y aplicar dynamic import selectivo sobre componentes interactivos pesados, eliminamos los polyfills residuales y recortamos las tareas largas en el hilo principal de 13 a solo 5.

// Dynamic import diferido y priorización estricta de LCP
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>
  );
}

Infraestructura Resiliente: Caddy HTTP/3, UFW y Backups a Telegram

El mejor frontend carece de sentido sin una base de infraestructura inquebrantable. Mantenemos una política de cero dependencia de plataformas opacas, administrando VPS Linux con hardening riguroso:

• Reverse Proxy de Última Generación: Despliegue sobre Caddy con soporte nativo HTTP/3 (QUIC) y TLS 1.3 automatizado, reduciendo el handshake round-trip time (RTT) a prácticamente cero en redes móviles inestables.
• Defensa Perimetral con UFW y Fail2ban: Firewall configurado en política de rechazo estricto (DROP por defecto), habilitando exclusivamente puertos 22 (SSH por llave ed25519), 80 y 443. Fail2ban protege activamente el demonio SSH y los endpoints de autenticación de contenedores Docker.
• Backups Autónomos a Bóveda Privada: Snapshots de bases de datos PostgreSQL cifrados mediante GPG y despachados mediante bots automatizados hacia un canal seguro de Telegram como bóveda remota off-site.

Ajustes Visuales y Experiencia de Usuario

Adicionalmente, refinamos la narrativa visual del sitio: eliminamos elementos decorativos que inducían CLS (Cumulative Layout Shift) como cintas métricas innecesarias, invertimos la orientación horizontal de los activos clave (el zapato Oxford y los elementos de calzado chunky ahora guían la mirada directamente al centro del call-to-action) y estructuramos la integración de eventos compartibles para Google Calendar y captación de leads en redes.

¿Quieres elevar la velocidad y confiabilidad de tu producto digital? Explora más proyectos y casos de estudio en andresmorales.com.co.