Perfomance web, parte 1 - Conhecendo o CRP ( Critical Rendering Path )
Tags: crp, performance, optimization, webdev
Published: 2021-02-17 11:37:33

### Introdução

Com o objetivo de desenvolver sites de alta qualidade, nas últimas semanas eu iniciei meus estudos sobre otimização da renderização de sites. Ao longo do tempo vou escrever aqui neste blog meus estudos, descobertas, experimentos e impressões sobre esse campo relativamente pouco explorado e ainda assim muito importante na área do frontend. Sites mais rápido e eficiente pode aumentar de maneira significativa os acessos, retenções e conversões do seu produto digital, seja um site, uma aplicação ou um *e-commerce*.

Meu primeiro post será uma explicação do *Critical Rendering Path* (caminho de renderização crítico). Para melhorar o tempo de resposta de um site devemos conhecer o que acontece a partir do momento que o usuário digita um url no navegador até o momento em que ele consegue ver e interagir com o site ou aplicação.

### O que é CRP?

O CRP é o conjunto de processos que o navegador executa desde a requisição de uma url até a exibição de um site na tela para o usuário. Esses processos envolvem a requisção da url, o recebimento e o processamento do HTML, requisição e construção dos estilos (CSS) e o carregamento e execução dos *scripts*.

Este artigo está divido na explicação de cada uma dessas etapas. Primeiro, eu vou explicar o processamento do HTML, depois do CSS e finalmente explicarei o processamento e execução dos scripts. Este artigo será a base para os próximos onde eu irei explicar como fazer para otimizar o CRP.

### Requisitando o HTML e construindo o DOM

HTML é a linguagem usada para codificar a estrutura de sites e aplicações web. No entanto o navegador não consegue "enteder" HTML, ele precisa converter os arquivos para um formato com o qual ele possa trabalhar.

```html
  <html>
    <head>
      <title>Título da página</title>
    </head>
    <body>
      <p>Hello world!</p>
      <footer>Conteúdo do rodapé</footer>
    </body>
  </html>
```

Por exemplo, o navegador ao receber o código acima vai convertê-lo para uma estrutura de árvore:

![A imagem mostra uma estrutura de árvore com um nó raiz e dois nós filhos, head e body. O nó head contém um nó folha com o texto Título da página. O nó body contém um um parágrafo com o texto Hello world e o footer o texto Conteúdo do rodapé]![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a3i6xmbkz1sw01shnnov.png)

Essa árvore é chamada de [*Document Object Model*](https://developer.mozilla.org/pt-BR/docs/DOM/Referencia_do_DOM/Introdu%C3%A7%C3%A3o) (DOM) e representa a estrutura desse documento, cada nó dessa árvore contém todos os atributos que foram declarados no html e podem ser manipulados utilizando-se javascript.

### Adicionando os estilos

Após construir o DOM o navegador carrega os arquivos com o estilos da página. Após carregar esses arquivos o navegador constrói o */[CSS object model*](https://developer.mozilla.org/en-US/docs/Glossary/CSSOM). O CSSOM em conjunto com o DOM vão gerar a árvore de renderização, essa árvore será usada para fazer o layout e a colorização (*paint*) da página.

É interessante notar que o CSS é um recurso que **bloqueia a renderização** da página, ou seja, enquanto ele está sendo processado, a renderização da página é interrompida.

### Adicionando interatividade com os scripts

O Javascript também é considerado um recurso que bloqueia a renderização já que um código pode afetar tanto o layout como a aparência de uma página.

### Conclusão

Neste artigo eu apresentei de forma geral os principais passos que o navegador executa antes de exibir o conteúdo de uma URL. Ter um bom planejamento do que e como deve ser exibido para o usuário pode melhorar muito o desempenho de sua aplicação. [Pesquisas mostram](https://www.cloudflare.com/pt-br/learning/performance/more/website-performance-conversion-rates/) que há uma relação direta entre a performance de um site e suas taxas de conversão. 

[Com um número cada vez maior de pessoas usando a internet através de celulares](https://web.dev/why-speed-matters/), dispostivos com menor capacidade de processamento e também com maiores restrições devido ao uso de redes móveis, a atenção com a performance deve ser redobrada.

Nos próximos artigos vou me aprofundar em casa uma dessas etapas e mostrarei como usar as ferramentas do desenvolvedor do Chrome para que possamos medir e eventualmente encontrar gargalos na renderização de sites.

Para correções de erros neste artigo ou sugestões de melhorias ou se você tem um site, aplicação web ou e-commerce e está interessado em verificar como anda a performance de sua aplicação, me envie um e-mail [cleitonluiz.dev@gmail.com](mailto:cleitonluiz.dev@gmail.com)

### Leituras recomendadas

* [Seção de Performance da MDN](https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path)
* [Web fundamentals - Performance](https://developers.google.com/web/fundamentals/performance/critical-rendering-path)
* [High Performance Browser Networking](https://hpbn.co/)