Durante la media hora de la sesión aprenderemos qué es el proyecto AMP, en qué nos puede beneficiar, si es una tecnología que tendríamos que implementar en nuestra web y sobre todo, aprenderemos a adaptar nuestro WordPress para que sirva correctamente el contenido en este formato. Pondremos en marcha los plugins necesarios para implementar esta tecnología y aprenderemos cómo realizar pequeños cambios para adaptar la representación gráfica a la imagen de nuestra web.

1. IMPLEMENTA AMP EN TU
WORDPRESS EN MEDIA HORA
Fernando Serer
@fserer

2. Fernando Serer
@fserer

3. co-organizador
WP Valencia

4. Blogestudio.com
Servicios Avanzados WP

5. UptimeWP.com
Solución WordPress Gestionado

6. ¿Qué es AMP?

7. Accelerated Mobile Pages
ampProject.org

8. Web is too slow!

9. Datos totales transferidos y peticiones totales

10. Tráfico de móviles en exabytes (EB) por año,
global, 2012-2017

12. It’s the ads, stupid

19. Algunos datos

20.  WordPress.com - AMP en decenas de millones de
websites además de los sitios WP VIP
 Reddit – Anunció decenas de millones de páginas AMP
 Bing – App iOS y Android soporta AMP
 Ebay – AMP en +15 millones de páginas de productos
 Pinterest - AMP en los Pins
 Google – Resultados de páginas AMP in SERPs

21.  Washington Post ha obtenido un aumento del 23% en
el número de usuarios recurrentes.
 Wired ha experimentado un aumento del 25% en el
porcentaje de clics de resultados de búsqueda.
 Gizmodo ha logrado un incremento del 50% en el
número de impresiones por página vista.
 Slate ha ahorrado 85.000 USD en recursos de
desarrollo anuales.

22.  80%+ de los publishers obtuvo ratios de visibilidad de
anuncios más altos
 90%+ de los publishers obtuvo mayor engagement con
CTRs más altos
 La mayoría de los publishers obtuvo eCPMS más altos
 Un publisher obtuvo un CTRs 600% mayores después de la
implementación de AMP
 El incremento medio para los publishers del test fue 220%

23. ¿Cómo funciona AMP?

24. 1. AMP HTML
2. AMP JS
3. GOOGLE AMP CACHE (http 2.0)
3 partes

25. 1. Allow only asynchronous scripts
2. Size all resources statically
3. Don’t let extension mechanisms block rendering
4. Keep all third-party JavaScript out of the critical path
5. All CSS must be inline and size-bound
6. Font triggering must be efficient
7. Minimize style recalculations
8. Only run GPU-accelerated animations
9. Prioritize resource loading
10. Load pages in an instant (preconnect API)
Principles

26. Get started:
+info
https://www.ampproject.org/docs/get_started/create

27. AMP Specification:
+info
https://www.ampproject.org/docs/reference/spec

28. Components/tags:
+info
hhttps://www.ampproject.org/docs/reference/components

29. Blog:
+info
https://amphtml.wordpress.com/

30. Implementa AMP en tu
WordPress

32. Fases
1. Instalar Plugins necesarios
2. Configurar:
1. Apariencia gráfica (theme, logo, imágenes)
2. Parámetros (widgets, menús)
3. Analítica, publicidad
3. Iteración de comprobaciones:
1. Comprobar validación AMP
2. Monitorizar indexación
3. Comprobar analítica web
4. Corregir errores

33. 1. Instalar Plugins necesarios

34. 1. Instalar Plugins necesarios

35. 1. Instalar Plugins necesarios

36. 1. Instalar Plugins necesarios

37. 1. Instalar Plugins necesarios

38. 2. Configurar

39. 3. Iterar
1. Comprobar validación AMP

40. 3. Iterar
1. Comprobar validación AMP
http://validator.ampproject.org

41. 3. Iterar
1. Comprobar validación AMP
https://chrome.google.com/webstore/detail/amp-
validator/nmoffdblmcmgeicmolmhobpoocbbmknc

42. 3. Iterar
1. Comprobar validación AMP

43. 3. Iterar
2. Monitorizar indexación AMP (Google Search Console)

44. 3. Iterar
3. Comprobar analítica web

45. 3. Iterar
4. Corregir errores

46. 3. Iterar
4. Corregir errores

47. ¡al lío!

48. ¿Algo más de AMP?

49. AMP Conf
https://www.ampproject.org/amp-conf-2017

50. Dashboard Analytics
https://uptimewp.com/dashboard

51. Linkazo
https://www.christianoliveira.com/blog/analitica-
web/porcentaje-rebote-alto-amp/
Rebote y duplicidad usuarios

52. ¡Muchas gracias!
@fserer