7 Errores en Desarrollo Web que Cuestan Dinero

Hemos auditado 100+ sitios en 2024. El 87% cometía estos errores.

Cada error = miles de dólares perdidos en conversión.

Error 1: No Optimizar para Mobile

El problema: 65% del tráfico es mobile, pero optimizan para desktop.

Costo real: 40% caída en conversión

Síntomas:

• Botones pequeños (imposibles de clickear en móvil)
• Tipografía ilegible
• Imágenes gigantes que no cargan rápido
• Formularios no-responsive
• Horizontal scroll

Solución:

/* Mobile-first approach */
.button {
  padding: 16px 20px; 
  font-size: 16px; /* Evita zoom en iOS */
  min-height: 48px; /* Touch-friendly: min 48px */
  min-width: 48px;
}

/* Tipografía responsive */
h1 {
  font-size: clamp(24px, 5vw, 48px);
}

/* Imágenes responsive */
img {
  max-width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .button { padding: 12px 16px; }
  h1 { font-size: 48px; }
}

Test en estos dispositivos:

• iPhone 12
• Samsung Galaxy S21
• iPad
• Tablet Android

Error 2: Ignorar Core Web Vitals

El problema: Sitio lento = ranking bajo + conversión baja

Costo real: Perder 50% del tráfico potencial en Google

Las 3 métricas que Google mide:

LCP (Largest Contentful Paint)

• ¿Qué ves en pantalla?
• Meta: < 2.5 segundos
• Tuya: _____ segundos

Mejorar LCP:

// 1. Optimizar imagen hero
<img src="hero.jpg" fetchpriority="high" />

// 2. Lazy load imágenes no-críticas
<img src="lazy.jpg" loading="lazy" />

// 3. Comprimir imágenes (ImageOptim, TinyPNG)
// Reducir de 500KB a 50KB = 10x más rápido

// 4. Usar WebP (35% más pequeño que JPG)
<picture>
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg">
</picture>

FID (First Input Delay)

• ¿Qué tan rápido responde a tu click?
• Meta: < 100ms
• Tuya: _____ ms

Mejorar FID:

// ❌ MALO: JavaScript pesado bloquea
function processData() {
  // 10 segundos de procesamiento
  // Mientras, usuario NO PUEDE clickear
}

// ✅ BUENO: Code splitting
const HeavyComponent = lazy(() => import('./Heavy'));

// ✅ BUENO: Web Workers (thread separado)
const worker = new Worker('heavy.js');
worker.postMessage(data);

CLS (Cumulative Layout Shift)

• ¿Se mueve el contenido mientras cargas?
• Meta: < 0.1
• Tuya: _____

Mejorar CLS:

/* Reservar espacio ANTES de que cargue */
img {
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* Ads que desplazan */
.ad-space {
  min-height: 250px; 
}

/* Fonts que desplazan */
@font-face {
  font-display: swap; /* Muestra fallback rápido */
}

Revisar: https://pagespeed.web.dev

Error 3: UX Rota en Formularios

El problema: Visitante quiere comprar/contactar, pero formulario es terrible

Costo real: 70% abandono en checkout

Errores típicos:

• Campos sin labels claros
• Validación que no explica el error
• Código postal con formato fijo
• “Confirmar password” que oculta
• Placeholders que desaparecen
• Submit button que no es obvio

Solución:

<!-- ❌ MALO -->
<input type="text" placeholder="Nombre y apellido">
<input type="text" placeholder="Dirección">

<!-- ✅ BUENO -->
<label for="nombre">Nombre *</label>
<input 
  type="text" 
  id="nombre"
  name="nombre" 
  required
  aria-describedby="nombre-error"
>
<span id="nombre-error" class="error" hidden></span>

<!-- Progressive enhancement -->
<input 
  type="email" 
  inputmode="email"
  autocomplete="email"
  placeholder="correo@ejemplo.com"
  required
>

<!-- CTA button claro -->
<button type="submit" class="btn btn-primary">
  Enviar Solicitud
</button>

Hacer test:

• Rellena el form en teléfono (¿es fácil?)
• ¿Qué pasa si dejas vacío un campo? (¿error claro?)
• ¿Puedo copiar/pegar password? (sí)

Error 4: No A/B Testing

El problema: Cambiar color del CTA sin datos = apuestas

Costo real: Cambios que BAJAN conversión

Ejemplos:

• Cambiar botón de verde a rojo: -15% clicks
• Mover form arriba: +30% conversión
• Simplificar texto: +45% clarity

Cómo hacer A/B testing:

// Herramientas: Google Optimize, VWO, Unbounce

// 1. Cambiar 1 cosa a la vez
// Si cambias 5 cosas, no sabes cuál funcionó

// 2. Mínimo 100 conversiones por variante
// Si tienes 10 conversiones/mes, espera 10 meses

// 3. Testear cosas de alto impacto:
// - CTA button color/text
// - Form fields (menos = más conversión)
// - Headline
// - Hero image

// 4. Medir:
// Conversion rate = conversiones / visitantes
// A/B test ganador = aumenta CR

Error 5: SEO Olvidado

El problema: Sitio invisible en Google

Costo real: $0 de tráfico orgánico

Síntomas:

• Meta descriptions faltantes
• Sin H1 en página
• URLs como: /page1, /contacto.php
• Sin schema markup
• Sin sitemap

Solución en 1 hora:

<!-- Agregar a CADA página -->
<meta name="description" content="Descripción 155 chars, keyword incluida">

<!-- Una sola vez por página -->
<h1>Única, con keyword principal</h1>

<!-- Otros headings jerárquicos -->
<h2>Tema 1</h2>
<h2>Tema 2</h2>

<!-- Schema markup -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "CODEAMUS",
  "url": "https://codeamus.dev",
  "telephone": "+56-XXX-XXX-XXX"
}
</script>

<!-- Canonical -->
<link rel="canonical" href="https://ejemplo.com/pagina">

<!-- Sitemap (generar automáticamente) -->
<!-- En Astro/Next: plugin lo hace solo -->

Error 6: Seguridad Descuidada

El problema: Hacker roba datos, tu reputación se va

Costo real: Récord de dinero perdido

Errores típicos:

• SQL Injection
• XSS (Cross-site scripting)
• Passwords en plain text
• API keys en cliente
• Sin HTTPS

Solución:

// ❌ NUNCA HACER ESTO
const userId = req.query.id; // ¡VULNERABLE!
const user = await db.user.findById(userId);
fetch(`/api/user?id=${userId}`); // XSS + SQL injection

// ✅ SIEMPRE HACER ESTO
// 1. Validar en SERVIDOR
const userId = req.session.userId; // De sesión, no de URL
const user = await db.user.findById(userId);

// 2. Usar variables de sesión
// 3. HTTPS obligatorio
// 4. Secrets en .env (nunca en código)
// 5. Sanitizar inputs

Checklist mínimo:

• ✅ HTTPS (no HTTP)
• ✅ Validar ALL inputs (server-side)
• ✅ Password: hash con bcrypt
• ✅ Secrets: .env (nunca commitear)
• ✅ CORS correcto (no *)
• ✅ Rate limiting en APIs

Error 7: Hosting Lentísimo

El problema: Guardaste $5/mes en hosting, perdiste $5000 en conversión

Costo real: 80% bounce rate, conversión -40%

Síntomas:

• TTFB (Time to First Byte) > 1s
• Sin CDN
• Servidor en otro continente
• Caché deshabilitado

Solución:

RECOMENDADO:
✅ Vercel (especializado en Next/Astro)
✅ Netlify (excelente para estáticos)
✅ Cloudflare Pages (velocidad brutal)
✅ AWS (si necesitas escalar)

EVITAR:
❌ GoDaddy (lentísimo)
❌ Hosting compartido barato
❌ Servidor en el sótano
❌ Sin CDN

Costos vs Beneficios:

Hosting barato ($3/mes) = 3s TTFB
Vercel ($0-20/mes) = 0.3s TTFB

10 visitantes/día × 365 días × 30% bounce rate
= 1095 bounces/año por lentitud

Si cada bounce = $10 en oportunidad perdida
= $10,950 PERDIDO en un año

Comparado con:
Vercel: $20/mes × 12 = $240/año

ROI: $10,950 / $240 = 45x retorno

Checklist Final (Hoy Mismo)

PERFORMANCE
□ Lighthouse Score: 85+
□ LCP: <2.5s
□ FID: <100ms
□ CLS: <0.1
□ Core Web Vitals: Verde en GSC

MOBILE
□ Responsive (test en 3 dispositivos)
□ Buttons: min 48x48px
□ Tipografía legible
□ Sin horizontal scroll

SEO
□ Meta descriptions únicas
□ H1 por página (uno solo)
□ Schema markup presente
□ Sitemap.xml enviado
□ robots.txt correcto

SEGURIDAD
□ HTTPS (no HTTP)
□ Inputs validados (server)
□ Secrets en .env
□ Passwords hasheados
□ CORS configurado

CONVERSIÓN
□ CTA claro y prominent
□ Formulario simple (<5 campos)
□ CTR button: min 48px
□ Testimonios presentes
□ Trust signals (certificados, etc)

UX
□ Mobile-first
□ Formulario intuitivo
□ Error messages claros
□ Loading states visibles

Conclusión

Estos 7 errores cuestan miles en conversión perdida.

Un audit hoy = +$1000-10,000 en revenue mensual.

Cada error que fixes = +5-15% en conversión.

No es perfectonicismo. Es dinero.

¿Cuál de estos errores tiene tu sitio?