AMP é um framework projetado para melhorar a performance de websites em dispositivos móveis através de otimizações como scripts assíncronos, CSS inline e limite de tamanho de recursos. Muitos editores brasileiros como Globo e Folha de S.Paulo já utilizam AMP, assim como companhias de tecnologia como Google, LinkedIn e Twitter. AMP está disponível como código aberto no Github.

1. Juliano Theiss
juliano.theiss@gmail.com

2. 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/

3. 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

4. Editores utilizando AMP no Brasil
Agê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/

5. Companhias de tecnologia utilizando AMP
Google
Linkedin
Twitter
Pinterest
Medium
Drupal
Wordpress
Vimeo
Youtube
Vine
Dailymotion
ADsense
Adobe Analytics
Doubleclick
entre outras...
fonte: https://www.ampproject.org/who/

6. Exibição na prática
fonte: arquivo pessoal

7. 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

8. 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

9. 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

10. 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/

11. Obrigado!
Juliano Theiss
juliano.theiss@gmail.com
https://br.linkedin.com/in/julianotheiss
https://plus.google.com/+JulianoTheiss