Guía de Medición de Resultados Pre y Post Rediseño Web

Este documento detalla cómo obtener métricas clave antes y después de la puesta en producción de un rediseño web, para poder presentar los resultados a stakeholders.

Tutorial en video

Para aprender a usar Google Lighthouse y la extensión SEO META 1 Click, puedes ver este video explicativo:

Ver tutorial en Google Drive

1. Desktop Performance & Accessibility

Objetivo: Medir rendimiento y accesibilidad del sitio en escritorio.

Herramienta:

• Google Lighthouse (integrado en Chrome DevTools)

Pasos:

1. Abrir el sitio en Google Chrome.
2. Presionar F12 o Ctrl + Shift + I (Windows) / Cmd + Opt + I (Mac) para abrir DevTools.
3. Ir a la pestaña Lighthouse.
4. Seleccionar:
   • Device: "Desktop"
   • Categorías: Performance y Accessibility.
5. Ejecutar el análisis.
6. Registrar los valores de métricas clave y puntajes.

Métricas clave a registrar:

• Performance Score (0–100)
• Accessibility Score (0–100)
• LCP (Largest Contentful Paint): Tiempo para mostrar el contenido principal.
• FCP (First Contentful Paint): Tiempo hasta que se muestra el primer contenido visible.
• CLS (Cumulative Layout Shift): Estabilidad visual durante la carga.

Ejemplo de tabla de resultados:

2. Mobile Performance & Accessibility

Objetivo: Medir rendimiento y accesibilidad del sitio en dispositivos móviles.

Herramienta:

• Google Lighthouse (integrado en Chrome DevTools)

Pasos:

1. Abrir el sitio en Google Chrome.
2. Abrir DevTools (F12 o Ctrl + Shift + I / Cmd + Opt + I).
3. Ir a la pestaña Lighthouse.
4. Seleccionar:
   • Device: "Mobile"
   • Categorías: Performance y Accessibility.
5. Ejecutar el análisis.
6. Registrar las mismas métricas clave que en Desktop.

Ejemplo de tabla de resultados:

3. Análisis de SEO Técnico Onsite

Objetivo: Revisar los elementos SEO técnicos en el sitio para asegurar una buena optimización y experiencia de usuario.

Herramienta:

• Extensión de Chrome SEO META 1 Click

Pasos:

1. Instalar y habilitar la extensión en Google Chrome.
2. Abrir la página a analizar.
3. Hacer clic en el ícono de la extensión en la barra del navegador.
4. Revisar y registrar los siguientes elementos:
   • Meta Title: Título optimizado, idealmente entre 50 y 60 caracteres.
   • Meta Description: Descripción clara y relevante, entre 120 y 160 caracteres.
   • Encabezados: Conteo de cada nivel (H1, H2, H3, H4, H5, H6).
     • Ideal: 1 H1 único, varios H2 para estructura, uso moderado de H3-H6 según contenido.
   • Etiquetas ALT en imágenes: Todas las imágenes importantes deberían tener texto alternativo descriptivo.
   • Open Graph (og:) tags: Verificar presencia de etiquetas og:title, og:description y og:image para compartir en redes sociales.
   • Estado de indexabilidad: Confirmar que la página no esté bloqueada para motores de búsqueda.
   • Enlaces internos y externos: Revisar que no haya enlaces rotos o erróneos.

5. Guardar capturas o exportar datos para comparación pre/post rediseño.

Ejemplo de tabla de resultados SEO Técnico

4. Métricas de Google Analytics

Promedio de páginas vistas y tiempo de interacción de usuarios activos

Objetivo: Revisar las métricas que funcionan como indicadores de experiencia de usuario en Google Analytics. El propósito es generar una comparación entre el período previo al pasaje a producción del nuevo diseño y el período posterior.

Pasos:

1. Ingresar a https://analytics.google.com/analytics/web/.
2. En el menú lateral, ir a:
   Informes → Ciclo de vida → Interacción → Páginas y pantallas.
3. Revisar la métrica Vistas por usuario activo (promedio de páginas vistas por usuario activo).
4. Revisar la métrica Tiempo de interacción medio por usuario activo (promedio de tiempo que dura la sesión de un usuario).
5. Sumar porcentaje de rebote e interacción:
   Por defecto, estas métricas no se muestran en los informes. Para agregarlas debemos ir a la vista
   Informes → Ciclo de vida → Interacción → Resumen de la interacción y añadir:
   • Porcentaje de rebote (Bounce Rate)
   • Porcentaje de interacción (Engagement Rate)
   • Para hacerlo, haz clic en el ícono de editar (✏️), selecciona las métricas y guarda el informe.
   • De esta manera tendrás en un mismo tablero la comparación de interacción y rebote junto con las métricas principales.
6. Utilizar el selector de fechas (arriba a la derecha) para comparar el período actual con el período anterior.
   • Seleccionar la opción Comparar con → Período anterior.
   • Esto permitirá ver la evolución de cada métrica antes y después del pasaje a producción del nuevo diseño.

Glosario de abreviaturas

• LCP – Largest Contentful Paint: Tiempo que tarda en cargarse el elemento de mayor tamaño visible en la ventana del navegador.
• FCP – First Contentful Paint: Tiempo hasta que se muestra el primer contenido visible en la página.
• CLS – Cumulative Layout Shift: Medida de los cambios inesperados en el diseño visual durante la carga.
• Performance Score – Puntuación global de velocidad y optimización.
• Accessibility Score – Puntuación de facilidad de uso para todo tipo de usuarios, incluidas personas con discapacidades.

Archivo con resumen de resultados

Puedes descargar o consultar el archivo Excel con el resumen de resultados pre y post rediseño en este enlace:

Resumen Resultados Rediseño Web - Excel

Puedes descargar o clonar el PPT con el resumen de resultados pre y post rediseño en este enlace:

Base - Reporte Resultados Rediseño Web