Web Page test
1. Script
logData 0
navigate [Link]
exec [Link]('.input-lg').value='iphone’
logData 1
execAndWait [Link]('#search > span > button').click()
2. Analisis Performance Summary
Quick
En el primer paso donde nos preguntamos si es rápido, a primera vista podemos ver que nos
marca un not bad, a pesar que esto nos permite ignorar y enfocarnos en otra área no quiere decir
que no hay posibilidad de mejora.
Recomendación: donde se presenta problemas con los fonts y la manera en que se cargan hace
que el usuario no vea ningún Font hasta que termina la carga esto se podría solucionar font-
display="swap"
Es necesario realizar una prueba para saber si esta solucion nos da los resultados que
queremos.
Usable
Se observa que el sitio posee estructura estable, y rápidamente pasa a ser interactivo, pero
presenta problemas de accesibilidad lo cual genera problemas de métricas SEO ya que cada vez
más los motores de búsqueda valoran esto a la hora de rankear las páginas y asignar
puntuaciones.
Los colores deberían generar el suficiente contraste para ser encontrados por personas con menor
capacidad visual y el texto de los mismos deben mejorar.
Corregir los textos de los botones para que sean discernibles por lectores de pantalla y ajustar el
contraste de color para cumplir con los ratios mínimos recomendados mejorará la accesibilidad.
Resiliencia
El hecho de no depender de terceros que nos bloqueen ayuda con una base sólida en temas de
resiliencia.
A pesar de esto vemos que hay paquetes y dependencias que necesitan ser actualizados a
versiones más recientes para poder evitar vulnerabilidades que puedan ser explotadas por
terceros o sufrir momentos de baja prolongado.
Recomendaciones generales en esta primera etapa:
1. Rendimiento: Implementaciones técnicas como división de código y tree shaking para
reducir aún más el tiempo de carga inicial.
2. Usabilidad: Sesiones de prueba con usuarios para identificar y corregir problemas de
usabilidad no cubiertos por herramientas automatizadas, ademas de sesiones con los
desarrolladores para mantener la usabilidad como principio de desarrollo de nuevos
componentes y a la hora de manteners el codigo actual.
3. Resiliencia: Establecer un sistema de monitoreo para la detección en tiempo real de la
degradación del rendimiento o violaciones de seguridad.
Metricas de performance
TFB: no mucho que analizar vemos que se comparta de una manera muy rapida y una respuesta
adecuada del servidor puede inferirse de esto.
Start Render: con idicador de .400s nos dice lo mismo los usuarios comienzan a ver casi de
manera inmediata contenido en la pagina
FCP: al ser inferior a la metirca pasada podemos inferir que existe una carga progresivca
eficiente del contenido visual
LCP: podriamos decir que es un excelente numero ya que la imagen o texto mas pesado se esta
cargando en tan solo .304s
CLS & TBT: muestran indices perfectos o donde deberiasmos siempre apuntar a que se
encuentren permitiendo mostrar el sitio sin bloqueos casi de manera inmediata
A pesar de las excelentes metricas, podemos dar unas recomendaciones de manera general no
solo para mejorarlas si no tambien para mantenerlas a medida que el sitio evolcuiona, agrega
nuevos usuarios y nuevas funcionalidades como lo serian:
• Seguir manteniendo el peso de la página bajo mediante la compresión de imágenes y el
cambiar estas por texto en los casos que sea posible y no perjudique la experiencia de
usuario.
• Monitorear el CLS para asegurarse de que nuevos contenidos o cambios en el sitio no
introduzcan desplazamientos de diseño inesperados, siempre aspirando a mantenerlo en 0
o lo mas cerca posible de este.
• Evaluar el uso de técnicas de carga diferida o lazy loading como es conocido en ingles
para imágenes y otros recursos no críticos para mantener bajos el TTFB y el LCP a
medida que el sitio evoluciona.
Analisis en metricas de uso real y comparacion vs las de entorno controlado
Primera Pintura con Contenido (FCP): 2.00 segundos (Justo)
• Comparación: Esto es 1.70 segundos peor que en la prueba de WPT (.30 segundos).
• Recomendaciones: Optimizar el tamaño y la carga de las imágenes, minimizar el CSS y el
JavaScript que puedan estar bloqueando las cargas. Considerar la carga diferida para los
recursos no críticos.
Pintura de Contenido Más Grande (LCP): 2.05 segundos (Bueno)
• Comparación: 1.75 segundos peor que en la prueba de WPT (.30 segundos).
• Recomendaciones: Priorizar la carga de los recursos más importantes y asegurar que las
imágenes y los bloques de texto grandes se carguen rápidamente. La implementacion de
formatos de imagen modernos como WebP puede entrar a ayudarnos en este punto.
Desplazamiento Acumulativo del Diseño (CLS): 0.01 (Bueno)
• Comparación: Ligeramente peor que en la prueba de WPT (0).
• Recomendaciones: A pesar que podriamos dejar este punto libre de recomendaciones
podriamos colocar que estabilizar el diseño como los tamaños de los anuncios o
imágenes sean conocidos de antemano y evitar inserciones dinámicas de contenido que
puedan causar cambios en el diseño, ayudaria a manteernernos en un numero casi ideal
como el que tenemos.
Retardo de la Primera Entrada (FID): 0.00 segundos (Bueno)
• Comparación: No aplicable, al ser métrica de campo sin datos de WPT.
• Recomendaciones: De igual manera podemos recomendar buenas practicas como
minimizar JavaScript que no sea crítico para la interacción inicial, para mantener este
valor bajo.
Tiempo hasta el Primer Byte (TTFB): 0.97 segundos (Justo)
• Comparación: 0.80 segundos peor que en la prueba de WPT (.18 segundos).
• Recomendaciones: Mejorando la respuesta del servidor mediante optimizaciones en el
backend, utilizar una Red de Distribución de Contenidos (CDN) y asegurar una buena
caché del lado del servidor nos permite reducir este numero.
Interacción a la Siguiente Pintura (INP): 0.03 segundos (Bueno)
• Comparación: No aplicable, al ser métrica de campo sin datos de WPT.
• Recomendaciones: Sin embargo podriamos recomendar continuar optimizando la carga
y ejecución de scripts para mantener las interacciones rápidas.
Waterfall
Podemos observar que el tiempo que se dura en cargar desde la pagina de inicio a nuestro
resultado de la busqyeda es muy bueno pero con espacios de mejora.
Ademas de esto se aprecia en el waterfall como durante los primeros 0.3 seg la pagina no ha
cargado nada y avanza al 100% en tan solo 0.1s para dar un total de 0.4s toda la interaccion.
Pitch de venta a cliente
Nuestro análisis integral, utilizando tanto WebPageTest como datos reales recopilados por en
Chrome, nos indica que mientras el sitio muestra un rendimiento excepcional en pruebas
controladas, hay diferencias significativas cuando se observa en el contexto del uso real por parte
de los usuarios:
1. Primera Pintura con Contenido (FCP) y Pintura de Contenido Más Grande (LCP):
Los tiempos están por encima del ideal en el uso real, lo que indica retrasos en la
visibilidad del contenido principal para sus visitantes.
2. Desplazamiento Acumulativo del Diseño (CLS): Aunque bueno, muestra margen de
mejora para garantizar una experiencia visual estable.
3. Tiempo hasta el Primer Byte (TTFB): Más lento en el mundo real, lo que sugiere
demoras en la respuesta del servidor.
Áreas de Mejora y Estrategias Propuestas
1. Optimización de Contenidos Visuales: Implementaremos técnicas avanzadas para
reducir el tamaño de las imágenes y vídeos sin comprometer su calidad, y optimizaremos
el orden de carga para asegurar un FCP y LCP rápidos.
2. Estabilidad Visual: Ajustaremos el diseño y los elementos dinámicos para minimizar el
CLS, asegurando una experiencia de navegación fluida y sin sorpresas para el usuario.
3. Mejora del Rendimiento del Servidor: Optimizaremos la configuración del servidor y
emplearemos una CDN para mejorar el TTFB, garantizando que los usuarios
experimenten tiempos de carga rápidos independientemente de su ubicación geográfica.
4. Carga Diferida y Optimización de Scripts: Revisaremos y optimizaremos el JavaScript
y CSS, implementando la carga diferida donde sea beneficioso para no obstruir la
interactividad inicial del usuario.
Es crucial reconocer que el rendimiento del sitio afecta la satisfacción del usuario asi como el
SEO y las tasas de conversión. Un sitio más rápido mejorara la visibilidad en los motores de
búsqueda y aumenta la probabilidad de que los visitantes se conviertan en clientes.
