amp - accelerated mobile pages project

Juliano Theissjuliano.theiss@gmail.com

O que é AMP?

Um framework projetado para velocidade.

AMP significa Accelerated Mobile Pages, e é uma colaboração entre um grande

número de companhias de tecnologia. Seu objetivo é melhorar a performance de

websites em dispositivos móveis, o que por sua vez melhora a experiência do

usuário.

fonte: http://www.socialmediaexaminer.com/google-amp-what-bloggers-need-to-know-with-leslie-samuel/

Como AMP melhora a performance?

● Aceita apenas scripts assíncronos

● Seta o tamanho de todos os recursos estáticos

● Não permite que mecanismos de extensões bloqueiem a renderização

● Mantém todos os Javascripts de terceiros fora do caminho crítico de renderização

● Todo CSS deve estar inline e possui limite de tamanho

● Gerenciamento de fontes eficiente

● Minimiza o recálculo de estilos

● Apenas roda animação baseada em GPU

● Prioriza o carregamento de recursos

● Carrega páginas em instantes

fonte: https://www.ampproject.org/docs/get_started/technical_overview.html

Editores utilizando AMP no BrasilAgência Brasil

Época

Estadão

Exame

Folha de S. Paulo

Globo

Jornal Extra

R7.com

Tecmundo

Terra

Veja.com

Grupo RBS

Portal Catraca Livre

UOL

entre outras...

fonte: https://www.ampproject.org/who/

Companhias de tecnologia utilizando AMPGoogle

Linkedin

Twitter

Pinterest

Medium

Drupal

Wordpress

Vimeo

Youtube

Vine

Dailymotion

ADsense

Adobe Analytics

Doubleclick

entre outras...

fonte: https://www.ampproject.org/who/

Exibição na prática

fonte: arquivo pessoal

Hangout do Google sobre AMP

Vale a pena utilizar AMP para sites institucionais?Tem muitos benefícios para sites institucionais, por exemplo Editora Abril, ele nos resultados já pode exibir carroussel.Ocorre uso mais forte com notícias mas os ganhos são tão grandes em termos de performance que vale a pena já implementar.

https://youtu.be/2sPGx_gpWWA?t=24m26s

Código Aberto

Todo o código fonte do projeto AMP está

disponível no Github, onde qualquer

desenvolvedor de qualquer empresa pode

sugerir alterações e melhora-lo.

https://github.com/ampproject/amphtml

Implementação

<amp-img src="/img/amp.jpg"

width="1080"

height="610"

layout="responsive"

alt="an image"></amp-

img>

<img src="/img/amp.jpg"

width="1080"

height="610"

alt="an image">

HTML 5 AMP HTML

Wordpress + AMP

O Plugin para Wordpress que habilita

as páginas AMP é desenvolvido pela

própria AUTOMATIC que é a

desenvolvedora do Wordpress.

https://br.wordpress.org/plugins/amp/

Obrigado!

Juliano Theiss

juliano.theiss@gmail.com

https://br.linkedin.com/in/julianotheiss

https://plus.google.com/+JulianoTheiss