Antes de recopilar métricas de rendimiento para una auditoría del sitio, hay varias verificaciones que puedes realizar para identificar correcciones sencillas y áreas en las que debes enfocarte.
Verificación de validez: arquitectura y código
Siempre que sea posible, corrige errores simples y quita los recursos y el código innecesarios antes de medir el rendimiento, pero asegúrate de mantener un registro de antes y después de los problemas y las correcciones. Estas mejoras pueden ser parte de tu trabajo de auditoría.
Arquitectura y recursos del sitio
¿Se puede quitar fácilmente algo del repositorio de código y del sitio, como páginas heredadas, contenido o cualquier otro recurso que no se use? Busca páginas huérfanas, plantillas redundantes, imágenes sin usar y código y bibliotecas sin usar.
Errores de tiempo de ejecución
Comprueba si hay errores informados en la consola del navegador. No debería haber ninguno :).
Linting
¿Hay errores en tu código HTML, CSS o JavaScript? Integrar linting en tu flujo de trabajo puede ayudar a mantener la calidad del código y evitar regresiones. Te recomendamos HTMLHint, StyleLint y ESLint, que se pueden usar como complementos de editores de código o ejecutar desde la línea de comandos dentro de los procesos de flujo de trabajo y las herramientas de integración continua, como Travis.
Vínculos e imágenes rotos
Existen muchas herramientas para probar si hay vínculos rotos en el tiempo de compilación y el tiempo de ejecución, incluidas las extensiones de Chrome (esta es buena) y las herramientas de Node, como Broken Link Checker.
Complementos
Los complementos como Flash y Silverlight pueden ser un riesgo de seguridad, su compatibilidad ya no está disponible y no funcionan en dispositivos móviles. Usa Lighthouse para verificar si hay complementos.
Prueba con una variedad de dispositivos y contextos
Nada mejor que conseguir que personas reales prueben tu sitio con dispositivos reales, varios navegadores y diferentes contextos de conectividad.
Algunas de estas verificaciones son relativamente subjetivas, pero pueden identificar problemas que afectan el rendimiento percibido. Por ejemplo, los vínculos rotos hacen perder tiempo y parecen no responder. El texto ilegible es lento de leer.
Pruebas en varios dispositivos
Prueba diferentes tamaños de viewport y ventana. Usa al menos un dispositivo móvil y uno de escritorio. Si es posible, prueba tu sitio en un dispositivo móvil de baja especificación con una pantalla pequeña. ¿Se puede leer el texto? ¿Hay alguna imagen dañada? ¿Puedes acercar la imagen? ¿Los objetivos táctiles son lo suficientemente grandes? ¿Es lento?
¿Alguna función no responde? Captura de pantalla o video de los resultados.
Pruebas multiplataforma
¿Para qué plataformas segmentas tus anuncios? Debes realizar pruebas en los navegadores y
los sistemas operativos que usan tus usuarios ahora y en el futuro.
Conectividad
Realiza pruebas en varios tipos de redes de destino: conectada, Wi-Fi y celular. Puedes usar herramientas del navegador para simular una variedad de condiciones de red.
Dispositivos
Asegúrate de probar tu sitio en los mismos dispositivos que tus usuarios. En la siguiente foto, se muestra la misma página en dos teléfonos diferentes.
En la pantalla más grande, el texto es pequeño, pero legible. En la pantalla más pequeña, el navegador renderiza el diseño correctamente, pero el texto es ilegible, incluso cuando se acerca. La pantalla está desenfocada y tiene un "tono de color" (el blanco no se ve blanco), lo que hace que el contenido sea menos legible.
Los hallazgos simples como este pueden ser mucho más importantes que los datos de rendimiento oscuros.
Prueba la IU y la UX
Accesibilidad, usabilidad y legibilidad
Para garantizar que todos puedan acceder al contenido y la funcionalidad de tu sitio, debes comprender la diversidad de tus usuarios.
Lighthouse y otras herramientas prueban problemas de accesibilidad específicos, pero nada reemplaza las pruebas en el mundo real. Intenta leer, navegar y escribir datos en una variedad de situaciones: por ejemplo, al aire libre bajo la luz del sol o en un tren. Pídeles a un grupo de
amigos, familiares y colegas que prueben tu sitio. Intenta consumir contenido a través de un lector de pantalla, como VoiceOver en Mac o NVDA en Windows.
Puedes obtener más información para implementar y revisar la accesibilidad en el curso de Udacity sobre accesibilidad y en el artículo de Web Fundamentals How To Do an Accessibility Review.
Mantén un registro de tu auditoría de accesibilidad. Es probable que puedas realizar mejoras simples que sean buenas para todos tus usuarios.
Problemas fundamentales de la IU y la UX
Interacciones que no funcionan como deberían, elementos desbordados en ventanas y viewports más pequeñas, objetivos de toque demasiado pequeños, contenido ilegible, desplazamiento irregular… Abre varias páginas en el sitio, prueba la navegación y todas las funciones principales. Mantén un registro.
Imágenes, audio y video
Verifica si hay contenido desbordado, relación de aspecto incorrecta, recorte deficiente y problemas de calidad.
Pruebas subjetivas de la IU
Es posible que no todas sean relevantes, pero los cambios simples pueden facilitar la refactorización:
- ¿El mensaje "¿Qué puedo hacer aquí?" es claro de inmediato cuando abres el sitio?
- ¿Te atrae consumir contenido y seguir vínculos?
- ¿Hay jerarquías o rutas visuales, o todo tiene el mismo peso visual?
- ¿El diseño está desordenado?
- ¿Hay demasiadas fuentes?
- ¿Hay imágenes o algún otro contenido que se pueda quitar?
- El diseño de contenido es tan importante como el diseño de interfaz. ¿El contenido de texto e imagen de tu sitio es apropiado para los contextos de dispositivos móviles y computadoras de escritorio? ¿Se puede eliminar algo? Escribe para dispositivos móviles.