Como a AMP funciona
As seguintes otimizações combinadas são o motivo pelo qual as páginas AMP são tão rápidas que parecem ser carregadas instantaneamente. Existem sete razões no total, mas se você não quiser ler tudo, basta assistir ao vídeo explicativo:
Execute todo o JavaScript AMP de forma assíncrona
O JavaScript é poderoso, ele pode modificar praticamente todos os aspectos de uma página, mas também pode bloquear a construção do DOM e atrasar a renderização da página (veja também Adicionando interatividade com JavaScript). Para evitar que o JavaScript atrase a renderização da página, a AMP permite apenas JavaScript assíncrono.
Componentes AMP podem conter JavaScript oculto, mas foram cuidadosamente projetados para garantir que isto não cause uma degradação em seu desempenho.
Embora o uso de JS personalizado seja permitido em amp-script e o JS de terceiros seja permitido no iframes, ele não pode bloquear a renderização. Por exemplo, se um JS de terceiros utiliza a API terrível para o desempenho document.write, ele não bloqueia a renderização da página principal.
Dimensione todos os recursos estaticamente
Recursos externos, tais como imagens, anúncios ou iframes, devem ter seu tamanho indicado em HTML para que a AMP possa determinar o tamanho e a posição de cada elemento antes que os recursos sejam baixados. A AMP carrega o layout da página sem ter que esperar pelo download de nenhum recurso.
A AMP desacopla o layout do documento do layout do recurso. Apenas uma solicitação HTTP é necessária para realizar o layout do documento inteiro (+ fontes). Como a AMP é otimizada para evitar recálculos dispendiosos de estilo e layouts no navegador, não haverá nenhum re-layout durante o carregamento de recursos.
Não permita que mecanismos de extensão bloqueiem a renderização
A AMP não permite que mecanismos de extensão bloqueiem a renderização da página. A AMP dá suporte a extensões para itens como mesas de luz, código incorporados do instagram, tweets, etc. Embora essas extensões necessitem de solicitações HTTP adicionais, as solicitações não bloqueiam o layout e a renderização da página.
Qualquer página que use um script personalizado deve informar ao sistema AMP que ela eventualmente terá uma marca personalizada. Por exemplo, o script amp-iframe informa ao sistema que haverá uma marca amp-iframe. A AMP cria a caixa iframe antes mesmo de saber o que ela vai conter:
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
Mantenha todo JavaScript de terceiros fora do caminho crítico
Os JS de terceiros gostam de usar carregamento síncrono de JS. Eles também gostam de criar mais scripts síncronos como document.write. Por exemplo, se você tiver cinco anúncios em sua página e cada um deles causar três carregamentos síncronos, cada um tendo uma conexão de latência de 1 segundo, você gastará 15 segundos de tempo de carregamento apenas para carregar o JS.
Páginas AMP permitem JavaScript de terceiros, mas apenas nos iframes em área restrita. Ao restringi-los no iframes, eles não podem bloquear a execução da página principal. Mesmo que acionem vários recálculos de estilo, seus pequenos iframes possuem pouquíssimo DOM.
O tempo necessário para a realização dos recálculos de estilo e layouts é limitado pelo tamanho do DOM, portanto, os recálculos de iframe são muito rápidos em comparação ao recálculos de estilos e layout para a página.
Todo CSS deve ser usado in-line e com limitação de tamanho
O CSS bloqueia toda a renderização, bloqueia o carregamento da página e tende a ficar sobrecarregado. Em páginas HTML para AMP, apenas estilos in-line são permitidos. Isto remove uma ou até mais solicitações HTTP do caminho crítico de renderização em comparação à maioria das páginas da web.
Além disso, a folha de estilos in-line tem tamanho máximo de 50 kilobytes. Embora este tamanho seja grande o suficiente para páginas muito sofisticadas, ele ainda exige que o autor da página pratique uma boa higienização de CSS.
O acionamento de fonte deve ser eficiente
As fontes da web são muito grandes, por isso a otimização de fonte da web é crucial para o desempenho. Em uma página comum que possui alguns scripts síncronos e algumas folhas de estilo externas, o navegador demora bastante para iniciar o download destas fontes enormes até que tudo isto aconteça.
O sistema AMP declara zero Solicitações HTTP até que as fontes comecem a ser baixadas. Isto só é possível porque todo o JS na AMP possui o atributo async e apenas folhas de estilo in-line são permitidas; não há solicitações HTTP que impeçam que o navegador baixe as fontes.
Minimize recálculos de estilo
Sempre que você mede algo, isso aciona recálculos de estilo que são dispendiosos porque o navegador terá que refazer o layout de toda a página. Em páginas AMP, todas as leituras do DOM acontecem antes de todas as gravações. Isto garante que haverá no máximo um recálculo de estilos por frame.
Saiba mais sobre o impacto dos recálculos de estilo e layout no desempenho da renderização.
Só execute animações aceleradas por GPU
A única forma de obter otimizações rápidas é executando-as na GPU. A GPU tem conhecimento sobre as camadas, ela sabe como realizar algumas coisas nessas camadas, ela pode movê-las, ela pode alterar a transparência delas, mas não pode atualizar o layout da página; ela repassará esta tarefa para o navegador e isso não é algo bom.
As regras para CSS relacionadas com animações garantem que as animações possam ser aceleradas por GPU. Especificamente, a AMP só permite animações e transições em transformação e opacidade, para que o layout da página não seja necessário. Saiba mais sobre o uso de transformação e opacidade para mudanças de animação.
Priorize o carregamento de recursos
A AMP controla todos os downloads de recursos: ela prioriza o carregamento de recursos, carregando apenas o necessário e pré-carrega recursos marcados como de carregamento lento.
Quando a AMP baixa recursos, ela otimiza os downloads para que os recursos mais importantes no momento sejam baixados primeiro. Imagens e anúncios são baixados apenas quando houver a probabilidade de serem vistos pelo usuário, acima da dobra, ou se for provável que o usuário deslize rapidamente até eles.
A AMP também carrega antecipadamente recursos de carregamento lento. Os recursos são carregados na página o mais tarde possível, mas são transferidos o quanto antes. Dessa forma, tudo é carregado muito rapidamente, mas a CPU só é utilizada quando os recursos podem de fato ser exibidos ao usuário.
Carregue páginas em um instante
A nova API preconnect é bastante usada para garantir que solicitações HTTP ocorram o mais rápidas possível quando realizadas. Com isso, uma página pode ser renderizada antes do usuário indicar explicitamente que gostaria de navegar até ela; é provável que a página já esteja disponível no momento em que o usuário a selecionar, o que leva ao seu carregamento instantâneo.
Embora a pré-renderização possa ser aplicada a todo o conteúdo da web, ela também pode consumir bastante largura de banda e CPU. A AMP foi otimizada para reduzir ambos esses fatores. A pré-renderização baixa apenas os recursos que aparecem acima da dobra e não renderiza coisas que podem ser dispendiosa em termos de CPU.
Quando documentos AMP são pré-renderizados para o carregamento instantâneo, apenas os recursos acima da dobra da página são de fato baixados. Quando documentos AMP são pré-renderizados para carregamento instantâneo, os recursos que podem usar muita CPU (como iframes de terceiros) não são baixados.
Saiba mais sobre por que o HTML para AMP não tira o máximo proveito do scanner de pré-carregamento.