Extreme Web Vitals Optimization, ES2022 Target & Production Hardening

In modern web engineering, the boundary between an instant application and a sluggish bounce is measured in milliseconds and redundant bytes. In today's build session, we tackled comprehensive Core Web Vitals audits across ¡Qué Nivel, Maribel! (our ticketing & CRM platform), social event calendar workflows for El Gato Colectivo, and our production infrastructure hardening stack.

The Technical Challenge: Phantom Polyfills and Critical-Path Chaining

Lighthouse and DevTools diagnostics on quenivelmaribel.com surfaced key bottlenecks hurting our LCP (Largest Contentful Paint) and TBT (Total Blocking Time):

1. Legacy JavaScript Waste (~14 KiB): Unneeded polyfills were shipping to modern browsers for APIs like Array.prototype.at, Array.prototype.flat, Object.fromEntries, and Object.hasOwn.
2. LCP Discovery & Render Blocking: Critical image assets were competing against background preloads and third-party widgets, while the heavy RegistrationForm caused premature main-thread contention.

// next.config.js - Targeting ES2022 to shed obsolete polyfill bundles
/** @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;

Setting Webpack to target es2022 alongside code-splitting via dynamic imports sliced long main-thread tasks from 13 down to 5, providing immediate UI fluidity.

// Prioritizing LCP image discovery while deferring registration forms
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>
  );
}

Production DevOps: Caddy HTTP/3, Strict UFW, and Telegram Vault Backups

Frontend optimizations fall flat without robust backend foundations. We operate our own bare-metal/VPS instances with deliberate security hardening:

• Caddy Reverse Proxy with HTTP/3: Native QUIC and zero-config automated TLS 1.3 slash connection handshake overhead on high-latency mobile networks.
• UFW & Fail2ban Enforcement: Default DROP perimeter filtering, opening only ports 22, 80, and 443, paired with automated jail tracking for brute-force mitigation.
• Telegram Vault Backups: Cron-driven, GPG-encrypted database dumps delivered directly into private Telegram vault channels for instant, resilient off-site archival.

Micro-Interactions and Visual Polish

Beyond performance budgets, visual rhythm matters: we pruned layout-shifting background illustrations, re-mirrored key product graphic assets so footwear elements point inward toward the focal conversion area, and streamlined lead capture pipelines.

Looking to scale your engineering stack with battle-tested performance and security? Connect with me at andresmorales.com.co.