¿Por qué y qué?
Es probable que hayas oído hablar de todos los beneficios que las técnicas de apps web progresivas pueden hacer por tu sitio. Podrías sentir la tentación de ir directamente y agregar funciones de AWP. Eso es posible, pero te resultará mucho mejor si te preparas primero para la "AWP".
La magia de la AWP no podrá solucionar problemas como el bloqueo de JavaScript o las imágenes ampliadas. Las AWP necesitan una base sólida.
Entonces, ¿cómo verificas el estado de tu 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.
La auditoría de tu sitio o app te ayudará a crear una experiencia resiliente y de buen rendimiento, además de destacar los logros rápidos que se pueden implementar con una aprobación mínima. Una auditoría también te brinda un modelo de referencia para el desarrollo basado en datos. ¿Un 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 para presumir una vez que has 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 mejorar el rendimiento, la accesibilidad, la seguridad y la SEO.
Si solo tienes 30 minutos...
Es probable que Lighthouse siga siendo el mejor punto de partida, pero, con un poco más de tiempo, también puedes registrar resultados de otras herramientas:
- Panel de seguridad de las Herramientas para desarrolladores de Chrome: Uso de HTTPS.
- Panel de red de las Herramientas para desarrolladores de Chrome: Tiempos de carga; tamaños de los recursos y cantidad de solicitudes para 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 problemas de fugas de memoria, tareas en ejecución o carga de recursos. Asegúrate de probar el sitio en dispositivos que representen a tus usuarios.
- WebPagetest: Rendimiento en diferentes ubicaciones y tipos de conexión, almacenamiento en caché, tiempo hasta el primer byte, uso de CDN
- PageSpeed Insights: Rendimiento de carga, costo de datos y uso de recursos, incluidos los datos del Informe sobre la experiencia del usuario en Chrome que destacan 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 de mejorarla.
Prueba tu sitio web como un usuario que lo ve por primera vez. Abre el sitio en una ventana de incógnito (privada) o usa las herramientas del navegador para inhabilitar el almacenamiento en caché y liberar almacenamiento. Esto garantiza que todos los recursos se recuperen de la red y no de una caché local, de modo que obtengas un panorama preciso del rendimiento de la primera carga.
Nada supera las pruebas en el mundo real. Prueba tu sitio con los mismos dispositivos y conectividad que tus usuarios y mantén un registro de tu experiencia subjetiva.
Si la variedad de herramientas te sorprende...
Consulta nuestra guía: Cómo pensar las herramientas de velocidad.
Si nada más, usa Lighthouse para comprobar lo siguiente:
- HTTPS: Todos los sitios deben entregar todos los recursos a través de HTTPS.
- Configuración del servidor: El servidor web o CDN debe usar la compresión de forma correcta, usar HTTP/2 e incluir encabezados adecuados para permitir que el navegador almacene recursos en caché.
- Elementos de secuencia de comandos que se pueden mover a la parte inferior de la página o que se les puede asignar un atributo asíncrona o aplazada.
- JavaScript y bibliotecas que se pueden quitar.
- CSS sin uso y JavaScript sin uso.
- Imágenes que se pueden guardar con una compresión más alta o dimensiones de píxeles más pequeñas.
- Archivos de imagen que serían más pequeños guardados con un formato diferente, por ejemplo, fotos guardadas como PNG.
Público, partes interesadas, contexto
Las prioridades para la refactorización dependen de tu público, contenido y funcionalidad. ¿Quién visita tu sitio? ¿Por qué y cómo lo utilizan? ¿Cuál es tu presupuesto de rendimiento? Si no sabes la respuesta a estas preguntas, prueba los ejercicios de recopilación de requisitos de nuestros recursos de capacitación de AWP: Tu público, tu contenido y Diseño 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, revise las estadísticas de la página para tener una idea de dónde enfocarse. Los porcentajes de rebote elevados, el tiempo en la página reducido y las páginas de salida inesperadas pueden ser buenos indicadores de por dónde empezar. Del mismo modo, métricas comerciales como costos de hosting, clics en los anuncios y conversiones Obtén una visión general de los interesados sobre qué datos les importan.
Prueba, graba, corrige, repite
Registra el estado de tu sitio antes de realizar cambios para detectar 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.