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.
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/
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>
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/
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">
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/
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
AMP é uma biblioteca de código aberto que fornece uma maneira simples de criar páginas da Web que sejam atraentes, fáceis e carregadas quase instantaneamente para os usuários.
AMP é uma biblioteca de código aberto que fornece uma maneira simples de criar páginas da Web que sejam atraentes, fáceis e carregadas quase instantaneamente para os usuários.
Por exemplo, a amp-imgtag fornece srcsetsuporte total até mesmo em navegadores que ainda não suportam. Aprenda a criar sua primeira página HTML de AMP .
Async, sandbox
Ao usar o Cache de AMP do Google, o documento, todas as imagens e todos os arquivos JS são carregados a partir da mesma origem que usa HTTP 2.0 para ser o mais eficiente possível.
Recursos que podem usar muita CPU (Iframe com scripts de terceiros) não são baixados.
Tempo médio é de 19 segundos
Tornando-os mais visíveis, mais eficazes e com maior probabilidade de um bom desempenho.
Tornando-os mais visíveis, mais eficazes e com maior probabilidade de um bom desempenho.