Otimizando o Critical Rendering Path

Publicado por André Junior no dia dev

TL;DR Otimizar o frontend impacta positivamente na experiência dos seus usuários e ajuda na escalabilidade do seu sistema!

Na Resultados Digitais sempre buscamos melhorar a escalabilidade de nossos produtos conforme o crescimento de usuários. Durante o processo de melhorias é feita uma análise de métricas do tempo gasto em cada parte do sistema - backend, frontend, rede, etc. Após analisarmos as métricas, chegamos à conclusão de que, na maior parte do tempo, trabalhávamos em melhorias do backend enquanto o usuário gastava grande parte do tempo em frontend e rede. A partir desse levantamento, começamos a nos dedicar nas melhorias destes dois pontos. Após obter sucesso com as melhorias fomos ao FrontInFloripa 2014 apresentar esse tema na palestra Otimização de Performance do Front-end.

O que é Critical Rendering Path (CRP)?

Quando uma requisição é feita pelo navegador, o browser começa a receber o HTML e, a partir dele, começa a montar sua árvore de objetos (DOM). Para renderizar a página, o browser precisa carregar todas as dependências como javascript, css e imagens - além de detectar alterações na sua árvore durante a execução. Esse processo é chamado de Critical Rendering Path. Em resumo, podemos dizer que é o mínimo que o browser necessita para conseguir renderizar uma página para o usuário.

Percepção de velocidade ao carregar uma página

Qualquer tipo de atividade que bloqueie este trabalho, isto é, faça o browser esperar, causa impactos diretos no Critical Rendering Path. O usuário consegue perceber estes impactos na forma de: ‘telas em branco’, ‘telas bloqueadas’ ou mesmo links/ações que não funcionam.

Por que é importante?

Entender e otimizar o Critical Rendering Path nos ajuda a criar websites mais performáticos e interativos. O tempo de resposta é diretamente ligado a usabilidade do website e uma renderização mal feita pode desengajar usuários devido ao alto tempo de resposta ao utilizar o website. Afinal, quem gosta de usar um site que demora mais de que alguns segundos pra carregar ou um site que não mostra qualquer tipo de retorno quando um botão é clicado?

Percepção de velocidade ao carregar uma página

Como eu sei que preciso trabalhar nestas melhorias?

A resposta é simples: tenha métricas e use ferramentas que auxiliem a identificar como proceder.

  • PageSpeed Insights Executa uma série de heurísticas na página e fornece dicas sobre como melhorar a performance do mesmo.

  • NewRelic Mostra métricas em tempo real de todas as requisições e até mesmo do tempo gasto no frontend, tornando possível uma análise mais detalhada.

  • Chrome DevTools Detalha todo o processo que o browser executou para carregar a página, requisições, etc. Ajuda a identificar gargalos durante o processamento da página e onde o Critical Rendering Path está sendo bloqueado.

  • Webpage Test Gera relatórios do tempo de renderização e até mesmo vídeos do carregamento a partir de uma URL.

Ferramentas em mãos e agora? Como melhorar?

Cada website deve ser analisado de forma diferente pois cada caso é um caso.

  • Use scripts assíncronos <script async />, fazendo com que aquele script seja carregado somente pelo browser após o carregamento da página e não bloqueie o processo.

Existe o senso comum de colocar todas as tags <script> no fundo da página. Contudo, a maior parte do código javascript nos websites atuais pode ser totalmente carregada de forma assíncrona. No HTML5 temos a atributo async, que simplesmente diz ao browser que não é necessário analisar aquele .js até que a página seja totalmente carregada.

  • Carregue somente o necessário.

Você usa todos o javascript que carrega em suas páginas? Utiliza todo aquele CSS? Estes dados causam bloqueios durante a renderização do DOM e pesam para o browser. Imagens e CSS podem causar repaints desnecessários enquanto a página carrega. Mantenha seus CSS limpos/pequenos e carregue apenas os elementos mínimos necessários para a página. O restante? Carregue assincronamente.

  • Use Content Delivery Network (CDN)

Para conseguir escapar da latência e otimizar ao máximo o tempo de requisição HTTP é necessário utilizar CDNs.

  • GZIP everything

Reduzindo o tamanho dos arquivos que vão ser carregados pela página você otimiza a velocidade do download.

  • Reduza o número de chamadas (use imagens em sprites)

Diminuir o número de chamadas reduz o processamento e a workload, ajudando na escalabilidade.

Mas e o HTTP/2?

O HTTP/2 foi aprovado recentemente e com ele vieram uma série de melhorias que valem, por si só, um novo post!

Resultados?

No RD Station conseguimos melhorar a experiência de nossos usuários. Antes de trabalharmos nestas melhorias pontuais servíamos 1,5 milhão de chamadas com um média de 3 segundos para o carregamento. Hoje, servimos mais de 5 milhões de requests mensais com uma média de carregamento de 2 segundos. Ou seja, com a mesma infraestrutura melhoramos performance, reduzimos o tempo de espera para o usuário e servimos 3 vezes mais resultados!

André Junior

André Junior

Full Stack Developer

Comentários