PT
EN FR ES HI

How ABC works

Execute todo o JavaScript ABC 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 ABC permite apenas JavaScript assíncrono.

Componentes ABC 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 ABC possa determinar o tamanho e a posição de cada elemento antes que os recursos sejam baixados. A ABC carrega o layout da página sem ter que esperar pelo download de nenhum recurso.

A ABC 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 ABC é 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 ABC não permite que mecanismos de extensão bloqueiem a renderização da página. A ABC 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 ABC que ela eventualmente terá uma marca personalizada. Por exemplo, o script amp-iframe informa ao sistema que haverá uma marca amp-iframe. A ABC 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 ABC 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 ABC, 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 ABC declara zero Solicitações HTTP até que as fontes comecem a ser baixadas. Isto só é possível porque todo o JS na ABC 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 ABC, 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 ABC 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 ABC 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 ABC 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 ABC 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 ABC 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 ABC 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 ABC 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 ABC não tira o máximo proveito do scanner de pré-carregamento.