Antes de recopilar métricas de rendimiento para una auditoría de sitio, puedes realizar varias verificaciones a fin de identificar correcciones fáciles y áreas de enfoque.
Verificación de validez: arquitectura y código
Siempre que sea posible, corrige errores simples y quita los elementos y el código innecesarios antes de medir el rendimiento, pero asegúrate de mantener un registro previo y posterior de los problemas y las correcciones. Estas mejoras aún pueden ser parte de tu trabajo de auditoría.
Arquitectura y recursos del sitio
¿Se puede quitar con facilidad del repositorio de código y del sitio, como las páginas heredadas, el contenido y otros elementos que no se usan? Verifica si hay páginas huérfanas, plantillas redundantes, imágenes sin usar y código y bibliotecas que no se usan.
Errores de tiempo de ejecución
Verifica si hay errores informados en la consola del navegador. No debe haber :).
Linaje
¿Hay errores en el código HTML, CSS o JavaScript? Compilar el análisis con lint 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 procesos de flujo de trabajo y herramientas de integración continua como Travis.
Imágenes y vínculos rotos
Hay muchas herramientas para probar si hay vínculos rotos en el tiempo de ejecución y la compilación, incluidas las extensiones de Chrome (esta es buena) y las herramientas de nodo como Broken Link Checker.
Complementos
Los complementos, como Flash y Silverlight, pueden representar un riesgo para la seguridad, dejó de estar disponible y no funcionan en dispositivos móviles. Usa Lighthouse para buscar complementos.
Realiza pruebas con una variedad de dispositivos y contextos
No hay nada mejor que hacer que personas reales prueben tu sitio con dispositivos reales, varios navegadores y diferentes contextos de conectividad.
Algunas de estas comprobaciones son relativamente subjetivas, pero pueden identificar problemas que afectan el rendimiento percibido. Los vínculos rotos, por ejemplo, pierden tiempo y sienten que no responden. El texto ilegible tarda en lectura.
Pruebas en varios dispositivos
Prueba diferentes tamaños de viewport y ventana. Usa al menos un dispositivo móvil y un dispositivo de escritorio. Si es posible, pruebe su sitio en un dispositivo móvil de gama baja y una pantalla pequeña. ¿El texto es legible? ¿Hay imágenes rotas? ¿Puedes hacer zoom? ¿Los objetivos táctiles son lo suficientemente grandes? ¿Es lento?
¿Hay alguna función que no responda? Haz 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 tus usuarios usan ahora y en el futuro.
Conectividad
Realiza pruebas en varios tipos de redes de destino: conectada, Wi-Fi y móvil. Puedes usar las herramientas del navegador para emular diversas 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 renderizará correctamente el diseño, pero el texto será ilegible, incluso cuando se acerque. La pantalla se ve borrosa y tiene una "transmisión de color", el blanco no se ve blanco, lo que hace que el contenido sea menos legible.
Los resultados simples como este pueden ser mucho más importantes que ocultar los datos de rendimiento.
Prueba la IU y la UX
Accesibilidad, usabilidad y legibilidad
Para garantizar que todos puedan acceder al contenido y las funciones de tu sitio, debes comprender la diversidad de tus usuarios.
Lighthouse y otras herramientas realizan pruebas para detectar problemas específicos de accesibilidad, pero nada supera las pruebas del mundo real. Intenta leer, navegar y también ingresar datos en varias situaciones: por ejemplo, al aire libre bajo la luz del sol o en un tren. Pídeles a amigos, familiares y colegas
que prueben tu sitio. Intenta consumir contenido mediante un lector de pantalla, como VoiceOver en Mac o NVDA en Windows.
Puedes obtener más información sobre cómo implementar y revisar la accesibilidad en el curso de Udacity sobre accesibilidad y el artículo de Web Fundamentals Cómo hacer una revisión de accesibilidad.
Mantén un registro de la auditoría de accesibilidad. Lo más probable es que puedas realizar mejoras simples que sean buenas para todos tus usuarios.
Problemas fundamentales de IU y UX
Interacciones que no funcionan como deberían, elementos desbordados en ventanas y viewports más pequeños, objetivos táctiles demasiado pequeños, contenido ilegible, desplazamientos irregulares... Abre varias páginas en el sitio y prueba la navegación y todas las funcionalidades principales. Mantén un registro.
Imágenes, audio y video
Prueba si hay contenido desbordado, relación de aspecto incorrecta, recortes incorrectos 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 ve claramente de inmediato cuando abres el sitio.
- ¿Te gusta consumir contenido y seguir vínculos?
- ¿Hay jerarquías o recorridos 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 podría quitarse?
- El diseño del contenido es tan importante como el diseño de la interfaz. ¿El contenido de texto y de imágenes de tu sitio es apropiado para dispositivos móviles y de escritorio? ¿Se puede eliminar algo? Redacta tu contenido para dispositivos móviles.