O documento discute o projeto Accelerated Mobile Pages (AMP), que visa criar páginas carregadas quase instantaneamente para usuários móveis. O AMP define restrições no HTML e JS para melhorar o desempenho, e usa pré-processamento e caches para acelerar o carregamento. Páginas AMP também incluem ferramentas para análise, monetização e criação de conteúdo dinâmico.

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&
gws_rd=cr&esrch=AmpStories::Preview,AmpSto
riesDesktop::Promo

42. AMP START

44. Obrigado
murilo.siqueira@foregon.com

45. AMP By Example
https://github.com/muhroots
/amp-
examples/blob/master/basic
-website/index.html
https://tasty-
cors.herokuapp.com/?size=2

46. Referências
https://www.ampproject.org/docs/
https://ampbyexample.com/
https://medium.com/@pbakaus/why-amp-
caches-exist-cd7938da2456
https://medium.com/@cramforce/why-amp-is-
fast-7d2ff1f48597
https://developers.google.com/amp/cache/upd
ate-cache

47. Referências
https://www.stonetemple.com/the-canonical-
guide-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-
on-amp-non-amp-pages/
https://www.youtube.com/channel/UCXPBsjgK
KG2HqsKBhWA4uQw