Velocidade de carregamento de página
15/12/2020
Introdução
A velocidade com que as páginas web carregam influenciam drasticamente a vida atual. Estamos tão acostumados com a velocidade e conectividade das coisas que se uma página demora para carregar, nossa tendência é mudar de página.
Com isso, é papel do desenvolvedor web estar atento a performance de sua página e não "só" ao conteúdo relevante, interfaces bonitas e experiência do usuário.
Nesse artigo irei usar o termo tempo de carregamento da página de uma forma generalizada, mesclando um pouco o tempo de fato de carregar as referências de uma página com o processamento desses arquivos até que possamos ver e utilizar esta página. Para isso, temos que dar um passo atrás e dissecar o que está acontecendo em nosso navegador, computador e conexão com outros computadores pela internet.
O que acontece ao abrir uma página web
A internet é chamada de teia (web) pela interconectividade que promove.
Cada arquivo HTML de uma página pode fazer referência a infinitos outros arquivos armazenados publicamente em algum computador pelo mundo.
Toda vez que você abre uma página web, você recebe o primeiro arquivo html, normalmente nomeado índice (index.html). A partir do índice você carregará diversos outros arquivos que farão sua página funcionar.
Os principais recursos que são utilizados em uma página web são:
- Arquivos html, com conteúdo
- Arquivos css, com estilizações
- Arquivos js, com funcionalidades complementares às nativas ao html
- Arquivos bmp, png, jpg, gif, webp, com imagens rasterizadas
- Arquivos svg, com imagens vetoriais
- Arquivos ttf, otf, woff, woff2, com fontes para textos
- Arquivos mp4, webm, ogg, com vídeos
Devido a forma como o browser e o protocolo HTTP funcionam a cada arquivo que sua página faz referência, uma nova requisição é feita a um servidor.
Carregando uma simples página
Vamos analisar o seguinte arquivo index.html:
<!DOCTYPE html>
<html lang="pt">
<head>
<title>Exemplo</title>
<link rel="stylesheet" href="/estilos.css" />
</head>
<body>
<img src="/logo.bmp" alt="logo" />
<h1>Página exemplar</h1>
<script src="/lib.min.js"></script>
<script src="/index.js"></script>
</body>
</html>Nessa página simples são necessários no mínimo 5 requisições HTTP:
- /index.html
- /estilos.css
- /logo.bmp
- /lib.min.js
- /index.js
Escondido nesses arquivos podem existir ainda outras referências, como outras imagens, outros arquivos de css e arquivos de fontes.
Contribuintes ao tempo de carregamento da página
Tudo que adiciona trabalho aumenta o tempo de carregamento da página!
Cada nova referência à um arquivo adiciona custos ao tempo de carregamento da página, pois para cada arquivo adicionamos os seguintes valores ao tempo:
- abrir requisições HTTP à um servidor (depende da versão do protocolo)
- tempo de transferência de pacotes com servidor (depende do RTT ao servidor)
- número de pacotes (depende do tamanho do arquivo)
- interpretar esse arquivo (depende do tipo de arquivo e ecoding)
- "executar" esse arquivo (executar o javascript, renderizar o css)
- E dependendo do conteúdo deste arquivo, fazer novas requisições HTTP
Ou seja, o que afeta o tempo de carregamento da página é:
- Número de requisições HTTP a servidores
- Tempo de processamento da requisição no servidor HTTP
- Distância entre computador do navegador e servidor HTTP
- Tamanho dos arquivos transferidos
- Tempo de interpretação dos arquivos
- Tempo de execução de scripts
- Tempo de renderização estilos
Reduzindo a carga
Para otimizarmos o tempo de carrregamento da página é simples: faça seu navegador trabalhar menos.
Para reduzirmos a carga existem diversos detalhes que precisamos prestar atenção. Conforme as tecnologias evoluem, também evoluem o que é preciso prestar atenção na hora de otimizar uma página, como por exemplo:
- Caminho de renderização crítico (critical rendering path)
- Minificação de código (code minifying)
- Compressão de arquivos (file compression)
- Fusão de arquivos (bundling)
- Redes de distribuição de conteúdo (CDNs)
- Carregamento preguiçoso (lazy loading)
- Ordem das tags script e style
- Controle do número de dependências
- ...
Em próximos textos irei analisar mais a fundo os tópicos acima.
Lembre de me acompanhar no twitter: @marcel0ll
O que devo fazer?
Em minha experiência o básico que muitos sites ainda não fazem e que também e que irá trazer os maiores retornos são:
1. Otimize suas imagens:
As imagens tiradas com as câmeras fotográficas ou mesmo a de nossos celulares tem resoluções MUITO maiores do que a maioria dos sites irá exibir.
Então antes de enviar para seu servidor lembre de reduzir a resolução da imagem para o tamanho que será exibido no seu site. E lembre que diferentes formatos oferecem diferentes experiêncas, mas de maneira geral .webp é o formato mais indicado hoje em dia com uma segunda opção em .jpeg ou .png caso o navegador não suporte .webp.
2. Comprima seus arquivos
Os navegadores são capazes de abrir arquivos comprimidos e apresentâ-los normalmente para isso você precisa que seu servidor esteja configurado para comprimir seus arquivos na hora que forem requisitados ou você pode previamente comprimi-los e deixá-los esperando sua requisição.
Os dois algoritmos de compressão mais relevantes hoje em dia são gzip e brotli que produzem respectivamente arquivos .gz e .br.
3. Minifique seus arquivos
Enquanto estamos programando, escrevemos código para que humanos leiam esse código e este carrega diversos detalhes que a máquina não se importa. Nunca vi um computador reclamar do caracter que uso para identação.
Quando você vai enviar seus arquivos para o navegador, não mande comentários, espaços, enters ou qualquer outro carácter "estético". Mande somente o necessário.
Para fazer isso existem softwares específicos que minificam o código com a maior eficiência possível: uglifyjs, cssnano, html-minifier...
4. Automatize esse processo
Você irá esquecer! Isso é uma constante na vida, você irá esquecer das coisas! Então anote as coisas, coloque mementos pela casa e automatize seus processos!
Para isso a web já utilizou de diversos recursos:
- Executores de tarefas, como grunt e gulp (task runners)
- Scripts
- Empacotadores, como webpack e parcel (bundlers)
Hoje em dia maioria dos projetos tende utilizar uma combinação de scripts com empacotadores.
Conclusão
Quer sua página carregando mais rápido? Reduza os excessos!
- Otimize imagens
- Minifique código
- Comprima seus arquivos
- Não envie mais bytes do que você precisa!
Menos trabalho é mais velocidade.
Espero que tenha gostado, continue programando!
marcel0ll