amp - accelerated mobile pages project
TRANSCRIPT
Juliano [email protected]
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
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
https://br.linkedin.com/in/julianotheiss
https://plus.google.com/+JulianoTheiss