¿Por qué y qué?
Probablemente hayas oído hablar de todos los beneficios que las técnicas de Progressive Web App pueden hacer por tu sitio. Es posible que sientas la tentación de agregar funciones de la AWP directamente. Eso es posible, pero te resultará mucho mejor si primero estás "listo para AWP".
Ningún uso mágico de AWP solucionará problemas como el bloqueo de JavaScript o las imágenes demasiado cargadas. Las AWP necesitan una base sólida.
Entonces, ¿cómo verifica el estado de su sitio web? El primer paso es realizar una auditoría del sitio: una revisión objetiva de lo que funciona bien y de dónde (y cómo) se podría mejorar.
Auditar tu sitio o app te ayudará a crear una experiencia resiliente y de alto rendimiento, y a destacar las ganancias rápidas que se pueden implementar con una aprobación mínima. Una auditoría también te proporciona un modelo de referencia para el desarrollo basado en datos. ¿El cambio mejoró las cosas? ¿Cómo se compara tu sitio con el de la competencia? Obtienes métricas para priorizar el esfuerzo y evidencia concreta de la que puedes presumir una vez que hayas realizado mejoras.
Si solo tienes 5 minutos...
Ejecuta Lighthouse en tu página principal y guarda los datos del informe. Obtendrás un modelo de referencia cuantificado y una lista de tareas pendientes para realizar mejoras en el rendimiento, la accesibilidad, la seguridad y la SEO.
Si solo tienes 30 minutos...
Es probable que Lighthouse siga siendo el mejor lugar para comenzar, pero con un poco más de tiempo también podrás grabar resultados de otras herramientas:
- Panel de seguridad de las Herramientas para desarrolladores de Chrome: Uso de HTTPS.
- Panel de red de Herramientas para desarrolladores de Chrome: Tiempos de carga, tamaños de recursos y cantidad de solicitudes de HTML, CSS, JavaScript, imágenes, fuentes y otros archivos.
- Administrador de tareas de Chrome: Si tu sitio usa constantemente una cantidad significativa de CPU o más memoria que otras apps, es posible que debas corregir fugas de memoria, la ejecución de tareas o problemas de carga de recursos. Asegúrate de probar tu sitio en dispositivos que representen a tus usuarios.
- WebPagetest: Rendimiento de diferentes ubicaciones y tipos de conexión, almacenamiento en caché, tiempo hasta el primer byte y uso de CDN.
- PageSpeed Insights: Rendimiento de la carga, costo de datos y uso de recursos, incluidos los datos del informe sobre la experiencia del usuario en Chrome, en los que se destacan las estadísticas de rendimiento reales.
- Cuadro de evaluación de velocidad y Calculadora de impacto: Compara la velocidad del sitio con la de apps similares y calcula la posible oportunidad de ingresos para mejorar la velocidad del sitio.
Asegúrate de probar tu sitio web como si fuera un usuario nuevo. Abre el sitio en una ventana de incógnito (privada) o usa las herramientas del navegador para inhabilitar el almacenamiento en caché y liberar espacio. Esto garantiza que todos los elementos se recuperen de la red y no de una caché local, para que obtengas un panorama preciso del rendimiento de la primera carga.
Nada supera las pruebas reales. Prueba tu sitio con los mismos dispositivos y la misma conectividad que tus usuarios, y mantén un registro de tu experiencia subjetiva.
La variedad de herramientas te resulta impresionante...
Consulta nuestra guía: Cómo pensar acerca de las herramientas de velocidad.
Si nada más, simplemente usa Lighthouse para comprobar lo siguiente:
- HTTPS: Cada sitio debe publicar todos los recursos mediante HTTPS.
- Configuración del servidor: Tu servidor web o CDN debe usar la compresión correctamente, usar HTTP/2 y incluir encabezados adecuados para permitir que el navegador almacene los recursos en caché.
- Elementos de secuencias de comandos que se pueden mover a la parte inferior de la página o a los que se les otorga un atributo async or defer.
- JavaScript y bibliotecas que se pueden quitar.
- CSS sin usar y JavaScript sin usar.
- Imágenes que se pueden guardar con una compresión más alta o dimensiones de píxeles más pequeñas.
- Los archivos de imagen más pequeños se guardan con un formato diferente (por ejemplo, las fotos guardadas como PNG).
Público, interesados, contexto
Las prioridades de refactorización dependen de tu público, contenido y funcionalidad. ¿Quién visita tu sitio? ¿Por qué y cómo lo usan? ¿Cuál es tu presupuesto de rendimiento? Si no sabes con certeza la respuesta a estas preguntas, consulta los ejercicios de recopilación de requisitos de nuestros recursos de capacitación de AWP: Tu público, tu contenido y Diseña para todos tus usuarios.
¿Quiénes son tus interesados y cuáles son sus prioridades? Esto afectará la forma en que estructuras, presentas y compartes tus datos de auditoría.
Si no puede auditar todo su sitio, consulte las estadísticas de la página para tener una idea de dónde enfocarse. Los porcentajes de rebote altos, el bajo tiempo en la página y las páginas de salida inesperadas pueden ser un buen indicador de por dónde comenzar. Asimismo, métricas empresariales, como los costos de hosting, los clics en los anuncios y las conversiones. Obtén una descripción general de las partes interesadas sobre qué datos les importan.
Prueba, registra, corrige y repite
Registra el estado de tu sitio antes de realizar cualquier cambio para identificar problemas y establecer un punto de partida para mejoras o regresiones. Eso te proporciona datos para justificar y recompensar el esfuerzo de desarrollo.
Asegúrate de probar varios tipos de páginas dentro de tu sitio, no solo la página principal. En el caso de las apps de una sola página, prueba diferentes componentes, rutas y flujos de UX, y no solo la primera experiencia de carga.