¿Por qué y qué?
Es probable que hayas escuchado sobre todas las ventajas que las técnicas de las apps web progresivas pueden brindar a tu sitio. Es posible que sientas la tentación de comenzar a agregar funciones de AWP de inmediato. Eso es posible, pero te será mucho mejor si primero obtienes la versión "apta para la AWP".
Ninguna cantidad de magia de la AWP solucionará problemas como el bloqueo de JavaScript o las imágenes sobredimensionadas. Las AWP necesitan una base sólida.
Entonces, ¿cómo puedes verificar 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 dónde (y cómo) se podrían realizar mejoras.
Auditar tu sitio o app te ayudará a crear una experiencia resiliente y de alto rendimiento, y a 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. ¿Mejoró la situación con algún cambio? ¿Cómo se compara tu sitio con los competidores? Obtienes métricas para priorizar el esfuerzo y evidencia concreta para presumir una vez que hayas introducido mejoras.
Si solo tienes 5 minutos…
Ejecuta Lighthouse en tu página principal y guarda los datos del informe. Obtienes un modelo de referencia cuantificado y una lista de tareas para mejorar el rendimiento, la accesibilidad, la seguridad y el SEO.
Si solo tienes 30 minutos…
Lighthouse sigue siendo el mejor lugar para comenzar, pero con un poco más de tiempo también puedes registrar los 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 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 CPU significativa o más memoria que otras apps, es posible que debas corregir fugas de memoria, problemas de ejecución de tareas o carga de recursos. Asegúrate de probar tu sitio en dispositivos representativos de tus usuarios.
- WebPagetest: Rendimiento para diferentes ubicaciones y tipos de conexión, almacenamiento en caché, tiempo hasta el primer byte y 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 las estadísticas de rendimiento del mundo real.
- Cuadro de evaluación de velocidad y calculadora de impacto: Compara la velocidad del sitio con la de otros sitios y estima la posible oportunidad de ingresos que podría generar mejorar la velocidad del sitio.
Asegúrate de probar tu sitio web como lo ve un usuario 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 borrar el almacenamiento. Esto garantiza que cada recurso se recupere de la red y no de una caché local, de modo que obtengas una imagen precisa del rendimiento de la primera carga.
Nada supera las pruebas en el mundo real. Prueba tu sitio con los mismos dispositivos y la misma conectividad que tus usuarios, y lleva un registro de tu experiencia subjetiva.
Si te resulta desconcertante la variedad de herramientas…
Consulta nuestra guía: Cómo pensar en las herramientas de velocidad.
Si no tienes otra opción, usa Lighthouse para verificar lo siguiente:
- HTTPS: Todos los sitios deben entregar todos los recursos a través de HTTPS.
- Configuración del servidor: Tu servidor web o CDN debe usar la compresión correctamente, usar HTTP/2 y incluir los encabezados adecuados para permitir que tu navegador almacenen en caché los recursos.
- Elementos de secuencia de comandos que se pueden mover a la parte inferior de la página o a los que se les puede asignar un atributo asynchrono o diferido.
- JavaScript y bibliotecas que se pueden quitar.
- CSS sin usar y JavaScript sin usar.
- Son 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 si se guardaran en un formato diferente, por ejemplo, fotos guardadas como PNG
Público, partes interesadas y 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 usan? ¿Cuál es tu presupuesto de rendimiento? Si no estás seguro de la respuesta a estas preguntas, prueba los ejercicios de recopilación de requisitos de nuestros recursos de capacitación sobre AWP: Tu público, tu contenido y Diseña para todos tus usuarios.
¿Quiénes son tus partes interesadas y cuáles son sus prioridades? Esto afectará la forma en que estructures, presentes y compartas tus datos de auditoría.
Si no puedes auditar todo tu sitio, consulta las estadísticas de la página para tener una idea de dónde enfocarte. Las tasas de rebote altas, el tiempo en la página bajo y las páginas de salida inesperadas pueden ser un buen indicador de dónde comenzar. Del mismo modo, las métricas empresariales, como los costos de alojamiento, los clics en el anuncio y las conversiones. Obtén una descripción general de las partes interesadas sobre los datos que les interesan.
Prueba, registra, corrige y repite
Registra el estado de tu sitio antes de realizar cambios para detectar problemas y establecer un punto de partida para las mejoras o regresiones. Esto te brinda datos para justificar y recompensar el esfuerzo de desarrollo.
Asegúrate de probar varios tipos de páginas en 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 experiencia de carga inicial.