Juliano Theiss
juliano.theiss@gmail.com
O que é AMP?
Um framework projetado para velocidade.
AMP significa Accelerated Mobile Pages, e é uma colaboração entre um ...
Como AMP melhora a performance?
● Aceita apenas scripts assíncronos
● Seta o tamanho de todos os recursos estáticos
● Não ...
Editores utilizando AMP no Brasil
Agência Brasil
Época
Estadão
Exame
Folha de S. Paulo
Globo
Jornal Extra
R7.com
Tecmundo
...
Companhias de tecnologia utilizando AMP
Google
Linkedin
Twitter
Pinterest
Medium
Drupal
Wordpress
Vimeo
Youtube
Vine
Daily...
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
instituci...
Código Aberto
Todo o código fonte do projeto AMP está
disponível no Github, onde qualquer
desenvolvedor de qualquer empres...
Implementação
<amp-img src="/img/amp.jpg"
width="1080"
height="610"
layout="responsive"
alt="an image"></amp-
img>
<img sr...
Wordpress + AMP
O Plugin para Wordpress que habilita
as páginas AMP é desenvolvido pela
própria AUTOMATIC que é a
desenvol...
Obrigado!
Juliano Theiss
juliano.theiss@gmail.com
https://br.linkedin.com/in/julianotheiss
https://plus.google.com/+Julian...
Próximos SlideShares
Carregando em…5
×

AMP - Accelerated Mobile Pages Project

157 visualizações

Publicada em

Apresentação sobre AMP para o time de digital da Raffcom.

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

AMP - Accelerated Mobile Pages Project

  1. 1. Juliano Theiss juliano.theiss@gmail.com
  2. 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. 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. 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. 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. 6. Exibição na prática fonte: arquivo pessoal
  7. 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. 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. 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. 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. 11. Obrigado! Juliano Theiss juliano.theiss@gmail.com https://br.linkedin.com/in/julianotheiss https://plus.google.com/+JulianoTheiss

×