Por que alguns sites parecem rápidos e responsivos enquanto outros parecem lentos? A resposta está nos conceitos-chave de desempenho que afetam como uma página carrega e é renderizada. Entender os principais conceitos de desempenho web é essencial para construir sites rápidos, fluidos e fáceis de usar. Vamos analisar a ordem de origem, o caminho crítico de renderização, a latência e mais. Vamos olhar a ordem da fonte primeiro. A ordem de origem refere-se à forma como os elementos HTML estão estruturados no documento. Isto determina o que carrega primeiro e pode impactar significativamente o desempenho e a acessibilidade. Algumas melhores práticas para isso incluem:

• Colocando conteúdo crítico como títulos, navegação ou texto principal mais alto na estrutura HTML.
• Adiar scripts não essenciais como os de analytics ou widgets de terceiros para que eles não bloqueiem a renderização.
• Usando aprimoramento progressivo, para garantir que a experiência principal funcione mesmo antes de os estilos e scripts serem carregados. Aprimoramento progressivo é uma forma de construir sites e aplicações baseada na ideia de que você deve fazer sua página funcionar com HTML primeiro.

Aqui está um exemplo de boa ordem de origem, usando as melhores práticas que acabamos de ver.

<!-- Good source order: Essential content first -->
<h1>Welcome to FastSite!</h1>
<p>Critical information loads first.</p>
<script src="slow-script.js" defer></script>

Ao otimizar a ordem da fonte, garantimos que os usuários vejam o conteúdo importante o mais rápido possível. Agora vamos analisar o critical rendering path. O caminho crítico de renderização é a sequência de etapas que o navegador segue para converter o código em pixels na tela. Aqui estão os passos principais que abordaremos mais adiante: 1. Analisando HTML: Constrói o DOM (Document Object Model) 2. Analisando CSS: Constrói o CSSOM (CSS Object Model) 3. Execução JavaScript: Pode modificar o DOM e o CSSOM 4. Construção da Render Tree: Combina o DOM e o CSSOM 5. Layout e Pintura: Determina tamanhos de elementos e desenha pixels 6. Otimizações:

• Minimize recursos que bloqueiam a renderização (por exemplo, arquivos CSS grandes e JS não utilizados).
• Use os atributos async e defer para scripts:
• Carregue primeiro apenas os estilos essenciais; adie o CSS não crítico.

No geral, um caminho crítico de renderização mais curto equivale a uma performance percebida mais rápida. Vamos entrar em mais detalhes sobre isso mais adiante. E finalmente, vamos analisar a latência. Latência é o tempo que uma requisição leva para viajar entre o navegador e o servidor. Ou seja, alta latência equivale a páginas lentas. Algumas formas de reduzir a latência incluem:

• Usar CDNs, ou em outras palavras, Content Delivery Networks, para servir arquivos de locais mais próximos.
• Habilitando compressão usando coisas como Gzip para reduzir o tamanho dos arquivos.
• Otimização de imagens e uso de lazy loading - que também abordaremos mais adiante.

Ao reduzir a latência, fazemos com que as interações pareçam instantâneas. Então, em conclusão, ao otimizar a ordem da fonte, reduzir o caminho crítico e diminuir a latência, você pode fazer seu site parecer rápido.