Pruebas de velocidad con AMP

Este fin de semana hemos realizado una primera toma de contacto con Google AMP (“Accelerated Mobile Pages project”). Este proyecto tiene como objetivo acelerar la navegación móvil creando nuevas formas de ver el contenido en el móvil (compitiendo con Apple News y Facebook Instant Articles).

Google AMP (“Accelerated Mobile Pages project”) surge de la necesidad de acelerar las páginas web en los móviles. Ahora mismo muchas webs se pueden visualizar en dispositivos móviles, pero elementos como gráficos grandes, scripts complejos, anuncios, etc pensados para un ordenador de sobremesa pueden ralentizar mucho la página en un móvil. Y justamente para eso ha llegado AMP: Para mejorar la velocidad y la experiencia de usuario en móviles.

¿AMP y responsive en qué se diferencian?

AMP acelera las webs limitando las herramientas que un desarrollador puede usar para mostrar contenido. Según las directrices de AMP:

  • No se pueden utilizar formularios.
  • No se puede utilizar Javascript externo.
  • No se pueden utilizar CSS externos.
  • No se pueden utilizar estilos inline.
  • Todos los elementos tienen que cumplir los límites de tamaño de archivo.

¿AMP y Apple News / Facebook Instant Articles cómo se diferencian?

En pocas cosas. Básicamente son lo mismo. Mucha gente ha especulado que Google ha presentado AMP para competir contra estos dos productos. Google quiere conseguir una mayor base de usuarios, porque su proyecto es open-source y enfocado a la comunidad de desarrolladores.

¿Cómo implemento AMP en mi web?

Desde hace algunas semanas hay un plugin de WordPress (AMP for WordPress) que solo hay que instalarlo y activarlo. Automáticamente crea páginas AMP añadiendo a una URL el parámetro ?amp=1.

La URL: hablandodeseo.com/comparativa-velocidad-wordpress-cache-cdn/ se convierte en: hablandodeseo.com/comparativa-velocidad-wordpress-cache-cdn/?amp=1 o en hablandodeseo.com/comparativa-velocidad-wordpress-cache-cdn/amp/ (aunque con esta última versión estamos teniendo problemas, con el parámetro siempre funciona).

En el código fuente de la página original se enlace un enlace con rel=”amphtml” apuntando a la URL de la página AMP.

OJO: Esto podría ser contenido duplicado: Distintas URLs, mismo texto. Por esta razón hay que ver el tema configurar bien los CANONICALS. Este plugin lo hace automáticamente: Desde la URL AMP a la URL original.

Por cierto, si queréis personalizar la plantilla de AMP del plugin de WordPress podéis modificar el archivo template.php que lleva (para por ejemplo sustituir el logo de WordPress). Eso si, en la próxima actualización se perderán los cambios, ya que de momento no está preparado para plantillas personalizas. Por eso hay que hacer copias de seguridad del archivo modificado.

Pruebas velocidad AMP

 

Pruebas de velocidad con AMP

Hemos realizado varias pruebas de velocidad con WebPageTest.org. Aquí tenéis un resumen de algunos de los resultados.

OJO: No se ha optimizado nada. Simplemente versión con y sin AMP.

Sin AMP:

 

  • Tiempo de carga: 3,023 segundos (en repetición: 1,758 segundos)
  • Momento en el que se muestra contenido: 2,191 segundos (en repetición: 1,592 segundos).
  • 57 peticiones y 803 KB de tamaño total.

 

Con AMP:

  • Tiempo de carga: 2,550 segundos (en repetición: 1,082 segundos)
  • Momento en el que se muestra contenido: 1,390 segundos (en repetición: 1,084 segundos).
  • 11 peticiones y 400 KB de tamaño total.

Por tanto se reduce el tiempo de carga y el tamaño total de la página (aunque también es menos atractiva visualmente.

Comparativa de la carga de la página en imagen

La página con AMP es la azul (sin AMP rojo).

Progresión carga AMP versus original

Comparativa de la carga de la página en vídeo

La página con AMP es la de la izquierda (sin AMP derecha).

Vamos a seguir haciendo experimentos con AMP y os iremos informando a ver como funciona y si el incremento de velocidad merece la pena.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *