UXN CDMX 02-32 - Velocidad para todos: AMP y PWA
•
1 like•251 views
El documento habla sobre AMP (Accelerated Mobile Pages) y PWA (Progressive Web Apps) como formas de mejorar la experiencia del usuario en la web móvil. Explica que AMP se enfoca en cargar páginas rápidamente a través de su cacheo en el borde, mientras que PWA ofrece una experiencia más confiable, rápida y atractiva a través del uso de Service Workers y otras características como notificaciones push. También brinda consejos sobre cómo comenzar a crear sitios web como PWA.
Recommended
More Related Content
What's hot
Similar to UXN CDMX 02-32 - Velocidad para todos: AMP y PWA
Similar to UXN CDMX 02-32 - Velocidad para todos: AMP y PWA (20)
More from UX Nights
More from UX Nights (20)
Recently uploaded
Recently uploaded (18)
UXN CDMX 02-32 - Velocidad para todos: AMP y PWA
- 1. Velocidad para todos AMP & PWA
- 2. ¿Web móvil? ¿Todavía tiene relevancia?
- 4. Fuente: comScore Mobile Metrix, U.S., Age 18+, June 2015 CERO Número de apps promedio que un usuario instala por mes
- 5. de los usuarios abandonan sitios que tardan más de 3 segundos en cargar 53%
- 6. ¿Enfocarse en la experiencia del usuario? ¿Enfocarse en monetización & adquisición?
- 9. Contenido que cambia Carga Lenta Contenido que no responde
- 10. Tres componentes principales AMP HTML <html> <scrip t> AMP JS AMP Cache
- 11. Tres componentes principales AMP HTML <html> <scrip t> AMP JS AMP Cache
- 12. Hola mundo! <!doctype html> <html ⚡> <head> <link rel="canonical" href="hola-mundo.html"> ... <style amp-boilerplate>...</style> <script async src="https://cdn.ampproject.org/v0.js"> </script> </head> <body> <div>Hola mundo!</div> <amp-img src="hola.jpg" height="400" width="800"></amp-img> </body> </html>
- 13. Tres componentes principales AMP HTML <html> <scrip t> AMP JS AMP Cache
- 14. Priorizar carga del contenido Header Logo Responsive hero image Headline Article text Image in article Some more text Ad “Contenido visible” Pre-renderizado “No visible” No Pre-renderizado
- 15. Tres componentes principales AMP CacheAMP HTML <html> <scrip t> AMP JS
- 16. Web server Edge server Edge server Edge server Edge server Edge server Edge server Edge server For illustrative purposes only.
- 17. Pre-renderizado que se siente instantáneo Header Logo Responsive hero image Headline Article text Image in article Some more text Ad
- 18. Start fast, Stay fast** Con algunas condiciones: no usar Javascript ni otras características de PWA, como offline, agregar a home screen, notificaciones push.
- 20. significa mejorar la experiencia web del usuario radicalmente Progressive Web Apps
- 21. La experiencia de usuario debe ser… Confiable
- 22. Confiable significa nunca mostrar el famoso dinosaurio
- 23. La experiencia de usuario debe ser… RápidaConfiable
- 25. La experiencia de usuario debe ser… CautivanteConfiable Rápida
- 26. Cautivante (engaging) Home Screen Inmersivo Notificaciones
- 28. Sin sorpresas!
- 35. La experiencia de usuario debe ser… Confiable Rápida Cautivante
- 36. Service Workers: Aplicaciones confiables Servidor web
- 37. Service worker Cache Servidor web Service Workers: Un proxy en Javascript del lado del cliente
- 38. Service Workers: Una base para Push example.com onpush = function(event) { var data = event.data.json(); self.registration .showNotification(data.title, data.options); }; ServiceWorker.js Push Subscription End Point
- 39. 76% aumento EN CONVERSIONES 30% aumento mensual USUARIOS ACTIVOS DE ANDROID 14% AUMENTO MENSUAL USUARIOS ACTIVOS DE IOS
- 40. Progressive Web Apps son progresivas. (No todo funciona en todos lados todavía, pero la experiencia de usuario es la clave.)
- 41. ¿Cómo empiezo?
- 42. HTTPS: Conexión segura entre el sitio y los usuarios Identidad Confidencialidad Integridad
- 43. Tres maneras de hacer tu web PWA: una versión más sencilla desde cero una sóla funcionalidad
- 44. Tres maneras de hacer tu web PWA: desde cero una versión más sencilla una sóla funcionalidad
- 45. Both data points are compared to native app 82% menos datos PARA COMPLETAR LA PRIMER TRANSACCIÓN 92% menos datos PARA LA CARGA INICIAL
- 46. Tres maneras de hacer tu web PWA: una versión más sencilla una sóla funcionalidad desde cero
- 47. <1s TIEMPO DE CARGA INICIAL E INCLUSO TIEMPOS MÁS RÁPIDOS EN LAS SIGUIENTES CARGAS
- 48. Tres maneras de hacer tu web PWA: a simple version desde cero una sóla funcionalidad una versión más sencilla
- 49. 1,000,000+ SUBSCRIPCIONES EN LOS PRIMEROS 3 MESES 60+ idiomas LANZADOS GLOBALMENTE CON NOTIFICACIONES PUSH
- 50. Tres maneras de hacer tu web PWA: una versión más sencilla desde cero una sóla funcionalidad
- 52. AMP: www.ampproject.org PWA: developer.google.com/web/progressive-web-apps/ Tu primer PWA: g.co/codelabs/pwa AMP & PWA
- 53. Gracias