En primer lugar quiero agradecer a todos los que asistieron a la charla sobre AMP de ayer, celebrada a través del Meetup Oficial de WordPress Madrid en el centro de coworking Kunlabori, y en especial a Félix Zapata e Ignacio Cruz por darme la oportunidad de estar allí.
A continuación tenéis un breve resumen de lo que fue la charla, y al final podréis encontrar un link para descargaros la presentación, así como mis datos de contacto por si alguien tuviera alguna duda o quisiera comentar algo.
¿Qué es AMP?
Instantáneo. En cualquier sitio. Ésto es lo que nos dice Google sobre su nuevo proyecto:
Para muchos, leer en la web móvil es una experiencia torpe, lenta y frustrante, pero no tiene porque ser así. El proyecto AMP (Accelerated Mobile Pages) es una iniciativa Open Source que encarna la visión de que los editores puedan crear contenido optimizado para móvil una sola vez y poder cargarlo instantáneamente en cualquier parte.
Es la respuesta de Google a Facebook Instant Articles y Apple News y, como tal, nace de la necesidad de acelerar la carga de contenidos en dispositivos móviles. El ratio de acceso a internet a través de dispositivos móviles se incrementa cada día, incluso hay estudios que apuntan a que éste porcentaje es mayor que el de acceso a través de PCs de escritorio.
Es decir, cada vez se consumen más contenidos desde aparatos móviles, donde por regla general, el rendimiento a nivel de procesamiento es menor y la velocidad de conexión es inferior a la que puede ofrecerte una red de fibra o ADSL.
Según Google, esta nueva tecnología permite cargar las páginas web un 85% más rápido que una página estándar. Es un dato abrumador, ya que tenemos tendencia a abandonar un sitio si no carga lo rápido que esperamos, y que va a tener una importancia relevante de cara al SEO.
¿Quién está detrás de AMP?
En abril de 2015 se creó la DNI (Digital News Initiative), una asociación entre Google, editores y partners tecnológicos, con el objetivo de dar solución a este problema. Grandes medios editoriales a nivel internacional como por ejemplo The Washington Post, The Wall Street Journal, Frankfurter Allgemeine, TIME, La Stampa, The New York Times, The Guardian, Unidad Editorial, BBC o grupo Vocento y plataformas como LinkedIn, Twitter o Charbeat, son algunos de los miembros.
Por último, y como no podía ser de otro modo, WordPress también se ha sumado a la iniciativa, ya que como CMS más utilizado del mercado era necesario que adoptara esta tecnología. De hecho, ha sido la propia Automattic la que ha sacado el plugin AMP para WordPress.
Un ejemplo de código AMP
AMP tiene su propio marcado, no difiere mucho del HTML tradicional pero tiene sus cositas. Afortunadamente disponemos de validadores de AMP para asegurar que nuestras páginas cumplen con los estándares de Google.
AMP es una tecnología muy nueva y en constante evolución, de hecho es tan nueva que su lanzamiento oficial es hoy 24 de febrero, y es de suponer que seguirá en constante evolución en el corto plazo. Un ejemplo básico de una página AMP es el siguiente:
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>¡Hola Mundo!</body>
</html>Podéis encontrar más información en la página oficial del proyecto y también en GitHub todo lo relativo al marcado obligatorio, las etiquetas permitidas, las etiquetas prohibidas, y en general las reglas y buenas prácticas para hacer páginas AMP.
Espero que la charla de ayer fuera de vuestro interés, os dejo con el enlace para descargaros la presentación completa:
Ponencia David Navia AMP-WP Meetup WordPress Madrid
Puede que también te interese
