Es posible que hayas oído hablar de los beneficios que las técnicas de aplicaciones web progresivas (AWP) pueden aportar a tu sitio. Es posible que sientas la tentación de agregar funciones de AWP sin mejorar la base del rendimiento de tu sitio. Sin embargo, ninguna cantidad de funciones de PWA puede solucionar los problemas relacionados con el bloqueo de JavaScript y las imágenes infladas.
En cambio, el primer paso es realizar una auditoría del sitio, una revisión objetiva de lo que funciona bien y de lo que se puede mejorar.
Auditar tu sitio o app te ayuda a crear una experiencia resiliente y de alto rendimiento. Además, destaca los resultados rápidos que se pueden implementar con una aprobación mínima. Una auditoría crea un valor de referencia para el desarrollo basado en datos. ¿Un cambio mejoró las cosas? ¿Cómo se compara tu sitio con los de la competencia? Obtendrás métricas para priorizar el esfuerzo y evidencia concreta para presumir una vez que hayas realizado mejoras.
Con solo 5 minutos
Ejecuta Lighthouse en tu página principal y guarda los datos del informe. Obtendrás una referencia cuantificada y una lista de tareas pendientes para mejorar el rendimiento, la accesibilidad, la seguridad y la SEO.
Con solo 30 minutos
Lighthouse probablemente siga siendo el mejor lugar para comenzar, pero, si tienes más 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 solicitudes de red de las Herramientas para desarrolladores de Chrome: Tiempos de carga, tamaños de los recursos y cantidad de solicitudes de HTML, CSS, JavaScript, imágenes, fuentes y otros archivos.
- Administrador de tareas de Chrome: Si tu sitio usa regularmente una cantidad significativa de CPU o más memoria que otras apps, es posible que debas corregir las pérdidas de memoria, la ejecución de tareas o los problemas de carga de recursos.
- WebPagetest: 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.
Asegúrate de probar tu sitio web como lo vería un usuario que lo visita 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, por lo que obtendrás una imagen precisa del rendimiento de la primera carga.
Nada supera las pruebas en el mundo real. Asegúrate de probar tu sitio en dispositivos y con conectividad que sean representativos de tus usuarios, y mantén un registro de tu experiencia subjetiva.
Si las herramientas te confunden
Consulta nuestra guía: Cómo pensar en las herramientas de velocidad.
Si no puedes hacer nada más, 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 almacene 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 async o defer
- JavaScript y bibliotecas que se pueden quitar
- Código sin usar, como bibliotecas de CSS y JavaScript
- Oportunidades para reducir el tamaño de los píxeles de las imágenes
- Cambios en el formato de archivo que mejorarían el tamaño de una imagen, como cambiar un PNG a un JPG
Público, partes interesadas y contexto
Las prioridades para la refactorización dependen de tu público, tu contenido y tu funcionalidad. ¿Quién visita tu sitio? ¿Por qué y cómo lo usan? ¿Cuál es tu presupuesto de rendimiento?
¿Quiénes son tus interesados y cuáles son sus prioridades? Esto afecta la forma en que estructuras, presentas y compartes los datos de la 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 buenos indicadores de dónde comenzar. Del mismo modo, las métricas de la empresa, como los costos de hosting, los clics en anuncios y las conversiones. Obtener una descripción general de las partes interesadas sobre qué datos son importantes para ellas
Prueba, graba, corrige y repite
Registra el estado de tu sitio antes de realizar cualquier cambio para descubrir problemas y establecer un punto de partida para las mejoras o regresiones. Esto te proporciona datos para justificar y recompensar el esfuerzo de desarrollo.
Prueba varios tipos de páginas en tu sitio. En el caso de las apps de una sola página, prueba los componentes, las rutas y los flujos de UX, en lugar de solo la experiencia de carga inicial.