Download - AMP - Accelerated Mobile Pages Project
![Page 1: AMP - Accelerated Mobile Pages Project](https://reader036.vdocuments.com.br/reader036/viewer/2022080421/587f988b1a28ab825e8b47a3/html5/thumbnails/1.jpg)
Juliano [email protected]
![Page 2: AMP - Accelerated Mobile Pages Project](https://reader036.vdocuments.com.br/reader036/viewer/2022080421/587f988b1a28ab825e8b47a3/html5/thumbnails/2.jpg)
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/
![Page 3: AMP - Accelerated Mobile Pages Project](https://reader036.vdocuments.com.br/reader036/viewer/2022080421/587f988b1a28ab825e8b47a3/html5/thumbnails/3.jpg)
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
![Page 4: AMP - Accelerated Mobile Pages Project](https://reader036.vdocuments.com.br/reader036/viewer/2022080421/587f988b1a28ab825e8b47a3/html5/thumbnails/4.jpg)
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/
![Page 5: AMP - Accelerated Mobile Pages Project](https://reader036.vdocuments.com.br/reader036/viewer/2022080421/587f988b1a28ab825e8b47a3/html5/thumbnails/5.jpg)
Companhias de tecnologia utilizando AMPGoogle
Medium
Drupal
Wordpress
Vimeo
Youtube
Vine
Dailymotion
ADsense
Adobe Analytics
Doubleclick
entre outras...
fonte: https://www.ampproject.org/who/
![Page 6: AMP - Accelerated Mobile Pages Project](https://reader036.vdocuments.com.br/reader036/viewer/2022080421/587f988b1a28ab825e8b47a3/html5/thumbnails/6.jpg)
Exibição na prática
fonte: arquivo pessoal
![Page 7: AMP - Accelerated Mobile Pages Project](https://reader036.vdocuments.com.br/reader036/viewer/2022080421/587f988b1a28ab825e8b47a3/html5/thumbnails/7.jpg)
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
![Page 8: AMP - Accelerated Mobile Pages Project](https://reader036.vdocuments.com.br/reader036/viewer/2022080421/587f988b1a28ab825e8b47a3/html5/thumbnails/8.jpg)
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
![Page 9: AMP - Accelerated Mobile Pages Project](https://reader036.vdocuments.com.br/reader036/viewer/2022080421/587f988b1a28ab825e8b47a3/html5/thumbnails/9.jpg)
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
![Page 10: AMP - Accelerated Mobile Pages Project](https://reader036.vdocuments.com.br/reader036/viewer/2022080421/587f988b1a28ab825e8b47a3/html5/thumbnails/10.jpg)
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/
![Page 11: AMP - Accelerated Mobile Pages Project](https://reader036.vdocuments.com.br/reader036/viewer/2022080421/587f988b1a28ab825e8b47a3/html5/thumbnails/11.jpg)
Obrigado!
Juliano Theiss
https://br.linkedin.com/in/julianotheiss
https://plus.google.com/+JulianoTheiss