AMP - Accelerated Mobile Pages Project

134 visualizações

Publicada em

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

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
134
No SlideShare
0
A partir de incorporações
0
Número de incorporações
14
Ações
Compartilhamentos
0
Downloads
3
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

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

×