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