Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Optimiza tu WordPress para móviles en media hora con AMP

848 views

Published on

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.

Published in: Internet
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Optimiza tu WordPress para móviles en media hora con AMP

  1. 1. IMPLEMENTA AMP EN TU WORDPRESS EN MEDIA HORA Fernando Serer @fserer
  2. 2. Fernando Serer @fserer
  3. 3. co-organizador WP Valencia
  4. 4. Blogestudio.com Servicios Avanzados WP
  5. 5. UptimeWP.com Solución WordPress Gestionado
  6. 6. ¿Qué es AMP?
  7. 7. Accelerated Mobile Pages ampProject.org
  8. 8. Web is too slow!
  9. 9. Datos totales transferidos y peticiones totales
  10. 10. Tráfico de móviles en exabytes (EB) por año, global, 2012-2017
  11. 11. It’s the ads, stupid
  12. 12. Algunos datos
  13. 13.  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
  14. 14.  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.
  15. 15.  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%
  16. 16. ¿Cómo funciona AMP?
  17. 17. 1. AMP HTML 2. AMP JS 3. GOOGLE AMP CACHE (http 2.0) 3 partes
  18. 18. 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
  19. 19. Get started: +info https://www.ampproject.org/docs/get_started/create
  20. 20. AMP Specification: +info https://www.ampproject.org/docs/reference/spec
  21. 21. Components/tags: +info hhttps://www.ampproject.org/docs/reference/components
  22. 22. Blog: +info https://amphtml.wordpress.com/
  23. 23. Implementa AMP en tu WordPress
  24. 24. 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
  25. 25. 1. Instalar Plugins necesarios
  26. 26. 1. Instalar Plugins necesarios
  27. 27. 1. Instalar Plugins necesarios
  28. 28. 1. Instalar Plugins necesarios
  29. 29. 1. Instalar Plugins necesarios
  30. 30. 2. Configurar
  31. 31. 3. Iterar 1. Comprobar validación AMP
  32. 32. 3. Iterar 1. Comprobar validación AMP http://validator.ampproject.org
  33. 33. 3. Iterar 1. Comprobar validación AMP https://chrome.google.com/webstore/detail/amp- validator/nmoffdblmcmgeicmolmhobpoocbbmknc
  34. 34. 3. Iterar 1. Comprobar validación AMP
  35. 35. 3. Iterar 2. Monitorizar indexación AMP (Google Search Console)
  36. 36. 3. Iterar 3. Comprobar analítica web
  37. 37. 3. Iterar 4. Corregir errores
  38. 38. 3. Iterar 4. Corregir errores
  39. 39. ¡al lío!
  40. 40. ¿Algo más de AMP?
  41. 41. AMP Conf https://www.ampproject.org/amp-conf-2017
  42. 42. Dashboard Analytics https://uptimewp.com/dashboard
  43. 43. Linkazo https://www.christianoliveira.com/blog/analitica- web/porcentaje-rebote-alto-amp/ Rebote y duplicidad usuarios
  44. 44. ¡Muchas gracias! @fserer

×