Amp - contenido instantáneo en móvil
•Descargar como PPTX, PDF•
0 recomendaciones•399 vistas
AMP (Accelerated Mobile Project) de Google permite crear contenidos que carguen de forma instantánea en móvil. Cuenta con el apoyo de toda la industria editorial y grandes medios mundiales (CNN, El País, The New York Post, BBC, etc.). Vemos cómo se trabaja con AMP, sus pros y contras, y cómo hemos reutilizado muchos conceptos de AMP para la nueva versión móvil de Grupo Noticias que acabamos de lanzar.
Más contenido relacionado
Similar a Amp - contenido instantáneo en móvil
Similar a Amp - contenido instantáneo en móvil (20)
Más de Biko
Más de Biko (20)
Último
Último (20)
Amp - contenido instantáneo en móvil
- 1. AMP: contenido instantáneo en móvil ...y su (no) integración en Grupo Noticias alberto.silva@biko2.com
- 2. ¿Qué es AMP? (I) Forma de construir páginas para contenido estático, que carguen instantáneamente (en teoría, para móvil). “Instant. Everywhere” Respuesta universal y Open Source por parte de Google y Twitter a Instant Articles de Facebook. En teoría, pensada para ser la 3ª versión de un web: 1ª escritorio, 2ª móvil y 3ª AMP. Yo apuesto por: Fusionar todas en AMP Si no es posible, fusionar móvil y AMP
- 3. ¿Qué es AMP? (I) Open Source: https://www.ampproject.org/ y https://github.com/ampproject/amphtml Nace del sector editorial (BBC, New York Times, News Corp, Washington Post...) + compañías IT (Google, Twitter, Pinterest, LinkedIn...) Nacido en octubre de 2015 Ritmo muy alto de nuevas funcionalidades
- 5. Sector editorial https://www.ampproject.org/who/ España: 20 Minutos ABC AS El Confidencial El Español El Mundo El Mundo Deportivo EL PAÍS Europa: BBC Bild Corriere della Sera DailyMail.com Frankfurter Allgemeine Zeitung France 24 The Guardian La Stampa USA: ABC News CBS News CNN Forbes The Huffington Post MSNBC The New York Post The New York Times
- 6. Ejemplos El País: http://elpais.com/elpais/2016/04/07/videos/1460031226_524011. amp.html (añadir “.amp.html” a cualquier url) BBC: http://www.bbc.co.uk/news/amp/36483660 The Washintong Post: https://www.washingtonpost.com/amphtml/world/national-security/about-12- released-guantanamo-detainees-implicated-in-deadly-attacks-on- americans/2016/06/08/004d038e-2776-11e6-b989-4e5479715b54_story.html
- 8. Rapidez de carga Según Pinterest, AMP carga 4 veces más rápido y usa 8 veces menos datos que mobile tradicional: https://engineering.pinterest.com/blog/building-faster- mobile-web-experience-amp Con conexiones lentas o con baja cobertura, una página normal tarda 28.50s mientras que AMP tarda 530ms (https://github.com/ageitgey/amplify#first-page-visit- with-regular-2g-throttling)
- 9. Mejor posicionamiento Google redirige a páginas AMP desde febrero de 2016: http://thenextweb.com/google/2015/12/10/google-will-route-users- to-accelerated-mobile-pages-starting-february-2016/ Twitter redirigirá a páginas AMP a mediados de este año: https://amphtml.wordpress.com/2015/12/09/continued-momentum-for- the-amp-project/ Google recomienda, en Webmaster Tools, usar AMP para móvil (http://www.i4u.com/2016/02/105858/google-amp-solution-marfeel)
- 10. CDN de Google de forma gratuita Google ofrece su "Google AMP Cache" para servir una parte del tráfico directamente desde sus servidores http://g.co/ampdemo https://www.ampproject.org/docs/get_started/about- amp.html#google-amp-cache
- 12. Instant. Everywhere. (Mobile?) Instant Critical rendering path hiperoptimizado. No hay ningún elemento que produzca render-blocking. Everywhere Bajo cualquier cobertura móvil (latencia redes). Sólo un hit para mostrar contenido. Recursos externos inline o lazy. Mobile? En teoría. Yo lo recomiendo también para escritorio.
- 13. ¿De qué se compone? AMP HTML: subset de HTML con varias restricciones (no JS! No forms!) y muchos componentes para construir contenido rico de una forma sencilla. “<!doctype html> <html ⚡>” AMP JS: gestiona la carga de recursos y provee de funcionalidad a los componentes de AMP HTML Google AMP Cache: CDN H2 que Google usa en sus resultados de búsqueda
- 14. Restricciones JS: no JS en el documento principal (de momento). Sólo AMP JS (asíncrono). Sí JS en iframes. CSS: inline en el head. < 50Kb. Sólo animaciones aceleradas por GPU (transform y opacity). No !important. Fuentes: sólo desde fast.fonts.net y fonts.googleapis.com Recursos: alto x ancho fijo definido inline Forms: no (de momento) Iframes: sólo HTTPS. Sandboxed. A 600px o el 75% del top de
- 15. Manos a la obra
- 16. Validación Añadir #development=1 a la url para debuggear en consola Si el documento no valida correctamente, Google no la cachéa en su CDN. Para que Google descubra la url AMP: <link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
- 17. AMP Components https://github.com/ampproject/amphtml/blob/master/spec/amp-html-components.md Built-in: amp-img, amp-ad, amp-pixel y amp-video. Extended: amp-accordion, amp-carousel, amp-lightbox, amp- instagram, amp-youtube, amp-sidebar…
- 18. Hecha la ley... Podemos saltarnos todas las restricciones y usar JS, formularios, etc. Google no nos valida ni cachéa. No recomendable: posibles efectos secundarios en posicionamiento.
- 19. Aspectos negativos Sólo contenido estático. No forms (en vías de solución) ni JS No interstitials. Vital para algunos medios. Un JS por componente. Todavía no hay opción de empaquetar Css boilerplate oculta el contenido ya cargado hasta que el JS de AMP se ejecuta
- 20. … y su (no) integración en Grupo Noticias
- 21. Proyecto Modernizar versión móvil de 2008 Propuesta BIKO: AMP para sustituir versión móvil tradicional Se rechaza por falta de soporte de interstitials: es la publicidad mejor pagada Nueva propuesta BIKO: usar las buenas prácticas de AMP en un desarrollo hecho a mano
- 22. One Hit Wonder (I) HTML: minimizado, comprimido y con expires altos CSS: minimizado e inline en el head JS: minimizado e inline en el footer Fuentes: tras pruebas, se descarta hacerlas inline en base64 -> demasiado lento en 2G. Se mantienen outline, en formato woff y woff2, comprimidas y con expires altos
- 23. One Hit Wonder (II) IMGS estructurales: inline en base64 y en fuente (para los iconos) IMGS de contenido: minimizadas, sin datos EXIF y con expires altos. Definidas en el HTML con width y height para que el navegador guarde su espacio sin esperar a cargarse. Carga de imgs en modo lazy. JS de publicidad: en modo defer, o en su defecto, async
- 24. Resultados (en segundos, sin caché) PORTADA GPRS 2G 3G 4G WIFI Antes 49,93 11,15 4,62 2,50 1,71 Ahora 5,62 3,31 1,58 0,81 0,69 NOTICIA GPRS 2G 3G 4G WIFI Antes 37,61 8,94 4,00 1,38 1,30 Ahora 5,03 3,13 1,36 0,68 0,53
- 25. Recursos
- 26. Recursos Sites oficiales: https://www.ampproject.org/ y https://github.com/ampproject/ Ejemplos de cada componente: https://ampbyexample.com/ Extensión Chrome: https://chrome.google.com/webstore/detail/amp- validator/nmoffdblmcmgeicmolmhobpoocbbmknc Módulo DRUPAL: https://www.drupal.org/project/amp Plugin JEKYLL: https://github.com/juusaw/amp-jekyll Plugin WORDPRESS: https://wordpress.org/plugins/amp/ Vídeos de la última I/O de Google:
- 27. ¡GRACIAS!