SimuStore: Cómo creé un e-commerce desde cero con una puntuación de 100/100 en Google PageSpeed

Visión General del Proyecto

• Tipo: Proyecto Conceptual / Desafío de Ingeniería de Alto Rendimiento
• Rol: Desarrollador WordPress / Especialista Frontend
• Stack Tecnológico: WordPress, WooCommerce, PHP, HTML5 Semántico, Vanilla CSS (clamp()), JavaScript Nativo
• Demostración en vivo: simustore.allysonbelo.com
• Hito principal: 100/100 en Rendimiento, Accesibilidad, Buenas Prácticas y SEO en Google PageSpeed Insights.

El Desafío: Subir el Listón de la Calidad Técnica

Con frecuencia, los proyectos personales caen en el error de conformarse con un diseño visualmente aceptable pero sustentado en temas prefabricados y constructores visuales pesados que arruinan la velocidad y la accesibilidad.

Para SimuStore, decidí ir por otro camino. Me propuse un briefing muy estricto, simulando la prueba técnica de un proceso de selección para empresas tecnológicas de primer nivel. El objetivo no era únicamente mostrar un catálogo de productos funcional, sino construir una tienda online que cumpliera con los estándares más rigurosos de la ingeniería web moderna:

1. Mobile-First Real: Diseñada desde el primer momento pensando en la ergonomía táctil y pantallas móviles.
2. Accesibilidad Estricta (WCAG): Ratios de contraste nítidos, áreas de toque amplias y navegación fluida para lectores de pantalla y teclado.
3. Velocidad Extrema y Eficiencia: Cero librerías redundantes o código sobrecargado, priorizando las capacidades nativas de HTML, CSS y PHP.

Los Problemas Comunes en el E-Commerce Tradicional

Muchas tiendas online sufren de tres deficiencias críticas que perjudican de forma directa la tasa de conversión y el posicionamiento orgánico:

• Áreas de toque deficientes: Enlaces diminutos y muy juntos en pantallas móviles, provocando pulsaciones accidentales y frustración en el usuario.
• Contrastes inaccesibles: Precios tachados en tonos de gris pálido o etiquetas promocionales ilegibles para personas con problemas de visión.
• Sobrecarga de Código y Lentitud: Dependencia de temas multiuso y múltiples plugins que disparan los tiempos de carga y degradan las métricas Core Web Vitals (LCP, INP, CLS).

Soluciones Técnicas y Arquitectura

Para superar estos retos, desarrollé un tema personalizado para WooCommerce (targetlink-woo-pro) basado en estándares nativos y código mantenible:

1. Reestructuración de las Tarjetas de Producto (Zonas Táctiles y Accesibilidad)

Por defecto, WooCommerce suele generar de 2 a 3 enlaces redundantes hacia la misma página de producto dentro de una sola tarjeta (enlace en la imagen, en la categoría y en el título). Esto genera colisiones táctiles en móvil y avisos de enlaces duplicados en Lighthouse.

• Enlace Principal Unificado: Reorganicé el marcado para que un único enlace semántico englobe la imagen, el título y los datos clave, creando un área de contacto táctil de más de 300px de altura.
• Categorías como Etiquetas: Transformé los enlaces redundantes de categoría en etiquetas descriptivas (<span>), eliminando interferencias táctiles.
• Botón de Añadir al Carrito Aislado: Mantuve una separación vertical segura y una altura mínima garantizada de 48px para evitar pulsaciones erróneas.

2. Estándares de Contraste de Color AAA

Cada color de la interfaz fue calibrado para superar ampliamente las directrices de la WCAG:

• Insignias de Tendencia y Ofertas: Paletas de alto contraste con un ratio de 8.3:1 sobre fondo blanco (superando el umbral AAA de 7.0:1).
• Precios Anteriores y Descuentos: Eliminé las opacidades transparentes que desvanecían el texto de los precios originales, alcanzando contrastes nítidos de hasta 10.3:1.
• Microtextos y Enlaces del Pie de Página: Ajusté grosores tipográficos y tonos para garantizar una lectura cómoda tanto bajo luz solar intensa como en pantallas de bajo brillo.

3. Responsividad Fluida con CSS clamp()

En lugar de acumular decenas de @media queries rígidas, utilicé la función CSS clamp() en tipografías, espaciados y rejillas. Esto genera una adaptación suave y continua desde móviles de 320px hasta pantallas 4K, sin saltos bruscos de maquetación.

4. Optimización de la Ruta Crítica de Renderizado

• Sin Frameworks Adicionales: Desarrollado íntegramente con CSS nativo y JavaScript vanilla, manteniendo el peso de la página al mínimo.
• CSS Crítico en el <head>: Las reglas esenciales de estructura y contraste se sirven en el HTML inicial, eliminando bloqueos de renderizado.
• Tipografías Locales y Cache-Busting: Fuentes alojadas en el propio servidor para proteger la privacidad del usuario y acelerar la resolución DNS, combinadas con versionado dinámico de archivos (filemtime) para invalidar cachés de CDN en cada despliegue.

Resultados Obtenidos

La validación técnica se realizó con la herramienta oficial de Google (PageSpeed Insights), auditando directamente el servidor en entorno de producción:

• 🟢 Rendimiento: 100/100
• 🟢 Accesibilidad: 100/100
• 🟢 Buenas Prácticas: 100/100
• 🟢 SEO: 100/100

Más allá de una puntuación perfecta, SimuStore demuestra que la accesibilidad, el rendimiento y la ingeniería limpia pueden convivir armónicamente con un diseño comercial atractivo y moderno.

Conclusión y Contacto

Desarrollar SimuStore reafirmó mi convicción de que la diferencia entre un código que «simplemente funciona» y un producto digital de primer nivel radica en la disciplina técnica y en la empatía con el usuario final.

• 🚀 Visita la tienda en directo: simustore.allysonbelo.com
• 💬 ¿Quieres conversar sobre un proyecto o posición técnica? Conectemos en LinkedIn o a través del formulario de mi portafolio.