A partir del 24 de febrero, los resultados de Google han empezado a incluir enlaces a las versiones de páginas móviles creadas usando Accelerated Mobile Pages (páginas móviles aceleradas), más conocido por su acrónimo «AMP», un proyecto de código abierto que el mismo Google ha avalado. AMP tiene como objetivo conseguir que los sitios web móviles se carguen más rápidamente y así ofrecer una mejor experiencia a los usuarios.
Google y el Proyecto AMP están realizando un gran esfuerzo para que este sea adoptado ampliamente en la web, y lo están consiguiendo. Automattic está incorporando a WordPress.com soporte para AMP, Pinterest también está incorporando esta tecnología, Twitter también se ha comprometido a ofrecer soporte, al igual que lo han hecho Chartbeat, Parse.ly, Adobe Analytics y LinkedIn, y estamos viendo unirse a sitios tan populares como Wall Street Journal, Buzzfeed, The Guardian, BBC News, The New York Times y otros muchos.
La razón por la cual todas estas compañías lo están adoptando es sencilla: el tiempo de carga. El hecho de que las páginas más rápidas son mejores ya no admite debate, así que en este artículo no me uniré al coro enumerando cada uno de puntos que apoyan esta tesis. También voy a evitar enfocarme demasiado en información que puedas obtener visitando simplemente la propia página del Proyecto AMP, o viendo el vídeo de promoción.
Mejor, vamos a ir al grano explicando exactamente qué implica para ti AMP cuando estás creando el código de una página. Vamos a explicar de manera clara lo que necesitarás en la práctica para usar AMP, sus beneficios potenciales, los inconvenientes que puedes encontrar, y lo más importante, si hará o no más rápidos tus sitios web.
¿Por qué me debería importar?
Bueno, dicho de forma rotunda, porque se trata de Google. Como en muchos otros aspectos relacionados con Google, es buena idea adoptar pronto sus nuevos desarrollos, ya que nunca sabes cuándo o cómo su existencia va a influir en el rendimiento de tus sitios con respecto a los motores de búsqueda. Es muy posible que las páginas que empleen AMP eleven el listón de los requerimientos de Google en cuanto a velocidad y rendimiento a la hora de establecer el posicionamiento en los resultados de búsqueda.
Según lo declarado por Richard Gingras, Director Senior de noticias y productos sociales de Google, cuando hablaba de AMP:
«…si tenemos dos artículos que, a excepción de la velocidad, tienen igual valoración en el resto de características, entonces efectivamente daremos prioridad a la de mayor velocidad…»
Richard Gingras
De modo que aunque no estés pensando en usar AMP, aun así es aconsejable examinarlo y procurar que tus sitios móviles estén optimizados en un grado similar.
La insignia con forma de ⚡ en los resultados de búsqueda
Ahora mismo, los sitios web AMP listados en los resultados de búsqueda van acompañadas de un pequeño relámpago destacándolos.
¿Serán mostrados de esta manera únicamente los grandes sitios de noticias? Todavía es muy pronto para decirlo. Pero podría ser un factor al que valga la pena hacer un seguimiento.
¿Hará el uso de AMP más rápidos mis sitios?
Aquí tienes la respuesta directa y honesta: probablemente, pero no necesariamente.
Esto es así porque la pregunta correcta sería: «¿Más rápido que qué?»
¿Más rápido que la media de los sitios web pesados con una optimización estándar y común? Probablemente.
¿Más rápido que un sitio web que emplee un diseño de estilo sencillo y optimización avanzada? No necesariamente.
La verdad es que no hay nada en AMP que lo convierta en una bala mágica. No es una nueva clase de HTML (tal y como algunos comentaristas lo han descrito), ni tampoco una tecnología nunca vista que garantice convertir en más veloces a tus sitios. En palabras de Google está:
«…construido enteramente a partir de las existentes tecnologías web, lo que permite a los sitios web construir páginas ligeras.»
Si estás al corriente de las últimas noticias en optimización y tienes un alto nivel en comprensión técnica sobre como hacer que los sitios web funcionen asombrosamente veloces, AMP no te va a ayudar en ningún sentido. De hecho, es posible incluso observar pérdidas de velocidad en ciertas circunstancias, aunque probablemente esto cambie a medida que el proyecto evolucione.
AMP no es perfecto, no es una solución automática para todo, ni tampoco lo pretende. Paul Bakaus, Promotor de desarrollo de Chrome y la web abierta en Google, dijo en una presentación sobre AMP:
«En la actualidad, si tú mismo creas tu propio sitio web, y sabes bien lo que estás haciendo y tu sitio es genial, rápido y todo lo demás, AMP no hará que sea mejor, esto es así. Para ser claros, posiblemente no hará que tu sitio sea mejor.»
Realmente AMP consiste en una colección de técnicas de optimización relativamente complejas que han sido agrupadas para facilitar su implementación, de manera que no necesites pensar en todas las partes que entran en juego tras los bastidores. Te proporciona un conjunto de reglas estrictas, que si las sigues, te permiten obtener un sitio web más rápido que otro que o bien no esté optimizado o no lo esté a un mismo nivel.
Aunque al mismo tiempo, si prefieres ensuciarte las manos con cada elemento en tu rutina de optimización, puedes implementar tus propias técnicas sin usar AMP en absoluto. De momento, el empleo de AMP no es esencial, pero saber cómo optimizar hasta el mismo nivel lo será dentro de poco.
Vamos a ahondar un poco más en qué es AMP, en cómo funciona, y veremos algunos resultados de pruebas de velocidad y después, al final del artículo, retomaremos de nuevo la pregunta «¿Hará que mis sitios web sean más veloces?»
Qué significa AMP para un desarrollador
Oficialmente, AMP es descrito como una combinación de tres cosas: AMP HTML, AMP JS, AMP CDN. Esto por supuesto es cierto, pero desde el punto de vista de un desarrollador me parece que las tres cosas más pertinentes para ti mientras trabajas con código son:
- Mejores prácticas de código con AMP
- Elementos HTML propios de AMP
- Validador de AMP para asegurarte de haber implementado los anteriores puntos.
En pocas palabras, empezarás creando un documento AMP básicamente copiando y pegando el código que encontrarás en la página de ejemplo dentro de los documentos de AMP. A partir de aquí, el siguiente paso es rellenar tus páginas usando los tres elementos de esta lista, los cuales están basados en AMP HTML y AMP JS.
Nota: AMP CDN puede utilizarse automáticamente y de forma totalmente gratuita para los usuarios de AMP, aunque posiblemente puedas usar también sin problemas otros servicios de CDN como CloudFlare. Por este motivo, y por el hecho de que el CDN no forma parte del proceso del código, lo he dejado fuera de mi lista de los tres aspectos destacados para desarrolladores.
Permíteme que resuma cada uno de ellos.
1. Las reglas de AMP para CSS, HTML y JS
Para empezar hay reglas que al trabajar con AMP ayudan a optimizar cualquier página, así que es buena idea que te familiarices en el uso de AMP, lo acabes usando finalmente o no. Son muy estrictas, y existen algunas cosas que estás acostumbrado a usar de las que deberás prescindir, así que prepárate porque la creación del código te va a resultar un poco extraña al principio.
Por ejemplo, todo el CSS debe estar en línea y dentro de la sección head, contenido entre las etiquetas <style amp-custom>...</style>, nada de enlazar a una hoja u hojas de estilo externas. Es poco probable que vayas a querer escribir tu código CSS directamente en tus documentos HTML, así que deberías considerar usar algo parecido a Jade includes o disponer de un sistema de salida PHP para los contenidos de tu hoja de estilo en línea.
Tu CSS tampoco puede pesar más de 50 kb. Para verlo con perspectiva, un CSS minificado de Bootstrap, sin el tema, pesa alrededor de 121 kb. Un tema añadiría alrededor de 23 kb resultando en un total de 144 kb, casi tres veces la cantidad permitida. Así que tendrás que aplicarte bien con los estilos y crear código muy eficiente.
Además de todo esto, existen selectores CSS prohibidos, como por ejemplo *, así que no podrás usar más * { box-sizing: border-box } para controlar los espacios de tu web. De igual modo, también hay elementos HTML prohibidos, como base, frame, embed y algunos otros. El soporte para los formularios está actualmente en desarrollo, así que por el momento todavía no se usa el elemento form ni ningún campo de entrada.
Podrías cargar fuentes web externas, pero solo de Google Fonts o Fonts.com a través de los orígenes https://fonts.googleapis.com y https://fast.fonts.net respectivament.
Par revisar todo lo que puedes y no puedes usar en tu CSS y HTML, visita la Especificación AMP para HTML.
La regla principal de AMP es que no se permite en absoluto nada de JavaScript personalizado. Si estás acostumbrado a usar el poder de JavaScript para potenciar tus menús responsivos, o cualquier otra cosa por el estilo, no estás de suerte y tendrás que buscar alternativas. De todas formas esto se equilibra en cierto grado gracias a la presencia de los componentes que integra el propio AMP, como un lightbox y un carrusel, entre otras cosas, lo cual nos lleva a nuestra próxima sección: elementos personalizados.
2. Elementos HTML personalizados
AMP incluye un conjunto de elementos HTML a medida enfocados en los archivos media, y cada uno de ellos usa el prefijo amp-. Existen algunos componentes para sustituir algunos elementos HTML estándar, y otros extras que agregan funcionalidad que habitualmente tendrías que añadir usando JavaScript.
Las etiquetas img, video, audio e iframe son reemplazadas con amp-img, amp-video, amp-audio y amp-iframe respectivamente.
También existen un número de elementos diseñados para incrustar contenido de terceros, como amp-ad, amp-analytics, amp-pinterest, amp-twitter y amp-youtube.
Y finalmente existe lo que yo describiría como elementos para añadir funcionalidad como amp-lightbox, amp-carousel y amp-anim.
Para conocer el listado completo visita las especificaciones de los componentes HTML de AMP.
Los elementos a medida de AMP están ahí para conseguir principalmente dos cosas:
- Asegurar la optimización del código
- Facilitar la priorización de la carga y la optimización
Ya he mencionado antes que los tres aspectos más relevantes de AMP para los desarrolladores son sus normas sobre las prácticas, sus elementos a medida y el validador para reforzarlo todo.
Si crees que tu web podría usarlos con frecuencia, es probable que AMP te ayude a alcanzar una carga más rápida y eficiente de tus archivos de medios.
Si piensas que tu sitio solo los usará ocasionalmente, los resultados serán igual de buenos que si no usases AMP o implementases las mejores prácticas sin él.
Una forma de evaluar si AMP te reportará mejoras es tener en cuenta el hecho de que el JavaScript que requiere para ejecutarse pesa 44kB. Así que deben existir suficientes elementos de medios en tu página para que la coordinación con eficiencia de la carga con AMP compense la adición de esos 44kB, y que además te reporte otros beneficios. Algunos elementos a medida, como los de Twitter y YouTube, requieren scripts adicionales para su carga.
En mis pruebas, el JavaScript de AMP se carga entre los 779ms a los 932ms en una conexión simulada 3G de 750kbs, el script de Twitter se carga en alrededor de 36 ms-468 ms y YouTube en 318ms – 386ms.
Si puedes mejorar la eficiencia de esos tiempos, estarás en buena forma.
La importancia del elemento amp-ad
Una de las principales razones por las que existe el proyecto AMP es para dar a los creadores de contenido una forma de monetizar sus sitios web con publicidad sin hacerlos horriblemente lentos y detestables para los usuarios.
El proyecto AMP está intentando eliminar experiencias como el llegar a una web y tener que esperar cinco segundos para ver solo un anuncio a página completa que bloquea el acceso a un artículo. O intentar leer algo de texto y ser apenas capaz de ver nada porque un banner gigante está ocupando cuatro quintas partes del espacio disponible.
En cualquier caso, ellos quieren evitar este tipo de problemas y al mismo tiempo asegurarse de que los creadores de contenido todavía puedan ganar suficiente dinero con la publicidad que sostiene sus negocios. Aquí es donde el elemento amp-ad entra en juego.
Las etiquetas <amp-ad>...</amp-ad> parecen extrañas al principio, pero realmente constituyen un método unificador y rentable de mostrar los anuncios procedentes de gran parte de los proveedores:
Si la presencia de publicidad ocupa una parte importante en tus sitios, merece la pena que consideres AMP aunque solo sea por su elemento amp-ad.
Para más información sobre cómo usarlo, visita: https://www.ampproject.org/docs/reference/amp-ad.html
3. Validador
El validador de AMP existe para que puedas asegurarte de que cumples las reglas de AMP. Te indicará si escribes código que no sigue las mejores prácticas, y si usas un elemento nativo que debería ser reemplazado por un elemento a medida.
Cuando empiezas a trabajar en una página AMP, para usar el validador basta con añadir #development=1 al final de la URL de su vista previa y después observar la consola en las Herramientas para desarrolladores de Chrome.
Si has hecho o haces algo incorrecto, el validador te lo dirá.
Dado que en especial codificar para AMP implica algunos ajustes especiales, es buena idea mantener el validador abierto en todo momento para detectar inmediatamente los problemas que puedan surgir.
Cómo logra AMP mejorar la velocidad
La mejor visión sobre las especificaciones técnicas de AMP en relación a su método de optimización se pueden encontrar en el blog oficial. En cualquier caso, te he prometido un desglose en lenguaje sencillo, así que ahí va:
Código que no está ahí
Gran parte del porqué las páginas de AMP son más rápidas se debe a todo el código que simplemente no está ahí.
No tienes más que 50 kB de CSS, y se trata de código que no necesita su propia petición http para cargarse. No tienes cierto CSS y tampoco cierto HTML. No tienes ningún JavaScript propio, lo que significa que tampoco tendrás cosas como modales, ni pestañas, ni tooltips, ni alertas, etc. impulsados mediante JS. Y más importante aún que todo lo anterior, no tienes que crear código diferente para cinco distintos proveedores de publicidad y tres servicios de analítica.
La ausencia de todos estos elementos te proporciona una ventaja increíble. El código que no esté ahí en absoluto no añadirá ningún tiempo de carga extra. Por supuesto no necesitas AMP para eludir código, ya que esto es algo que siempre se debe recordar con independencia de que decidas usar AMP o no.
Priorizar la carga y la optimización
Ya hemos tocado el tema de los elementos a medida de AMP y el hecho de que facilitan la priorización de la carga y la optimización.
La forma en que esto ocurre en la práctica es en el momento en el que aterrizas en la parte visible («abobe the fold») de una página AMP, esta parte se carga primero permitiéndote iniciar la visualización, después de esto se cargarán los restantes elementos de medios. También existen casos en los que una página podría cargarse antes de que el usuario navegue hasta ella, pareciendo que se carga instantáneamente.
Todo esto sucede a través de diferentes técnicas, incluyendo cosas como la carga diferida, el renderizado, la conexión y la carga previos. Podrías realmente implementar estos métodos por ti mismo aunque eligieses no usar AMP. En el artículo del blog de AMP que ya mencioné antes, se afirma lo siguiente:
«Todas las páginas web pueden disponer de estas optimizaciones, pero las páginas AMP no pueden prescindir de ellas. Si bien este artículo trata sobre optimizaciones en AMP, también podría ser útil como una especie de lista de tareas para la optimización de un sitio web que no use AMP.»
Así que sin añadir nada más, echa un vistazo a la forma en la que AMP gestiona la carga para obtener nuevas ideas sobre lo que puedes hacer por tus propios sitios.
Eficiencia del diseño de página
Todos los medios añadidos a una página AMP deben tener sus propiedades de altura (height) y anchura (width) especificadas. Esto significa que a pesar de que todavía es posible tener elementos redimensionables y responsivos, AMP sabrá cómo tiene que disponer el diseño de la página antes de que dicho medio se cargue. Esto evita tener que esperar hasta que se cargue una imagen y, a continuación, volver a recalcular el diseño de la página, lo cual ahorra tiempo de renderizado en el proceso.
Lo que te queda por leer:
Algunas pruebas de velocidad
- Prueba 1: Imagen única
- Prueba 2: Dos imágenes
- Prueba 3: Cinco imágenes
- Prueba 4: Cinco imágenes con el desplazamiento de página
- Prueba 5: Cinco imágenes con script de carga diferida
- Prueba 6: Cambio del umbral de la carga diferida
- Prueba 7: Incrustaciones de Twitter y YouTube
- Prueba 8: AMP CDN vs GitHub
- Prueba 9: AMP CDN vs. un alojamiento personal
- Prueba 10: The Guardian sin y con AMP
- Prueba 11: BBC News sin y con AMP
Entonces, ¿hará AMP que mis sitios sean más rápidos?
Conclusión
Enlaces relacionados:
- Introducing the Accelerated Mobile Pages Project Google official blog
- www.ampproject.org
- AMP Project on Github
- AMP WordPress plugin
- WP AMP – Plugin para añadir soporte AMP a WordPress y WooCommerce disponible en Envato Market
Deja una respuesta