Antes de recopilar métricas de rendimiento para una auditoría del sitio, puedes realizar varias verificaciones para identificar correcciones sencillas y áreas de enfoque.
Verificación de validez: Arquitectura y código
Siempre que sea posible, corrige los 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 seguir formando 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
Verifica si hay errores informados en la consola del navegador. No debería haber ninguno :).
Análisis de código
¿Hay errores en tu código HTML, CSS o JavaScript? La compilación de linting en tu
flujo de trabajo puede ayudar a mantener la calidad del código y evitar regresiones. Recomendamos
HTMLHint, StyleLint y
ESLint, que se pueden usar como complementos del editor de código o ejecutarse 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 vínculos rotos en el momento de la 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
dejó de estar disponible
y no funcionan en dispositivos móviles. Usa Lighthouse para verificar si hay complementos.
Realiza pruebas con una variedad de dispositivos y contextos
No hay nada mejor que lograr 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 dan la sensación de que el sitio "no responde". El texto ilegible es lento de leer.
Pruebas en varios dispositivos
Prueba diferentes tamaños de viewport y de 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 gama con una pantalla pequeña. ¿El texto es legible? ¿Hay imágenes dañadas? ¿Puedes acercar la imagen? ¿Los objetivos táctiles son lo suficientemente grandes? ¿Es lenta?
¿Hay alguna función que no responda? Toma una captura de pantalla o graba un video de los resultados.
Pruebas multiplataforma
¿A qué plataformas te orientas? Debes realizar pruebas en los navegadores y
sistemas operativos que usan tus usuarios ahora y en el futuro.
Conectividad
Prueba en varios tipos de redes de destino: conectada, Wi-Fi y móvil. Puedes usar las herramientas del navegador para emular una variedad de condiciones de red.
Dispositivos
Asegúrate de probar tu sitio en los mismos dispositivos que usan 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 se ve borrosa y tiene una "dominante 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 poco claros.
Prueba la IU y la UX
Accesibilidad, usabilidad y legibilidad
Para garantizar que el contenido y la funcionalidad de tu sitio sean accesibles para todos, debes comprender la diversidad de tus usuarios.
Lighthouse y otras herramientas realizan pruebas para detectar problemas de accesibilidad específicos, pero nada supera las pruebas en el mundo real. Intenta leer, navegar y, también, ingresar datos en una variedad de situaciones, por ejemplo, al aire libre bajo la luz del sol o en un tren. Pídeles a varios amigos, familiares y colegas que prueben tu sitio. Intenta consumir contenido con 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 Cómo realizar una revisión de accesibilidad.
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 que se desbordan en ventanas y viewports más pequeños, objetivos táctiles demasiado pequeños, contenido ilegible, desplazamiento inestable, etcétera. Abre varias páginas del sitio, prueba la navegación y todas las funciones principales. Lleva un registro.
Imágenes, audio y video
Realiza pruebas para detectar contenido desbordado, relación de aspecto incorrecta, recortes deficientes y problemas de calidad.
Pruebas de IU subjetivas
Es posible que no todas sean relevantes, pero los cambios simples pueden facilitar la refactorización:
- ¿La pregunta "¿Qué puedo hacer aquí?" se responde de inmediato cuando abres el sitio?
- ¿Te sientes atraído a 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 y de 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.