Introdução ao AMP (Accelerated Mobile Pages)

Transcript

1. Accelerated Mobile Pages
2. Murilo Siqueira Ferreira Front-end Developer na Foregon https://www.linkedin.com/in/muhroots/
3. 53% dos visitantes de sites para dispositivos móveis saem após 3 segundos de tempo de carregamento. https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/ 77% dos sites para dispositivos móveis levam mais de 10 segundos para carregar em redes 3G. 2x mais receita de anúncios para sites que são carregados em até 5 segundos. * * Comparado com sites que carregam em 19 segundos Cenário
4. Accelerated Mobile Pages O projeto AMP é uma iniciativa de código aberto com o objetivo de criar uma Web melhor para todos. https://www.ampproject.org/
5. Accelerated Mobile Pages Possibilita criar páginas que sejam atraentes, fáceis e carregadas quase instantaneamente para os usuários.
6. Páginas AMP são desenvolvidas com três componentes principais
7. AMP HTML AMP HTML é uma versão simplificada do HTML que contém algumas restrições para um desempenho confiável. <amp-img src="/thumb.png" width="320" height="250" layout="responsive"> </amp-img>
8. AMP JS A biblioteca AMP JS, gerencia o carregamento de recursos e fornece as tags personalizadas. <script async custom-element="amp-youtube" src="https://cdn.ampproject.org /v0/amp-youtube-0.1.js"> </script> <amp-youtube layout="responsive" data-videoid="mGENRKrdoGY" width="480" height="270"> </amp-youtube>
9. Ads & analytics amp-analytics amp-ads amp-auto-ads amp-stick-ads amp-ad-exit Conteúdo dinâmico amp-bind amp-live amp-form amp-install-servicework amp-date-picker amp-mustache Layout amp-accordion amp-iframe amp-sidebar amp-carousel amp-lightbox amp-app-banner Redes sociais amp-facebook amp-social-share amp-twitter amp-instagram amp-facebook-comments https://www.ampproject.org/pt_br/docs/reference/components
10. AMP Cache Rede de distribuição de conteúdo com base no proxy para o envio de todos os documentos válidos de AMP. developers.google.com/amp/cache
11. AMP Cache Use a update-cache para atualizar e remover o conteúdo do Cache do AMP do Google. developers.google.com/amp/cache
12. Páginas AMP carregam em média em menos de 1s
14. Por que AMP é tão rápido?
15. Porque AMP é tão rápido? Define tamanho de recursos estaticamente Recursos externos, como imagens, anúncios ou iframes, precisam informar seu tamanho no HTML. Com isso o AMP carrega o layout da página sem esperar o download de nenhum recurso.
16. Porque AMP é tão rápido? Executar JavaScript de forma assíncrona Para evitar que o JavaScript atrase a renderização da página, o AMP permite apenas JavaScript assíncrono.
17. Porque AMP é tão rápido? CSS incorporado e limitado ao tamanho Apenas CSS incorporados no documento são permitidas em AMP. Isso remove 1 ou mais solicitações HTTP. Além disso, a folha de estilo deve conter no máximo 50kb.
18. Porque AMP é tão rápido? Pré-renderização Quando os documentos AMP são pré-processados para carregamento instantâneo, somente recursos acima da dobra são baixados.
19. Porque AMP é tão rápido? Disparo eficiente de fontes O sistema AMP declara zero solicitações HTTP até que as fontes iniciem o download. Isso só é possível porque todo JS no AMP é assíncrono e somente folhas de estilo incorporada são permitidas.
20. Porque AMP é tão rápido? Minimiza re-cálculos de estilo Cada vez que você mede algo, recalculos de estilo são acionados, o que é pesado, pois o navegador precisa refazer o layout da página inteira.
21. Porque AMP é tão rápido? Executa animações aceleradas por GPU O AMP permite animação e transição apenas em transform e opacity para que o recálculo de layout não seja necessário.
22. AMP By Example Uma introdução prática ao Accelerated Mobile Pages (AMP) com foco em código e amostras ao vivo. Crie páginas AMP e veja exemplos de todos os componentes AMP. https://ampbyexample.com/
23. Rastreamento
26. Cliente ID API Com a AMP Client ID API do Google, é possível identificar de forma exclusiva os usuários que interagem com seu conteúdo nas páginas AMP e não AMP. <meta name="amp-google-client-id-api" content="googleanalytics">
28. Monetização
29. AMP ads Quanto mais rápidos os anúncios, melhor o desempenho Anúncios AMP são 6x mais rápidos do que os anúncios regulares nas páginas AMP.
30. AMP ads Anúncios mais seguros criam confiança em suas marcas Anúncios AMP precisam ser validados antes de serem veiculados, eliminando o risco de malware.
31. 80% dos editores obtiveram taxas de visibilidade mais altas em seus anúncios AMP + 90% dos editores impulsionam um maior envolvimento com CTR’s mais altos https://amphtml.wordpress.com/2016/06/07/ads-on-amp-where-faster-is-better/
33. Cases
34. 3-4x Velocidade de carregamento 26% Mais usuários em dispositivos móveis 30% Mais cliques aos sites nacionais
35. 2x Velocidade de carregamento 2x Mais tempo gasto em página AMP do que outras páginas 33% Aumento na taxa de cliques
36. 2.5x Velocidade de carregamento 2M Páginas AMP publicadas 15% Aumento na conversão em dispositivos móveis
37. AMP EMAIL
40. AMP STORY
41. AMP STORY “Um formato de narrativa visual para a Web aberta” https://www.google.com/webhp?hl=en&gl=US&g ws_rd=cr&esrch=AmpStories::Preview,AmpStorie sDesktop::Promo
42. AMP START
44. Referências https://www.ampproject.org/docs/ https://ampbyexample.com/ https://medium.com/@pbakaus/why-amp-cach es-exist-cd7938da2456 https://medium.com/@cramforce/why-amp-is-f ast-7d2ff1f48597 https://developers.google.com/amp/cache/upd ate-cache
45. Referências https://www.stonetemple.com/the-canonical-gu ide-to-amp/ https://www.stonetemple.com/amp-tech-guide/ https://searchenginewatch.com/2016/07/06/is- google-amp-a-ranking-signal/ https://infotrust.com/articles/unifying-clientid-o n-amp-non-amp-pages/ https://www.youtube.com/channel/UCXPBsjgK KG2HqsKBhWA4uQw