1. Mapea la ruta de compra antes de cambiar la página
Elige dos a cuatro rutas de alto valor, no una única ruta ideal. Incluye móvil, variantes, cambios en el carrito y checkout como invitado. Escribe el estado esperado tras cada acción: artículo, cantidad, precio, entrega, promoción, total y siguiente acción. Esto expone regresiones antes de que un cambio compartido alcance todas las plantillas.
Separa trabajo crítico de opcional. Los datos del producto, opciones seleccionadas, añadir al carrito, cálculo del carrito, controles de checkout y retroalimentación suelen ser críticos. Recomendaciones, valoraciones, chat y etiquetas de marketing pueden ser valiosos pero no son automáticamente necesarios al inicio. Confirma su prioridad con los responsables.
Describe el estado visible, la acción, el error y el comportamiento de reintento en cada paso.
Registra servicios y scripts que afectan precio, stock, carrito, checkout o consentimiento.
2. Haz que el descubrimiento y la selección de producto sean rápidos, estables y veraces
Identifica el elemento inicial más grande y los controles de selección de producto. Largest Contentful Paint (LCP) mide cuándo aparece el contenido visible más grande; Google recomienda aspirar a 2,5 segundos o menos. No cargues de forma diferida (lazy-load) una imagen o contenido que probablemente sea el LCP. Reserva espacio para medios, insignias, valoraciones y mensajes de entrega para que un módulo tardío no mueva un control de compra. Google recomienda un Cumulative Layout Shift (CLS) por debajo de 0,1.
La selección de variante debe actualizar imagen, precio, SKU, disponibilidad y elegibilidad de compra sin estados obsoletos. Si usas datos estructurados de producto, mantenlos alineados con la página de compra. Google indica que el marcado y los feeds de Merchant Center pueden ayudarle a entender y verificar los datos del producto, pero la presentación en búsqueda y la elegibilidad no están garantizadas.
Solicita el contenido principal del producto temprano; evita un render innecesario tardío en cliente.
Confirma que los hechos visibles del producto y la elegibilidad de compra cambian juntos para opciones representativas.
3. Mantén el carrito y el checkout responsivos sin eliminar comportamiento necesario
Interaction to Next Paint (INP) mide la capacidad de respuesta a la entrada; Google recomienda aspirar a menos de 200 milisegundos. Prueba actualizaciones de cantidad, eliminación, cupones, opciones de entrega, opciones de pago, corrección de campos y envío. Usa herramientas de rendimiento para encontrar tareas largas y solicitudes lentas, pero no elimines validación, impuestos, fraude o cálculo de entrega simplemente porque añaden trabajo. Define primero un estado pendiente aceptable y un mensaje.
El checkout accesible es trabajo de rendimiento porque un campo sin etiqueta o un error no anunciado bloquea la finalización. La guía del W3C exige etiquetas, controles agrupados, instrucciones, retroalimentación de validación y notificación de éxito o error. Mantén el foco predecible y prueba controles personalizados con teclado y lector de pantalla. Pide solo la información necesaria para la transacción.
Evita envíos duplicados inseguros, muestra procesamiento y conserva valores introducidos tras un fallo.
Prueba rutas de dirección inválida, tarjeta declinada, cupón y campos requeridos.
4. Trata los scripts de terceros como dependencias de producción
Inventaría cada tag por página, propietario, propósito, origen, datos accedidos, consentimiento, comportamiento de carga y método de eliminación. OWASP identifica la pérdida de control de cambios, la ejecución arbitraria de código y la divulgación de información sensible como riesgos del JavaScript de terceros. Un inventario revela trabajo que un informe de bundle puede pasar por alto: cadenas de tags, un recomendador que desplaza el layout o una llamada de personalización que bloquea la compra.
Para analítica, usa una capa de datos deliberadamente definida o un patrón server-direct cuando encaje con la arquitectura en lugar de permitir lecturas arbitrarias de la página. OWASP describe una capa de datos definida por el host como una forma de limitar los valores que recibe el código de analítica. En páginas de pago, minimiza las vías de cambio y usa revisiones calificadas. La guía de PCI SSC aborda autorización de scripts, integridad y monitorización de manipulación; Content Security Policy puede restringir cargas pero necesita pruebas escalonadas porque puede romper integraciones legítimas.
Asigna a cada tag un propósito aprobado por su propietario y una decisión de carga; elimina experimentos caducados.
Trata los cambios de scripts y encabezados como sensibles para la seguridad; no hagas autocertificaciones de cumplimiento.
5. Haz claros los estados de inventario y precio ante cambios
Inventario y precio pueden cambiar mientras un comprador navega. Define disponible, bajo stock, no disponible, pedido pendiente (backorder), precio pendiente y precio cambiado. Prueba las transiciones de producto a carrito, carrito a checkout y envío del checkout. El objetivo no es datos estáticos en todo momento; es un estado claro y recuperable en vez de una contradicción.
No caches hechos transaccionales sin una decisión de frescura e invalidación. Una recomendación puede estar obsoleta mientras se actualiza el stock; un precio comprable necesita reglas acordadas. Cuando un servicio está lento, distingue un valor confirmado de una actualización pendiente y explica la siguiente acción. Prueba promociones, precios regionales o por usuario logueado y casos límite de stock en la configuración de release.
Nombra al responsable para precio, inventario, promoción y total del carrito.
Incluye una variante no disponible, promoción expirada, cantidad cambiada y restricción de entrega.
6. Verifica con baseline, lanzamiento controlado y bucle de remediación
Mide la misma ruta antes y después de un cambio. Los datos de campo muestran la experiencia real del visitante a lo largo del tiempo; los tests de laboratorio reproducen dispositivo y condiciones de red seleccionadas. Compara plantilla equivalente, clase de dispositivo, estado de sesión, estado de experimento y ventana de medición. Una única puntuación no puede probar que un cambio en el checkout mejoró la trayectoria de compra.
Escala cambios de plantilla compartida, gestor de tags y checkout. Registra baseline, efecto, propietario, dependencia, evidencia y reversión. Vuelve a probar la trayectoria después del despliegue, incluyendo eventos de analítica preservados y estados cambiados de inventario o pago. SIU soporta este bucle de optimización preventiva y remediación antes de que las regresiones se amplíen; no sustituye la monitorización de estado en vivo ni la respuesta a incidentes.
Recopila resultados de trayectoria, rendimiento, accesibilidad y reglas de negocio para la ruta cambiada.
No declares una página más rápida si el carrito, checkout, telemetría o corrección de inventario regresan.