Volver a Casos de Ingeniería
08 de enero de 2025

TTFB inferior a 15ms: Portal de Diagnóstico de Red con Carga Cero en Servidor sobre Vanilla PHP 8

TTFB inferior a 15ms con descarga del 100% de diagnósticos al lado del cliente

Vanilla PHP 8 MySQL Tailwind CSS Leaflet.js JavaScript (ES6+) PDO

El Cuello de Botella

Nuestro cliente, un agregador de hardware de red y unidad de soporte de ISP, estaba drenando presupuesto operativo en soporte técnico de primer nivel debido a una base de conocimientos heredada y fragmentada. Usuarios no técnicos saturaban los canales de soporte con tickets causados por errores tipográficos simples al acceder a sus routers—sustituyendo el 0 por la o o el 1 por la l en IPs locales—mientras que las herramientas de diagnóstico existentes (escáneres de puertos, tests de velocidad, calculadoras de subred) dependían de agentes proxy costosos del lado del servidor. Estos flujos de trabajo dependientes de la línea de comandos generaban picos de CPU y costos de ancho de banda en el servidor, exponían la infraestructura a riesgos de seguridad por escaneo proxy abierto, y creaban una experiencia de alta fricción que los motores de búsqueda no lograban indexar adecuadamente, resultando en pérdida de tráfico orgánico y costos de soporte por ticket en escalada.


Arquitectura y Automatización

Reemplazamos el CMS heredado y pesado con un Patrón de Front Controller personalizado en Vanilla PHP 8, eliminando middleware, sobrecarga de ORM e inyección de dependencias para alcanzar velocidad de ejecución pura. El motor de enrutamiento (index.php) actúa como único punto de entrada, gestionando dinámicamente rutas multi-idioma (/en) y páginas de aterrizaje por marca mediante expresiones regulares (ej. /tp-link-router-login) sin rutas codificadas, implementando efectivamente SEO programático a nivel del enrutador.

La capa de datos utiliza PDO con sentencias preparadas nativas para consultas MySQL inferiores a 2ms, pero de manera crítica, la arquitectura incrusta bases de datos JSON precompiladas del lado del cliente como respaldo. Esto garantiza que el Navegador de Credenciales y las herramientas de búsqueda permanezcan funcionales incluso durante tiempos de espera de base de datos o caídas de conectividad, con latencia de servidor cero para operaciones de lectura intensiva.

Todo el diagnóstico de alto rendimiento se descarga al navegador:

  • Localizador de Puerta de Enlace y Escáner de Subred: Sondas asíncronas con fetch() configurado en mode: 'no-cors' y tiempos de espera vía AbortController mapean puertas de enlace activas en subredes privadas sin intervención del servidor.
  • Auditor de Seguridad de Puertos Abiertos: Intentos de conexión TCP paralelos vía fetch() evalúan el estado de los puertos del router directamente desde el navegador, eliminando la exposición de proxies del lado del servidor.
  • Test de Velocidad por Rendimiento de Paquetes XHR: Descargas secuenciales desde endpoints de CDN globales de Wikimedia usando XMLHttpRequest y marcas de tiempo anti-caché miden el rendimiento en tiempo real, descartando el primer 20% de muestras para neutralizar la distorsión del arranque lento TCP.
  • Calculadora CIDR del Lado del Cliente: Operaciones bitwise sobre enteros de 32 bits sin signo calculan máscaras de subred y límites DHCP en menos de un milisegundo.
  • Generador de Contraseñas Criptográficas: window.crypto.getRandomValues() genera claves WEP/WPA/WPA2/WPA3 localmente.
┌─────────────┐      ┌──────────────────────┐      ┌─────────────────┐
│   Usuario   │─────▶│  Vanilla PHP 8       │─────▶│   MySQL (PDO)   │
│   Navegador │      │  Front Controller    │      │   (< 2ms query) │
└─────────────┘      │  (index.php)         │      └─────────────────┘
      │              └──────────────────────┘               │
      │                        │                            │
      │         Rutas SEO Dinámicas (Regex)                  │
      │                        │                            │
      ▼                        ▼                            ▼
┌─────────────────────────────────────────────────────────────────────┐
│                     Motor del Lado del Cliente                      │
│  ┌──────────────┐ ┌─────────────┐ ┌─────────────┐ ┌────────────┐  │
│  │ Localizador  │ │ Escáner     │ │ Test de     │ │ Calculadora│  │
│  │ de Puerta    │ │ de Puertos  │ │ Velocidad   │ │ CIDR / Gen.│  │
│  │ de Enlace    │ │             │ │ (XHR/CDN)   │ │ Contraseña │  │
│  │ (fetch/no-   │ │ (fetch/no-  │ │             │ │ (JS Crypto)│  │
│  │  cors)       │ │  cors)      │ │             │ │            │  │
│  └──────────────┘ └─────────────┘ └─────────────┘ └────────────┘  │
└─────────────────────────────────────────────────────────────────────┘

El despliegue automatizado se gestiona mediante flujos de trabajo Git estándar en un entorno contenedor, donde el runtime de PHP no requiere paso de compilación, permitiendo rollback instantáneo y complejidad mínima en el pipeline de CI/CD.


ROI Medible

  • Tiempo hasta el Primer Byte (TTFB): CMS heredado pesado con middleware ORM promediando 250–400ms → TTFB inferior a 15ms en hosting VPS estándar.
  • Carga de Infraestructura del Servidor: Agentes proxy del lado del servidor consumiendo 60–80% de CPU durante picos de uso diagnóstico → Sobrecarga de CPU y ancho de banda cercana a cero al descargar todos los cálculos al navegador del cliente.
  • Exposición de Seguridad: Escaneo de puertos abiertos y sondeo de subred ejecutados vía proxies del servidor, exponiendo nodos de hosting a bloqueos de firewall y reportes de abuso → Aislamiento 100% del lado del cliente; exposición de IP de servidor cero a redes objetivo.
  • Volumen de Tickets de Soporte: Soporte de primer nivel inundado con tickets de "login de router no funciona" por errores tipográficos en IPs y confusión de credenciales → Páginas de aterrizaje automatizadas de autoservicio y navegador de credenciales instantáneo redujeron el volumen de tickets en un 40–50% estimado.
  • Velocidad de Indexación SEO: Documentos de ayuda estáticos y desvinculados con metadatos pobres → Páginas de aterrizaje dinámicas por marca mediante regex con canónicas, Open Graph, Twitter Cards, hreflang y esquemas JSON-LD FAQ auto-generados, capturando keywords de alta intención del sector de redes a escala.
  • Accesibilidad del Diagnóstico: Herramientas restringidas a comandos de línea de comandos o aplicaciones de escritorio pesadas → Utilidades nativas del navegador sin instalación accesibles desde todas las plataformas e idiomas.

Escrito por

Miguel Ortiz

Growth Engineer & Technical SEO

Hablemos de un Desafío Similar