AMP ¿Como iniciar?

⚡ AMP ¿Cómo iniciar?

Web Practice Lead Co-Organizador de Angular Costa Rica Fan de
JS, TS, NG, Web Techs, Pizza, Emojis Mariano Álvarez @malvarezcr

Accelerated Mobile Pages

¿Que es un AMP? AMP is a web component framework
and a website publishing technology developed by Google which has the mission to "provide a user-ﬁrst format for web content”

¿Que es un AMP? • Escrito con los estándares actuales
de HTML, CSS y JS • Compatible con los browsers modernos • No depende de herramientas especiales o lógica de deployment • Basado en componentes igual que otros frameworks actuales

¿Beneﬁcios de los AMPs? • Mejora el tiempo de carga
• Mejor posicionamiento en buscadores • Layout ﬂexible • Disminuye la descarga de datos • Son desplegados en el carrusel del Google Search • Pre-carga son precargados cuando se realiza una búsqueda

Desventajas • Enfocado en el rendimiento y no en el
diseño • Los analytics son limitados • Uso restringido de Javascript y CSS

Limitaciones • El uso de Javascript solo puede ser a
través de los Web Components de AMP • No se pueden utilizar CSS externo, debe ser en línea con un peso máximo de 50kb • Algunas propiedades de CSS no se pueden usar. Ej. important!

Limitaciones

¿Dónde puedo usar un AMP?

Casos de exito

¿Cuando usar un AMP?

¿Que vamos a crear hoy?

Estructura basica

Estructura basica • <html ⚡ lang="en"> • <meta charset="utf-8" />
• <script async src="https://cdn.ampproject.org/v0.js"></script>

Estructura basica • <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> • <link rel="canonical" href="$SOME_URL"
/> • <style amp-boilerplate></style>

¿Como validar mi AMP? • Agregar el siguiente fragment al
ﬁnal url E.g http://localhost:8000/cars.amp.html#development=1

¿Como validar mi AMP? • O instalar la extension AMP
Validator

Considerar - Reﬂow

Considerar - Canonical page

¿Como preparar un AMP para el Google Search?

⚡Demo

Angular Costa Rica • Facebook, YouTube, Medium @angularcostarica • Twitter
@angularcr

Links de referencia • Ejemplo Github https://github.com/mahcr/amp • Documentacion AMP
https://amp.dev/documentation/ • Generators https://amp.dev/boilerplate/ • Twitter: @malvarezcr / Medium: @mahcr Mariano Álvarez

AMP ¿Como iniciar?

AMP ¿Como iniciar?

Mariano Alvarez

More Decks by Mariano Alvarez

Other Decks in Programming

Featured

Transcript

⚡ AMP ¿Cómo iniciar?

Web Practice Lead Co-Organizador de Angular Costa Rica Fan de

Accelerated Mobile Pages

¿Que es un AMP? AMP is a web component framework

¿Que es un AMP? • Escrito con los estándares actuales

¿Beneﬁcios de los AMPs? • Mejora el tiempo de carga

Desventajas • Enfocado en el rendimiento y no en el

Limitaciones • El uso de Javascript solo puede ser a

Limitaciones

¿Dónde puedo usar un AMP?

Casos de exito

¿Cuando usar un AMP?

¿Que vamos a crear hoy?

Estructura basica

Estructura basica • <html ⚡ lang="en"> • <meta charset="utf-8" />

Estructura basica • <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> • <link rel="canonical" href="$SOME_URL"

¿Como validar mi AMP? • Agregar el siguiente fragment al

¿Como validar mi AMP? • O instalar la extension AMP

Considerar - Reﬂow

Considerar - Canonical page

¿Como preparar un AMP para el Google Search?

¿Como preparar un AMP para el Google Search?

⚡Demo

Angular Costa Rica • Facebook, YouTube, Medium @angularcostarica • Twitter

Links de referencia • Ejemplo Github https://github.com/mahcr/amp • Documentacion AMP